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 for all pages */
$(document).ready(function() {
$(document).ready(function() {
     function initCollapsibleSidebar() {
    // Function to make sidebar sections collapsible
         var collapsibleSections = [
     function makeSidebarCollapsible() {
            'Documentation',
         // Target the sidebar navigation
            'Tools & Utilities',
            'Community',
            'Administrative',
            'External Resources'
        ];
 
        var startCollapsed = ['Administrative', 'External Resources'];
 
         $('#mw-panel .portal').each(function() {
         $('#mw-panel .portal').each(function() {
             var $portal = $(this);
             var $portal = $(this);
             var $header = $portal.find('h3');
             var $header = $portal.find('h3');
             var $body = $portal.find('.body');
             var $body = $portal.find('.body');
            var headerText = $header.text().trim();


            // Skip certain sections that shouldn't be collapsible
             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') {
                 return;
                 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)) {
             if (collapsibleSections.includes(headerText)) {
                 $header.find('.sidebar-toggle').remove();
                 // Add toggle button to header
 
                var $toggleBtn = $('<span class="sidebar-toggle">[−]</span>');
                 var isCollapsed = startCollapsed.includes(headerText);
                 $header.append(' ').append($toggleBtn);
                var toggleText = isCollapsed ? 'book1' : 'bookend';


// Persistent text
                 // Add click handler
var persistentText = '<span class="sidebar-persistent"> Section</span>';
                 $toggleBtn.click(function(e) {
 
                 var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');
 
// Add both to header
$header.append(' ').append($toggleBtn).append(persistentText);
 
                if (isCollapsed) {
                    $body.hide();
                    $portal.addClass('sidebar-collapsed');
                }
 
                 $toggleBtn.off('click').on('click', function(e) {
                     e.preventDefault();
                     e.preventDefault();
                     e.stopPropagation();
                     e.stopPropagation();


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


                 var savedState = localStorage.getItem('sidebar-' + headerText);
                 // Start collapsed for some sections
                 if (savedState === 'collapsed' && $body.is(':visible')) {
                 if (['Administrative', 'External Resources'].includes(headerText)) {
                     $body.hide();
                     $body.hide();
                     $toggleBtn.text('book1');
                     $toggleBtn.text('[+]');
                     $portal.addClass('sidebar-collapsed');
                     $portal.addClass('collapsed');
                } else if (savedState === 'expanded' && !$body.is(':visible')) {
                    $body.show();
                    $toggleBtn.text('bookend');
                    $portal.removeClass('sidebar-collapsed');
                 }
                 }
             }
             }
Line 75: Line 52:
     }
     }


     initCollapsibleSidebar();
     // Run the function
    makeSidebarCollapsible();


    // Also run after any AJAX content loads
     $(document).ajaxComplete(function() {
     $(document).ajaxComplete(function() {
         setTimeout(initCollapsibleSidebar, 100);
         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;
        }
    `);
});
});

Revision as of 17:36, 21 August 2025

# Replace the JAVASCRIPT_CODE section with this updated version:

/* 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;
        }
    `);
});