116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
/*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);
|
|
|