MediaWiki:Common.css: Difference between revisions

From SZ
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
# Replace the JAVASCRIPT_CODE section with this updated version:
# Replace the JAVASCRIPT_CODE section with this updated version:


/* Collapsible Sidebar Functionality */
/* Collapsible Sidebar Functionality */
$(document).ready(function() {
$(document).ready(function() {
     function initCollapsibleSidebar() {
     function initCollapsibleSidebar() {
        // Define which sections should be collapsible
         var collapsibleSections = [
         var collapsibleSections = [
             'Documentation',  
             'Documentation',  
Line 14: Line 12:
         ];
         ];


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


        // Process each portal in the sidebar
         $('#mw-panel .portal').each(function() {
         $('#mw-panel .portal').each(function() {
             var $portal = $(this);
             var $portal = $(this);
Line 24: Line 20:
             var headerText = $header.text().trim();
             var headerText = $header.text().trim();


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


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


                // Create toggle button with custom text
                 var isCollapsed = startCollapsed.includes(headerText);
                 var isCollapsed = startCollapsed.includes(headerText);
                 var toggleText = isCollapsed ? 'Show' : 'Hide'; // Changed from [+]/[-]
                 var toggleText = isCollapsed ? 'book1' : 'bookend';
                 var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');
                 var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');


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


                // Set initial state
                 if (isCollapsed) {
                 if (isCollapsed) {
                     $body.hide();
                     $body.hide();
Line 49: Line 39:
                 }
                 }


                // Add click handler
                 $toggleBtn.off('click').on('click', function(e) {
                 $toggleBtn.off('click').on('click', function(e) {
                     e.preventDefault();
                     e.preventDefault();
Line 56: Line 45:
                     if ($body.is(':visible')) {
                     if ($body.is(':visible')) {
                         $body.slideUp(300);
                         $body.slideUp(300);
                         $toggleBtn.text('Show'); // Changed from [+]
                         $toggleBtn.text('book1');
                         $portal.addClass('sidebar-collapsed');
                         $portal.addClass('sidebar-collapsed');
                        // Save state to localStorage
                         localStorage.setItem('sidebar-' + headerText, 'collapsed');
                         localStorage.setItem('sidebar-' + headerText, 'collapsed');
                     } else {
                     } else {
                         $body.slideDown(300);
                         $body.slideDown(300);
                         $toggleBtn.text('Hide'); // Changed from [-]
                         $toggleBtn.text('bookend');
                         $portal.removeClass('sidebar-collapsed');
                         $portal.removeClass('sidebar-collapsed');
                        // Save state to localStorage
                         localStorage.setItem('sidebar-' + headerText, 'expanded');
                         localStorage.setItem('sidebar-' + headerText, 'expanded');
                     }
                     }
                 });
                 });


                // Restore saved state from localStorage
                 var savedState = localStorage.getItem('sidebar-' + headerText);
                 var savedState = localStorage.getItem('sidebar-' + headerText);
                 if (savedState === 'collapsed' && $body.is(':visible')) {
                 if (savedState === 'collapsed' && $body.is(':visible')) {
                     $body.hide();
                     $body.hide();
                     $toggleBtn.text('Show');
                     $toggleBtn.text('book1');
                     $portal.addClass('sidebar-collapsed');
                     $portal.addClass('sidebar-collapsed');
                 } else if (savedState === 'expanded' && !$body.is(':visible')) {
                 } else if (savedState === 'expanded' && !$body.is(':visible')) {
                     $body.show();
                     $body.show();
                     $toggleBtn.text('Hide');
                     $toggleBtn.text('bookend');
                     $portal.removeClass('sidebar-collapsed');
                     $portal.removeClass('sidebar-collapsed');
                 }
                 }
Line 86: Line 70:
     }
     }


    // Initialize on page load
     initCollapsibleSidebar();
     initCollapsibleSidebar();


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

Revision as of 12:15, 21 August 2025

# Replace the JAVASCRIPT_CODE section with this updated version:

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

        var startCollapsed = ['Administrative', 'External Resources'];

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

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

            if (collapsibleSections.includes(headerText)) {
                $header.find('.sidebar-toggle').remove();

                var isCollapsed = startCollapsed.includes(headerText);
                var toggleText = isCollapsed ? 'book1' : 'bookend';
                var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');

                $header.append(' ').append($toggleBtn);

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

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

                    if ($body.is(':visible')) {
                        $body.slideUp(300);
                        $toggleBtn.text('book1');
                        $portal.addClass('sidebar-collapsed');
                        localStorage.setItem('sidebar-' + headerText, 'collapsed');
                    } else {
                        $body.slideDown(300);
                        $toggleBtn.text('bookend');
                        $portal.removeClass('sidebar-collapsed');
                        localStorage.setItem('sidebar-' + headerText, 'expanded');
                    }
                });

                var savedState = localStorage.getItem('sidebar-' + headerText);
                if (savedState === 'collapsed' && $body.is(':visible')) {
                    $body.hide();
                    $toggleBtn.text('book1');
                    $portal.addClass('sidebar-collapsed');
                } else if (savedState === 'expanded' && !$body.is(':visible')) {
                    $body.show();
                    $toggleBtn.text('bookend');
                    $portal.removeClass('sidebar-collapsed');
                }
            }
        });
    }

    initCollapsibleSidebar();

    $(document).ajaxComplete(function() {
        setTimeout(initCollapsibleSidebar, 100);
    });
});