MediaWiki:Common.js

From CoraTO Wiki - Official Wiki
Revision as of 20:24, 3 August 2025 by Noorisei (talk | contribs) (Created page with "// 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'; sideb...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.
// 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';
        }
    }
    
    // Execute when DOM is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', forceSidebarVisibility);
    } else {
        forceSidebarVisibility();
    }
    
    // Execute when page is completely loaded
    window.addEventListener('load', forceSidebarVisibility);
    
    // 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();
            }
        });
    });
    
    // 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);
        }
    }
    
    startObserving();
    
    // Execute function periodically as backup
    setInterval(forceSidebarVisibility, 1000);
    
})();

/* ========================================
   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) {
                    // Build MediaWiki page URL
                    // Remove spaces and replace with underscores (MediaWiki standard)
                    const pageUrl = linkTarget.replace(/\s+/g, '_');
                    
                    // Navigate to page
                    // If in MediaWiki, use standard format
                    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;
    
})();