MediaWiki:Common.js

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Template:Infobox_concept - Collapsible section functionality
 * Add this to MediaWiki:Common.js or create as separate gadget
 */

(function() {
    'use strict';
    
    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initInfoboxConcept);
    } else {
        initInfoboxConcept();
    }
    
    function initInfoboxConcept() {
        // Initialize collapsible sections
        var toggles = document.querySelectorAll('.concept-section-header.collapsible-toggle');
        
        toggles.forEach(function(toggle) {
            toggle.addEventListener('click', function() {
                var dataToggle = this.getAttribute('data-toggle');
                var contentSection = document.getElementById(dataToggle + '-section');
                
                if (!contentSection) {
                    // Fallback: find next sibling with class concept-collapsible-content
                    contentSection = this.nextElementSibling;
                    while (contentSection && !contentSection.classList.contains('concept-collapsible-content')) {
                        contentSection = contentSection.nextElementSibling;
                    }
                }
                
                if (contentSection) {
                    // Toggle expanded class
                    contentSection.classList.toggle('expanded');
                    this.classList.toggle('active');
                    
                    // Update ARIA attributes for accessibility
                    var isExpanded = contentSection.classList.contains('expanded');
                    this.setAttribute('aria-expanded', isExpanded);
                    contentSection.setAttribute('aria-hidden', !isExpanded);
                }
            });
            
            // Set initial ARIA attributes
            toggle.setAttribute('aria-expanded', 'false');
            toggle.setAttribute('role', 'button');
            toggle.setAttribute('tabindex', '0');
            
            // Keyboard accessibility
            toggle.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.click();
                }
            });
        });
        
        // Initialize relation toggles
        var relationToggles = document.querySelectorAll('.relation-toggle');
        
        relationToggles.forEach(function(toggle) {
            toggle.addEventListener('click', function() {
                var infobox = this.closest('.infobox-concept');
                if (!infobox) return;
                
                var collapsedRelations = infobox.querySelectorAll('.relation-block.relation-collapsed');
                
                collapsedRelations.forEach(function(relation) {
                    relation.classList.remove('relation-collapsed');
                });
                
                // Hide the toggle button
                this.style.display = 'none';
            });
            
            // Keyboard accessibility
            toggle.setAttribute('role', 'button');
            toggle.setAttribute('tabindex', '0');
            toggle.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.click();
                }
            });
        });
    }
})();