diff --git a/app/index.html b/app/index.html
index 14b340a6..6fd4dc9a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -64,6 +64,7 @@
+
diff --git a/css/multiview.css b/css/multiview.css
index d1a6a94f..dee4edd5 100644
--- a/css/multiview.css
+++ b/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 {
diff --git a/src/view.multiview.js b/src/view.multiview.js
index 56eb8b69..ebec0ab9 100644
--- a/src/view.multiview.js
+++ b/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
});
diff --git a/src/widget.pager.js b/src/widget.pager.js
new file mode 100644
index 00000000..10fa4196
--- /dev/null
+++ b/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: ' \
+ \
+ ',
+
+ 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);
+
diff --git a/src/widget.queryeditor.js b/src/widget.queryeditor.js
index 964ff97d..e576e279 100644
--- a/src/widget.queryeditor.js
+++ b/src/widget.queryeditor.js
@@ -13,20 +13,12 @@ my.QueryEditor = Backbone.View.extend({
\
\
\
- \
\
\
',
events: {
- 'submit form': 'onFormSubmit',
- 'click .action-pagination-update': 'onPaginationUpdate'
+ 'submit form': 'onFormSubmit'
},
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());
- 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});
+ this.model.set({q: query});
},
render: function() {
var tmplData = this.model.toJSON();
diff --git a/test/index.html b/test/index.html
index cacc7319..84d0231e 100644
--- a/test/index.html
+++ b/test/index.html
@@ -46,6 +46,7 @@
+