-
Notifications
You must be signed in to change notification settings - Fork 326
/
widget.fields.js
115 lines (104 loc) · 3.3 KB
/
widget.fields.js
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
106
107
108
109
110
111
112
113
114
/*jshint multistr:true */
// Field Info
//
// For each field
//
// Id / Label / type / format
// Editor -- to change type (and possibly format)
// Editor for show/hide ...
// Summaries of fields
//
// Top values / number empty
// If number: max, min average ...
// Box to boot transform editor ...
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
my.Fields = Backbone.View.extend({
className: 'recline-fields-view',
template: ' \
<div class="accordion fields-list well"> \
<h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
{{#fields}} \
<div class="accordion-group field"> \
<div class="accordion-heading"> \
<i class="icon-file"></i> \
<h4> \
{{label}} \
<small> \
{{type}} \
<a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> » </a> \
</small> \
</h4> \
</div> \
<div id="collapse{{id}}" class="accordion-body collapse in"> \
<div class="accordion-inner"> \
{{#facets}} \
<div class="facet-summary" data-facet="{{id}}"> \
<ul class="facet-items"> \
{{#terms}} \
<li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \
{{/terms}} \
</ul> \
</div> \
{{/facets}} \
<div class="clear"></div> \
</div> \
</div> \
</div> \
{{/fields}} \
</div> \
',
events: {
'click .js-show-hide': 'onShowHide'
},
initialize: function(model) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render');
// TODO: this is quite restrictive in terms of when it is re-run
// e.g. a change in type will not trigger a re-run atm.
// being more liberal (e.g. binding to all) can lead to being called a lot (e.g. for change:width)
this.model.fields.bind('reset', function(action) {
self.model.fields.each(function(field) {
field.facets.unbind('all', self.render);
field.facets.bind('all', self.render);
});
// fields can get reset or changed in which case we need to recalculate
self.model.getFieldsSummary();
self.render();
});
this.render();
},
render: function() {
var self = this;
var tmplData = {
fields: []
};
this.model.fields.each(function(field) {
var out = field.toJSON();
out.facets = field.facets.toJSON();
tmplData.fields.push(out);
});
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.el.find('.collapse').collapse('hide');
},
onShowHide: function(e) {
e.preventDefault();
var $target = $(e.target);
// weird collapse class seems to have been removed (can watch this happen
// if you watch dom) but could not work why. Absence of collapse then meant
// we could not toggle.
// This seems to fix the problem.
this.el.find('.accordion-body').addClass('collapse');;
if ($target.text() === '+') {
this.el.find('.collapse').collapse('show');
$target.text('-');
} else {
this.el.find('.collapse').collapse('hide');
$target.text('+');
}
}
});
})(jQuery, recline.View);