Lidarr/UI/JsLibraries/backbone.backgrid.paginator.js

199 lines
5.5 KiB
JavaScript
Raw Normal View History

2013-05-01 03:18:34 +00:00
/*
backgrid-paginator
http://github.com/wyuenho/backgrid
Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
Licensed under the MIT @license.
*/
(function ($, _, Backbone, Backgrid) {
2013-05-01 03:18:34 +00:00
"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
2013-05-01 03:18:34 +00:00
*/
Backgrid.Extension.Paginator = Backbone.View.extend({
2013-05-01 03:18:34 +00:00
/** @property */
className: "backgrid-paginator",
2013-05-01 03:18:34 +00:00
/** @property */
windowSize: 10,
2013-05-01 03:18:34 +00:00
2013-06-21 05:37:37 +00:00
/**
@property {Object} fastForwardHandleLabels You can disable specific
handles by setting its value to `null`.
2013-06-21 05:37:37 +00:00
*/
fastForwardHandleLabels: {
first: "《",
prev: "〈",
next: "〉",
last: "》"
},
2013-06-21 05:37:37 +00:00
/** @property */
template: _.template('<ul><% _.each(handles, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a></li><% }); %></ul>'),
2013-06-21 05:37:37 +00:00
/** @property */
events: {
"click a": "changePage"
},
2013-05-01 03:18:34 +00:00
/**
Initializer.
@param {Object} options
@param {Backbone.Collection} options.collection
@param {boolean} [options.fastForwardHandleLabels] Whether to render fast forward buttons.
2013-05-01 03:18:34 +00:00
*/
initialize: function (options) {
Backgrid.requireOptions(options, ["collection"]);
2013-05-01 03:18:34 +00:00
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);
2013-05-01 03:18:34 +00:00
}
else {
this.listenTo(collection, "add", this.render);
this.listenTo(collection, "remove", this.render);
this.listenTo(collection, "reset", this.render);
2013-06-21 05:37:37 +00:00
}
2013-05-01 03:18:34 +00:00
},
/**
jQuery event handler for the page handlers. Goes to the right page upon
clicking.
2013-05-01 03:18:34 +00:00
@param {Event} e
*/
2013-05-01 03:18:34 +00:00
changePage: function (e) {
e.preventDefault();
var $li = $(e.target).parent();
if (!$li.hasClass("active") && !$li.hasClass("disabled")) {
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:
collection.getPreviousPage();
return;
case ffLabels.next:
collection.getNextPage();
return;
case ffLabels.last:
collection.getLastPage();
return;
}
}
2013-06-21 05:37:37 +00:00
var state = collection.state;
var pageIndex = +label;
collection.getPage(state.firstPage === 0 ? pageIndex - 1 : pageIndex);
2013-05-12 15:22:54 +00:00
}
2013-05-01 03:18:34 +00:00
},
/**
Internal method to create a list of page handle objects for the template
to render them.
2013-06-21 05:37:37 +00:00
@return {Array.<Object>} an array of page handle objects hashes
*/
makeHandles: function () {
2013-06-21 05:37:37 +00:00
var handles = [];
2013-05-01 03:18:34 +00:00
var collection = this.collection;
var state = collection.state;
// convert all indices to 0-based here
2013-05-12 15:22:54 +00:00
var firstPage = state.firstPage;
var lastPage = +state.lastPage;
lastPage = Math.max(0, firstPage ? lastPage - 1 : lastPage);
var currentPage = Math.max(state.currentPage, state.firstPage);
currentPage = firstPage ? currentPage - 1 : currentPage;
2013-05-01 03:18:34 +00:00
var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize;
2013-05-12 15:22:54 +00:00
var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize);
2013-05-01 03:18:34 +00:00
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
});
}
}
2013-05-01 03:18:34 +00:00
var ffLabels = this.fastForwardHandleLabels;
if (ffLabels) {
2013-05-01 03:18:34 +00:00
if (ffLabels.prev) {
handles.unshift({
label: ffLabels.prev,
className: collection.hasPrevious() ? void 0 : "disabled"
});
}
2013-05-01 03:18:34 +00:00
if (ffLabels.first) {
handles.unshift({
label: ffLabels.first,
className: collection.hasPrevious() ? void 0 : "disabled"
});
}
2013-05-01 03:18:34 +00:00
if (ffLabels.next) {
handles.push({
label: ffLabels.next,
className: collection.hasNext() ? void 0 : "disabled"
});
}
2013-05-01 03:18:34 +00:00
if (ffLabels.last) {
handles.push({
label: ffLabels.last,
className: collection.hasNext() ? void 0 : "disabled"
});
2013-05-01 03:18:34 +00:00
}
}
2013-05-01 03:18:34 +00:00
return handles;
},
/**
2013-05-12 15:22:54 +00:00
Render the paginator handles inside an unordered list.
2013-05-01 03:18:34 +00:00
*/
render: function () {
this.$el.empty();
this.$el.append(this.template({
handles: this.makeHandles()
}));
2013-06-21 05:37:37 +00:00
this.delegateEvents();
2013-05-01 03:18:34 +00:00
return this;
}
});
}(jQuery, _, Backbone, Backgrid));