|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
|
| |
|
| | /* Any JavaScript here will be loaded for all users on every page load. */ |
|
| |
|
| /* Collapsible sidebar functionality */
| | mw.loader.using('jquery.makeCollapsible').done(function () { |
| $(document).ready(function() {
| | // Target sidebar portlets (each "box" in the sidebar) |
| // Initialize collapsible elements
| | $('#p-navigation, #p-tb, #p-wiki-navigation, #p-coll-print_export').addClass('mw-collapsible mw-collapsed'); |
| $('.mw-collapsible').each(function() {
| |
| var $this = $(this);
| |
| var $content = $this.find('.mw-collapsible-content');
| |
| var $header = $this.prev();
| |
|
| |
|
| // Create toggle button
| | // Auto-apply collapsible behavior |
| var $toggleBtn = $('<span class="mw-collapsible-toggle">[+]</span>');
| | $('.mw-collapsible').makeCollapsible(); |
| | |
| // 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);
| |
| });
| |
| }); | | }); |
