Bugfix: Help screen broken tabbing shortcuts

This commit is contained in:
djmaze 2021-08-12 20:33:13 +02:00
parent 8b116fa8ba
commit 64a7b82408
3 changed files with 45 additions and 59 deletions

View file

@ -8,29 +8,44 @@ class KeyboardShortcutsHelpPopupView extends AbstractViewPopup {
}
onBuild(dom) {
dom.querySelectorAll('a[data-toggle="tab"]').forEach(node => node.Tab || new BSN.Tab(node));
const tabs = dom.querySelectorAll('.nav.nav-tabs > li'),
last = tabs.length - 1,
show = tab => {
if (!tab.classList.contains('active')) {
const previous = tab.parentElement.querySelector('.active');
previous.classList.remove('active');
dom.querySelector(previous.firstElementChild.getAttribute('href')).classList.remove('active');
tab.classList.add('active');
dom.querySelector(tab.firstElementChild.getAttribute('href')).classList.add('active');
}
};
tabs.forEach(node => {
node.addEventListener('click', e => {
e.preventDefault();
show(node);
});
});
// shortcuts.add('tab', 'shift',
shortcuts.add('tab,arrowleft,arrowright', '',
Scope.KeyboardShortcutsHelp,
((event, handler)=>{
if (event && handler) {
const tabs = dom.querySelectorAll('.nav.nav-tabs > li'),
last = tabs.length - 1;
let next = 0;
tabs.forEach((node, index) => {
if (node.matches('.active')) {
if (['tab','arrowright'].includes(handler.shortcut)) {
next = index < last ? index+1 : 0;
} else {
next = index ? index-1 : last;
}
event => {
let next = 0;
tabs.forEach((node, index) => {
if (node.matches('.active')) {
if (['Tab','ArrowRight'].includes(event.key)) {
next = index < last ? index+1 : 0;
} else {
next = index ? index-1 : last;
}
});
}
});
tabs[next].querySelector('a[data-toggle="tab"]').Tab.show();
}
}).throttle(100)
show(tabs[next]);
return false;
}
);
}
}

View file

@ -10,32 +10,25 @@ const
toArray = v => Array.isArray(v) ? v : v.split(/\s*,\s*/),
keydown = event => {
let key = (event.key || event.code || '').toLowerCase().replace(' ','space'),
let key = (event.key || '').toLowerCase().replace(' ','space'),
scopes = [];
scope[key] && scopes.push(scope[key]);
_scope !== 'all' && _scopes.all[key] && scopes.push(_scopes.all[key]);
if (scopes.length && win.shortcuts.filter(event.target)) {
let modifiers = [];
event.altKey && modifiers.push('alt');
event.ctrlKey && modifiers.push('ctrl');
event.metaKey && modifiers.push('meta');
event.shiftKey && modifiers.push('shift');
modifiers = modifiers.join('+');
let modifiers = ['alt','ctrl','meta','shift'].filter(v => event[v+'Key']).join('+');
scopes.forEach(actions => {
if (actions[modifiers]) {
// for each potential shortcut
actions[modifiers].forEach(cmd => {
try {
// call the handler and stop the event if neccessary
if (!event.defaultPrevented && cmd(event) === false) {
event.preventDefault();
event.stopPropagation();
}
} catch (e) {
console.error(e);
// for each potential shortcut
actions[modifiers] && actions[modifiers].forEach(cmd => {
try {
// call the handler and stop the event if neccessary
if (!event.defaultPrevented && cmd(event) === false) {
event.preventDefault();
event.stopPropagation();
}
});
}
} catch (e) {
console.error(e);
}
});
});
}
};

View file

@ -88,28 +88,6 @@
self.toggle = () => element.open ? self.hide() : self.show();
open(false);
element.Dropdown = self;
},
Tab: class {
constructor(element) {
this.element = element
element.Tab = this;
element.addEventListener('click', e => {
e.preventDefault();
this.show();
});
}
show() {
const el = this.element, li = el.closest('li');
if (!li.classList.contains('active')) {
const previous = el.closest('ul').querySelector('.active a');
previous.closest('li').classList.remove('active');
doc.querySelector(previous.getAttribute('href')).classList.remove('active');
li.classList.add('active');
doc.querySelector(el.getAttribute('href')).classList.add('active');
}
}
}
};