Make keyboard interactions in the settings menu more pleasant

This commit is contained in:
Guillaume Gomez 2020-11-08 14:49:29 +01:00
parent 12f0dba618
commit 704050da23
2 changed files with 44 additions and 26 deletions

View File

@ -40,6 +40,29 @@ if (!DOMTokenList.prototype.remove) {
};
}
// Gets the human-readable string for the virtual-key code of the
// given KeyboardEvent, ev.
//
// This function is meant as a polyfill for KeyboardEvent#key,
// since it is not supported in Trident. We also test for
// KeyboardEvent#keyCode because the handleShortcut handler is
// also registered for the keydown event, because Blink doesn't fire
// keypress on hitting the Escape key.
//
// So I guess you could say things are getting pretty interoperable.
function getVirtualKey(ev) {
if ("key" in ev && typeof ev.key != "undefined") {
return ev.key;
}
var c = ev.charCode || ev.keyCode;
if (c == 27) {
return "Escape";
}
return String.fromCharCode(c);
}
function getSearchInput() {
return document.getElementsByClassName("search-input")[0];
}
@ -323,28 +346,6 @@ function defocusSearchBar() {
}
}
// Gets the human-readable string for the virtual-key code of the
// given KeyboardEvent, ev.
//
// This function is meant as a polyfill for KeyboardEvent#key,
// since it is not supported in Trident. We also test for
// KeyboardEvent#keyCode because the handleShortcut handler is
// also registered for the keydown event, because Blink doesn't fire
// keypress on hitting the Escape key.
//
// So I guess you could say things are getting pretty interoperable.
function getVirtualKey(ev) {
if ("key" in ev && typeof ev.key != "undefined") {
return ev.key;
}
var c = ev.charCode || ev.keyCode;
if (c == 27) {
return "Escape";
}
return String.fromCharCode(c);
}
function getHelpElement() {
buildHelperPopup();
return document.getElementById("help");

View File

@ -1,5 +1,5 @@
// Local js definitions:
/* global getCurrentValue, updateLocalStorage, updateSystemTheme */
/* global getCurrentValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
(function () {
function changeSetting(settingName, value) {
@ -14,10 +14,25 @@
}
}
function handleKey(ev) {
// Don't interfere with browser shortcuts
if (ev.ctrlKey || ev.altKey || ev.metaKey) {
return;
}
switch (getVirtualKey(ev)) {
case "Enter":
case "Return":
case "Space":
ev.target.checked = !ev.target.checked;
ev.preventDefault();
break;
}
}
function setEvents() {
var elems = {
toggles: document.getElementsByClassName("slider"),
selects: document.getElementsByClassName("select-wrapper")
toggles: Array.prototype.slice.call(document.getElementsByClassName("slider")),
selects: Array.prototype.slice.call(document.getElementsByClassName("select-wrapper")),
};
var i;
@ -32,6 +47,8 @@
toggle.onchange = function() {
changeSetting(this.id, this.checked);
};
toggle.onkeyup = handleKey;
toggle.onkeyrelease = handleKey;
}
}
@ -50,5 +67,5 @@
}
}
setEvents();
window.addEventListener("DOMContentLoaded", setEvents);
})();