2015-10-31 20:09:32 +01:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var Backbone = require('backbone'),
|
|
|
|
Scrollable = require('../mixins/scrollable'),
|
|
|
|
IconSelectView = require('./icon-select-view'),
|
2016-01-10 21:58:21 +01:00
|
|
|
Tip = require('../util/tip'),
|
2015-10-31 20:09:32 +01:00
|
|
|
baron = require('baron');
|
|
|
|
|
|
|
|
var GrpView = Backbone.View.extend({
|
2015-12-16 22:50:45 +01:00
|
|
|
template: require('templates/grp.hbs'),
|
2015-10-31 20:09:32 +01:00
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .grp__icon': 'showIconsSelect',
|
|
|
|
'click .grp__buttons-trash': 'moveToTrash',
|
2015-11-09 19:27:50 +01:00
|
|
|
'click .grp__back-button': 'returnToApp',
|
2015-12-08 18:21:12 +01:00
|
|
|
'blur #grp__field-title': 'titleBlur',
|
|
|
|
'change #grp__check-search': 'setEnableSearching'
|
2015-10-31 20:09:32 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.views = {};
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.removeSubView();
|
|
|
|
if (this.model) {
|
|
|
|
this.$el.html(this.template({
|
|
|
|
title: this.model.get('title'),
|
|
|
|
icon: this.model.get('icon') || 'folder',
|
2015-11-21 21:14:21 +01:00
|
|
|
customIcon: this.model.get('customIcon'),
|
2015-12-08 18:21:12 +01:00
|
|
|
enableSearching: this.model.get('enableSearching') !== false,
|
2015-10-31 20:09:32 +01:00
|
|
|
readonly: this.model.get('top')
|
|
|
|
}));
|
2016-01-10 21:58:21 +01:00
|
|
|
Tip.createTips(this.$el);
|
2015-11-04 06:29:28 +01:00
|
|
|
if (!this.model.get('title')) {
|
|
|
|
this.$el.find('#grp__field-title').focus();
|
|
|
|
}
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
|
|
|
this.scroll = baron({
|
|
|
|
root: this.$el.find('.details__body')[0],
|
|
|
|
scroller: this.$el.find('.scroller')[0],
|
|
|
|
bar: this.$el.find('.scroller__bar')[0],
|
|
|
|
$: Backbone.$
|
|
|
|
});
|
|
|
|
this.scroller = this.$el.find('.scroller');
|
|
|
|
this.scrollerBar = this.$el.find('.scroller__bar');
|
|
|
|
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
|
|
|
|
this.pageResized();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
removeSubView: function() {
|
|
|
|
if (this.views.sub) {
|
|
|
|
this.views.sub.remove();
|
|
|
|
delete this.views.sub;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showGroup: function(group) {
|
|
|
|
this.model = group;
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
titleBlur: function(e) {
|
|
|
|
var title = $.trim(e.target.value);
|
|
|
|
if (title) {
|
|
|
|
if (!this.model.get('top') && e.target.value !== this.model.get('title')) {
|
|
|
|
this.model.setName(e.target.value);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (this.model.isJustCreated) {
|
|
|
|
this.model.removeWithoutHistory();
|
|
|
|
Backbone.trigger('edit-group');
|
|
|
|
} else {
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showIconsSelect: function() {
|
|
|
|
if (this.views.sub) {
|
|
|
|
this.removeSubView();
|
|
|
|
} else {
|
2015-11-21 23:15:51 +01:00
|
|
|
var subView = new IconSelectView({
|
|
|
|
el: this.$el.find('.grp__icons'),
|
|
|
|
model: {
|
|
|
|
iconId: this.model.get('customIconId') || this.model.get('iconId'),
|
|
|
|
file: this.model.file
|
|
|
|
}
|
|
|
|
});
|
2015-10-31 20:09:32 +01:00
|
|
|
this.listenTo(subView, 'select', this.iconSelected);
|
|
|
|
subView.render();
|
|
|
|
this.views.sub = subView;
|
|
|
|
}
|
|
|
|
this.pageResized();
|
|
|
|
},
|
|
|
|
|
2015-11-21 23:15:51 +01:00
|
|
|
iconSelected: function(sel) {
|
|
|
|
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();
|
|
|
|
},
|
|
|
|
|
|
|
|
moveToTrash: function() {
|
|
|
|
this.model.moveToTrash();
|
|
|
|
Backbone.trigger('select-all');
|
2015-11-09 19:27:50 +01:00
|
|
|
},
|
|
|
|
|
2015-12-08 18:21:12 +01:00
|
|
|
setEnableSearching: function(e) {
|
|
|
|
var enabled = e.target.checked;
|
|
|
|
this.model.setEnableSearching(enabled);
|
|
|
|
},
|
|
|
|
|
2015-11-09 19:27:50 +01:00
|
|
|
returnToApp: function() {
|
|
|
|
Backbone.trigger('edit-group');
|
2015-10-31 20:09:32 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_.extend(GrpView.prototype, Scrollable);
|
|
|
|
|
|
|
|
module.exports = GrpView;
|