MediaWiki:Minerva.js
Appearance
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 - Attempt 5 (Solution B: Manual mask-image style) */ $.when(mw.loader.using(['mediawiki.util']), $.ready).then(function() { // Only load mediawiki.util var menu = 'p-personal'; if (mw.config.get('wgUserId')) { menu = document.getElementById('p-interaction') ? 'p-interaction' : 'p-navigation'; } function getSafeUrl(pageName) { /* ... same as before ... */ 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] 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] mw.config.get not available for wgArticlePath.'); } url = prefix + encodeURIComponent(pageName.replace(/ /g, '_')); } } catch (e) { console.error('[Minerva.js] Error within getSafeUrl for "' + pageName + '":', e); } return url; } // --- Helper function to add structure AND apply manual icon style --- function addIconWithManualStyle(anchorElement, iconName) { // Renamed for clarity if (!anchorElement) { console.warn('[Minerva.js] addIconWithManualStyle: anchorElement is invalid.'); return; } var originalText = anchorElement.textContent; anchorElement.innerHTML = ''; // 1. Create icon span and add base classes var iconSpan = document.createElement('span'); // Add base structural classes iconSpan.classList.add('mw-ui-icon', 'mw-ui-icon-element'); // Note: We no longer add the specific mw-ui-icon-minerva-* class here // 2. Generate ResourceLoader URL for the icon SVG var iconPath = '#error-generating-icon-url'; // Fallback try { iconPath = mw.util.getUrl(null, { // Use null for page title to get base path // Parameters for ResourceLoader icon request 'title': 'Special:Redirect/skin', // Needed for RL context? Or use mw.config.get('wgPageName')? Testing needed if simple null fails. Using null for now. 'modules': 'skins.minerva.icons.images', 'image': iconName, // Just the name, NO .svg extension based on observed URLs 'format': 'original', // May or may not be needed, include for safety 'skin': mw.config.get('skin', 'minerva'), 'lang': mw.config.get('wgUserLanguage', 'en'), // 'version': ??? // Version parameter might change, omit for robustness? Or get from config? Omit for now. }); // Basic check if URL generation looks okay if (!iconPath || !iconPath.includes('load.php')) { console.warn('[Minerva.js] Generated iconPath might be incorrect:', iconPath); } } catch(e) { console.error('[Minerva.js] Error generating icon URL for', iconName, e); } // 3. Apply inline style for mask-image if (iconPath !== '#error-generating-icon-url') { iconSpan.style.maskImage = 'url("' + iconPath + '")'; iconSpan.style.webkitMaskImage = 'url("' + iconPath + '")'; // For Safari } else { console.warn('[Minerva.js] Skipping maskImage style for', iconName, 'due to URL generation error.'); } anchorElement.appendChild(iconSpan); // Add the styled icon span // 4. Create and add label span var labelSpan = document.createElement('span'); labelSpan.classList.add('toggle-list-item__label'); labelSpan.textContent = originalText; anchorElement.appendChild(labelSpan); } // --- 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>'; document.getElementById(menu).appendChild(categoriesHeader); console.log('[Minerva.js] Added Categories header.'); // --- Add links for Categories using NEW helper function --- 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'); addIconWithManualStyle(anchorLocation, 'mapPin'); console.log('[Minerva.js] Added By Location link.'); } } // Use 'mapPin' icon name 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'); addIconWithManualStyle(anchorSpecies, 'mapPin'); console.log('[Minerva.js] Added By Species link.'); } } // Use 'mapPin' icon name 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'); addIconWithManualStyle(anchorYear, 'mapPin'); console.log('[Minerva.js] Added By Year link.'); } } // Use 'mapPin' icon name // --- 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>'; document.getElementById(menu).appendChild(resourcesHeader); console.log('[Minerva.js] Added Resources header.'); // --- Add links for Resources using NEW helper function --- 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'); addIconWithManualStyle(anchorUseful, 'link'); console.log('[Minerva.js] Added Useful links.'); } } // Use 'link' icon name 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'); addIconWithManualStyle(anchorDocs, 'userContributions'); console.log('[Minerva.js] Added Documentaries link.'); } } // Use 'userContributions' icon name 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'); addIconWithManualStyle(anchorStudies, 'speechBubbles'); console.log('[Minerva.js] Added Studies link.'); } } // Use 'speechBubbles' icon name console.log('[Minerva.js] Script finished (Manual Style Method).'); }); // End of $.when()