knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rufus Pollock
2012-06-01 17:52:12 +01:00
parent b63f4daad8
commit 86fbe6d191
6 changed files with 95 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/view.multiview.js
View File

@@ -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
});

57
src/widget.pager.js Normal file
View File

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

25
src/widget.queryeditor.js
View File

@@ -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',
'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();