MediaWiki:Minerva.js: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (23 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */ | /* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */ | ||
(function () { | |||
// Nur Mobile-Skin (Minerva) | |||
' | if (mw.config.get('skin') !== 'minerva') return; | ||
const BLOCK_ID = 'ados-custom-links'; | |||
// --- KONFIG: Label + Seitentitel (werden mit mw.util.getUrl() sicher verlinkt) | |||
// Header/Sektionen haben title = null | |||
// WICHTIG: "📊 Diagramm / Statistik" steht ganz oben | |||
const LINKS = [ | |||
['📊 Diagramm / Statistik', null], | |||
['Abfüllungen pro Jahr', 'Abfüllungen_pro_Jahr'], | |||
// optional: | |||
// ['Top 5 – Community', 'Top_5'], | |||
['Hauptkategorien', null], | |||
['Alle A Dream of Scotland Abfüllungen', 'Kategorie:Alle A Dream of Scotland Abfüllungen'], | |||
<span class="minerva-icon"></span> | ['Alle A Dream of Ireland Abfüllungen', 'Kategorie:Alle A Dream of Ireland Abfüllungen'], | ||
<span class="toggle-list-item__label"> | ['Alle A Dream of... – Der Rest der Welt', 'Kategorie:Alle A Dream of... – Der Rest der Welt Abfüllungen'], | ||
['Cigar Malt Übersicht', 'Kategorie:Cigar Malt Übersicht'], | |||
['Alle Rumbastic Abfüllungen', 'Kategorie:Alle Rumbastic Abfüllungen'], | |||
['The Tasteful 8', 'Kategorie:The Tasteful 8'], | |||
['Còmhlan Abfüllungen', 'Kategorie:Còmhlan Abfüllungen'], | |||
['Friendly Mr. Z Whiskytainment Abfüllungen', 'Kategorie:Friendly Mr. Z Whiskytainment Abfüllungen'], | |||
['Die Whisky Elfen Abfüllungen', 'Kategorie:Die Whisky Elfen Abfüllungen'], | |||
['The Fine Art of Whisky Abfüllungen', 'Kategorie:The Fine Art of Whisky Abfüllungen'], | |||
['The Forbidden Kingdom', 'Kategorie:The Forbidden Kingdom'], | |||
['Sonderabfüllungen', 'Kategorie:Sonderabfüllungen'] | |||
]; | |||
function findMenuList() { | |||
return ( | |||
document.querySelector('#mw-mf-main-menu nav ul') || | |||
document.querySelector('#mw-mf-main-menu ul') || | |||
document.querySelector('.minerva-main-menu .menu__list') || | |||
document.querySelector('.menu__list') || | |||
document.querySelector('.menu') | |||
); | |||
} | |||
); | function buildSectionsFromLinks(links) { | ||
}); | const sections = []; | ||
let current = null; | |||
for (const [label, title] of links) { | |||
if (title === null) { | |||
current = { header: label, items: [] }; | |||
sections.push(current); | |||
} else if (current) { | |||
current.items.push({ label, title }); | |||
} | |||
} | |||
return sections; | |||
} | |||
function build() { | |||
const host = findMenuList(); | |||
if (!host) return false; | |||
// schon eingebaut? | |||
if (document.getElementById(BLOCK_ID)) return true; | |||
const sections = buildSectionsFromLinks(LINKS); | |||
if (!sections.length) return false; | |||
// Container für alle Sektionen | |||
const container = document.createElement('div'); | |||
container.id = BLOCK_ID; | |||
sections.forEach((sec, idx) => { | |||
const secId = `${BLOCK_ID}-sec-${idx}`; | |||
// äußerer Block je Sektion | |||
const outer = document.createElement('ul'); | |||
outer.className = 'toggle-list__list'; | |||
// Header mit Icon + Toggle | |||
const headerLi = document.createElement('li'); | |||
headerLi.className = 'toggle-list-item'; | |||
const headerBtn = document.createElement('button'); | |||
headerBtn.type = 'button'; | |||
headerBtn.className = 'toggle-list-item__anchor'; | |||
headerBtn.setAttribute('aria-expanded', 'true'); | |||
headerBtn.innerHTML = | |||
'<span class="minerva-icon minerva-icon--listBullet"></span>' + | |||
`<span class="toggle-list-item__label">${sec.header}</span>`; | |||
headerLi.appendChild(headerBtn); | |||
outer.appendChild(headerLi); | |||
// Unterpunkte-Liste (ohne Icons) | |||
const inner = document.createElement('ul'); | |||
inner.className = 'toggle-list__list'; | |||
inner.style.marginLeft = '10px'; | |||
sec.items.forEach(({ label, title }) => { | |||
const li = document.createElement('li'); | |||
li.className = 'toggle-list-item'; | |||
const a = document.createElement('a'); | |||
a.className = 'toggle-list-item__anchor'; | |||
a.textContent = label; | |||
a.href = mw.util.getUrl(title); | |||
li.appendChild(a); | |||
inner.appendChild(li); | |||
}); | |||
outer.appendChild(inner); | |||
// Toggle-Logik pro Sektion | |||
headerBtn.addEventListener('click', function () { | |||
const expanded = this.getAttribute('aria-expanded') === 'true'; | |||
this.setAttribute('aria-expanded', String(!expanded)); | |||
inner.style.display = expanded ? 'none' : ''; | |||
try { localStorage.setItem(secId + ':collapsed', expanded ? '1' : '0'); } catch (e) {} | |||
}); | |||
// Zustand wiederherstellen | |||
try { | |||
if (localStorage.getItem(secId + ':collapsed') === '1') { | |||
headerBtn.setAttribute('aria-expanded', 'false'); | |||
inner.style.display = 'none'; | |||
} | |||
} catch (e) {} | |||
container.appendChild(outer); | |||
}); | |||
// nach der ersten vorhandenen UL einfügen (direkt unter Start/Zufällige Seite) | |||
const firstUl = host.querySelector('ul') || host; | |||
(firstUl.parentNode || host).insertBefore(container, firstUl.nextSibling); | |||
return true; | |||
} | |||
// beim Laden probieren … | |||
document.addEventListener('DOMContentLoaded', () => setTimeout(build, 0)); | |||
// … und wenn das Burger-Menü dynamisch aufgebaut wird, nochmal | |||
document.addEventListener('click', (e) => { | |||
const btn = e.target.closest('button, a'); | |||
if (!btn) return; | |||
const s = (btn.className + ' ' + btn.id).toLowerCase(); | |||
if (s.includes('menu') || s.includes('hamburger') || s.includes('main-menu')) { | |||
setTimeout(build, 250); | |||
} | |||
}); | |||
// Fallback: Observer für lazy DOM | |||
const obs = new MutationObserver(() => { if (build()) obs.disconnect(); }); | |||
obs.observe(document.documentElement, { childList: true, subtree: true }); | |||
})(); | |||
// ----------Abschnitte Geöffnet----------- | |||
/* Minerva: Alle Abschnitte automatisch ausklappen */ | |||
(function () { | |||
if (!window.mw) return; | |||
if (mw.config.get('skin') !== 'minerva') return; | |||
function expandAll() { | |||
// 1) Alle Toggle-Buttons, die noch "zu" sind, anklicken | |||
document.querySelectorAll('button.section-toggle[aria-expanded="false"], [data-event-name="section-toggle"][aria-expanded="false"]').forEach(function (btn) { | |||
try { btn.click(); } catch(e) {} | |||
}); | |||
// 2) Sicherheitsgurt: typische Inhalts-Container sichtbar erzwingen | |||
document.querySelectorAll('.collapsible-block, .mf-section-contents, .section-content').forEach(function (el) { | |||
el.style.display = 'block'; | |||
el.hidden = false; | |||
el.classList.add('open-block'); | |||
el.classList.remove('collapsed'); | |||
}); | |||
} | |||
// Beim Rendern und bei dynamischen Änderungen erneut ausführen | |||
function init() { | |||
expandAll(); | |||
// Nochmal kurz nach Seitenaufbau und nach spätem JS | |||
setTimeout(expandAll, 50); | |||
setTimeout(expandAll, 400); | |||
} | |||
if (mw.loader && mw.loader.using) { | |||
mw.loader.using(['mobile.init']).always(function () { | |||
if (mw.hook) mw.hook('wikipage.content').add(init); | |||
init(); | |||
}); | |||
} else { | |||
document.addEventListener('DOMContentLoaded', init); | |||
} | |||
})(); | |||