feat: tweak search shortcut key behavior

This commit is contained in:
alistair3149 2021-04-12 15:55:59 -04:00
parent 670641e903
commit 5a3b64252d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 25 additions and 12 deletions

View file

@ -61,9 +61,6 @@ function init() {
personalMenu = document.getElementById( PERSONAL_MENU_ID ),
personalMenuButton = document.getElementById( PERSONAL_MENU_BUTTON_ID ),
personalMenuCheckbox = document.getElementById( PERSONAL_MENU_CHECKBOX_ID ),
search = document.getElementById( 'searchform' ),
searchButton = document.getElementById( 'search-toggle' ),
searchCheckbox = document.getElementById( 'search-checkbox' ),
toc = document.getElementById( 'toc' ),
tocButton,
tocCheckbox,
@ -83,7 +80,6 @@ function init() {
uncheckOnClickOutside( clickableDrawerElements, drawerButton, drawerCheckbox );
uncheckOnClickOutside( personalMenu, personalMenuButton, personalMenuCheckbox );
uncheckOnClickOutside( search, searchButton, searchCheckbox );
/*
* This should be in ToC script

View file

@ -3,12 +3,12 @@ var searchToggle = document.getElementById( 'search-checkbox' ),
pageReady = require( ( 'mediawiki.page.ready' ) );
/**
* Focus in search box when search toggle checkbox is checked.
* Focus and unfocus in search box when search toggle checkbox is toggled.
*
* @constructor
*/
function searchInputFocus() {
if ( searchToggle.checked !== false ) {
if ( searchToggle.checked === true ) {
searchInput.focus();
}
}
@ -24,16 +24,32 @@ function searchToggleCheck() {
}
}
/**
* Uncheck search toggle checkbox when search box is not in focus.
*
* @constructor
*/
function searchToggleUnCheck() {
if ( searchToggle.checked === true ) {
searchToggle.checked = false;
}
}
/**
* Toggle search bar with slash
*
* @constructor
*/
function slashToggle() {
if ( event.key === '/' && searchToggle.checked === false ) {
searchToggle.checked = true;
searchInput.focus();
searchInput.value = '';
function keyboardEvents() {
if ( searchToggle.checked === false ) {
if ( event.key === '/' && !event.target.matches( 'input' ) ) {
searchInput.focus();
searchInput.value = '';
}
} else {
if ( event.key === 'Escape' ) {
searchInput.blur();
}
}
}
@ -43,7 +59,8 @@ function slashToggle() {
function init() {
searchToggle.addEventListener( 'click', searchInputFocus );
searchInput.addEventListener( 'focus', searchToggleCheck );
document.addEventListener( 'keyup', slashToggle );
searchInput.addEventListener( 'blur', searchToggleUnCheck );
document.addEventListener( 'keyup', keyboardEvents );
pageReady.loadSearchModule(
// Decide between new Citizen implementation or core
mw.config.get( 'wgCitizenEnableSearch' ) ?