mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2025-01-07 10:20:26 +00:00
Common shortcuts
p, Alt + ←: Previous hypha n, Alt + →: Next hypha s, Alt + ↑: Parent hypha gh: Home hypha gl: List of hyphae gr: Recent changes gu: User's hypha g[1-9]: First 9 header links Follow-up to the previous commit message: actually, you can press them simultaneously too, just tested it. Ilya approves.
This commit is contained in:
handlerug
parent
aeb05336e9
commit
3a2678df4d
@ -1,94 +1,134 @@
|
|||||||
const $ = document.querySelector.bind(document);
|
(() => {
|
||||||
const $$ = document.querySelectorAll.bind(document);
|
const $ = document.querySelector.bind(document);
|
||||||
|
const $$ = (...args) => Array.prototype.slice.call(document.querySelectorAll(...args));
|
||||||
|
|
||||||
function keyEventToShortcut(event) {
|
function keyEventToShortcut(event) {
|
||||||
let elideShift = event.key.toUpperCase() === event.key && event.shiftKey;
|
let elideShift = event.key.toUpperCase() === event.key && event.shiftKey;
|
||||||
return (event.ctrlKey ? 'Ctrl+' : '') +
|
return (event.ctrlKey ? 'Ctrl+' : '') +
|
||||||
(event.altKey ? 'Alt+' : '') +
|
(event.altKey ? 'Alt+' : '') +
|
||||||
(event.metaKey ? 'Meta+' : '') +
|
(event.metaKey ? 'Meta+' : '') +
|
||||||
(!elideShift && event.shiftKey ? 'Shift+' : '') +
|
(!elideShift && event.shiftKey ? 'Shift+' : '') +
|
||||||
event.key;
|
event.key;
|
||||||
}
|
|
||||||
|
|
||||||
function isTextField(element) {
|
|
||||||
let name = element.nodeName.toLowerCase();
|
|
||||||
return name === 'textarea' ||
|
|
||||||
name === 'select' ||
|
|
||||||
(name === 'input' && !['submit', 'reset', 'checkbox', 'radio'].includes(element.type)) ||
|
|
||||||
element.isContentEditable;
|
|
||||||
}
|
|
||||||
|
|
||||||
class ShortcutHandler {
|
|
||||||
constructor(element, filter = () => {}) {
|
|
||||||
this.element = element;
|
|
||||||
this.map = {};
|
|
||||||
this.active = this.map;
|
|
||||||
this.filter = filter;
|
|
||||||
this.timeout = null;
|
|
||||||
|
|
||||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
||||||
this.resetActive = this.resetActive.bind(this);
|
|
||||||
this.addEventListeners();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
function isTextField(element) {
|
||||||
this.element.addEventListener('keydown', this.handleKeyDown);
|
let name = element.nodeName.toLowerCase();
|
||||||
|
return name === 'textarea' ||
|
||||||
|
name === 'select' ||
|
||||||
|
(name === 'input' && !['submit', 'reset', 'checkbox', 'radio'].includes(element.type)) ||
|
||||||
|
element.isContentEditable;
|
||||||
}
|
}
|
||||||
|
|
||||||
add(text, action) {
|
class ShortcutHandler {
|
||||||
let shortcuts = text.split(',').map(shortcut => shortcut.trim().split(' '));
|
constructor(element, filter = () => {}) {
|
||||||
|
this.element = element;
|
||||||
|
this.map = {};
|
||||||
|
this.active = this.map;
|
||||||
|
this.filter = filter;
|
||||||
|
this.timeout = null;
|
||||||
|
|
||||||
for (let shortcut of shortcuts) {
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||||
let node = this.map;
|
this.resetActive = this.resetActive.bind(this);
|
||||||
for (let key of shortcut) {
|
this.addEventListeners();
|
||||||
if (!node[key]) {
|
}
|
||||||
node[key] = {};
|
|
||||||
}
|
addEventListeners() {
|
||||||
node = node[key];
|
this.element.addEventListener('keydown', this.handleKeyDown);
|
||||||
if (node.action) {
|
}
|
||||||
delete node.action;
|
|
||||||
|
add(text, action, description = null) {
|
||||||
|
let shortcuts = text.split(',').map(shortcut => shortcut.trim().split(' '));
|
||||||
|
|
||||||
|
for (let shortcut of shortcuts) {
|
||||||
|
let node = this.map;
|
||||||
|
for (let key of shortcut) {
|
||||||
|
if (!node[key]) {
|
||||||
|
node[key] = {};
|
||||||
|
}
|
||||||
|
node = node[key];
|
||||||
|
if (node.action) {
|
||||||
|
delete node.action;
|
||||||
|
delete node.shortcut;
|
||||||
|
delete node.description;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
node.action = action;
|
||||||
|
node.shortcut = shortcut;
|
||||||
|
node.description = description;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleKeyDown(event) {
|
||||||
|
if (event.defaultPrevented) return;
|
||||||
|
if (['Control', 'Alt', 'Shift', 'Meta'].includes(event.key)) return;
|
||||||
|
if (!this.filter(event)) return;
|
||||||
|
|
||||||
|
let shortcut = keyEventToShortcut(event);
|
||||||
|
|
||||||
|
if (!this.active[shortcut]) {
|
||||||
|
this.resetActive();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
node.action = action;
|
this.active = this.active[shortcut];
|
||||||
|
if (this.active.action) {
|
||||||
|
this.active.action(event);
|
||||||
|
this.resetActive();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.timeout) clearTimeout(this.timeout);
|
||||||
|
this.timeout = window.setTimeout(this.resetActive, 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetActive() {
|
||||||
|
this.active = this.map;
|
||||||
|
if (this.timeout) {
|
||||||
|
clearTimeout(this.timeout)
|
||||||
|
this.timeout = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleKeyDown(event) {
|
function bindElementFactory(handler) {
|
||||||
if (event.defaultPrevented) return;
|
return (shortcut, element, ...other) => {
|
||||||
if (['Control', 'Alt', 'Shift', 'Meta'].includes(event.key)) return;
|
element = typeof element === 'string' ? $(element) : element;
|
||||||
if (!this.filter(event)) return;
|
if (!element) return;
|
||||||
|
handler.add(shortcut, () => {
|
||||||
let shortcut = keyEventToShortcut(event);
|
if (isTextField(element)) {
|
||||||
|
element.focus();
|
||||||
if (!this.active[shortcut]) {
|
} else {
|
||||||
this.resetActive();
|
element.click();
|
||||||
return;
|
}
|
||||||
}
|
}, ...other);
|
||||||
|
};
|
||||||
this.active = this.active[shortcut];
|
|
||||||
if (this.active.action) {
|
|
||||||
this.active.action(event);
|
|
||||||
this.resetActive();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.timeout) clearTimeout(this.timeout);
|
|
||||||
this.timeout = window.setTimeout(this.resetActive, 1500);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
resetActive() {
|
function bindLinkFactory(handler) {
|
||||||
this.active = this.map;
|
return (shortcut, link, ...other) => handler.add(shortcut, () => window.location.href = link, ...other);
|
||||||
if (this.timeout) {
|
|
||||||
clearTimeout(this.timeout)
|
|
||||||
this.timeout = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let notFormField = event => !(event.target instanceof Node && isTextField(event.target));
|
window.addEventListener('load', () => {
|
||||||
let globalShortcuts = new ShortcutHandler(document, notFormField);
|
let notFormField = event => !(event.target instanceof Node && isTextField(event.target));
|
||||||
|
let globalShortcuts = new ShortcutHandler(document, notFormField);
|
||||||
|
|
||||||
globalShortcuts.add('p', () => alert('hello p'));
|
let bindElement = bindElementFactory(globalShortcuts);
|
||||||
globalShortcuts.add('h', () => alert('hi h!'));
|
let bindLink = bindLinkFactory(globalShortcuts);
|
||||||
globalShortcuts.add('g h', () => alert('hi g h!!!'));
|
|
||||||
|
bindElement('p, Alt+ArrowLeft', '.prevnext__prev', 'Next hypha');
|
||||||
|
bindElement('n, Alt+ArrowRight', '.prevnext__next', 'Previous hypha');
|
||||||
|
bindElement('s, Alt+ArrowTop', $$('.navi-title a').slice(1, -1).slice(-1)[0], 'Parent hypha');
|
||||||
|
|
||||||
|
bindLink('g h', '/', 'Home');
|
||||||
|
bindLink('g l', '/list/', 'List of hyphae');
|
||||||
|
bindLink('g r', '/recent-changes/', 'Recent changes');
|
||||||
|
|
||||||
|
bindElement('g u', '.header-links__entry_user .header-links__link', 'Your profile′s hypha')
|
||||||
|
|
||||||
|
let headerLinks = $$('.header-links__link');
|
||||||
|
for (let i = 1; i <= headerLinks.length && i < 10; i++) {
|
||||||
|
bindElement(`g ${i}`, headerLinks[i-1], `Header link #${i}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue
Block a user