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.pager.js

¶

    /*jshint multistr:true */

    this.recline = this.recline || {};
    this.recline.View = this.recline.View || {};

    (function($, my) {

    my.Pager = Backbone.View.extend({
      className: 'recline-pager',
      template: ' \
        <div class="pagination"> \
          <ul> \
            <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
            <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \
            <li class="next action-pagination-update"><a href="">&raquo;</a></li> \
          </ul> \
        </div> \
      ',

      events: {
        'click .action-pagination-update': 'onPaginationUpdate',
        'change input': 'onFormSubmit'
      },

      initialize: function() {
        _.bindAll(this, 'render');
        this.el = $(this.el);
        this.model.bind('change', this.render);
        this.render();
      },
      onFormSubmit: function(e) {
        e.preventDefault();
        var newFrom = parseInt(this.el.find('input[name="from"]').val());
        var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
        this.model.set({size: newSize, from: newFrom});
      },
      onPaginationUpdate: function(e) {
        e.preventDefault();
        var $el = $(e.target);
        var newFrom = 0;
        if ($el.parent().hasClass('prev')) {
          newFrom = this.model.get('from') - Math.max(0, this.model.get('size'));
        } else {
          newFrom = this.model.get('from') + this.model.get('size');
        }
        this.model.set({from: newFrom});
      },
      render: function() {
        var tmplData = this.model.toJSON();
        tmplData.to = this.model.get('from') + this.model.get('size');
        var templated = Mustache.render(this.template, tmplData);
        this.el.html(templated);
      }
    });

    })(jQuery, recline.View);