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.
/* ============================================================
WIKIPARTNER
THEME + USER MENU
============================================================ */
(function () {
'use strict';
/* ========================================================
THEME CONSTANTS
======================================================== */
var STORAGE_KEY = 'wikipartner-theme';
var LIGHT = 'light';
var DARK = 'dark';
/* ========================================================
THEME STORAGE
======================================================== */
function getSavedTheme() {
try {
var saved =
window.localStorage.getItem(
STORAGE_KEY
);
if (
saved === LIGHT ||
saved === DARK
) {
return saved;
}
} catch (e) {
/* Storage unavailable */
}
return LIGHT;
}
function saveTheme(theme) {
try {
window.localStorage.setItem(
STORAGE_KEY,
theme
);
} catch (e) {
/* Storage unavailable */
}
}
/* ========================================================
CURRENT THEME
======================================================== */
function getCurrentTheme() {
return document.documentElement
.classList.contains(
'wp-theme-dark'
)
? DARK
: LIGHT;
}
/* ========================================================
APPLY THEME
======================================================== */
function applyTheme(
theme,
shouldSave
) {
var html =
document.documentElement;
var isDark =
theme === DARK;
html.classList.toggle(
'wp-theme-dark',
isDark
);
html.classList.toggle(
'wp-theme-light',
!isDark
);
html.classList.remove(
'skin-theme-clientpref-day',
'skin-theme-clientpref-night',
'skin-theme-clientpref-os'
);
html.classList.add(
isDark
? 'skin-theme-clientpref-night'
: 'skin-theme-clientpref-day'
);
html.setAttribute(
'data-wikipartner-theme',
isDark
? DARK
: LIGHT
);
if (shouldSave !== false) {
saveTheme(theme);
}
updateThemeButton();
}
/* ========================================================
ICONS
======================================================== */
function getMoonIcon() {
return [
'<svg viewBox="0 0 24 24" aria-hidden="true">',
'<path ',
'd="M20.3 15.2A8.4 8.4 0 0 1 ',
'8.8 3.7 8.5 8.5 0 1 0 ',
'11.5 11.5Z"',
'></path>',
'<path ',
'class="wp-theme-star" ',
'd="M17.5 4v3M16 5.5h3"',
'></path>',
'</svg>'
].join('');
}
function getSunIcon() {
return [
'<svg viewBox="0 0 24 24" aria-hidden="true">',
'<circle ',
'cx="12" ',
'cy="12" ',
'r="3.8"',
'></circle>',
'<path d="M12 2.3v2.1"></path>',
'<path d="M12 19.6v2.1"></path>',
'<path d="M4.93 4.93l1.5 1.5"></path>',
'<path d="M17.57 17.57l1.5 1.5"></path>',
'<path d="M2.3 12h2.1"></path>',
'<path d="M19.6 12h2.1"></path>',
'<path d="M4.93 19.07l1.5-1.5"></path>',
'<path d="M17.57 6.43l1.5-1.5"></path>',
'</svg>'
].join('');
}
/* ========================================================
UPDATE THEME BUTTON
======================================================== */
function updateThemeButton() {
var button =
document.getElementById(
'wikipartner-theme-toggle'
);
if (!button) {
return;
}
var isDark =
getCurrentTheme() === DARK;
button.innerHTML =
'<span class="wp-theme-icon">' +
(
isDark
? getSunIcon()
: getMoonIcon()
) +
'</span>' +
'<span class="wp-theme-menu-label">' +
(
isDark
? 'Light mode'
: 'Dark mode'
) +
'</span>';
button.setAttribute(
'aria-label',
isDark
? 'Switch to light mode'
: 'Switch to dark mode'
);
button.setAttribute(
'title',
isDark
? 'Light mode'
: 'Dark mode'
);
}
/* ========================================================
CREATE THEME BUTTON
======================================================== */
function createThemeToggle(list) {
if (
document.getElementById(
'wikipartner-theme-item'
)
) {
return;
}
var item =
document.createElement('li');
item.id =
'wikipartner-theme-item';
item.className =
'mw-list-item ' +
'wikipartner-theme-item';
var button =
document.createElement(
'button'
);
button.id =
'wikipartner-theme-toggle';
button.className =
'wikipartner-theme-toggle';
button.type = 'button';
button.addEventListener(
'click',
function () {
var nextTheme =
getCurrentTheme() === DARK
? LIGHT
: DARK;
applyTheme(
nextTheme,
true
);
}
);
item.appendChild(button);
/*
* LOGGED OUT:
*
* Create account | theme | Log in
*/
var loginItem =
list.querySelector(
'#pt-login'
);
if (loginItem) {
list.insertBefore(
item,
loginItem
);
} else {
/*
* Logged-in layout will move
* this into the hamburger menu.
*/
list.appendChild(item);
}
updateThemeButton();
}
/* ========================================================
HAMBURGER ICON
======================================================== */
function getMenuIcon() {
return [
'<span class="wp-menu-bars" aria-hidden="true">',
'<span></span>',
'<span></span>',
'<span></span>',
'</span>'
].join('');
}
/* ========================================================
BUILD LOGGED-IN USER DROPDOWN
======================================================== */
function buildLoggedInUserMenu(list) {
/*
* #pt-logout only exists for an
* authenticated MediaWiki user.
*/
var logoutItem =
list.querySelector(
'#pt-logout'
);
if (!logoutItem) {
/*
* Anonymous visitor.
* Keep standard account layout.
*/
list.classList.remove(
'wp-is-logged-in'
);
list.classList.add(
'wp-is-logged-out'
);
return;
}
list.classList.remove(
'wp-is-logged-out'
);
list.classList.add(
'wp-is-logged-in'
);
if (
list.querySelector(
'.wp-user-dropdown'
)
) {
return;
}
/*
* Username stays outside.
*/
var usernameItem =
list.querySelector(
'#pt-userpage'
);
/*
* Create dropdown wrapper.
*/
var dropdown =
document.createElement('li');
dropdown.className =
'wp-user-dropdown';
/*
* Hamburger button.
*/
var trigger =
document.createElement(
'button'
);
trigger.type = 'button';
trigger.className =
'wp-user-menu-trigger';
trigger.setAttribute(
'aria-label',
'Open user menu'
);
trigger.setAttribute(
'title',
'User menu'
);
trigger.setAttribute(
'aria-expanded',
'false'
);
trigger.innerHTML =
getMenuIcon();
/*
* Dropdown menu.
*/
var menu =
document.createElement('ul');
menu.className =
'wp-user-dropdown-menu';
menu.hidden = true;
/*
* Move every account control except
* the username into the dropdown.
*/
var existingItems =
Array.prototype.slice.call(
list.children
);
existingItems.forEach(
function (item) {
/*
* Keep username AND theme toggle
* visible outside the hamburger menu.
*/
if (
item === usernameItem ||
item.id === 'wikipartner-theme-item' ||
item === dropdown
) {
return;
}
menu.appendChild(item);
}
);
dropdown.appendChild(trigger);
dropdown.appendChild(menu);
/*
* Logged-in order:
*
* Username | Theme | Hamburger
*/
var themeItem =
list.querySelector(
'#wikipartner-theme-item'
);
if (themeItem) {
/*
* Place theme directly after username.
*/
if (usernameItem) {
if (usernameItem.nextSibling) {
list.insertBefore(
themeItem,
usernameItem.nextSibling
);
} else {
list.appendChild(
themeItem
);
}
}
/*
* Hamburger goes directly after theme.
*/
if (themeItem.nextSibling) {
list.insertBefore(
dropdown,
themeItem.nextSibling
);
} else {
list.appendChild(
dropdown
);
}
} else if (usernameItem) {
/*
* Fallback if theme button
* somehow does not exist.
*/
if (usernameItem.nextSibling) {
list.insertBefore(
dropdown,
usernameItem.nextSibling
);
} else {
list.appendChild(
dropdown
);
}
} else {
list.appendChild(
dropdown
);
}
} else {
list.appendChild(
dropdown
);
}
/* ====================================================
TOGGLE
==================================================== */
function closeMenu() {
dropdown.classList.remove(
'is-open'
);
menu.hidden = true;
trigger.setAttribute(
'aria-expanded',
'false'
);
}
function openMenu() {
dropdown.classList.add(
'is-open'
);
menu.hidden = false;
trigger.setAttribute(
'aria-expanded',
'true'
);
}
trigger.addEventListener(
'click',
function (event) {
event.stopPropagation();
if (
dropdown.classList.contains(
'is-open'
)
) {
closeMenu();
} else {
openMenu();
}
}
);
/*
* Don't close while interacting
* inside the dropdown.
*/
menu.addEventListener(
'click',
function (event) {
event.stopPropagation();
}
);
/*
* Click outside closes it.
*/
document.addEventListener(
'click',
function (event) {
if (
!dropdown.contains(
event.target
)
) {
closeMenu();
}
}
);
/*
* Escape closes it.
*/
document.addEventListener(
'keydown',
function (event) {
if (
event.key === 'Escape'
) {
closeMenu();
trigger.focus();
}
}
);
}
/* ========================================================
INITIALIZE ACCOUNT AREA
======================================================== */
function initializeUserArea() {
var list =
document.querySelector(
'.wp-user-menu-list'
);
if (!list) {
return;
}
createThemeToggle(list);
buildLoggedInUserMenu(list);
updateThemeButton();
}
/* ========================================================
APPLY SAVED THEME
======================================================== */
applyTheme(
getSavedTheme(),
false
);
/* ========================================================
START
======================================================== */
function initialize() {
initializeUserArea();
}
if (
document.readyState ===
'loading'
) {
document.addEventListener(
'DOMContentLoaded',
initialize
);
} else {
initialize();
}
})();