MediaWiki:Imelesstay.jsay
From Exuvia Wiki
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.
$( function () {
/*
* ============================================================
* DROPDOWN MENU CONTENT
* ============================================================
*
* A string creates a normal page link.
*
* An object creates a second-level dropdown:
*
* 'Continents': [
* 'Alorea',
* 'Another Continent'
* ]
*
* This can be nested as deeply as desired.
*/
var menus = {
'Locations': {
'Continents': [
'Alorea',
'Another Continent'
],
'Kingdoms': [
'Koble',
'Yamen',
'Zagis',
'Tekk',
'Frossik'
],
'Towns': [
'Town A',
'Town B'
]
},
'Religions': {
'Kippelian Pantheon': [
'The Valor',
'The Brumal'
],
'Other Religions': [
'Religion A',
'Religion B'
]
},
'People': {
'Kippelian Empire': [
'High Lord Kip',
'Queen Melena'
],
'Other People': [
'Person A',
'Person B'
]
},
'World Building': {
'History': [
'War of Unification',
'History of Kippel'
],
'Magic': [
'Magic',
'Necromancy'
],
'War': [
'War of Unification',
'Thalassic War'
]
}
};
/*
* ============================================================
* FIND THE SIDEBAR
* ============================================================
*/
var sidebar = document.getElementById( 'mw-site-navigation' );
if ( !sidebar ) {
return;
}
/*
* ============================================================
* FIND ALL LINKS IN THE SIDEBAR
* ============================================================
*/
var links = sidebar.getElementsByTagName( 'a' );
var sidebarLinks = Array.prototype.slice.call( links );
/*
* ============================================================
* CREATE A DROPDOWN
* ============================================================
*
* This function creates a dropdown from an object.
*
* It can call itself to create another dropdown inside it.
*/
function createDropdown( menuData, parentLink ) {
var dropdown = document.createElement( 'ul' );
dropdown.className = 'exuvia-dropdown-menu exuvia-dropdown-level-2';
dropdown.style.display = 'none';
Object.keys( menuData ).forEach( function ( name ) {
var item = document.createElement( 'li' );
/*
* ====================================================
* SECOND-LEVEL DROPDOWN
* ====================================================
*
* If the value is an array, it is a normal list of
* pages.
*
* If the value is an object, it contains another
* dropdown.
*/
if ( Array.isArray( menuData[ name ] ) ) {
/*
* Normal page group
*/
var link = document.createElement( 'a' );
link.href = mw.util.getUrl( name );
link.textContent = name;
item.appendChild( link );
/*
* If this is being used as a dropdown title,
* it can be turned into a submenu later.
*/
} else {
/*
* =================================================
* CREATE SECOND-LEVEL TITLE
* =================================================
*/
var link = document.createElement( 'a' );
link.href = '#';
link.textContent = name;
link.className = 'exuvia-dropdown-title';
/*
* Arrow
*/
var arrow = document.createElement( 'span' );
arrow.className = 'exuvia-dropdown-arrow';
arrow.textContent = ' ▼';
link.appendChild( arrow );
/*
* Create the next level recursively.
*/
var submenu = createDropdown(
menuData[ name ],
link
);
/*
* Add submenu to this item.
*/
item.appendChild( link );
item.appendChild( submenu );
/*
* =================================================
* OPEN / CLOSE SUBMENU
* =================================================
*/
link.addEventListener( 'click', function ( event ) {
event.preventDefault();
if ( submenu.style.display === 'none' ) {
submenu.style.display = 'block';
arrow.textContent = ' ▲';
} else {
submenu.style.display = 'none';
arrow.textContent = ' ▼';
}
});
}
dropdown.appendChild( item );
});
return dropdown;
}
/*
* ============================================================
* PROCESS TOP-LEVEL MENUS
* ============================================================
*/
Object.keys( menus ).forEach( function ( menuName ) {
var mainLink = null;
/*
* Find the sidebar link matching the menu name.
*/
sidebarLinks.some( function ( link ) {
var text = link.textContent.trim();
if ( text === menuName ) {
mainLink = link;
return true;
}
return false;
});
if ( !mainLink ) {
return;
}
/*
* ========================================================
* FIND THE SIDEBAR ITEM
* ========================================================
*/
var parent = mainLink.closest( 'li' );
if ( !parent ) {
return;
}
/*
* ========================================================
* CREATE TOP-LEVEL DROPDOWN
* ========================================================
*/
var dropdown = document.createElement( 'ul' );
dropdown.className = 'exuvia-dropdown-menu exuvia-dropdown-level-1';
dropdown.style.display = 'none';
/*
* ========================================================
* CREATE FIRST-LEVEL ITEMS
* ========================================================
*/
Object.keys( menus[ menuName ] ).forEach( function ( name ) {
var item = document.createElement( 'li' );
/*
* Every entry in the top-level menu is treated as
* a submenu title.
*/
var link = document.createElement( 'a' );
link.href = '#';
link.textContent = name;
link.className = 'exuvia-dropdown-title';
/*
* Arrow
*/
var arrow = document.createElement( 'span' );
arrow.className = 'exuvia-dropdown-arrow';
arrow.textContent = ' ▼';
link.appendChild( arrow );
/*
* ====================================================
* CREATE SECOND LEVEL
* ====================================================
*/
var submenuData = menus[ menuName ][ name ];
var submenu = document.createElement( 'ul' );
submenu.className =
'exuvia-dropdown-menu exuvia-dropdown-level-2';
submenu.style.display = 'none';
/*
* Add the actual pages.
*/
submenuData.forEach( function ( pageName ) {
var pageItem = document.createElement( 'li' );
var pageLink = document.createElement( 'a' );
pageLink.href = mw.util.getUrl( pageName );
pageLink.textContent = pageName;
pageItem.appendChild( pageLink );
submenu.appendChild( pageItem );
});
/*
* Add submenu.
*/
item.appendChild( link );
item.appendChild( submenu );
dropdown.appendChild( item );
/*
* ====================================================
* OPEN / CLOSE SECOND LEVEL
* ====================================================
*/
link.addEventListener( 'click', function ( event ) {
event.preventDefault();
if ( submenu.style.display === 'none' ) {
submenu.style.display = 'block';
arrow.textContent = ' ▲';
} else {
submenu.style.display = 'none';
arrow.textContent = ' ▼';
}
});
});
/*
* ========================================================
* ADD DROPDOWN TO SIDEBAR
* ========================================================
*/
parent.appendChild( dropdown );
/*
* ========================================================
* TOP-LEVEL ARROW
* ========================================================
*/
var arrow = document.createElement( 'span' );
arrow.className = 'exuvia-dropdown-arrow';
arrow.textContent = ' ▼';
mainLink.appendChild( arrow );
/*
* Mark as dropdown title.
*/
mainLink.classList.add( 'exuvia-dropdown-title' );
/*
* ========================================================
* OPEN / CLOSE TOP LEVEL
* ========================================================
*/
mainLink.addEventListener( 'click', function ( event ) {
event.preventDefault();
if ( dropdown.style.display === 'none' ) {
dropdown.style.display = 'block';
arrow.textContent = ' ▲';
} else {
dropdown.style.display = 'none';
arrow.textContent = ' ▼';
}
});
});
});
