1
Fork 0

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() { function getSearchInput() {
return document.getElementsByClassName("search-input")[0]; 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() { function getHelpElement() {
buildHelperPopup(); buildHelperPopup();
return document.getElementById("help"); return document.getElementById("help");

View file

@ -1,5 +1,5 @@
// Local js definitions: // Local js definitions:
/* global getCurrentValue, updateLocalStorage, updateSystemTheme */ /* global getCurrentValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
(function () { (function () {
function changeSetting(settingName, value) { 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() { function setEvents() {
var elems = { var elems = {
toggles: document.getElementsByClassName("slider"), toggles: Array.prototype.slice.call(document.getElementsByClassName("slider")),
selects: document.getElementsByClassName("select-wrapper") selects: Array.prototype.slice.call(document.getElementsByClassName("select-wrapper")),
}; };
var i; var i;
@ -32,6 +47,8 @@
toggle.onchange = function() { toggle.onchange = function() {
changeSetting(this.id, this.checked); changeSetting(this.id, this.checked);
}; };
toggle.onkeyup = handleKey;
toggle.onkeyrelease = handleKey;
} }
} }
@ -50,5 +67,5 @@
} }
} }
setEvents(); window.addEventListener("DOMContentLoaded", setEvents);
})(); })();