From 1809aefea2611b3024899ce5fba8ae5535e4094d Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Fri, 7 Jun 2013 17:31:08 -0700 Subject: [PATCH] Backgrid pagination works again. --- UI/.idea/runConfigurations/Debug___Chrome.xml | 32 +++--- .../runConfigurations/Debug___Firefox.xml | 32 +++--- UI/Content/backbone.backgrid.paginator.css | 58 ---------- UI/Content/backbone.backgrid.paginator.less | 45 ++++++++ UI/Index.html | 2 +- UI/Mixins/backbone.Backgrid.mixin.js | 106 +++++++++++++++--- UI/Shared/BackgridPaginatorTemplate.html | 12 ++ 7 files changed, 179 insertions(+), 108 deletions(-) delete mode 100644 UI/Content/backbone.backgrid.paginator.css create mode 100644 UI/Content/backbone.backgrid.paginator.less create mode 100644 UI/Shared/BackgridPaginatorTemplate.html diff --git a/UI/.idea/runConfigurations/Debug___Chrome.xml b/UI/.idea/runConfigurations/Debug___Chrome.xml index 2323f096d..4ad681dfa 100644 --- a/UI/.idea/runConfigurations/Debug___Chrome.xml +++ b/UI/.idea/runConfigurations/Debug___Chrome.xml @@ -3,22 +3,22 @@ diff --git a/UI/.idea/runConfigurations/Debug___Firefox.xml b/UI/.idea/runConfigurations/Debug___Firefox.xml index 1f0cbd78b..599880f12 100644 --- a/UI/.idea/runConfigurations/Debug___Firefox.xml +++ b/UI/.idea/runConfigurations/Debug___Firefox.xml @@ -3,22 +3,22 @@ diff --git a/UI/Content/backbone.backgrid.paginator.css b/UI/Content/backbone.backgrid.paginator.css deleted file mode 100644 index 6437a0d19..000000000 --- a/UI/Content/backbone.backgrid.paginator.css +++ /dev/null @@ -1,58 +0,0 @@ -/* - backgrid-paginator - http://github.com/wyuenho/backgrid - - Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors - Licensed under the MIT @license. -*/ - -.backgrid-paginator { - text-align: center; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - border-top: none; - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} - -.backgrid-paginator ul { - display: inline-block; - *display: inline; - margin: 5px 0; - *zoom: 1; -} - -.backgrid-paginator ul > li { - display: inline; -} - -.backgrid-paginator ul > li > a, -.backgrid-paginator ul > li > span { - float: left; - width: 30px; - height: 30px; - padding: 0; - line-height: 30px; - text-decoration: none; -} - -.backgrid-paginator ul > li > a:hover, -.backgrid-paginator ul > .active > a, -.backgrid-paginator ul > .active > span { - background-color: #f5f5f5; -} - -.backgrid-paginator ul > .active > a, -.backgrid-paginator ul > .active > span { - color: #999999; - cursor: default; -} - -.backgrid-paginator ul > .disabled > span, -.backgrid-paginator ul > .disabled > a, -.backgrid-paginator ul > .disabled > a:hover { - color: #999999; - cursor: default; -} diff --git a/UI/Content/backbone.backgrid.paginator.less b/UI/Content/backbone.backgrid.paginator.less new file mode 100644 index 000000000..2ad0a609c --- /dev/null +++ b/UI/Content/backbone.backgrid.paginator.less @@ -0,0 +1,45 @@ +.backgrid-paginator { + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-top: none; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + ul { + display: inline-block; + *display: inline; + margin: 5px 0; + *zoom: 1; + + li { + display: inline; + + i, span { + float: left; + width: 30px; + height: 30px; + padding: 0; + line-height: 30px; + text-decoration: none; + } + } + + .active { + i, span { + background-color: #f5f5f5; + color: #999999; + cursor: default; + } + } + + .disabled { + i, span { + color: #999999; + cursor: default; + } + } + } +} \ No newline at end of file diff --git a/UI/Index.html b/UI/Index.html index ebfd120b9..02558893d 100644 --- a/UI/Index.html +++ b/UI/Index.html @@ -10,7 +10,7 @@ - + diff --git a/UI/Mixins/backbone.Backgrid.mixin.js b/UI/Mixins/backbone.Backgrid.mixin.js index 1059adb08..bde8e0a51 100644 --- a/UI/Mixins/backbone.Backgrid.mixin.js +++ b/UI/Mixins/backbone.Backgrid.mixin.js @@ -119,18 +119,19 @@ Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({ Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({ + template: 'Shared/BackgridPaginatorTemplate', + events: { - "click a": "changePage", - "click i": "preventLinkClick" + "click .pager-btn": "changePage" }, windowSize: 1, fastForwardHandleLabels: { - first: '', - prev : '', - next : '', - last : '' + first: 'icon-fast-backward', + prev : 'icon-backward', + next : 'icon-forward', + last : 'icon-fast-forward' }, changePage: function (e) { @@ -142,31 +143,27 @@ Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({ return; } - if (!$(target).is('a')) { - target = target.parent('a'); - } - - var label = target.html(); + var label = target.attr('data-action'); var ffLabels = this.fastForwardHandleLabels; var collection = this.collection; if (ffLabels) { switch (label) { - case ffLabels.first: + case 'first': collection.getFirstPage(); return; - case ffLabels.prev: + case 'prev': if (collection.hasPrevious()) { collection.getPreviousPage(); } return; - case ffLabels.next: + case 'next': if (collection.hasNext()) { collection.getNextPage(); } return; - case ffLabels.last: + case 'last': collection.getLastPage(); return; } @@ -177,7 +174,82 @@ Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({ collection.getPage(state.firstPage === 0 ? pageIndex - 1 :pageIndex); }, - preventLinkClick: function (e) { - e.preventDefault(); + makeHandles: function () { + + var handles = []; + var collection = this.collection; + var state = collection.state; + + // convert all indices to 0-based here + 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; + var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize; + var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize); + + 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, + pageNumber: i + 1 + }); + } + } + + var ffLabels = this.fastForwardHandleLabels; + if (ffLabels) { + + if (ffLabels.prev) { + handles.unshift({ + label: ffLabels.prev, + className: collection.hasPrevious() ? void 0 : "disabled", + action: 'prev' + }); + } + + if (ffLabels.first) { + handles.unshift({ + label: ffLabels.first, + className: collection.hasPrevious() ? void 0 : "disabled", + action: 'first' + }); + } + + if (ffLabels.next) { + handles.push({ + label: ffLabels.next, + className: collection.hasNext() ? void 0 : "disabled", + action: 'next' + }); + } + + if (ffLabels.last) { + handles.push({ + label: ffLabels.last, + className: collection.hasNext() ? void 0 : "disabled", + action: 'last' + }); + } + } + + return handles; + }, + + render: function () { + this.$el.empty(); + + var templateFunction = Marionette.TemplateCache.get(this.template); + + this.$el.html(templateFunction({ + handles: this.makeHandles() + })); + + this.delegateEvents(); + + return this; } }); diff --git a/UI/Shared/BackgridPaginatorTemplate.html b/UI/Shared/BackgridPaginatorTemplate.html new file mode 100644 index 000000000..a87372c56 --- /dev/null +++ b/UI/Shared/BackgridPaginatorTemplate.html @@ -0,0 +1,12 @@ +
    + {{debug}} + {{#each handles}} +
  • + {{#if pageNumber}} + {{label}} + {{else}} + + {{/if}} +
    • + {{/each}} +
\ No newline at end of file