StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-28 00:01:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: hide menu when clicked outside

Browse source
This commit is contained in:
alistair3149 2021-01-21 21:08:55 -05:00
parent f995756747
commit 3ba3a0cb8d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
3 changed files with 45 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
resources/skins.citizen.scripts/checkboxHack.js Normal file
View file

@ -0,0 +1,40 @@
var DRAWER_ID = 'mw-drawer',
DRAWER_CHECKBOX_ID = 'mw-drawer-checkbox',
PERSONAL_MENU_ID = 'p-personal',
PERSONAL_MENU_CHECKBOX_ID = 'personalmenu-checkbox';
/**
* Uncheck CSS hack checkbox when clicked outside
*
* @param {HTMLElement} element
* @param {HTMLElement} checkbox
*/
function uncheckOnClickOutside( element, checkbox ) {
var listener = function ( e ) {
if ( e.target !== checkbox && e.target !== element ) {
checkbox.checked = false;
document.removeEventListener( 'click', listener );
}
};
checkbox.addEventListener( 'click', function () {
if ( this.checked ) {
document.addEventListener( 'click', listener );
}
} );
}
/**
* @return {void}
*/
function init() {
var drawer = document.getElementById( DRAWER_ID ),
drawerCheckbox = document.getElementById( DRAWER_CHECKBOX_ID ),
personalMenu = document.getElementById( PERSONAL_MENU_ID ),
personalMenuCheckbox = document.getElementById( PERSONAL_MENU_CHECKBOX_ID );
uncheckOnClickOutside( drawer, drawerCheckbox );
uncheckOnClickOutside( personalMenu, personalMenuCheckbox );
}
module.exports = {
init: init
};

4
resources/skins.citizen.scripts/skin.js
View file

@ -1,5 +1,6 @@
var themeToggle = require( './themeToggle.js' ),
search = require( './search.js' );
search = require( './search.js' ),
checkboxHack = require( './checkboxHack.js' );
/**
* @return {void}
@ -7,6 +8,7 @@ var themeToggle = require( './themeToggle.js' ),
function main() {
themeToggle.init();
search.init();
checkboxHack.init();
}
main();

3
skin.json
View file

@ -130,7 +130,8 @@
"packageFiles": [
"resources/skins.citizen.scripts/skin.js",
"resources/skins.citizen.scripts/themeToggle.js",
"resources/skins.citizen.scripts/search.js"
"resources/skins.citizen.scripts/search.js",
"resources/skins.citizen.scripts/checkboxHack.js"
],
"dependencies": [
"mediawiki.page.ready",