Jump To …

widget.fields.js 

/*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}}"> &raquo; </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);