1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
var AmpersandView = require('ampersand-view'),
AmpersandSubCollection = require('ampersand-subcollection'),
StatView = require('./stat'),
$ = require('jquery'),
_ = require('lodash'),
debug = require('debug')('view:panel');
var PanelView = module.exports = AmpersandView.extend({
props: {
indicator: {
type: 'string',
default: 'none',
values: ['none', 'some', 'all']
},
statViews: 'object',
filteredStats: 'object'
},
template: require('./templates/panel.jade'),
events: {
'click a': 'collapsibleToggle',
'click [data-hook=caret]': 'collapsibleToggle',
'click [data-hook=indicator]': 'indicatorClicked'
},
bindings: {
'indicator': {
type: function (el, val, prev) {
$el = $(el);
$el.removeClass();
switch (this.model.selected) {
case 'all' : $el.addClass('fa fa-circle'); break;
case 'some': $el.addClass('fa fa-adjust'); break;
case 'none': $el.addClass('fa fa-circle-o'); break;
}
},
hook: 'indicator'
},
'model.open': {
type: 'booleanClass',
hook: 'caret',
yes: 'fa-caret-up',
no: 'fa-caret-down'
}
},
initialize: function () {
this.filteredStats = new AmpersandSubCollection(this.model.stats, {
comparator: function (model) { return model.name }
});
},
render: function () {
this.renderWithTemplate(this.model);
this.statViews = this.renderCollection(this.filteredStats, StatView, this.queryByHook('stats'));
},
indicatorClicked: function (event) {
var all = this.model.selected !== 'all';
this.filteredStats.each(function (stat) {
stat.selected = all;
});
switch (this.model.selected) {
case 'all': // fall-through
case 'some': this.collapsibleOpen(); break;
case 'none': this.collapsibleClose(); break;
}
this.model.app.clearSelectionState();
this.statChanged(null, {propagate: true});
},
statChanged: function (stat, options) {
options = options || {};
// mirroring model.selected here to use for bindings
this.indicator = this.model.selected;
if (options.propagate) {
this.parent.parent.statChanged(stat, options);
}
},
collapsibleToggle: function (event) {
if (this.model.open) {
this.collapsibleClose(event);
} else {
this.collapsibleOpen(event);
}
},
collapsibleClose: function (event) {
$(this.query('.collapse')).collapse('hide');
this.model.open = false;
},
collapsibleOpen: function (event) {
$(this.query('.collapse')).collapse('show');
this.model.open = true;
},
resetStats: function () {
this.filteredStats.configure({}, true);
},
filterStats: function(search) {
this.filteredStats.configure({
filter: function (model) {
return (model.name.search(new RegExp(search), 'gi') !== -1);
}
}, true);
if (this.filteredStats.length === 0) {
this.collapsibleClose();
} else {
this.collapsibleOpen();
}
}
});
|
