|
|
| (24 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| # Replace the JAVASCRIPT_CODE section with this updated version:
| |
|
| |
|
| | /* |
| | #mw-panel.collapsed { |
| | width: 0; |
| | overflow: hidden; |
| | } |
|
| |
|
| /* Collapsible Sidebar Functionality */
| | #mw-panel.collapsed .portal, |
| $(document).ready(function() {
| | #mw-panel.collapsed .vector-menu-content { |
| function initCollapsibleSidebar() { | | display: none; |
| // 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
| | .vector-menu.mw-portlet li.collapsible-header, |
| if (collapsibleSections.includes(headerText)) {
| | .vector-menu-portal li.collapsible-header { |
| // Remove any existing toggle buttons
| | cursor: pointer; |
| $header.find('.sidebar-toggle').remove();
| | font-weight: 600; |
| | display: flex; |
| | align-items: center; |
| | } |
|
| |
|
| // Create toggle button with custom text
| | .mw-collapsible-arrow { |
| var isCollapsed = startCollapsed.includes(headerText);
| | display: inline-block; |
| var toggleText = isCollapsed ? 'Show' : 'Hide'; // Changed from [+]/[-]
| | width: 1em; |
| var $toggleBtn = $('<span class="sidebar-toggle">' + toggleText + '</span>');
| | margin-right: 4px; |
| | transform-origin: center; |
| | transition: transform 0.2s ease; |
| | user-select: none; |
| | } |
|
| |
|
| // Add toggle button to header
| | li.collapsible-header.open > .mw-collapsible-arrow { |
| $header.append(' ').append($toggleBtn);
| | transform: rotate(90deg); |
| | | } |
| // 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('Show'); // Changed from [+]
| |
| $portal.addClass('sidebar-collapsed');
| |
| | |
| // Save state to localStorage
| |
| localStorage.setItem('sidebar-' + headerText, 'collapsed');
| |
| } else {
| |
| $body.slideDown(300);
| |
| $toggleBtn.text('Hide'); // Changed from [-]
| |
| $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('Show');
| |
| $portal.addClass('sidebar-collapsed');
| |
| } else if (savedState === 'expanded' && !$body.is(':visible')) {
| |
| $body.show();
| |
| $toggleBtn.text('Hide');
| |
| $portal.removeClass('sidebar-collapsed');
| |
| }
| |
| }
| |
| });
| |
| }
| |
| | |
| // Initialize on page load
| |
| initCollapsibleSidebar();
| |
| | |
| // Re-initialize after AJAX loads (if needed)
| |
| $(document).ajaxComplete(function() {
| |
| setTimeout(initCollapsibleSidebar, 100);
| |
| });
| |
| });
| |
