Make keyboard interactions in the settings menu more pleasant
This commit is contained in:
parent
12f0dba618
commit
704050da23
2 changed files with 44 additions and 26 deletions
|
@ -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");
|
||||||
|
|
|
@ -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);
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue