2020-08-14 04:58:41 +08:00
|
|
|
import { KeyState } from 'Common/Enums';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
import { popup } from 'Knoin/Knoin';
|
|
|
|
import { AbstractViewNext } from 'Knoin/AbstractViewNext';
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-09-10 06:38:16 +08:00
|
|
|
@popup({
|
2016-08-17 06:01:20 +08:00
|
|
|
name: 'View/Popup/KeyboardShortcutsHelp',
|
|
|
|
templateID: 'PopupsKeyboardShortcutsHelp'
|
|
|
|
})
|
2019-07-05 03:19:24 +08:00
|
|
|
class KeyboardShortcutsHelpPopupView extends AbstractViewNext {
|
2016-08-17 06:01:20 +08:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.sDefaultKeyScope = KeyState.PopupKeyboardShortcutsHelp;
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
onBuild(dom) {
|
2020-08-30 16:30:50 +08:00
|
|
|
dom.querySelectorAll('a[data-toggle="tab"]').forEach(node => node.Tab || new BSN.Tab(node));
|
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
key(
|
|
|
|
'tab, shift+tab, left, right',
|
|
|
|
KeyState.PopupKeyboardShortcutsHelp,
|
2020-08-19 02:24:17 +08:00
|
|
|
((event, handler)=>{
|
|
|
|
if (event && handler) {
|
2020-08-30 16:30:50 +08:00
|
|
|
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','right'].includes(handler.shortcut)) {
|
|
|
|
next = index < last ? index+1 : 0;
|
|
|
|
} else {
|
|
|
|
next = index ? index-1 : last;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2020-07-30 03:49:41 +08:00
|
|
|
|
2020-08-30 16:30:50 +08:00
|
|
|
tabs[next].querySelector('a[data-toggle="tab"]').Tab.show();
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2020-08-19 02:24:17 +08:00
|
|
|
}).throttle(100)
|
2019-07-05 03:19:24 +08:00
|
|
|
);
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
|
|
|
}
|
2014-04-13 08:32:07 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
export { KeyboardShortcutsHelpPopupView, KeyboardShortcutsHelpPopupView as default };
|