[Refactor] Separate sidebar persistence code from checkbox hack code

Change-Id: I5d7d8897f656419a71b1327c37e88c9dd7f0767c
This commit is contained in:
Jon Robson 2022-06-10 13:45:18 -07:00
parent 304027073a
commit de0729e604
4 changed files with 73 additions and 54 deletions

View File

@ -1,27 +1,21 @@
/**
* JavaScript enhancement to the collapsible sidebar.
* JavaScript enhancement for appropriately marked checkbox hacks
*
* The sidebar provides basic show/hide functionality with CSS
* The checkbox hack in Vector provides basic show/hide functionality with CSS
* but JavaScript is used for progressive enhancements.
*
* Enhancements include:
* - Update `aria-role`s based on expanded/collapsed state.
* - Update button icon based on expanded/collapsed state.
* - Persist the sidebar state for logged-in users.
*
*/
/** @interface MwApiConstructor */
/** @interface CheckboxHack */
/** @interface MwApi */
var checkboxHack = /** @type {CheckboxHack} */ require( /** @type {string} */( 'mediawiki.page.ready' ) ).checkboxHack,
SIDEBAR_BUTTON_ID = 'mw-sidebar-button',
SIDEBAR_CHECKBOX_ID = 'mw-sidebar-checkbox',
SIDEBAR_PREFERENCE_NAME = 'VectorSidebarVisible';
var debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce;
/** @type {MwApi} */ var api;
SIDEBAR_CHECKBOX_ID = 'mw-sidebar-checkbox';
/**
* Revise the button's `aria-expanded` state to match the checked state.
@ -117,45 +111,6 @@ function initCheckboxHack( checkbox, button ) {
}
}
/**
* Execute a debounced API request to save the sidebar user preference.
* The request is meant to fire 1000 milliseconds after the last click on
* the sidebar button.
*
* @param {HTMLInputElement} checkbox
* @return {any}
*/
function saveSidebarState( checkbox ) {
return debounce( function () {
api = api || new mw.Api();
api.saveOption( SIDEBAR_PREFERENCE_NAME, checkbox.checked ? 1 : 0 );
// Trigger a resize event so other parts of the page can adapt:
var event;
if ( typeof Event === 'function' ) {
event = new Event( 'resize' );
} else {
// IE11
event = window.document.createEvent( 'UIEvents' );
event.initUIEvent( 'resize', true, false, window, 0 );
}
window.dispatchEvent( event );
}, 1000 );
}
/**
* Bind the event handler that saves the sidebar state to the click event
* on the sidebar button.
*
* @param {HTMLElement|null} checkbox
* @param {HTMLElement|null} button
*/
function bindSidebarClickEvent( checkbox, button ) {
if ( checkbox instanceof HTMLInputElement && button ) {
checkbox.addEventListener( 'input', saveSidebarState( checkbox ) );
}
}
/**
* Initialize all JavaScript sidebar enhancements.
*
@ -166,9 +121,6 @@ function init( window ) {
button = window.document.getElementById( SIDEBAR_BUTTON_ID );
initCheckboxHack( checkbox, button );
if ( mw.config.get( 'wgUserName' ) && !mw.config.get( 'wgVectorDisableSidebarPersistence' ) ) {
bindSidebarClickEvent( checkbox, button );
}
}
module.exports = {

View File

@ -0,0 +1,64 @@
/**
* JavaScript enhancement to persist the sidebar state for logged-in users.
*
*/
/** @interface MwApi */
var /** @type {MwApi} */api,
SIDEBAR_BUTTON_ID = 'mw-sidebar-button',
debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce,
SIDEBAR_CHECKBOX_ID = 'mw-sidebar-checkbox',
SIDEBAR_PREFERENCE_NAME = 'VectorSidebarVisible';
/**
* Execute a debounced API request to save the sidebar user preference.
* The request is meant to fire 1000 milliseconds after the last click on
* the sidebar button.
*
* @param {HTMLInputElement} checkbox
* @return {any}
*/
function saveSidebarState( checkbox ) {
return debounce( function () {
api = api || new mw.Api();
api.saveOption( SIDEBAR_PREFERENCE_NAME, checkbox.checked ? 1 : 0 );
// Trigger a resize event so other parts of the page can adapt:
var event;
if ( typeof Event === 'function' ) {
event = new Event( 'resize' );
} else {
// IE11
event = window.document.createEvent( 'UIEvents' );
event.initUIEvent( 'resize', true, false, window, 0 );
}
window.dispatchEvent( event );
}, 1000 );
}
/**
* Bind the event handler that saves the sidebar state to the click event
* on the sidebar button.
*
* @param {HTMLElement|null} checkbox
* @param {HTMLElement|null} button
*/
function bindSidebarClickEvent( checkbox, button ) {
if ( checkbox instanceof HTMLInputElement && button ) {
checkbox.addEventListener( 'input', saveSidebarState( checkbox ) );
}
}
function init() {
var checkbox = window.document.getElementById( SIDEBAR_CHECKBOX_ID ),
button = window.document.getElementById( SIDEBAR_BUTTON_ID );
if ( mw.config.get( 'wgUserName' ) && !mw.config.get( 'wgVectorDisableSidebarPersistence' ) ) {
bindSidebarClickEvent( checkbox, button );
}
}
module.exports = {
init: init
};

View File

@ -1,7 +1,8 @@
var languageButton = require( './languageButton.js' ),
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
dropdownMenus = require( './dropdownMenus.js' ),
sidebar = require( './sidebar.js' );
sidebarPersistence = require( './sidebarPersistence.js' ),
checkbox = require( './checkbox.js' );
/**
* Wait for first paint before calling this function. That's its whole purpose.
@ -41,7 +42,8 @@ function enableCssAnimations( document ) {
*/
function main( window ) {
enableCssAnimations( window.document );
sidebar.init( window );
sidebarPersistence.init();
checkbox.init( window );
initSearchLoader( document );
languageButton();
dropdownMenus();

View File

@ -322,7 +322,8 @@
"callback": "MediaWiki\\Skins\\Vector\\Hooks::getVectorResourceLoaderConfig"
},
"resources/skins.vector.js/dropdownMenus.js",
"resources/skins.vector.js/sidebar.js",
"resources/skins.vector.js/checkbox.js",
"resources/skins.vector.js/sidebarPersistence.js",
"resources/skins.vector.js/languageButton.js",
"resources/skins.vector.js/searchLoader.js"
],