2019-09-16 20:42:33 +02:00
|
|
|
import { View } from 'framework/views/view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { AutoType } from 'auto-type';
|
|
|
|
import { Shortcuts } from 'comp/app/shortcuts';
|
|
|
|
import { Locale } from 'util/locale';
|
2019-09-16 19:09:57 +02:00
|
|
|
import { AutoTypeHintView } from 'views/auto-type/auto-type-hint-view';
|
|
|
|
import template from 'templates/details/details-auto-type.hbs';
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-09-16 19:09:57 +02:00
|
|
|
class DetailsAutoTypeView extends View {
|
|
|
|
parent = '.details__body-after';
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-09-16 19:09:57 +02:00
|
|
|
template = template;
|
|
|
|
|
|
|
|
events = {
|
2016-04-26 21:40:18 +02:00
|
|
|
'focus #details__auto-type-sequence': 'seqFocus',
|
2016-04-23 16:50:40 +02:00
|
|
|
'input #details__auto-type-sequence': 'seqInput',
|
|
|
|
'keypress #details__auto-type-sequence': 'seqKeyPress',
|
|
|
|
'keydown #details__auto-type-sequence': 'seqKeyDown',
|
|
|
|
'change #details__auto-type-enabled': 'enabledChange',
|
|
|
|
'change #details__auto-type-obfuscation': 'obfuscationChange'
|
2019-09-16 19:09:57 +02:00
|
|
|
};
|
2016-04-26 21:40:18 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2017-01-31 07:50:28 +01:00
|
|
|
const detAutoTypeShortcutsDesc = Locale.detAutoTypeShortcutsDesc
|
2019-09-14 16:36:30 +02:00
|
|
|
.replace('{}', Shortcuts.actionShortcutSymbol() + 'T')
|
|
|
|
.replace('{}', Shortcuts.globalShortcutText('autoType'));
|
2019-09-16 19:09:57 +02:00
|
|
|
super.render({
|
2016-04-23 16:50:40 +02:00
|
|
|
enabled: this.model.getEffectiveEnableAutoType(),
|
|
|
|
obfuscation: this.model.autoTypeObfuscation,
|
|
|
|
sequence: this.model.autoTypeSequence,
|
2016-04-26 21:40:18 +02:00
|
|
|
windows: this.model.autoTypeWindows,
|
2016-04-23 16:50:40 +02:00
|
|
|
defaultSequence: this.model.group.getEffectiveAutoTypeSeq(),
|
2019-08-18 10:17:09 +02:00
|
|
|
detAutoTypeShortcutsDesc
|
2016-04-23 16:50:40 +02:00
|
|
|
});
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
seqInput(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const el = e.target;
|
2019-09-16 19:09:57 +02:00
|
|
|
const seq = el.value.trim();
|
2020-06-01 16:53:51 +02:00
|
|
|
AutoType.validate(this.model, seq, (err) => {
|
2016-04-23 16:50:40 +02:00
|
|
|
$(el).toggleClass('input--error', !!err);
|
|
|
|
if (!err) {
|
2016-07-17 13:30:38 +02:00
|
|
|
this.model.setAutoTypeSeq(seq);
|
2016-04-23 16:50:40 +02:00
|
|
|
}
|
|
|
|
});
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
seqKeyPress(e) {
|
2016-04-23 16:50:40 +02:00
|
|
|
e.stopPropagation();
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
seqKeyDown(e) {
|
2016-04-23 16:50:40 +02:00
|
|
|
e.stopPropagation();
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
seqFocus(e) {
|
2016-04-26 21:40:18 +02:00
|
|
|
if (!this.views.hint) {
|
2019-09-16 20:54:14 +02:00
|
|
|
this.views.hint = new AutoTypeHintView({ input: e.target });
|
|
|
|
this.views.hint.render();
|
2019-08-16 23:05:39 +02:00
|
|
|
this.views.hint.on('remove', () => {
|
|
|
|
delete this.views.hint;
|
|
|
|
});
|
2016-04-26 21:40:18 +02:00
|
|
|
}
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-26 21:40:18 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
enabledChange(e) {
|
2016-04-23 16:50:40 +02:00
|
|
|
this.model.setEnableAutoType(e.target.checked);
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
obfuscationChange(e) {
|
2016-04-23 16:50:40 +02:00
|
|
|
this.model.setAutoTypeObfuscation(e.target.checked);
|
|
|
|
}
|
2019-09-16 19:09:57 +02:00
|
|
|
}
|
2016-04-23 16:50:40 +02:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { DetailsAutoTypeView };
|