|
Qualitätswoche: Artikel verbessern und Crunchyroll-Premium-Abo gewinnen!
Verbessere im Rahmen der Qualitätswoche einen Artikel deiner Wahl und gewinne mit etwas |
MediaWiki:Mobile.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Inhalt hinzugefügt Inhalt gelöscht
Python (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
(Anpassungen für neues MW) |
||
| (3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
/* Das folgende JavaScript wird für alle Nutzer der mobilen Ansicht geladen. */ |
/* Das folgende JavaScript wird für alle Nutzer der mobilen Ansicht geladen. */ |
||
| + | /* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */ |
||
| − | //================================================================================ |
||
| + | $(document).ready(function() { |
||
| − | /* Spoiler-Button */ |
||
| + | $('.menu ul:first').after( |
||
| − | |||
| + | '<ul class="toggle-list__list"> \ |
||
| − | function createSpoilerButtons() { |
||
| + | <li class="toggle-list-item"> \ |
||
| − | var toInsert = document.getElementById('page-actions'); |
||
| + | <a class="toggle-list-item__anchor" href="#"> \ |
||
| − | var div2 = document.createElement('div'); |
||
| + | <span class="minerva-icon minerva-icon--listBullet"></span> \ |
||
| − | div2.className = '_toggle de'; |
||
| + | <span class="toggle-list-item__label">Beliebte Artikel</span> \ |
||
| − | div2.style.cssFloat = 'right'; |
||
| + | </a> \ |
||
| − | div2.style.textAlign = 'right'; |
||
| + | </li> \ |
||
| − | div2.style.width = '190px'; |
||
| + | <li class="toggle-list-item"> \ |
||
| − | div2.style.fontSize = '120%'; |
||
| + | <a class="toggle-list-item__anchor" href="/wiki/Hauptcharaktere"> \ |
||
| − | |||
| + | <span class="minerva-icon"></span> \ |
||
| − | var span = document.createElement('span'); |
||
| + | <span class="toggle-list-item__label">Hauptcharaktere</span> \ |
||
| − | span.className = '_toggler_hide-de _toggler_show-jp'; |
||
| + | </a> \ |
||
| − | span.appendChild(document.createTextNode('Spoiler anzeigen ')); |
||
| + | </li> \ |
||
| − | div2.appendChild(span); |
||
| + | <li class="toggle-list-item"> \ |
||
| − | |||
| + | <a class="toggle-list-item__anchor" href="/wiki/Liste_der_Fälle"> \ |
||
| − | var img = document.createElement('img'); |
||
| + | <span class="minerva-icon"></span> \ |
||
| − | img.src = '/images/thumb/b/bd/Close.png/25px-Close.png'; |
||
| + | <span class="toggle-list-item__label">Liste der Fälle</span> \ |
||
| − | img.style.verticalAlign = 'middle'; |
||
| + | </a> \ |
||
| − | div2.appendChild(img); |
||
| + | </li> \ |
||
| − | toInsert.appendChild(div2); |
||
| + | <li class="toggle-list-item"> \ |
||
| − | |||
| + | <a class="toggle-list-item__anchor" href="/wiki/Liste_der_Manga-Bände"> \ |
||
| − | var div2 = document.createElement('div'); |
||
| + | <span class="minerva-icon"></span> \ |
||
| − | div2.className = '_toggle de'; |
||
| + | <span class="toggle-list-item__label">Liste der Kapitel</span> \ |
||
| − | div2.style.display = 'none'; |
||
| + | </a> \ |
||
| − | div2.style.cssFloat = 'right'; |
||
| + | </li> \ |
||
| − | div2.style.textAlign = 'right'; |
||
| + | <li class="toggle-list-item"> \ |
||
| − | div2.style.width = '190px'; |
||
| + | <a class="toggle-list-item__anchor" href="/wiki/Liste_der_Anime-Episoden"> \ |
||
| − | toInsert.appendChild(div2); |
||
| + | <span class="minerva-icon"></span> \ |
||
| − | |||
| + | <span class="toggle-list-item__label">Liste der Episoden</span> \ |
||
| − | |||
| + | </a> \ |
||
| − | var div2 = document.createElement('div'); |
||
| + | </li> \ |
||
| − | div2.className = '_toggle jp'; |
||
| + | <li class="toggle-list-item"> \ |
||
| − | div2.style.display = 'none'; |
||
| + | <a class="toggle-list-item__anchor" href="/wiki/Liste_der_Filme"> \ |
||
| − | div2.style.cssFloat = 'right'; |
||
| + | <span class="minerva-icon"></span> \ |
||
| − | div2.style.textAlign = 'right'; |
||
| + | <span class="toggle-list-item__label">Liste der Filme</span> \ |
||
| − | div2.style.width = '190px'; |
||
| + | </a> \ |
||
| − | toInsert.appendChild(div2); |
||
| + | </li> \ |
||
| − | |||
| + | </ul>' |
||
| − | var div2 = document.createElement('div'); |
||
| + | ); |
||
| − | div2.className = '_toggle jp'; |
||
| + | }); |
||
| − | div2.style.display = 'none'; |
||
| − | div2.style.cssFloat = 'right'; |
||
| − | div2.style.textAlign = 'right'; |
||
| − | div2.style.width = '190px'; |
||
| − | div2.style.fontSize = '60%'; |
||
| − | |||
| − | var span = document.createElement('span'); |
||
| − | span.className = '_toggler_hide-jp _toggler_show-de'; |
||
| − | span.appendChild(document.createTextNode('(Spoiler verbergen) ')); |
||
| − | div2.appendChild(span); |
||
| − | |||
| − | var img = document.createElement('img'); |
||
| − | img.src = '/images/thumb/7/7f/Open.png/25px-Open.png'; |
||
| − | img.style.verticalAlign = 'middle'; |
||
| − | div2.appendChild(img); |
||
| − | toInsert.appendChild(div2); |
||
| − | } |
||
| − | |||
| − | $(createSpoilerButtons); |
||
| − | |||
| − | /* Folgendes Script wird in jedem Skin geladen */ |
||
| − | |||
| − | //================================================================================ |
||
| − | //TOGGLE |
||
| − | //Austin Che http://openwetware.org/wiki/User:Austin |
||
| − | // indexed array of toggler ids to array of associated toggle operations |
||
| − | // each operation is a two element array, the first being the type, the second a class name or array of elements |
||
| − | // operation types are strings like "_reset" or "" for the default toggle operation |
||
| − | var togglers = new Array(); |
||
| − | var allClasses = new Object(); // associative map of class names to page elements |
||
| − | |||
| − | function toggler(id) |
||
| − | { |
||
| − | var toBeToggled = togglers[id]; |
||
| − | if (!toBeToggled) |
||
| − | return; |
||
| − | |||
| − | // if some element is in list more than once, it will be toggled multiple times |
||
| − | for (var i = 0; i < toBeToggled.length; i++) |
||
| − | { |
||
| − | // get array of elements to operate on |
||
| − | var toggles = toBeToggled[i][1]; |
||
| − | if (typeof(toggles) == "string") |
||
| − | { |
||
| − | if (toggles.charAt(0) == '-') |
||
| − | { |
||
| − | // treat as an element ID, not as class |
||
| − | toggles = document.getElementById(toggles.substring(1)); |
||
| − | if (toggles) |
||
| − | toggles = new Array(toggles); |
||
| − | } |
||
| − | else |
||
| − | toggles = allClasses[toggles]; |
||
| − | } |
||
| − | if (!toggles || !toggles.length) |
||
| − | continue; |
||
| − | |||
| − | var op = toBeToggled[i][0]; // what the operation will be |
||
| − | |||
| − | switch (op) |
||
| − | { |
||
| − | case "_reset": |
||
| − | for (var j in toggles) |
||
| − | toggles[j].style.display = toggles[j]._toggle_original_display; |
||
| − | break; |
||
| − | case "_show": |
||
| − | for (var j in toggles) |
||
| − | toggles[j].style.display = ''; |
||
| − | break; |
||
| − | case "_hide": |
||
| − | for (var j in toggles) |
||
| − | toggles[j].style.display = 'none'; |
||
| − | break; |
||
| − | case "": |
||
| − | default: |
||
| − | // Toggle |
||
| − | for (var j in toggles) |
||
| − | toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); |
||
| − | break; |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | |||
| − | function createTogglerLink(toggler, id) |
||
| − | { |
||
| − | var toggle = document.createElement("a"); |
||
| − | toggle.className = 'toggler-link'; |
||
| − | toggle.setAttribute('id', 'toggler' + id); |
||
| − | toggle.setAttribute('href', 'javascript:toggler("' + id + '");'); |
||
| − | var child = toggler.firstChild; |
||
| − | toggler.removeChild(child); |
||
| − | toggle.appendChild(child); |
||
| − | toggler.insertBefore(toggle, toggler.firstChild); |
||
| − | } |
||
| − | |||
| − | function toggleInit() |
||
| − | { |
||
| − | var togglerElems = new Array(); |
||
| − | var toggleGroup = new Array(); |
||
| − | |||
| − | // make list of all document classes |
||
| − | var elems = document.getElementsByTagName("*"); |
||
| − | var numelems = elems.length; |
||
| − | for (var i = 0; i < elems.length; i++) |
||
| − | { |
||
| − | var elem = elems[i]; |
||
| − | if (!elem.className) |
||
| − | continue; |
||
| − | |||
| − | elem._toggle_original_display = elem.style.display; |
||
| − | var togglerID = -1; |
||
| − | var elemClasses = elem.className.split(' '); // get list of classes |
||
| − | for (var j = 0; j < elemClasses.length; j++) |
||
| − | { |
||
| − | var elemClass = elemClasses[j]; |
||
| − | if (! allClasses[elemClass]) |
||
| − | allClasses[elemClass] = new Array(); |
||
| − | allClasses[elemClass].push(elem); |
||
| − | |||
| − | // all the special classes begin with _toggle |
||
| − | if (elemClass.substring(0, 7) != "_toggle") |
||
| − | continue; |
||
| − | |||
| − | if (elemClass == "_togglegroup") |
||
| − | toggleGroup = new Array(); |
||
| − | else if (elemClass == "_toggle") |
||
| − | toggleGroup.push(elem); |
||
| − | else if (elemClass.substring(0, 12) == "_toggle_init") |
||
| − | { |
||
| − | // set initial value for display (ignore the original CSS set value) |
||
| − | // understands _toggle_initshow and _toggle_inithide |
||
| − | var disp = elemClass.substring(12); |
||
| − | if (disp == "show") |
||
| − | elem.style.display = ''; |
||
| − | else if (disp == "hide") |
||
| − | elem.style.display = 'none'; |
||
| − | elem._toggle_original_display = disp; |
||
| − | } |
||
| − | else if (elemClass.substring(0, 8) == "_toggler") |
||
| − | { |
||
| − | if (togglerID == -1) |
||
| − | { |
||
| − | togglerID = togglers.length; |
||
| − | togglers[togglerID] = new Array(); |
||
| − | togglerElems[togglerID] = elem; |
||
| − | } |
||
| − | |||
| − | // all classes are of form _toggler_op-CLASS |
||
| − | // figure out what class we're toggling |
||
| − | // if none is specified, then we use the current toggle group |
||
| − | var toBeToggled; |
||
| − | var hyphen = elemClass.indexOf('-'); |
||
| − | if (hyphen != -1) |
||
| − | toBeToggled = elemClass.substring(hyphen+1); |
||
| − | else |
||
| − | { |
||
| − | toBeToggled = toggleGroup; |
||
| − | hyphen = elemClass.length; |
||
| − | } |
||
| − | |||
| − | var op = elemClass.substring(8, hyphen); |
||
| − | togglers[togglerID].push(new Array(op, toBeToggled)); |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | |||
| − | // add javascript links to all toggler elements |
||
| − | for (var i = 0; i < togglerElems.length; i++) |
||
| − | createTogglerLink(togglerElems[i], i); |
||
| − | } |
||
| − | |||
| − | $(toggleInit); |
||
| − | |||
| − | function toggleObjectVisibility(objectId) { |
||
| − | var styleObject = document.getElementById(objectId); |
||
| − | if (styleObject) { |
||
| − | if (styleObject.style.display == 'block') { |
||
| − | styleObject.style.display = "none"; |
||
| − | } else { |
||
| − | styleObject.style.display = "block"; |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | |||
| − | |||
| − | var spoilersDone, navbarsDone; |
||
| − | //================================================================================ |
||
| − | //*** Dynamic Navigation Bars |
||
| − | |||
| − | // set up max count of Navigation Bars on page, |
||
| − | // if there are more, all will be hidden |
||
| − | // mw.user.options.set( 'NavigationBarShowDefault', 0 ); // all bars will be hidden |
||
| − | // mw.user.options.set( 'NavigationBarShowDefault', 1 ); // on pages with more than 1 bar all bars will be hidden |
||
| − | |||
| − | // adds show/hide-button to navigation bars |
||
| − | // using 'jquery.makeCollapsible': for messages |
||
| − | // using 'user', 'mediawiki.user', 'user.options': wait for overrides in user.js |
||
| − | mw.loader.using( [ 'jquery.makeCollapsible', 'user', 'mediawiki.user', 'user.options' ], function() { mw.hook( 'wikipage.content' ).add( function( $content ) { |
||
| − | // allow setting NavigationBarShowDefault |
||
| − | var showDefaultCount = mw.user.options.get( 'NavigationBarShowDefault', |
||
| − | typeof NavigationBarShowDefault !== 'undefined' ? NavigationBarShowDefault : 1 ); |
||
| − | // allow user overrides for b/c |
||
| − | var textHide = typeof NavigationBarHide === 'string' ? NavigationBarHide : mw.msg( 'collapsible-collapse' ); |
||
| − | var textShow = typeof NavigationBarShow === 'string' ? NavigationBarShow : mw.msg( 'collapsible-expand' ); |
||
| − | |||
| − | // shows and hides content and picture (if available) of navigation bars |
||
| − | // Parameters: |
||
| − | // indexNavigationBar: the index of navigation bar to be toggled |
||
| − | function toggleNavigationBar(NavToggle, NavFrame) |
||
| − | { |
||
| − | if (!NavFrame || !NavToggle) { |
||
| − | return false; |
||
| − | } |
||
| − | |||
| − | // if shown now |
||
| − | if (NavToggle.firstChild.data === textHide) { |
||
| − | for ( |
||
| − | var NavChild = NavFrame.firstChild; |
||
| − | NavChild !== null; |
||
| − | NavChild = NavChild.nextSibling |
||
| − | ) { |
||
| − | if (NavChild.className === 'NavPic' || NavChild.className === 'NavContent') { |
||
| − | NavChild.style.display = 'none'; |
||
| − | } |
||
| − | } |
||
| − | NavToggle.firstChild.data = textShow; |
||
| − | |||
| − | // if hidden now |
||
| − | } else if (NavToggle.firstChild.data === textShow) { |
||
| − | for ( |
||
| − | var NavChild = NavFrame.firstChild; |
||
| − | NavChild !== null; |
||
| − | NavChild = NavChild.nextSibling |
||
| − | ) { |
||
| − | if (NavChild.className === 'NavPic' || NavChild.className === 'NavContent') { |
||
| − | NavChild.style.display = 'block'; |
||
| − | } |
||
| − | } |
||
| − | NavToggle.firstChild.data = textHide; |
||
| − | } |
||
| − | } |
||
| − | |||
| − | function toggleNavigationBarFunction(NavToggle, NavFrame) { |
||
| − | return function() { |
||
| − | toggleNavigationBar(NavToggle, NavFrame); |
||
| − | return false; |
||
| − | }; |
||
| − | } |
||
| − | // iterate over all NavFrames |
||
| − | var NavFrames = $content.find( 'div.NavFrame' ); |
||
| − | |||
| − | // if more Navigation Bars found and not template namespace than Default: hide all |
||
| − | var initiallyToggle = showDefaultCount < NavFrames.length && mw.config.get( 'wgNamespaceNumber' ) !== 10; |
||
| − | for (var i=0; i<NavFrames.length; i++) { |
||
| − | var NavFrame = NavFrames[i]; |
||
| − | var NavToggle = document.createElement("a"); |
||
| − | NavToggle.className = 'NavToggle'; |
||
| − | NavToggle.setAttribute('href', '#'); |
||
| − | |||
| − | var NavToggleText = document.createTextNode(textHide); |
||
| − | NavToggle.appendChild(NavToggleText); |
||
| − | |||
| − | // add NavToggle-Button as first div-element |
||
| − | // in < div class="NavFrame" > |
||
| − | NavFrame.insertBefore(NavToggle, NavFrame.firstChild); |
||
| − | |||
| − | NavToggle.onclick = toggleNavigationBarFunction(NavToggle, NavFrame); |
||
| − | if (initiallyToggle) { |
||
| − | toggleNavigationBar(NavToggle, NavFrame); |
||
| − | } else { // make sure that 'display' is always set for every NavFrame |
||
| − | for ( |
||
| − | var NavChild = NavFrame.firstChild; |
||
| − | NavChild !== null; |
||
| − | NavChild = NavChild.nextSibling |
||
| − | ) { |
||
| − | if (NavChild.className === 'NavPic' || NavChild.className === 'NavContent') { |
||
| − | NavChild.style.display = 'block'; |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | })}); |
||
| − | |||
| − | //================================================================================ |
||
| − | if (typeof showAllSpoiler == 'undefined' ) { |
||
| − | var showAllSpoiler = 0; |
||
| − | } |
||
| − | |||
| − | function createSpoiler() { |
||
| − | if (showAllSpoiler || spoilersDone) return; |
||
| − | |||
| − | var indexSpoiler = 0; |
||
| − | // iterate over all < div >-elements |
||
| − | var divs = document.getElementsByTagName("div"); |
||
| − | for (var i=0; i<divs.length; i++) { |
||
| − | var Spoiler = divs[i]; |
||
| − | if (Spoiler.className == "spoiler") { |
||
| − | indexSpoiler++; |
||
| − | Spoiler.style.display = "none"; |
||
| − | |||
| − | var SpoilerToggle = document.createElement("a"); |
||
| − | SpoilerToggle.className = 'spoilerButton'; |
||
| − | SpoilerToggle.setAttribute('id', 'SpoilerToggle' +indexSpoiler); |
||
| − | SpoilerToggle.setAttribute('href', 'javascript:toggleObjectVisibility(\'Spoiler' + indexSpoiler + '\');'); |
||
| − | |||
| − | var spLabel = Spoiler.getAttribute("title"); |
||
| − | Spoiler.setAttribute("title", ""); |
||
| − | if (!spLabel) spLabel = "Spoiler"; |
||
| − | var SpoilerToggleText = document.createTextNode(spLabel); |
||
| − | SpoilerToggle.appendChild(SpoilerToggleText); |
||
| − | |||
| − | document.getElementById("bodyContent").insertBefore( |
||
| − | SpoilerToggle, |
||
| − | Spoiler |
||
| − | ); |
||
| − | Spoiler.setAttribute('id', 'Spoiler' + indexSpoiler); |
||
| − | } |
||
| − | } |
||
| − | spoilersDone = true; |
||
| − | } |
||
| − | |||
| − | function createContentTabs() { |
||
| − | var ict = 0, divs = document.getElementsByTagName("div"), defaultTab; |
||
| − | for (var i = 0; i<divs.length; i++) { |
||
| − | var ctdiv = divs[i]; |
||
| − | if (ctdiv.className == "Tabs") { |
||
| − | var firstTab, tabs; |
||
| − | ict++; |
||
| − | |||
| − | if (document.getElementById("ct_"+ict)) continue; |
||
| − | ctdiv.parentNode.id = "ct_"+ict; |
||
| − | tabs = ctdiv.childNodes; |
||
| − | defaultTab = ctdiv.title; |
||
| − | ctdiv.setAttribute("title", ""); |
||
| − | |||
| − | for (var j=0; j<tabs.length; j++) { |
||
| − | var tab = tabs[j]; |
||
| − | var toggle = document.createElement("a"); |
||
| − | var tabName = tab.className; |
||
| − | if (!tabName) continue; |
||
| − | |||
| − | toggle.setAttribute('href', 'javascript:toggleTab(\'ct_'+ict+'\', \''+tabName+'\');'); |
||
| − | toggle.setAttribute('id', 'ct_'+ict+'_'+tabName); |
||
| − | |||
| − | var spLabel = tab.innerHTML; |
||
| − | if (!spLabel) continue; |
||
| − | toggle.innerHTML = spLabel; |
||
| − | |||
| − | if (!firstTab) { |
||
| − | firstTab = tabName; |
||
| − | if (!defaultTab) { |
||
| − | defaultTab=tabName; |
||
| − | } |
||
| − | } |
||
| − | ctdiv.appendChild(toggle); |
||
| − | ctdiv.removeChild(tab); |
||
| − | } |
||
| − | toggleTab("ct_"+ict, defaultTab); |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | function toggleTab(ct_id, ct_tab) { |
||
| − | var a = document.getElementById(ct_id); |
||
| − | for (var i = 0; i<a.childNodes.length; i++) { |
||
| − | var b = a.childNodes[i]; |
||
| − | for (var j = 0; j<b.childNodes.length; j++) { |
||
| − | var c = b.childNodes[j]; |
||
| − | if(c.id||c.className) { |
||
| − | if (b.className=="Tabs") { |
||
| − | c.className=""; |
||
| − | } else if (b.className=="Contents") { |
||
| − | c.style.display="none"; |
||
| − | if (c.id==ct_tab) c.style.display = "block"; |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | } |
||
| − | document.getElementById(ct_id+"_"+ct_tab).className = "active"; |
||
| − | } |
||
| − | $(createSpoiler); |
||
| − | $(createContentTabs); |
||
Aktuelle Version vom 6. August 2024, 22:52 Uhr
/* Das folgende JavaScript wird für alle Nutzer der mobilen Ansicht geladen. */
/* Weitere Menüs für MobileFrontend & MinervaNeue (Mobile Ansicht) */
$(document).ready(function() {
$('.menu ul:first').after(
'<ul class="toggle-list__list"> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="#"> \
<span class="minerva-icon minerva-icon--listBullet"></span> \
<span class="toggle-list-item__label">Beliebte Artikel</span> \
</a> \
</li> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="/wiki/Hauptcharaktere"> \
<span class="minerva-icon"></span> \
<span class="toggle-list-item__label">Hauptcharaktere</span> \
</a> \
</li> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="/wiki/Liste_der_Fälle"> \
<span class="minerva-icon"></span> \
<span class="toggle-list-item__label">Liste der Fälle</span> \
</a> \
</li> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="/wiki/Liste_der_Manga-Bände"> \
<span class="minerva-icon"></span> \
<span class="toggle-list-item__label">Liste der Kapitel</span> \
</a> \
</li> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="/wiki/Liste_der_Anime-Episoden"> \
<span class="minerva-icon"></span> \
<span class="toggle-list-item__label">Liste der Episoden</span> \
</a> \
</li> \
<li class="toggle-list-item"> \
<a class="toggle-list-item__anchor" href="/wiki/Liste_der_Filme"> \
<span class="minerva-icon"></span> \
<span class="toggle-list-item__label">Liste der Filme</span> \
</a> \
</li> \
</ul>'
);
});