Jump To …
backend.ckan.js backend.couchdb.js backend.csv.js backend.dataproxy.js backend.elasticsearch.js backend.gdocs.js backend.memory.js data.transform.js ecma-fixes.js model.js view.graph.js view.grid.js view.map.js view.multiview.js view.slickgrid.js view.timeline.js view.transform.js widget.facetviewer.js widget.fields.js widget.filtereditor.js widget.pager.js widget.queryeditor.js

# 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);