bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Auto merge of #78876 - GuillaumeGomez:better-setting-keyboard-ux, r=jyn514

Browse source 
Make keyboard interactions in the settings menu more pleasant

#78868 improved the keyboard interactions with the settings page. This PR goes a bit further by allowing more than just "space" to toggle the checkboxes.

r? `@jyn514`
This commit is contained in:
bors 2020-12-01 09:58:59 +00:00
commit 0fa9d31c41
2 changed files with 63 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/librustdoc/html/static/main.js
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 IE 11 or Chrome for Android. 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];
}
@ -326,28 +349,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");

44
src/librustdoc/html/static/settings.js
View file

@ -1,5 +1,5 @@
// Local js definitions:
/* global getCurrentValue, updateLocalStorage, updateSystemTheme */
/* global getCurrentValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
(function () {
function changeSetting(settingName, value) {
@ -14,16 +14,24 @@
}
}
function setEvents() {
var elems = {
toggles: document.getElementsByClassName("slider"),
selects: document.getElementsByClassName("select-wrapper")
};
var i;
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;
}
}
if (elems.toggles && elems.toggles.length > 0) {
for (i = 0; i < elems.toggles.length; ++i) {
var toggle = elems.toggles[i].previousElementSibling;
function setEvents() {
onEachLazy(document.getElementsByClassName("slider"), function(elem) {
var toggle = elem.previousElementSibling;
var settingId = toggle.id;
var settingValue = getSettingValue(settingId);
if (settingValue !== null) {
@ -32,12 +40,11 @@
toggle.onchange = function() {
changeSetting(this.id, this.checked);
};
}
}
if (elems.selects && elems.selects.length > 0) {
for (i = 0; i < elems.selects.length; ++i) {
var select = elems.selects[i].getElementsByTagName("select")[0];
toggle.onkeyup = handleKey;
toggle.onkeyrelease = handleKey;
});
onEachLazy(document.getElementsByClassName("select-wrapper"), function(elem) {
var select = elem.getElementsByTagName("select")[0];
var settingId = select.id;
var settingValue = getSettingValue(settingId);
if (settingValue !== null) {
@ -46,9 +53,8 @@
select.onchange = function() {
changeSetting(this.id, this.value);
};
}
}
});
}
setEvents();
window.addEventListener("DOMContentLoaded", setEvents);
})();