MediaWiki:Common.js: Difference between revisions

Revision as of 12:41, 20 August 2025

/* Any JavaScript here will be loaded for all users on every page load. */


/* Collapsible sidebar functionality */
$(document).ready(function() {
    // Initialize collapsible elements
    $('.mw-collapsible').each(function() {
        var $this = $(this);
        var $content = $this.find('.mw-collapsible-content');
        var $header = $this.prev();

        // Create toggle button
        var $toggleBtn = $('<span class="mw-collapsible-toggle">[+]</span>');

        // Add toggle button to header
        if ($header.length && $header.is('li')) {
            $header.append(' ').append($toggleBtn);
        } else {
            $this.before($('<div class="mw-collapsible-header"></div>').append($toggleBtn));
        }

        // Set initial state
        if ($this.hasClass('mw-collapsed')) {
            $content.hide();
            $toggleBtn.text('[+]');
        } else {
            $content.show();
            $toggleBtn.text('[-]');
        }

        // Toggle functionality
        $toggleBtn.click(function(e) {
            e.preventDefault();
            e.stopPropagation();

            if ($content.is(':visible')) {
                $content.slideUp();
                $toggleBtn.text('[+]');
                $this.addClass('mw-collapsed');
            } else {
                $content.slideDown();
                $toggleBtn.text('[-]');
                $this.removeClass('mw-collapsed');
            }
        });
    });
});

/* Additional CSS for better styling */
mw.loader.using('mediawiki.util', function() {
    mw.util.addCSS(`
        .mw-collapsible-toggle {
            cursor: pointer;
            font-weight: bold;
            color: #0645ad;
            margin-left: 5px;
        }

        .mw-collapsible-toggle:hover {
            text-decoration: underline;
        }

        .mw-collapsible-content {
            margin-top: 5px;
        }

        .mw-collapsible.mw-collapsed .mw-collapsible-content {
            display: none;
        }
    `);
});
/* Collapsible sidebar functionality */
$(document).ready(function() {
    // Initialize collapsible elements
    $('.mw-collapsible').each(function() {
        var $this = $(this);
        var $content = $this.find('.mw-collapsible-content');
        var $header = $this.prev();

        // Create toggle button
        var $toggleBtn = $('<span class="mw-collapsible-toggle">[+]</span>');

        // Add toggle button to header
        if ($header.length && $header.is('li')) {
            $header.append(' ').append($toggleBtn);
        } else {
            $this.before($('<div class="mw-collapsible-header"></div>').append($toggleBtn));
        }

        // Set initial state
        if ($this.hasClass('mw-collapsed')) {
            $content.hide();
            $toggleBtn.text('[+]');
        } else {
            $content.show();
            $toggleBtn.text('[-]');
        }

        // Toggle functionality
        $toggleBtn.click(function(e) {
            e.preventDefault();
            e.stopPropagation();

            if ($content.is(':visible')) {
                $content.slideUp();
                $toggleBtn.text('[+]');
                $this.addClass('mw-collapsed');
            } else {
                $content.slideDown();
                $toggleBtn.text('[-]');
                $this.removeClass('mw-collapsed');
            }
        });
    });
});

/* Additional CSS for better styling */
mw.loader.using('mediawiki.util', function() {
    mw.util.addCSS(`
        .mw-collapsible-toggle {
            cursor: pointer;
            font-weight: bold;
            color: #0645ad;
            margin-left: 5px;
        }

        .mw-collapsible-toggle:hover {
            text-decoration: underline;
        }

        .mw-collapsible-content {
            margin-top: 5px;
        }

        .mw-collapsible.mw-collapsed .mw-collapsible-content {
            display: none;
        }
    `);
});


