2019-09-15 14:16:32 +02:00
|
|
|
import Backbone from 'backbone';
|
|
|
|
import { IdleTracker } from 'comp/browser/idle-tracker';
|
|
|
|
import { Keys } from 'const/keys';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const shortcutKeyProp = navigator.platform.indexOf('Mac') >= 0 ? 'metaKey' : 'ctrlKey';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const KeyHandler = {
|
2015-10-17 23:49:24 +02:00
|
|
|
SHORTCUT_ACTION: 1,
|
|
|
|
SHORTCUT_OPT: 2,
|
2019-09-14 14:07:56 +02:00
|
|
|
SHORTCUT_SHIFT: 4,
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
shortcuts: {},
|
|
|
|
modal: false,
|
2015-11-17 22:49:12 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
init() {
|
2015-10-17 23:49:24 +02:00
|
|
|
$(document).bind('keypress', this.keypress.bind(this));
|
|
|
|
$(document).bind('keydown', this.keydown.bind(this));
|
2017-05-19 23:57:49 +02:00
|
|
|
|
2019-08-16 23:05:39 +02:00
|
|
|
this.shortcuts[Keys.DOM_VK_A] = [
|
2019-08-18 08:05:38 +02:00
|
|
|
{
|
|
|
|
handler: this.handleAKey,
|
|
|
|
thisArg: this,
|
|
|
|
shortcut: this.SHORTCUT_ACTION,
|
|
|
|
modal: true,
|
|
|
|
noPrevent: true
|
|
|
|
}
|
2019-08-16 23:05:39 +02:00
|
|
|
];
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
onKey(key, handler, thisArg, shortcut, modal, noPrevent) {
|
2017-01-31 07:50:28 +01:00
|
|
|
let keyShortcuts = this.shortcuts[key];
|
2015-10-17 23:49:24 +02:00
|
|
|
if (!keyShortcuts) {
|
|
|
|
this.shortcuts[key] = keyShortcuts = [];
|
|
|
|
}
|
2019-08-16 23:05:39 +02:00
|
|
|
keyShortcuts.push({
|
2019-08-18 10:17:09 +02:00
|
|
|
handler,
|
|
|
|
thisArg,
|
|
|
|
shortcut,
|
|
|
|
modal,
|
|
|
|
noPrevent
|
2019-08-16 23:05:39 +02:00
|
|
|
});
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
offKey(key, handler, thisArg) {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (this.shortcuts[key]) {
|
2016-07-17 13:30:38 +02:00
|
|
|
this.shortcuts[key] = _.reject(this.shortcuts[key], sh => {
|
2015-10-17 23:49:24 +02:00
|
|
|
return sh.handler === handler && sh.thisArg === thisArg;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
setModal(modal) {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.modal = modal;
|
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
isActionKey(e) {
|
2015-10-17 23:49:24 +02:00
|
|
|
return e[shortcutKeyProp];
|
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
keydown(e) {
|
2015-11-17 22:49:12 +01:00
|
|
|
IdleTracker.regUserAction();
|
2017-01-31 07:50:28 +01:00
|
|
|
const code = e.keyCode || e.which;
|
|
|
|
const keyShortcuts = this.shortcuts[code];
|
2015-10-17 23:49:24 +02:00
|
|
|
if (keyShortcuts && keyShortcuts.length) {
|
2017-05-19 23:57:49 +02:00
|
|
|
for (const sh of keyShortcuts) {
|
2019-09-12 19:59:35 +02:00
|
|
|
if (this.modal && sh.modal !== this.modal) {
|
2015-10-17 23:49:24 +02:00
|
|
|
e.stopPropagation();
|
2017-05-19 23:57:49 +02:00
|
|
|
continue;
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
const isActionKey = this.isActionKey(e);
|
2015-10-17 23:49:24 +02:00
|
|
|
switch (sh.shortcut) {
|
|
|
|
case this.SHORTCUT_ACTION:
|
2019-08-16 23:05:39 +02:00
|
|
|
if (!isActionKey) {
|
|
|
|
continue;
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
break;
|
|
|
|
case this.SHORTCUT_OPT:
|
2019-08-16 23:05:39 +02:00
|
|
|
if (!e.altKey) {
|
|
|
|
continue;
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
break;
|
2019-09-12 19:59:35 +02:00
|
|
|
case this.SHORTCUT_SHIFT:
|
|
|
|
if (!e.shiftKey) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
break;
|
2018-10-22 20:16:08 +02:00
|
|
|
case this.SHORTCUT_ACTION + this.SHORTCUT_OPT:
|
2019-08-16 23:05:39 +02:00
|
|
|
if (!e.altKey || !isActionKey) {
|
|
|
|
continue;
|
|
|
|
}
|
2018-10-22 20:16:08 +02:00
|
|
|
break;
|
2015-10-17 23:49:24 +02:00
|
|
|
default:
|
2019-09-12 19:59:35 +02:00
|
|
|
if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) {
|
2019-08-16 23:05:39 +02:00
|
|
|
continue;
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
sh.handler.call(sh.thisArg, e, code);
|
|
|
|
if (isActionKey && !sh.noPrevent) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2017-05-19 23:57:49 +02:00
|
|
|
if (e.isImmediatePropagationStopped()) {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
keypress(e) {
|
2019-08-16 23:05:39 +02:00
|
|
|
if (
|
|
|
|
!this.modal &&
|
2015-10-17 23:49:24 +02:00
|
|
|
e.charCode !== Keys.DOM_VK_RETURN &&
|
|
|
|
e.charCode !== Keys.DOM_VK_ESCAPE &&
|
|
|
|
e.charCode !== Keys.DOM_VK_TAB &&
|
2019-08-16 23:05:39 +02:00
|
|
|
!e.altKey &&
|
|
|
|
!e.ctrlKey &&
|
|
|
|
!e.metaKey
|
|
|
|
) {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.trigger('keypress', e);
|
2016-07-24 22:57:12 +02:00
|
|
|
} else if (this.modal) {
|
|
|
|
this.trigger('keypress:' + this.modal, e);
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2015-11-17 22:49:12 +01:00
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
reg() {
|
2015-11-17 22:49:12 +01:00
|
|
|
IdleTracker.regUserAction();
|
2017-05-19 23:57:49 +02:00
|
|
|
},
|
2019-08-18 10:17:09 +02:00
|
|
|
handleAKey(e) {
|
2019-08-18 08:05:38 +02:00
|
|
|
if (
|
|
|
|
e.target.tagName.toLowerCase() === 'input' &&
|
|
|
|
['password', 'text'].indexOf(e.target.type) >= 0
|
|
|
|
) {
|
2017-05-19 23:57:49 +02:00
|
|
|
e.stopImmediatePropagation();
|
|
|
|
} else {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
_.extend(KeyHandler, Backbone.Events);
|
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { KeyHandler };
|