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 Backbone from 'backbone';
|
2019-09-16 20:42:33 +02:00
|
|
|
import { Scrollable } from 'framework/views/scrollable';
|
2019-09-16 19:09:57 +02:00
|
|
|
import { AutoTypeHintView } from 'views/auto-type/auto-type-hint-view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { IconSelectView } from 'views/icon-select-view';
|
2019-09-15 18:33:45 +02:00
|
|
|
import template from 'templates/grp.hbs';
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-09-15 18:33:45 +02:00
|
|
|
class GrpView extends View {
|
|
|
|
parent = '.app__panel';
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-09-15 18:33:45 +02:00
|
|
|
template = template;
|
|
|
|
|
|
|
|
events = {
|
2015-10-31 20:09:32 +01:00
|
|
|
'click .grp__icon': 'showIconsSelect',
|
|
|
|
'click .grp__buttons-trash': 'moveToTrash',
|
2016-08-13 21:13:16 +02:00
|
|
|
'click .back-button': 'returnToApp',
|
2016-03-04 17:39:29 +01:00
|
|
|
'input #grp__field-title': 'changeTitle',
|
2016-04-26 21:40:18 +02:00
|
|
|
'focus #grp__field-auto-type-seq': 'focusAutoTypeSeq',
|
2016-04-17 14:31:08 +02:00
|
|
|
'input #grp__field-auto-type-seq': 'changeAutoTypeSeq',
|
|
|
|
'change #grp__check-search': 'setEnableSearching',
|
|
|
|
'change #grp__check-auto-type': 'setEnableAutoType'
|
2019-09-15 18:33:45 +02:00
|
|
|
};
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2015-10-31 20:09:32 +01:00
|
|
|
this.removeSubView();
|
2019-09-15 18:33:45 +02:00
|
|
|
super.render({
|
|
|
|
title: this.model.get('title'),
|
|
|
|
icon: this.model.get('icon') || 'folder',
|
|
|
|
customIcon: this.model.get('customIcon'),
|
|
|
|
enableSearching: this.model.getEffectiveEnableSearching(),
|
|
|
|
readonly: this.model.get('top'),
|
|
|
|
canAutoType: AutoType.enabled,
|
|
|
|
autoTypeSeq: this.model.get('autoTypeSeq'),
|
|
|
|
autoTypeEnabled: this.model.getEffectiveEnableAutoType(),
|
|
|
|
defaultAutoTypeSeq: this.model.getParentEffectiveAutoTypeSeq()
|
|
|
|
});
|
2019-08-24 07:09:53 +02:00
|
|
|
if (!this.model.get('title')) {
|
|
|
|
this.$el.find('#grp__field-title').focus();
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
2016-01-17 21:19:42 +01:00
|
|
|
this.createScroll({
|
2016-08-14 18:18:51 +02:00
|
|
|
root: this.$el.find('.grp')[0],
|
2015-10-31 20:09:32 +01:00
|
|
|
scroller: this.$el.find('.scroller')[0],
|
2016-01-17 21:19:42 +01:00
|
|
|
bar: this.$el.find('.scroller__bar')[0]
|
2015-10-31 20:09:32 +01:00
|
|
|
});
|
|
|
|
this.pageResized();
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
removeSubView() {
|
2015-10-31 20:09:32 +01:00
|
|
|
if (this.views.sub) {
|
|
|
|
this.views.sub.remove();
|
|
|
|
delete this.views.sub;
|
|
|
|
}
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
changeTitle(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const title = $.trim(e.target.value);
|
2015-10-31 20:09:32 +01:00
|
|
|
if (title) {
|
2016-08-13 22:19:15 +02:00
|
|
|
if (!this.model.get('top') && title !== this.model.get('title')) {
|
|
|
|
this.model.setName(title);
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (this.model.isJustCreated) {
|
|
|
|
this.model.removeWithoutHistory();
|
|
|
|
Backbone.trigger('edit-group');
|
|
|
|
}
|
|
|
|
}
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
changeAutoTypeSeq(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const el = e.target;
|
|
|
|
const seq = $.trim(el.value);
|
2016-07-17 13:30:38 +02:00
|
|
|
AutoType.validate(null, seq, err => {
|
2016-04-26 21:40:18 +02:00
|
|
|
$(e.target).toggleClass('input--error', !!err);
|
|
|
|
if (!err) {
|
2016-07-17 13:30:38 +02:00
|
|
|
this.model.setAutoTypeSeq(seq);
|
2016-04-26 21:40:18 +02:00
|
|
|
}
|
|
|
|
});
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2016-04-26 21:40:18 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
focusAutoTypeSeq(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-15 18:33:45 +02:00
|
|
|
}
|
2016-04-17 14:31:08 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
showIconsSelect() {
|
2015-10-31 20:09:32 +01:00
|
|
|
if (this.views.sub) {
|
|
|
|
this.removeSubView();
|
|
|
|
} else {
|
2019-09-15 20:09:28 +02:00
|
|
|
const subView = new IconSelectView(
|
|
|
|
{
|
2015-11-21 23:15:51 +01:00
|
|
|
iconId: this.model.get('customIconId') || this.model.get('iconId'),
|
|
|
|
file: this.model.file
|
2019-09-15 20:09:28 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
parent: this.$el.find('.grp__icons')[0]
|
2015-11-21 23:15:51 +01:00
|
|
|
}
|
2019-09-15 20:09:28 +02:00
|
|
|
);
|
2015-10-31 20:09:32 +01:00
|
|
|
this.listenTo(subView, 'select', this.iconSelected);
|
|
|
|
subView.render();
|
|
|
|
this.views.sub = subView;
|
|
|
|
}
|
|
|
|
this.pageResized();
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
iconSelected(sel) {
|
2015-11-21 23:15:51 +01:00
|
|
|
if (sel.custom) {
|
|
|
|
if (sel.id !== this.model.get('customIconId')) {
|
|
|
|
this.model.setCustomIcon(sel.id);
|
|
|
|
}
|
|
|
|
} else if (sel.id !== this.model.get('iconId')) {
|
2015-11-22 11:59:13 +01:00
|
|
|
this.model.setIcon(+sel.id);
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
|
|
|
this.render();
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
moveToTrash() {
|
2015-10-31 20:09:32 +01:00
|
|
|
this.model.moveToTrash();
|
|
|
|
Backbone.trigger('select-all');
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-11-09 19:27:50 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
setEnableSearching(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const enabled = e.target.checked;
|
2015-12-08 18:21:12 +01:00
|
|
|
this.model.setEnableSearching(enabled);
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-12-08 18:21:12 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
setEnableAutoType(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const enabled = e.target.checked;
|
2016-04-17 14:31:08 +02:00
|
|
|
this.model.setEnableAutoType(enabled);
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2016-04-17 14:31:08 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
returnToApp() {
|
2015-11-09 19:27:50 +01:00
|
|
|
Backbone.trigger('edit-group');
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
2019-09-15 18:33:45 +02:00
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-09-15 18:33:45 +02:00
|
|
|
Object.assign(GrpView.prototype, Scrollable);
|
2015-10-31 20:09:32 +01:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { GrpView };
|