/* Collapsible sidebar functionality for all pages */
$(document).ready(function() {
    // Function to make sidebar sections collapsible
    function makeSidebarCollapsible() {
        // Target the sidebar navigation
        $('#mw-panel .portal').each(function() {
            var $portal = $(this);
            var $header = $portal.find('h3');
            var $body = $portal.find('.body');

            // Skip certain sections that shouldn't be collapsible
            var portalId = $portal.attr('id');
            if (portalId === 'p-search' || portalId === 'p-tb' || portalId === 'p-lang') {
                return;
            }

            // Add toggle functionality only to specific sections
            var collapsibleSections = ['Documentation', 'Tools & Utilities', 'Community', 'Administrative', 'External Resources'];
            var headerText = $header.text().trim();

            if (collapsibleSections.includes(headerText)) {
                // Add toggle button to header
                var $toggleBtn = $('<span class="sidebar-toggle">[−]</span>');
                $header.append(' ').append($toggleBtn);

                // Add click handler
                $toggleBtn.click(function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if ($body.is(':visible')) {
                        $body.slideUp(200);
                        $toggleBtn.text('[+]');
                        $portal.addClass('collapsed');
                    } else {
                        $body.slideDown(200);
                        $toggleBtn.text('[−]');
                        $portal.removeClass('collapsed');
                    }
                });

                // Start collapsed for some sections
                if (['Administrative', 'External Resources'].includes(headerText)) {
                    $body.hide();
                    $toggleBtn.text('[+]');
                    $portal.addClass('collapsed');
                }
            }
        });
    }

    // Run the function
    makeSidebarCollapsible();

    // Also run after any AJAX content loads
    $(document).ajaxComplete(function() {
        makeSidebarCollapsible();
    });
});

/* CSS for sidebar toggle buttons */
mw.loader.using('mediawiki.util', function() {
    mw.util.addCSS(`
        .sidebar-toggle {
            cursor: pointer;
            font-weight: bold;
            color: #0645ad;
            margin-left: 5px;
            font-size: 12px;
            user-select: none;
        }

        .sidebar-toggle:hover {
            text-decoration: underline;
            color: #0b0080;
        }

        #mw-panel .portal.collapsed .body {
            display: none;
        }

        #mw-panel .portal h3 {
            cursor: default;
        }

        /* Style improvements for collapsible sections */
        #mw-panel .portal {
            margin-bottom: 0.5em;
        }

        #mw-panel .portal .body ul {
            margin: 0;
            padding: 0;
        }

        #mw-panel .portal .body li {
            margin: 0.2em 0;
        }
    `);
});


/* Collapsible Sidebar Functionality */
$(document).ready(function() {
    function initCollapsibleSidebar() {
        // Define which sections should be collapsible
        var collapsibleSections = [
            'Documentation', 
            'Tools & Utilities', 
            'Community', 
            'Administrative', 
            'External Resources'
        ];

        // Define which sections start collapsed
        var startCollapsed = ['Administrative', 'External Resources'];

        // Process each portal in the sidebar
        $('#mw-panel .portal').each(function() {
            var $portal = $(this);
            var $header = $portal.find('h3');
            var $body = $portal.find('.body');
            var headerText = $header.text().trim();

            // Skip non-collapsible sections
            var portalId = $portal.attr('id');
            if (portalId === 'p-search' || portalId === 'p-tb' || portalId === 'p-lang') {
                return;
            }

            // Only make specified sections collapsible
            if (collapsibleSections.includes(headerText)) {
                // Remove any existing toggle buttons
                $header.find('.sidebar-toggle').remove();

                // Create toggle button
                var isCollapsed = startCollapsed.includes(headerText);
                var toggleText = isCollapsed ? '[+]' : '[−]';
                var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');

                // Add toggle button to header
                $header.append(' ').append($toggleBtn);

                // Set initial state
                if (isCollapsed) {
                    $body.hide();
                    $portal.addClass('sidebar-collapsed');
                }

                // Add click handler
                $toggleBtn.off('click').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if ($body.is(':visible')) {
                        $body.slideUp(300);
                        $toggleBtn.text('[+]');
                        $portal.addClass('sidebar-collapsed');

                        // Save state to localStorage
                        localStorage.setItem('sidebar-' + headerText, 'collapsed');
                    } else {
                        $body.slideDown(300);
                        $toggleBtn.text('[−]');
                        $portal.removeClass('sidebar-collapsed');

                        // Save state to localStorage
                        localStorage.setItem('sidebar-' + headerText, 'expanded');
                    }
                });

                // Restore saved state from localStorage
                var savedState = localStorage.getItem('sidebar-' + headerText);
                if (savedState === 'collapsed' && $body.is(':visible')) {
                    $body.hide();
                    $toggleBtn.text('[+]');
                    $portal.addClass('sidebar-collapsed');
                } else if (savedState === 'expanded' && !$body.is(':visible')) {
                    $body.show();
                    $toggleBtn.text('[−]');
                    $portal.removeClass('sidebar-collapsed');
                }
            }
        });
    }

    // Initialize on page load
    initCollapsibleSidebar();

    // Re-initialize after AJAX loads (if needed)
    $(document).ajaxComplete(function() {
        setTimeout(initCollapsibleSidebar, 100);
    });
});