From 17941f5b39465e7146d2859abfadee6b0aae3455 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Tue, 30 Apr 2013 20:18:34 -0700 Subject: [PATCH] More paginator --- Gruntfile.js | 38 ++-- UI/JsLibraries/backbone.backgrid.paginator.js | 205 ++++++++++++++++++ 2 files changed, 224 insertions(+), 19 deletions(-) create mode 100644 UI/JsLibraries/backbone.backgrid.paginator.js diff --git a/Gruntfile.js b/Gruntfile.js index d8fadad10..a319fb897 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,27 +5,27 @@ module.exports = function (grunt) { pkg: grunt.file.readJSON('package.json'), curl: { - 'UI/JsLibraries/backbone.js' : 'http://backbonejs.org/backbone.js', - 'UI/JsLibraries/backbone.marionette.js' : 'http://marionettejs.com/downloads/backbone.marionette.js', - 'UI/JsLibraries/backbone.modelbinder.js' : 'http://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.ModelBinder.js', - 'UI/JsLibraries/backbone.mutators.js' : 'http://raw.github.com/asciidisco/Backbone.Mutators/master/backbone.mutators.js', - 'UI/JsLibraries/backbone.shortcuts.js' : 'http://raw.github.com/bry4n/backbone-shortcuts/master/backbone.shortcuts.js', + 'UI/JsLibraries/backbone.js' : 'http://backbonejs.org/backbone.js', + 'UI/JsLibraries/backbone.marionette.js' : 'http://marionettejs.com/downloads/backbone.marionette.js', + 'UI/JsLibraries/backbone.modelbinder.js' : 'http://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.ModelBinder.js', + 'UI/JsLibraries/backbone.mutators.js' : 'http://raw.github.com/asciidisco/Backbone.Mutators/master/backbone.mutators.js', + 'UI/JsLibraries/backbone.shortcuts.js' : 'http://raw.github.com/bry4n/backbone-shortcuts/master/backbone.shortcuts.js', //'UI/JsLibraries/bootstrap.js': //'UI/JsLibraries/bootstrap.slider.js': - 'UI/JsLibraries/handlebars.runtime.js' : 'http://raw.github.com/wycats/handlebars.js/master/dist/handlebars.runtime.js', - 'UI/JsLibraries/jquery.cookie.js' : 'http://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js', - 'UI/JsLibraries/jquery.js' : 'http://code.jquery.com/jquery.js', - 'UI/JsLibraries/jquery.backstretch.js' : 'http://raw.github.com/srobbin/jquery-backstretch/master/jquery.backstretch.js', - 'UI/JsLibraries/require.js' : 'http://raw.github.com/jrburke/requirejs/master/require.js', - 'UI/JsLibraries/sugar.js' : 'http://raw.github.com/andrewplummer/Sugar/master/release/sugar-full.development.js', - 'UI/JsLibraries/underscore.js' : 'http://underscorejs.org/underscore.js', - 'UI/JsLibraries/backbone.pageable.js' : 'http://raw.github.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js', - 'UI/JsLibraries/backbone.backgrid.js' : 'http://raw.github.com/wyuenho/backgrid/master/lib/backgrid.js', - 'UI/JsLibraries/backbone.backgrid.paginator' : 'http://raw.github.com/wyuenho/backgrid/master/lib/extensions/paginator/backgrid-paginator.js', - 'UI/JsLibraries/messenger.js' : 'http://raw.github.com/HubSpot/messenger/master/build/js/messenger.js', - 'UI/Content/messenger.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css', - 'UI/Content/bootstrap.toggle-switch.css' : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css', - 'UI/Content/messenger.future.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css' + 'UI/JsLibraries/handlebars.runtime.js' : 'http://raw.github.com/wycats/handlebars.js/master/dist/handlebars.runtime.js', + 'UI/JsLibraries/jquery.cookie.js' : 'http://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js', + 'UI/JsLibraries/jquery.js' : 'http://code.jquery.com/jquery.js', + 'UI/JsLibraries/jquery.backstretch.js' : 'http://raw.github.com/srobbin/jquery-backstretch/master/jquery.backstretch.js', + 'UI/JsLibraries/require.js' : 'http://raw.github.com/jrburke/requirejs/master/require.js', + 'UI/JsLibraries/sugar.js' : 'http://raw.github.com/andrewplummer/Sugar/master/release/sugar-full.development.js', + 'UI/JsLibraries/underscore.js' : 'http://underscorejs.org/underscore.js', + 'UI/JsLibraries/backbone.pageable.js' : 'http://raw.github.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js', + 'UI/JsLibraries/backbone.backgrid.js' : 'http://raw.github.com/wyuenho/backgrid/master/lib/backgrid.js', + 'UI/JsLibraries/backbone.backgrid.paginator.js' : 'http://raw.github.com/wyuenho/backgrid/master/lib/extensions/paginator/backgrid-paginator.js', + 'UI/JsLibraries/messenger.js' : 'http://raw.github.com/HubSpot/messenger/master/build/js/messenger.js', + 'UI/Content/messenger.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css', + 'UI/Content/bootstrap.toggle-switch.css' : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css', + 'UI/Content/messenger.future.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css' }, uglify: { diff --git a/UI/JsLibraries/backbone.backgrid.paginator.js b/UI/JsLibraries/backbone.backgrid.paginator.js new file mode 100644 index 000000000..4c89b1ade --- /dev/null +++ b/UI/JsLibraries/backbone.backgrid.paginator.js @@ -0,0 +1,205 @@ +/* + backgrid-paginator + http://github.com/wyuenho/backgrid + + Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors + Licensed under the MIT @license. +*/ + +(function ($, _, Backbone, Backgrid) { + + "use strict"; + + /** + Paginator is a Backgrid extension that renders a series of configurable + pagination handles. This extension is best used for splitting a large data + set across multiple pages. If the number of pages is larger then a + threshold, which is set to 10 by default, the page handles are rendered + within a sliding window, plus the fast forward, fast backward, previous and + next page handles. The fast forward, fast backward, previous and next page + handles can be turned off. + + @class Backgrid.Extension.Paginator + */ + Backgrid.Extension.Paginator = Backbone.View.extend({ + + /** @property */ + className: "backgrid-paginator", + + /** @property */ + windowSize: 10, + + /** + @property {Object} fastForwardHandleLabels You can disable specific + handles by setting its value to `null`. + */ + fastForwardHandleLabels: { + first: "《", + prev: "〈", + next: "〉", + last: "》" + }, + + /** @property */ + template: _.template(''), + + /** @property */ + events: { + "click a": "changePage" + }, + + /** + Initializer. + + @param {Object} options + @param {Backbone.Collection.|Array.|Array.} options.columns + Column metadata. + @param {Backbone.Collection} options.collection + @param {boolean} [options.fastForwardHandleLabels] Whether to render fast forward buttons. + */ + initialize: function (options) { + Backgrid.requireOptions(options, ["columns", "collection"]); + + this.columns = options.columns; + if (!(this.columns instanceof Backbone.Collection)) { + this.columns = new Backgrid.Columns(this.columns); + } + + var columns = this.columns; + this.listenTo(columns, "add", this.render); + this.listenTo(columns, "remove", this.render); + this.listenTo(columns, "change:renderable", this.render); + var collection = this.collection; + var fullCollection = collection.fullCollection; + if (fullCollection) { + this.listenTo(fullCollection, "add", this.render); + this.listenTo(fullCollection, "remove", this.render); + this.listenTo(fullCollection, "reset", this.render); + } + else { + this.listenTo(collection, "add", this.render); + this.listenTo(collection, "remove", this.render); + this.listenTo(collection, "reset", this.render); + } + }, + + /** + jQuery event handler for the page handlers. Goes to the right page upon + clicking. + + @param {Event} e + */ + changePage: function (e) { + e.preventDefault(); + + var label = $(e.target).text(); + var ffLabels = this.fastForwardHandleLabels; + + var collection = this.collection; + + if (ffLabels) { + switch (label) { + case ffLabels.first: + collection.getFirstPage(); + return; + case ffLabels.prev: + if (collection.hasPrevious()) collection.getPreviousPage(); + return; + case ffLabels.next: + if (collection.hasNext()) collection.getNextPage(); + return; + case ffLabels.last: + collection.getLastPage(); + return; + } + } + + var state = collection.state; + var pageIndex = $(e.target).text() * 1; + collection.getPage(state.firstPage === 0 ? pageIndex - 1 : pageIndex); + }, + + /** + Internal method to create a list of page handle objects for the template + to render them. + + @return {Array.} an array of page handle objects hashes + */ + makeHandles: function () { + + var handles = []; + var collection = this.collection; + var state = collection.state; + + // convert all indices to 0-based here + var lastPage = state.lastPage ? state.lastPage : state.firstPage; + lastPage = state.firstPage === 0 ? lastPage : lastPage - 1; + var currentPage = state.firstPage === 0 ? state.currentPage : state.currentPage - 1; + var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize; + var windowEnd = windowStart + this.windowSize; + windowEnd = windowEnd <= lastPage ? windowEnd : lastPage + 1; + + if (collection.mode !== "infinite") { + for (var i = windowStart; i < windowEnd; i++) { + handles.push({ + label: i + 1, + title: "No. " + (i + 1), + className: currentPage === i ? "active" : undefined + }); + } + } + + var ffLabels = this.fastForwardHandleLabels; + if (ffLabels) { + + if (ffLabels.prev) { + handles.unshift({ + label: ffLabels.prev, + className: collection.hasPrevious() ? void 0 : "disabled" + }); + } + + if (ffLabels.first) { + handles.unshift({ + label: ffLabels.first, + className: collection.hasPrevious() ? void 0 : "disabled" + }); + } + + if (ffLabels.next) { + handles.push({ + label: ffLabels.next, + className: collection.hasNext() ? void 0 : "disabled" + }); + } + + if (ffLabels.last) { + handles.push({ + label: ffLabels.last, + className: collection.hasNext() ? void 0 : "disabled" + }); + } + } + + return handles; + }, + + /** + Render the paginator handles inside an unordered list placed inside a + cell that spans all the columns. + */ + render: function () { + this.$el.empty(); + + this.$el.append(this.template({ + handles: this.makeHandles() + })); + + this.delegateEvents(); + + return this; + } + + }); + +}(jQuery, _, Backbone, Backgrid));