MediaWiki:VectorPlus.js

$(function(){
    // Check if the elements exist
    if (!$('#t-whatlinkshere').length || !$('#t-recentchanges').length || !$('#t-permalink').length || !$('#t-info').length) {
        return;
    }

    // Create a dropdown menu for the tools
    $('<nav id="p-tools" class="vector-menu mw-portlet mw-portlet-tools vector-menu-portal portal" aria-labelledby="p-tools-label" role="navigation">').append(
        $('<h3 id="p-tools-label" class="vector-menu-heading" tabindex="0">').append(
            $('<span class="vector-menu-heading-label">').text('Tools')
        ).on("keypress", function(event) {
            if (event.which == 13) {
                $(this).trigger("click");
                event.stopImmediatePropagation();
            }
        }).on("click", function(event) {
            var $el = $(this).parent();
            event.stopPropagation();
            if($el.hasClass("collapsed")){
                $el.find(".vector-menu-content").slideUp("fast");
                $el.css({'margin-right': '', 'margin-left': ''});
            }
            else{
                $el.find(".vector-menu-content").slideDown("fast");
                var $tools = $el.find(".vector-menu-content-list")[0];
                if ($tools.clientWidth < $tools.scrollWidth) {
                    $el.css({'margin-right': '0', 'margin-left': '0'});
                }
                if (window.innerWidth >= 982 && $tools.clientWidth < $tools.scrollWidth) {
                    $el.css({'margin-right': '-0.5em', 'margin-left': '-0.5em'});
                }
            }
        }),
        $('<div class="vector-menu-content">').append(
            $('<ul class="vector-menu-content-list">').append(
                $('<li>').append($('#t-whatlinkshere')),
                $('<li>').append($('#t-recentchanges')),
                $('<li>').append($('#t-permalink')),
                $('<li>').append($('#t-info'))
            )
        )
    ).appendTo('#p-cactions');

    // Create a dropdown menu for additional actions
    $('<nav id="p-additional" class="vector-menu mw-portlet mw-portlet-additional vector-menu-portal portal" aria-labelledby="p-additional-label" role="navigation">').append(
        $('<h3 id="p-additional-label" class="vector-menu-heading" tabindex="0">').append(
            $('<span class="vector-menu-heading-label">').text('Additional')
        ).on("keypress", function(event) {
            if (event.which == 13) {
                $(this).trigger("click");
                event.stopImmediatePropagation();
            }
        }).on("click", function(event) {
            var $el = $(this).parent();
            event.stopPropagation();
            if($el.hasClass("collapsed")){
                $el.find(".vector-menu-content").slideUp("fast");
                $el.css({'margin-right': '', 'margin-left': ''});
            }
            else{
                $el.find(".vector-menu-content").slideDown("fast");
                var $additional = $el.find(".vector-menu-content-list")[0];
                if ($additional.clientWidth < $additional.scrollWidth) {
                    $el.css({'margin-right': '0', 'margin-left': '0'});
                }
                if (window.innerWidth >= 982 && $additional.clientWidth < $additional.scrollWidth) {
                    $el.css({'margin-right': '-0.5em', 'margin-left': '-0.5em'});
                }
            }
        }),
        $('<div class="vector-menu-content">').append(
            $('<ul class="vector-menu-content-list">').append(
                // Add your additional actions here
            )
        )
    ).insertAfter('#ca-history');
});