[#140,refactor,widget/pager][s]: split out pager from query editor into separate widget and display in different place in multiview - fixes #140.

app/index.html

@@ -64,6 +64,7 @@
   <script type="text/javascript" src="../src/view-graph.js"></script>
   <script type="text/javascript" src="../src/view-map.js"></script>
   <script type="text/javascript" src="../src/view-timeline.js"></script>
+  <script type="text/javascript" src="../src/widget.pager.js"></script>
   <script type="text/javascript" src="../src/widget.queryeditor.js"></script>
   <script type="text/javascript" src="../src/widget.filtereditor.js"></script>
   <script type="text/javascript" src="../src/widget.facetviewer.js"></script>

css/multiview.css

@@ -27,7 +27,7 @@
 .header .recline-results-info {
   line-height: 28px;
   margin-left: 20px;
-  display: inline;
+  float: left;
 }
 
 /**********************************************************
@@ -39,42 +39,54 @@
   height: 30px;
 }
 
-.header .recline-query-editor .input-prepend {
+.header .input-prepend {
   margin-bottom: auto;
 }
 
-.recline-query-editor .add-on {
+.header .add-on {
   float: left;
 }
 
 /* needed for Chrome but not FF */
-.header .recline-query-editor .add-on {
+.header .add-on {
   margin-left: -27px;
 }
 
 /* needed for FF but not chrome */
-.header .recline-query-editor .input-prepend {
+.header .input-prepend {
   vertical-align: top;
 }
 
-.header .recline-query-editor .pagination input {
-  width: 30px;
-  height: 18px;
-  padding: 2px 4px;
-  margin-top: -4px;
-}
-
-.header .recline-query-editor .pagination a {
-  line-height: 26px;
-  padding: 0 6px;
-}
-
 .header .recline-query-editor form button {
   vertical-align: top;
 }
 
 /**********************************************************
-  * Query Editor
+  * Pager
+  *********************************************************/
+
+.header .recline-pager {
+  float: left;
+  margin: auto;
+  display: block;
+  margin-left: 20px;
+}
+
+.header .recline-pager .pagination input {
+  width: 30px;
+  height: 18px;
+  padding: 2px 4px;
+  margin: 0;
+  margin-top: -4px;
+}
+
+.header .recline-pager .pagination a {
+  line-height: 26px;
+  padding: 0 6px;
+}
+
+/**********************************************************
+  * Filter Editor
   *********************************************************/
 
 .recline-filter-editor .filter-term .input-append a {

src/view.multiview.js

@@ -199,6 +199,10 @@ my.MultiView = Backbone.View.extend({
     _.each(this.pageViews, function(view, pageName) {
       $dataViewContainer.append(view.view.el);
     });
+    var pager = new recline.View.Pager({
+      model: this.model.queryState
+    });
+    this.el.find('.recline-results-info').after(pager.el);
     var queryEditor = new recline.View.QueryEditor({
       model: this.model.queryState
     });

src/widget.pager.js

@@ -0,0 +1,57 @@
+/*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);
+

src/widget.queryeditor.js

@@ -13,20 +13,12 @@ my.QueryEditor = Backbone.View.extend({
         <span class="add-on"><i class="icon-search"></i></span> \
         <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
       </div> \
-      <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> \
       <button type="submit" class="btn">Go &raquo;</button> \
     </form> \
   ',
 
   events: {
-    'submit form': 'onFormSubmit',
+    'submit form': 'onFormSubmit'
-    'click .action-pagination-update': 'onPaginationUpdate'
   },
 
   initialize: function() {
@@ -38,20 +30,7 @@ my.QueryEditor = Backbone.View.extend({
   onFormSubmit: function(e) {
     e.preventDefault();
     var query = this.el.find('.text-query input').val();
-    var newFrom = parseInt(this.el.find('input[name="from"]').val());
+    this.model.set({q: query});
-    var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
-    this.model.set({size: newSize, from: newFrom, q: query});
-  },
-  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();

test/index.html

@@ -46,6 +46,7 @@
   <script type="text/javascript" src="../src/view-graph.js"></script>
   <script type="text/javascript" src="../src/view-map.js"></script>
   <script type="text/javascript" src="../src/view-timeline.js"></script>
+  <script type="text/javascript" src="../src/widget.pager.js"></script>
   <script type="text/javascript" src="../src/widget.queryeditor.js"></script>
   <script type="text/javascript" src="../src/widget.filtereditor.js"></script>
   <script type="text/javascript" src="../src/widget.facetviewer.js"></script>