MediaWiki:Minerva.js

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.

/* All JavaScript here will be loaded for users of the MinervaNeue skin */

/* likeMarioWiki: Custom menu - Version 2 (CSS Class-Based Icons - Recommended) */
// This method relies on the MinervaNeue skin's built-in CSS to display icons
// by adding the appropriate classes (e.g., 'mw-ui-icon-minerva-mapPin').
$.when(mw.loader.using(['mediawiki.util']), $.ready).then(function() {

    var menu = 'p-personal';
    // For logged-in users, try 'p-interaction' first, then fallback to 'p-navigation'
    if (mw.config.get('wgUserId')) {
        menu = document.getElementById('p-interaction') ? 'p-interaction' : 'p-navigation';
    }

    // Function to safely get page URL
    function getSafeUrl(pageName) {
        var url = '#error-generating-url';
        try {
            if (typeof mw !== 'undefined' && typeof mw.util !== 'undefined' && typeof mw.util.getUrl === 'function') {
                url = mw.util.getUrl(pageName);
            } else {
                console.warn('[Minerva.js V2] mw.util.getUrl not available, using basic fallback.');
                var prefix = '/wiki/';
                if (typeof mw !== 'undefined' && typeof mw.config !== 'undefined' && typeof mw.config.get === 'function') {
                    prefix = mw.config.get('wgArticlePath', '/wiki/$1').replace('$1', '');
                } else {
                    console.warn('[Minerva.js V2] mw.config.get not available for wgArticlePath.');
                }
                url = prefix + encodeURIComponent(pageName.replace(/ /g, '_'));
            }
        } catch (e) {
            console.error('[Minerva.js V2] Error within getSafeUrl for "' + pageName + '":', e);
        }
        return url;
    }

    // --- Helper function: Creates structure and adds CSS classes for icons ---
    function addIconWithClasses(anchorElement, iconName) { // Renamed for clarity
        if (!anchorElement) { console.warn('[Minerva.js V2] addIconWithClasses: anchorElement is invalid.'); return; }
        var originalText = anchorElement.textContent;
        anchorElement.innerHTML = ''; // Clear existing content

        // 1. Create icon span and add ALL necessary classes
        var iconSpan = document.createElement('span');
        iconSpan.classList.add('mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-icon-minerva-' + iconName);
        // No inline style is set here; relying entirely on CSS rules associated with these classes.

        anchorElement.appendChild(iconSpan); // Add the icon span

        // 2. Create and add label span
        var labelSpan = document.createElement('span');
        labelSpan.classList.add('toggle-list-item__label');
        labelSpan.textContent = originalText;
        anchorElement.appendChild(labelSpan);
         console.log('[Minerva.js V2] Added classes for icon:', iconName);
    }


    // --- Add Categories section header ---
    var categoriesHeader = document.createElement('li');
    categoriesHeader.classList.add('menu__item', 'menu__item--category', 'menu-header');
    categoriesHeader.innerHTML = '<span class="menu-header-text">— CATEGORIES —</span>';
    var targetMenuUl = document.getElementById(menu);
     if (targetMenuUl) {
        targetMenuUl.appendChild(categoriesHeader);
        console.log('[Minerva.js V2] Added Categories header to menu:', menu);
    } else {
        console.error('[Minerva.js V2] Could not find menu element with ID:', menu);
    }


    // --- Add links for Categories ---
    var liLocation = mw.util.addPortletLink(menu, getSafeUrl('Animal_cruelty_cases_by_location'), 'By Location/地点');
    if (liLocation) {
        liLocation.classList.add('toggle-list-item');
        var anchorLocation = liLocation.getElementsByTagName('a')[0];
        if (anchorLocation) {
            anchorLocation.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorLocation, 'mapPin'); // Use CSS class function
        }
    }
    var liSpecies = mw.util.addPortletLink(menu, getSafeUrl('Animal_cruelty_cases_by_species'), 'By Species/物种');
    if (liSpecies) {
        liSpecies.classList.add('toggle-list-item');
        var anchorSpecies = liSpecies.getElementsByTagName('a')[0];
        if (anchorSpecies) {
            anchorSpecies.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorSpecies, 'mapPin'); // Use CSS class function
        }
    }
    var liYear = mw.util.addPortletLink(menu, getSafeUrl('Animal_cruelty_cases_by_year'), 'By Year/年份');
    if (liYear) {
        liYear.classList.add('toggle-list-item');
        var anchorYear = liYear.getElementsByTagName('a')[0];
        if (anchorYear) {
            anchorYear.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorYear, 'mapPin'); // Use CSS class function
        }
    }

    // --- Add Resources section header ---
    var resourcesHeader = document.createElement('li');
    resourcesHeader.classList.add('menu__item', 'menu__item--category', 'menu-header');
    resourcesHeader.innerHTML = '<span class="menu-header-text">— RESOURCES —</span>';
     if (targetMenuUl) { // Append to the same menu UL
        targetMenuUl.appendChild(resourcesHeader);
        console.log('[Minerva.js V2] Added Resources header.');
    }

    // --- Add links for Resources ---
    var liUseful = mw.util.addPortletLink(menu, getSafeUrl('Useful_links'), 'Useful links/实用链接');
    if (liUseful) {
        liUseful.classList.add('toggle-list-item');
        var anchorUseful = liUseful.getElementsByTagName('a')[0];
        if (anchorUseful) {
            anchorUseful.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorUseful, 'link'); // Use CSS class function
        }
    }
    var liDocs = mw.util.addPortletLink(menu, getSafeUrl('Documentaries'), 'Documentaries/纪录片');
    if (liDocs) {
        liDocs.classList.add('toggle-list-item');
        var anchorDocs = liDocs.getElementsByTagName('a')[0];
        if (anchorDocs) {
            anchorDocs.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorDocs, 'userContributions'); // Use CSS class function
        }
    }
    var liStudies = mw.util.addPortletLink(menu, getSafeUrl('Studies'), 'Studies/研究');
    if (liStudies) {
        liStudies.classList.add('toggle-list-item');
        var anchorStudies = liStudies.getElementsByTagName('a')[0];
        if (anchorStudies) {
            anchorStudies.classList.add('toggle-list-item__anchor');
            addIconWithClasses(anchorStudies, 'speechBubbles'); // Use CSS class function
        }
    }

    console.log('[Minerva.js V2] Script finished (Using CSS classes for icons).');

}); // End of $.when()