MediaWiki:Common.js: Difference between revisions

From MuhRO
Jump to navigation Jump to search
m Make collapsible controls available while scrolling
m Fix global collapsible controls
Line 16: Line 16:


(function () {
(function () {
    function normalizeLegacyCollapsibles($root) {
        $root.find('table.collapsible, div.collapsible, ul.collapsible, ol.collapsible').each(function () {
            var $element = $(this);
            $element.addClass('mw-collapsible');
            if ($element.hasClass('collapsed')) {
                $element.addClass('mw-collapsed');
            }
        });
    }
    function prepareCollapsibles($root) {
        normalizeLegacyCollapsibles($root);
        var $items = $root
            .find('.mw-collapsible')
            .add($root.filter('.mw-collapsible'));
        $items.not('.mw-made-collapsible').makeCollapsible();
        return $items.filter('.mw-made-collapsible');
    }
     function findCollapsibles($root) {
     function findCollapsibles($root) {
         return $root
         return $root
             .find('.mw-collapsible.mw-made-collapsible')
             .find('.mw-collapsible.mw-made-collapsible')
             .add($root.filter('.mw-collapsible.mw-made-collapsible'));
             .add($root.filter('.mw-collapsible.mw-made-collapsible'));
    }
    function findToggle($element) {
        var $toggle = $element
            .find('> .mw-collapsible-toggle, > caption .mw-collapsible-toggle, > tbody > tr:first-child .mw-collapsible-toggle, > tr:first-child .mw-collapsible-toggle')
            .first();
        return $toggle.length ? $toggle : $element.find('.mw-collapsible-toggle').first();
     }
     }


Line 34: Line 49:
         var collapsedCount = $items.filter('.mw-collapsed').length;
         var collapsedCount = $items.filter('.mw-collapsed').length;


         $expand.prop('disabled', collapsedCount === 0);
         $expand.prop('disabled', $items.length === 0 || collapsedCount === 0);
         $collapse.prop('disabled', collapsedCount === $items.length);
         $collapse.prop('disabled', $items.length === 0 || collapsedCount === $items.length);
     }
     }


Line 41: Line 56:
         findCollapsibles($root).each(function () {
         findCollapsibles($root).each(function () {
             var $element = $(this);
             var $element = $(this);
            var api = $element.data('mw-collapsible');


             if ($element.hasClass('mw-collapsed') === collapse) {
             if (!api || $element.hasClass('mw-collapsed') === collapse) {
                 return;
                 return;
             }
             }


             findToggle($element).trigger('click');
             if (collapse) {
                api.collapse();
            } else {
                api.expand();
            }
         });
         });


         window.setTimeout(function () {
         updateButtons($root, $expand, $collapse);
            updateButtons($root, $expand, $collapse);
        }, 0);
     }
     }


     function addCollapsibleControls($content) {
     function addCollapsibleControls($content) {
         var $root = $content.find('.mw-parser-output').first();
         var $root = $content.find('.mw-parser-output').first();
        var $items;


         if (!$root.length) {
         if (!$root.length) {
Line 61: Line 80:
         }
         }


         if ($('#muhro-collapse-controls').length || !findCollapsibles($root).length) {
        $items = prepareCollapsibles($root);
 
         if ($('#muhro-collapse-controls').length || !$items.length) {
             return;
             return;
         }
         }
Line 88: Line 109:
             setAll($root, true, $expand, $collapse);
             setAll($root, true, $expand, $collapse);
         });
         });
         $root.on('click', '.mw-collapsible-toggle', function () {
         $root.on('click keydown', '.mw-collapsible-toggle', function () {
             window.setTimeout(function () {
             window.setTimeout(function () {
                 updateButtons($root, $expand, $collapse);
                 updateButtons($root, $expand, $collapse);

Revision as of 14:09, 27 May 2026

/* Any JavaScript here will be loaded for all users on every page load. */
$('.copy-link').on('click', function() {

    var link    = $(this);
    var copy_id = $(this).attr('id');
    var text    = $(this).text();
    var clipboard = new ClipboardJS('#' + copy_id );
    clipboard.on('success', function(e) {
        link.text('Copied!');
        setTimeout(function() {
            link.text(''+text);
        }, 2000);
    });

});

(function () {
    function normalizeLegacyCollapsibles($root) {
        $root.find('table.collapsible, div.collapsible, ul.collapsible, ol.collapsible').each(function () {
            var $element = $(this);

            $element.addClass('mw-collapsible');
            if ($element.hasClass('collapsed')) {
                $element.addClass('mw-collapsed');
            }
        });
    }

    function prepareCollapsibles($root) {
        normalizeLegacyCollapsibles($root);

        var $items = $root
            .find('.mw-collapsible')
            .add($root.filter('.mw-collapsible'));

        $items.not('.mw-made-collapsible').makeCollapsible();

        return $items.filter('.mw-made-collapsible');
    }

    function findCollapsibles($root) {
        return $root
            .find('.mw-collapsible.mw-made-collapsible')
            .add($root.filter('.mw-collapsible.mw-made-collapsible'));
    }

    function updateButtons($root, $expand, $collapse) {
        var $items = findCollapsibles($root);
        var collapsedCount = $items.filter('.mw-collapsed').length;

        $expand.prop('disabled', $items.length === 0 || collapsedCount === 0);
        $collapse.prop('disabled', $items.length === 0 || collapsedCount === $items.length);
    }

    function setAll($root, collapse, $expand, $collapse) {
        findCollapsibles($root).each(function () {
            var $element = $(this);
            var api = $element.data('mw-collapsible');

            if (!api || $element.hasClass('mw-collapsed') === collapse) {
                return;
            }

            if (collapse) {
                api.collapse();
            } else {
                api.expand();
            }
        });

        updateButtons($root, $expand, $collapse);
    }

    function addCollapsibleControls($content) {
        var $root = $content.find('.mw-parser-output').first();
        var $items;

        if (!$root.length) {
            $root = $content;
        }

        $items = prepareCollapsibles($root);

        if ($('#muhro-collapse-controls').length || !$items.length) {
            return;
        }

        var $expand = $('<button>')
            .attr('type', 'button')
            .addClass('muhro-collapse-button')
            .text('Expand all');
        var $collapse = $('<button>')
            .attr('type', 'button')
            .addClass('muhro-collapse-button')
            .text('Collapse all');
        var $controls = $('<div>')
            .attr({
                id: 'muhro-collapse-controls',
                role: 'group',
                'aria-label': 'Collapsible content controls'
            })
            .addClass('muhro-collapse-controls noprint')
            .append($expand, $collapse);

        $expand.on('click', function () {
            setAll($root, false, $expand, $collapse);
        });
        $collapse.on('click', function () {
            setAll($root, true, $expand, $collapse);
        });
        $root.on('click keydown', '.mw-collapsible-toggle', function () {
            window.setTimeout(function () {
                updateButtons($root, $expand, $collapse);
            }, 0);
        });

        updateButtons($root, $expand, $collapse);
        $('body').append($controls);
    }

    mw.loader.using('jquery.makeCollapsible').then(function () {
        mw.hook('wikipage.content').add(addCollapsibleControls);
    });
}());