MediaWiki:Common.js: Difference between revisions

Revision as of 16:44, 4 August 2025

// Script to ensure the sidebar remains always visible
// Add this script to MediaWiki:Common.js or include in HTML

(function() {
    'use strict';
    
    // Function to force sidebar visibility
    function forceSidebarVisibility() {
        const sidebar = document.getElementById('mw-panel');
        if (sidebar) {
            sidebar.style.display = 'block';
            sidebar.style.visibility = 'visible';
            sidebar.style.opacity = '1';
            sidebar.style.position = 'fixed';
            sidebar.style.left = '0';
            sidebar.style.top = '0';
            sidebar.style.width = '180px';
            sidebar.style.height = '100vh';
            sidebar.style.zIndex = '100';
        }
    }
    
    // Function to force back-to-top button visibility and functionality
    function forceBackToTopButton() {
        const backToTopBtn = document.getElementById('back-to-top-btn');
        if (backToTopBtn) {
            // Force visibility styles
            backToTopBtn.style.position = 'fixed';
            backToTopBtn.style.bottom = '20px';
            backToTopBtn.style.right = '20px';
            backToTopBtn.style.zIndex = '99999';
            backToTopBtn.style.display = 'block';
            backToTopBtn.style.visibility = 'visible';
            backToTopBtn.style.opacity = '1';
            backToTopBtn.style.pointerEvents = 'auto';
            
            // Ensure the link inside is also visible
            const link = backToTopBtn.querySelector('a');
            if (link) {
                link.style.display = 'inline-block';
                link.style.visibility = 'visible';
                link.style.opacity = '1';
                link.style.pointerEvents = 'auto';
                
                // Add click event if not already present
                if (!link.hasAttribute('data-click-added')) {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        });
                    });
                    link.setAttribute('data-click-added', 'true');
                }
            }
        }
    }
    
    // Execute when DOM is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            forceSidebarVisibility();
            forceBackToTopButton();
        });
    } else {
        forceSidebarVisibility();
        forceBackToTopButton();
    }
    
    // Execute when page is completely loaded
    window.addEventListener('load', function() {
        forceSidebarVisibility();
        forceBackToTopButton();
    });
    
    // Observe DOM changes to react to dynamic modifications
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.target.id === 'mw-panel') {
                forceSidebarVisibility();
            }
            if (mutation.type === 'attributes' && mutation.target.id === 'back-to-top-btn') {
                forceBackToTopButton();
            }
        });
    });
    
    // Start observation when element exists
    function startObserving() {
        const sidebar = document.getElementById('mw-panel');
        if (sidebar) {
            observer.observe(sidebar, {
                attributes: true,
                attributeFilter: ['style', 'class']
            });
        } else {
            // Try again after a small delay
            setTimeout(startObserving, 100);
        }
        
        const backToTopBtn = document.getElementById('back-to-top-btn');
        if (backToTopBtn) {
            observer.observe(backToTopBtn, {
                attributes: true,
                attributeFilter: ['style', 'class']
            });
        }
    }
    
    startObserving();
    
    // Execute functions periodically as backup
    setInterval(function() {
        forceSidebarVisibility();
        forceBackToTopButton();
    }, 1000);
    
    // Execute when window is resized
    window.addEventListener('resize', function() {
        forceSidebarVisibility();
        forceBackToTopButton();
    });
    
    // Execute when page visibility changes
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) {
            forceSidebarVisibility();
            forceBackToTopButton();
        }
    });
    
    // Execute when page is scrolled (for back-to-top button)
    window.addEventListener('scroll', forceBackToTopButton);
    
    // Execute after MediaWiki scripts load
    if (typeof mw !== 'undefined' && mw.loader) {
        mw.loader.using(['mediawiki.util'], function() {
            forceSidebarVisibility();
            forceBackToTopButton();
        });
    }
    
})();

/* ========================================
   CARDS NAVIGATION SCRIPT
   Makes highlight cards clickable
   ======================================== */

(function() {
    'use strict';
    
    // Function to make cards clickable
    function makeCardsClickable() {
        // Select all highlight cards
        const cards = document.querySelectorAll('.destaque-card[data-link]');
        
        cards.forEach(function(card) {
            // Add pointer cursor
            card.style.cursor = 'pointer';
            
            // Add click event
            card.addEventListener('click', function() {
                const linkTarget = this.getAttribute('data-link');
                
                if (linkTarget) {
                    // Check if it's an anchor link (starts with #)
                    if (linkTarget.startsWith('#')) {
                        // Navigate to section within the same page
                        const targetElement = document.querySelector(linkTarget);
                        if (targetElement) {
                            targetElement.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        } else {
                            // Fallback: use window.location.hash
                            window.location.hash = linkTarget;
                        }
                    } else {
                        // Build MediaWiki page URL for external links
                        const pageUrl = linkTarget.replace(/\s+/g, '_');
                        
                        // Navigate to page
                        if (typeof mw !== 'undefined' && mw.config) {
                            // In MediaWiki - use MediaWiki API
                            const baseUrl = mw.config.get('wgServer') + mw.config.get('wgScriptPath');
                            window.location.href = baseUrl + '/index.php/' + encodeURIComponent(pageUrl);
                        } else {
                            // Fallback - assume standard MediaWiki structure
                            window.location.href = '/wiki/' + encodeURIComponent(pageUrl);
                        }
                    }
                }
            });
            
            // Add visual hover effect
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-8px)';
                this.style.boxShadow = '0 12px 40px rgba(255, 107, 157, 0.3)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 8px 32px rgba(255, 107, 157, 0.2)';
            });
        });
        
        console.log('Highlight cards made clickable:', cards.length + ' cards processed');
    }
    
    // Function to initialize when DOM is ready
    function initializeCards() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', makeCardsClickable);
        } else {
            makeCardsClickable();
        }
    }
    
    // Observe DOM changes for dynamically added cards
    function observeChanges() {
        if (typeof MutationObserver !== 'undefined') {
            const observer = new MutationObserver(function(mutations) {
                let shouldReinitialize = false;
                
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'childList') {
                        // Check if new cards were added
                        mutation.addedNodes.forEach(function(node) {
                            if (node.nodeType === 1) { // Element node
                                if (node.classList && node.classList.contains('destaque-card') ||
                                    node.querySelector && node.querySelector('.destaque-card')) {
                                    shouldReinitialize = true;
                                }
                            }
                        });
                    }
                });
                
                if (shouldReinitialize) {
                    setTimeout(makeCardsClickable, 100);
                }
            });
            
            // Observe changes in body
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
    }
    
    // Initialize the script
    initializeCards();
    
    // Start observing changes
    observeChanges();
    
    // Reinitialize after complete page load
    window.addEventListener('load', function() {
        setTimeout(makeCardsClickable, 500);
    });
    
    // Export function for manual use if needed
    window.initializeHighlightCards = makeCardsClickable;
    
})();