Pull theme picker keyboard code into main.js
Most of the code in mod.rs should be code that really needs to have the list of available themes inlined into it.
This commit is contained in:
parent
90c7c634e3
commit
17b8ca952b
@ -807,58 +807,8 @@ function handleThemeButtonsBlur(e) {{
|
||||
}}
|
||||
}}
|
||||
|
||||
function handleThemeKeyDown(e) {{
|
||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {{ return; }}
|
||||
if (!themePicker.parentNode.contains(e.target)) {{ return; }}
|
||||
var active = document.activeElement;
|
||||
switch (e.key) {{
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
if (active.previousElementSibling && e.target.id !== "theme-picker") {{
|
||||
active.previousElementSibling.focus();
|
||||
}} else {{
|
||||
showThemeButtonState();
|
||||
themes.lastElementChild.focus();
|
||||
}}
|
||||
break;
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
if (active.nextElementSibling && e.target.id !== "theme-picker") {{
|
||||
active.nextElementSibling.focus();
|
||||
}} else {{
|
||||
showThemeButtonState();
|
||||
themes.firstElementChild.focus();
|
||||
}}
|
||||
break;
|
||||
case "Enter":
|
||||
case "Return":
|
||||
case "Space":
|
||||
if (e.target.id === "theme-picker" && themes.style.display === "none") {{
|
||||
e.preventDefault();
|
||||
showThemeButtonState();
|
||||
themes.firstElementChild.focus();
|
||||
}}
|
||||
break;
|
||||
case "Home":
|
||||
e.preventDefault();
|
||||
themes.firstElementChild.focus();
|
||||
break;
|
||||
case "End":
|
||||
e.preventDefault();
|
||||
themes.lastElementChild.focus();
|
||||
break;
|
||||
// The escape key is handled in main.js, instead of here, for two reasons:
|
||||
//
|
||||
// 1 Escape should close the menu, even if it's not focused.
|
||||
// 2 The escape event handler is bound to both keydown and keypress, to work
|
||||
// around browser inconsistencies. That sort of logic doesn't apply to the
|
||||
// rest of these keybindings.
|
||||
}}
|
||||
}};
|
||||
|
||||
themePicker.onclick = switchThemeButtonState;
|
||||
themePicker.onblur = handleThemeButtonsBlur;
|
||||
document.addEventListener("keydown", handleThemeKeyDown);
|
||||
{}.forEach(function(item) {{
|
||||
var but = document.createElement("button");
|
||||
but.textContent = item;
|
||||
|
@ -4,7 +4,7 @@
|
||||
// Local js definitions:
|
||||
/* global addClass, getCurrentValue, hasClass */
|
||||
/* global onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
|
||||
/* global hideThemeButtonState */
|
||||
/* global hideThemeButtonState, showThemeButtonState */
|
||||
|
||||
if (!String.prototype.startsWith) {
|
||||
String.prototype.startsWith = function(searchString, position) {
|
||||
@ -48,6 +48,14 @@ function getSearchElement() {
|
||||
return document.getElementById("search");
|
||||
}
|
||||
|
||||
function getThemesElement() {
|
||||
return document.getElementById("theme-choices");
|
||||
}
|
||||
|
||||
function getThemePickerElement() {
|
||||
return document.getElementById("theme-picker");
|
||||
}
|
||||
|
||||
// Sets the focus on the search bar at the top of the page
|
||||
function focusSearchBar() {
|
||||
getSearchInput().focus();
|
||||
@ -406,10 +414,60 @@ function defocusSearchBar() {
|
||||
case "?":
|
||||
displayHelp(true, ev);
|
||||
break;
|
||||
|
||||
default:
|
||||
var themePicker = getThemePickerElement();
|
||||
if (themePicker.parentNode.contains(ev.target)) {
|
||||
handleThemeKeyDown(ev);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleThemeKeyDown(ev) {
|
||||
var active = document.activeElement;
|
||||
var themes = getThemesElement();
|
||||
switch (getVirtualKey(ev)) {
|
||||
case "ArrowUp":
|
||||
ev.preventDefault();
|
||||
if (active.previousElementSibling && ev.target.id !== "theme-picker") {
|
||||
active.previousElementSibling.focus();
|
||||
} else {
|
||||
showThemeButtonState();
|
||||
themes.lastElementChild.focus();
|
||||
}
|
||||
break;
|
||||
case "ArrowDown":
|
||||
ev.preventDefault();
|
||||
if (active.nextElementSibling && ev.target.id !== "theme-picker") {
|
||||
active.nextElementSibling.focus();
|
||||
} else {
|
||||
showThemeButtonState();
|
||||
themes.firstElementChild.focus();
|
||||
}
|
||||
break;
|
||||
case "Enter":
|
||||
case "Return":
|
||||
case "Space":
|
||||
if (ev.target.id === "theme-picker" && themes.style.display === "none") {
|
||||
ev.preventDefault();
|
||||
showThemeButtonState();
|
||||
themes.firstElementChild.focus();
|
||||
}
|
||||
break;
|
||||
case "Home":
|
||||
ev.preventDefault();
|
||||
themes.firstElementChild.focus();
|
||||
break;
|
||||
case "End":
|
||||
ev.preventDefault();
|
||||
themes.lastElementChild.focus();
|
||||
break;
|
||||
// The escape key is handled in handleEscape, not here,
|
||||
// so that pressing escape will close the menu even if it isn't focused
|
||||
}
|
||||
}
|
||||
|
||||
function findParentElement(elem, tagName) {
|
||||
do {
|
||||
if (elem && elem.tagName === tagName) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user