mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 15:45:55 +08:00
Bugfix: Help screen broken tabbing shortcuts
This commit is contained in:
parent
8b116fa8ba
commit
64a7b82408
|
@ -8,29 +8,44 @@ class KeyboardShortcutsHelpPopupView extends AbstractViewPopup {
|
||||||
}
|
}
|
||||||
|
|
||||||
onBuild(dom) {
|
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', 'shift',
|
||||||
shortcuts.add('tab,arrowleft,arrowright', '',
|
shortcuts.add('tab,arrowleft,arrowright', '',
|
||||||
Scope.KeyboardShortcutsHelp,
|
Scope.KeyboardShortcutsHelp,
|
||||||
((event, handler)=>{
|
event => {
|
||||||
if (event && handler) {
|
let next = 0;
|
||||||
const tabs = dom.querySelectorAll('.nav.nav-tabs > li'),
|
tabs.forEach((node, index) => {
|
||||||
last = tabs.length - 1;
|
if (node.matches('.active')) {
|
||||||
let next = 0;
|
if (['Tab','ArrowRight'].includes(event.key)) {
|
||||||
tabs.forEach((node, index) => {
|
next = index < last ? index+1 : 0;
|
||||||
if (node.matches('.active')) {
|
} else {
|
||||||
if (['tab','arrowright'].includes(handler.shortcut)) {
|
next = index ? index-1 : last;
|
||||||
next = index < last ? index+1 : 0;
|
|
||||||
} else {
|
|
||||||
next = index ? index-1 : last;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
|
||||||
tabs[next].querySelector('a[data-toggle="tab"]').Tab.show();
|
show(tabs[next]);
|
||||||
}
|
return false;
|
||||||
}).throttle(100)
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,32 +10,25 @@ const
|
||||||
toArray = v => Array.isArray(v) ? v : v.split(/\s*,\s*/),
|
toArray = v => Array.isArray(v) ? v : v.split(/\s*,\s*/),
|
||||||
|
|
||||||
keydown = event => {
|
keydown = event => {
|
||||||
let key = (event.key || event.code || '').toLowerCase().replace(' ','space'),
|
let key = (event.key || '').toLowerCase().replace(' ','space'),
|
||||||
scopes = [];
|
scopes = [];
|
||||||
scope[key] && scopes.push(scope[key]);
|
scope[key] && scopes.push(scope[key]);
|
||||||
_scope !== 'all' && _scopes.all[key] && scopes.push(_scopes.all[key]);
|
_scope !== 'all' && _scopes.all[key] && scopes.push(_scopes.all[key]);
|
||||||
if (scopes.length && win.shortcuts.filter(event.target)) {
|
if (scopes.length && win.shortcuts.filter(event.target)) {
|
||||||
let modifiers = [];
|
let modifiers = ['alt','ctrl','meta','shift'].filter(v => event[v+'Key']).join('+');
|
||||||
event.altKey && modifiers.push('alt');
|
|
||||||
event.ctrlKey && modifiers.push('ctrl');
|
|
||||||
event.metaKey && modifiers.push('meta');
|
|
||||||
event.shiftKey && modifiers.push('shift');
|
|
||||||
modifiers = modifiers.join('+');
|
|
||||||
scopes.forEach(actions => {
|
scopes.forEach(actions => {
|
||||||
if (actions[modifiers]) {
|
// for each potential shortcut
|
||||||
// for each potential shortcut
|
actions[modifiers] && actions[modifiers].forEach(cmd => {
|
||||||
actions[modifiers].forEach(cmd => {
|
try {
|
||||||
try {
|
// call the handler and stop the event if neccessary
|
||||||
// call the handler and stop the event if neccessary
|
if (!event.defaultPrevented && cmd(event) === false) {
|
||||||
if (!event.defaultPrevented && cmd(event) === false) {
|
event.preventDefault();
|
||||||
event.preventDefault();
|
event.stopPropagation();
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
}
|
||||||
});
|
} catch (e) {
|
||||||
}
|
console.error(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
22
vendors/bootstrap/js/bootstrap.native.js
vendored
22
vendors/bootstrap/js/bootstrap.native.js
vendored
|
@ -88,28 +88,6 @@
|
||||||
self.toggle = () => element.open ? self.hide() : self.show();
|
self.toggle = () => element.open ? self.hide() : self.show();
|
||||||
open(false);
|
open(false);
|
||||||
element.Dropdown = self;
|
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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue