mirror of https://github.com/keeweb/keeweb.git
145 lines
4.2 KiB
JavaScript
145 lines
4.2 KiB
JavaScript
import { View } from 'framework/views/view';
|
|
import { Events } from 'framework/events';
|
|
import { AutoType } from 'auto-type';
|
|
import { Scrollable } from 'framework/views/scrollable';
|
|
import { AutoTypeHintView } from 'views/auto-type/auto-type-hint-view';
|
|
import { IconSelectView } from 'views/icon-select-view';
|
|
import template from 'templates/grp.hbs';
|
|
|
|
class GrpView extends View {
|
|
parent = '.app__panel';
|
|
|
|
template = template;
|
|
|
|
events = {
|
|
'click .grp__icon': 'showIconsSelect',
|
|
'click .grp__buttons-trash': 'moveToTrash',
|
|
'click .back-button': 'returnToApp',
|
|
'input #grp__field-title': 'changeTitle',
|
|
'focus #grp__field-auto-type-seq': 'focusAutoTypeSeq',
|
|
'input #grp__field-auto-type-seq': 'changeAutoTypeSeq',
|
|
'change #grp__check-search': 'setEnableSearching',
|
|
'change #grp__check-auto-type': 'setEnableAutoType'
|
|
};
|
|
|
|
render() {
|
|
this.removeSubView();
|
|
super.render({
|
|
title: this.model.title,
|
|
icon: this.model.icon || 'folder',
|
|
customIcon: this.model.customIcon,
|
|
enableSearching: this.model.getEffectiveEnableSearching(),
|
|
readonly: this.model.top,
|
|
canAutoType: AutoType.enabled,
|
|
autoTypeSeq: this.model.autoTypeSeq,
|
|
autoTypeEnabled: this.model.getEffectiveEnableAutoType(),
|
|
defaultAutoTypeSeq: this.model.getParentEffectiveAutoTypeSeq()
|
|
});
|
|
if (!this.model.title) {
|
|
this.$el.find('#grp__field-title').focus();
|
|
}
|
|
this.createScroll({
|
|
root: this.$el.find('.grp')[0],
|
|
scroller: this.$el.find('.scroller')[0],
|
|
bar: this.$el.find('.scroller__bar')[0]
|
|
});
|
|
this.pageResized();
|
|
}
|
|
|
|
removeSubView() {
|
|
if (this.views.sub) {
|
|
this.views.sub.remove();
|
|
delete this.views.sub;
|
|
}
|
|
}
|
|
|
|
changeTitle(e) {
|
|
const title = $.trim(e.target.value);
|
|
if (title) {
|
|
if (!this.model.top && title !== this.model.title) {
|
|
this.model.setName(title);
|
|
}
|
|
} else {
|
|
if (this.model.isJustCreated) {
|
|
this.model.removeWithoutHistory();
|
|
Events.emit('edit-group');
|
|
}
|
|
}
|
|
}
|
|
|
|
changeAutoTypeSeq(e) {
|
|
const el = e.target;
|
|
const seq = $.trim(el.value);
|
|
AutoType.validate(null, seq, (err) => {
|
|
$(e.target).toggleClass('input--error', !!err);
|
|
if (!err) {
|
|
this.model.setAutoTypeSeq(seq);
|
|
}
|
|
});
|
|
}
|
|
|
|
focusAutoTypeSeq(e) {
|
|
if (!this.views.hint) {
|
|
this.views.hint = new AutoTypeHintView({ input: e.target });
|
|
this.views.hint.render();
|
|
this.views.hint.on('remove', () => {
|
|
delete this.views.hint;
|
|
});
|
|
}
|
|
}
|
|
|
|
showIconsSelect() {
|
|
if (this.views.sub) {
|
|
this.removeSubView();
|
|
} else {
|
|
const subView = new IconSelectView(
|
|
{
|
|
iconId: this.model.customIconId || this.model.iconId,
|
|
file: this.model.file
|
|
},
|
|
{
|
|
parent: this.$el.find('.grp__icons')[0]
|
|
}
|
|
);
|
|
this.listenTo(subView, 'select', this.iconSelected);
|
|
subView.render();
|
|
this.views.sub = subView;
|
|
}
|
|
this.pageResized();
|
|
}
|
|
|
|
iconSelected(sel) {
|
|
if (sel.custom) {
|
|
if (sel.id !== this.model.customIconId) {
|
|
this.model.setCustomIcon(sel.id);
|
|
}
|
|
} else if (sel.id !== this.model.iconId) {
|
|
this.model.setIcon(+sel.id);
|
|
}
|
|
this.render();
|
|
}
|
|
|
|
moveToTrash() {
|
|
this.model.moveToTrash();
|
|
Events.emit('select-all');
|
|
}
|
|
|
|
setEnableSearching(e) {
|
|
const enabled = e.target.checked;
|
|
this.model.setEnableSearching(enabled);
|
|
}
|
|
|
|
setEnableAutoType(e) {
|
|
const enabled = e.target.checked;
|
|
this.model.setEnableAutoType(enabled);
|
|
}
|
|
|
|
returnToApp() {
|
|
Events.emit('edit-group');
|
|
}
|
|
}
|
|
|
|
Object.assign(GrpView.prototype, Scrollable);
|
|
|
|
export { GrpView };
|