mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 22:35:45 +00:00
86150d492d
Mostly based on Vector 2022. Now we target checkbox hacks by the HTML classes .mw-checkbox-hack-TYPE instead of defining each individually, which would make it more scalable.
119 lines
3.1 KiB
JavaScript
119 lines
3.1 KiB
JavaScript
const
|
|
checkboxHack = require( './checkboxHack.js' ),
|
|
CHECKBOX_HACK_CONTAINER_SELECTOR = '.mw-checkbox-hack-container',
|
|
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.mw-checkbox-hack-checkbox',
|
|
CHECKBOX_HACK_BUTTON_SELECTOR = '.mw-checkbox-hack-button',
|
|
CHECKBOX_HACK_TARGET_SELECTOR = '.mw-checkbox-hack-target';
|
|
|
|
/**
|
|
* Wait for first paint before calling this function.
|
|
* (see T234570#5779890, T246419).
|
|
*
|
|
* @param {Document} document
|
|
* @return {void}
|
|
*/
|
|
function enableCssAnimations( document ) {
|
|
document.documentElement.classList.add( 'citizen-animations-ready' );
|
|
}
|
|
|
|
/**
|
|
* Add the ability for users to toggle dropdown menus using the enter key (as
|
|
* well as space) using core's checkboxHack.
|
|
*
|
|
* Based on Vector
|
|
*/
|
|
function bind() {
|
|
// Search for all dropdown containers using the CHECKBOX_HACK_CONTAINER_SELECTOR.
|
|
const containers = document.querySelectorAll( CHECKBOX_HACK_CONTAINER_SELECTOR );
|
|
|
|
containers.forEach( ( container ) => {
|
|
const
|
|
checkbox = container.querySelector( CHECKBOX_HACK_CHECKBOX_SELECTOR ),
|
|
button = container.querySelector( CHECKBOX_HACK_BUTTON_SELECTOR ),
|
|
target = container.querySelector( CHECKBOX_HACK_TARGET_SELECTOR );
|
|
|
|
if ( !( checkbox && button && target ) ) {
|
|
return;
|
|
}
|
|
|
|
checkboxHack.bind( window, checkbox, button, target );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* T295085: Close all dropdown menus when page is unloaded to prevent them from
|
|
* being open when navigating back to a page.
|
|
*
|
|
* Based on Vector
|
|
*/
|
|
function bindCloseOnUnload() {
|
|
addEventListener( 'beforeunload', function () {
|
|
const checkboxes = document.querySelectorAll( CHECKBOX_HACK_CHECKBOX_SELECTOR + ':checked' );
|
|
|
|
checkboxes.forEach( ( checkbox ) => {
|
|
/** @type {HTMLInputElement} */ ( checkbox ).checked = false;
|
|
} );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Add a class to indicate that page title is outside of viewport
|
|
*
|
|
* @param {Document} document
|
|
* @return {void}
|
|
*/
|
|
function onTitleHidden( document ) {
|
|
const title = document.getElementById( 'firstHeading' );
|
|
|
|
if ( title ) {
|
|
const observer = new IntersectionObserver( ( entries ) => {
|
|
if ( !entries[ 0 ].isIntersecting ) {
|
|
document.body.classList.add( 'skin-citizen--titlehidden' );
|
|
} else {
|
|
document.body.classList.remove( 'skin-citizen--titlehidden' );
|
|
}
|
|
} );
|
|
observer.observe( title );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Window} window
|
|
* @return {void}
|
|
*/
|
|
function main( window ) {
|
|
const theme = require( './theme.js' ),
|
|
search = require( './search.js' ),
|
|
tocContainer = document.getElementById( 'toc' );
|
|
|
|
enableCssAnimations( window.document );
|
|
theme.init( window );
|
|
search.init( window );
|
|
onTitleHidden( window.document );
|
|
|
|
window.addEventListener( 'beforeunload', () => {
|
|
document.documentElement.classList.add( 'citizen-loading' );
|
|
}, false );
|
|
|
|
bind();
|
|
bindCloseOnUnload();
|
|
|
|
// Handle ToC
|
|
// TODO: There must be a cleaner way to do this
|
|
if ( tocContainer ) {
|
|
const toc = require( './tableOfContents.js' );
|
|
toc.init();
|
|
|
|
checkboxHack.bind(
|
|
window,
|
|
document.getElementById( 'toctogglecheckbox' ),
|
|
tocContainer.querySelector( '.toctogglelabel' ),
|
|
tocContainer.querySelector( 'ul' )
|
|
);
|
|
}
|
|
|
|
mw.loader.load( 'skins.citizen.preferences' );
|
|
}
|
|
|
|
main( window );
|