Backgrid pagination works again.

UI/.idea/runConfigurations/Debug___Chrome.xml

@@ -3,22 +3,22 @@
     <JSRemoteDebuggerConfigurationSettings>
       <option name="engineId" value="chrome" />
       <option name="fileUrl" value="http://localhost:8989" />
-      <mapping url="http://localhost:8989/Calendar" local-file="$PROJECT_DIR$/Calendar" />
+      <mapping local-file="$PROJECT_DIR$/Calendar" url="http://localhost:8989/Calendar" />
-      <mapping url="http://localhost:8989/MainMenuView.js" local-file="$PROJECT_DIR$/MainMenuView.js" />
+      <mapping local-file="$PROJECT_DIR$/MainMenuView.js" url="http://localhost:8989/MainMenuView.js" />
-      <mapping url="http://localhost:8989/Settings" local-file="$PROJECT_DIR$/Settings" />
+      <mapping local-file="$PROJECT_DIR$/Settings" url="http://localhost:8989/Settings" />
-      <mapping url="http://localhost:8989/Upcoming" local-file="$PROJECT_DIR$/Upcoming" />
+      <mapping local-file="$PROJECT_DIR$/Upcoming" url="http://localhost:8989/Upcoming" />
-      <mapping url="http://localhost:8989/app.js" local-file="$PROJECT_DIR$/app.js" />
+      <mapping local-file="$PROJECT_DIR$/app.js" url="http://localhost:8989/app.js" />
-      <mapping url="http://localhost:8989/Mixins" local-file="$PROJECT_DIR$/Mixins" />
+      <mapping local-file="$PROJECT_DIR$/Mixins" url="http://localhost:8989/Mixins" />
-      <mapping url="http://localhost:8989/Missing" local-file="$PROJECT_DIR$/Missing" />
+      <mapping local-file="$PROJECT_DIR$/Missing" url="http://localhost:8989/Missing" />
-      <mapping url="http://localhost:8989/Quality" local-file="$PROJECT_DIR$/Quality" />
+      <mapping local-file="$PROJECT_DIR$/Quality" url="http://localhost:8989/Quality" />
-      <mapping url="http://localhost:8989/Config.js" local-file="$PROJECT_DIR$/Config.js" />
+      <mapping local-file="$PROJECT_DIR$/Config.js" url="http://localhost:8989/Config.js" />
-      <mapping url="http://localhost:8989/Shared" local-file="$PROJECT_DIR$/Shared" />
+      <mapping local-file="$PROJECT_DIR$/Shared" url="http://localhost:8989/Shared" />
-      <mapping url="http://localhost:8989/AddSeries" local-file="$PROJECT_DIR$/AddSeries" />
+      <mapping local-file="$PROJECT_DIR$/AddSeries" url="http://localhost:8989/AddSeries" />
-      <mapping url="http://localhost:8989/HeaderView.js" local-file="$PROJECT_DIR$/HeaderView.js" />
+      <mapping local-file="$PROJECT_DIR$/HeaderView.js" url="http://localhost:8989/HeaderView.js" />
-      <mapping url="http://localhost:8989" local-file="$PROJECT_DIR$" />
+      <mapping local-file="$PROJECT_DIR$" url="http://localhost:8989" />
-      <mapping url="http://localhost:8989/Routing.js" local-file="$PROJECT_DIR$/Routing.js" />
+      <mapping local-file="$PROJECT_DIR$/Routing.js" url="http://localhost:8989/Routing.js" />
-      <mapping url="http://localhost:8989/Controller.js" local-file="$PROJECT_DIR$/Controller.js" />
+      <mapping local-file="$PROJECT_DIR$/Controller.js" url="http://localhost:8989/Controller.js" />
-      <mapping url="http://localhost:8989/Series" local-file="$PROJECT_DIR$/Series" />
+      <mapping local-file="$PROJECT_DIR$/Series" url="http://localhost:8989/Series" />
     </JSRemoteDebuggerConfigurationSettings>
     <RunnerSettings RunnerId="JavascriptDebugRunner" />
     <ConfigurationWrapper RunnerId="JavascriptDebugRunner" />

UI/.idea/runConfigurations/Debug___Firefox.xml

@@ -3,22 +3,22 @@
     <JSRemoteDebuggerConfigurationSettings>
       <option name="engineId" value="firefox" />
       <option name="fileUrl" value="http://localhost:8989" />
-      <mapping url="http://localhost:8989/Calendar" local-file="$PROJECT_DIR$/Calendar" />
+      <mapping local-file="$PROJECT_DIR$/Calendar" url="http://localhost:8989/Calendar" />
-      <mapping url="http://localhost:8989/MainMenuView.js" local-file="$PROJECT_DIR$/MainMenuView.js" />
+      <mapping local-file="$PROJECT_DIR$/MainMenuView.js" url="http://localhost:8989/MainMenuView.js" />
-      <mapping url="http://localhost:8989/Settings" local-file="$PROJECT_DIR$/Settings" />
+      <mapping local-file="$PROJECT_DIR$/Settings" url="http://localhost:8989/Settings" />
-      <mapping url="http://localhost:8989/Upcoming" local-file="$PROJECT_DIR$/Upcoming" />
+      <mapping local-file="$PROJECT_DIR$/Upcoming" url="http://localhost:8989/Upcoming" />
-      <mapping url="http://localhost:8989/app.js" local-file="$PROJECT_DIR$/app.js" />
+      <mapping local-file="$PROJECT_DIR$/app.js" url="http://localhost:8989/app.js" />
-      <mapping url="http://localhost:8989/Mixins" local-file="$PROJECT_DIR$/Mixins" />
+      <mapping local-file="$PROJECT_DIR$/Mixins" url="http://localhost:8989/Mixins" />
-      <mapping url="http://localhost:8989/Missing" local-file="$PROJECT_DIR$/Missing" />
+      <mapping local-file="$PROJECT_DIR$/Missing" url="http://localhost:8989/Missing" />
-      <mapping url="http://localhost:8989/Config.js" local-file="$PROJECT_DIR$/Config.js" />
+      <mapping local-file="$PROJECT_DIR$/Config.js" url="http://localhost:8989/Config.js" />
-      <mapping url="http://localhost:8989/Quality" local-file="$PROJECT_DIR$/Quality" />
+      <mapping local-file="$PROJECT_DIR$/Quality" url="http://localhost:8989/Quality" />
-      <mapping url="http://localhost:8989/AddSeries" local-file="$PROJECT_DIR$/AddSeries" />
+      <mapping local-file="$PROJECT_DIR$/AddSeries" url="http://localhost:8989/AddSeries" />
-      <mapping url="http://localhost:8989/Shared" local-file="$PROJECT_DIR$/Shared" />
+      <mapping local-file="$PROJECT_DIR$/Shared" url="http://localhost:8989/Shared" />
-      <mapping url="http://localhost:8989/HeaderView.js" local-file="$PROJECT_DIR$/HeaderView.js" />
+      <mapping local-file="$PROJECT_DIR$/HeaderView.js" url="http://localhost:8989/HeaderView.js" />
-      <mapping url="http://localhost:8989" local-file="$PROJECT_DIR$" />
+      <mapping local-file="$PROJECT_DIR$" url="http://localhost:8989" />
-      <mapping url="http://localhost:8989/Routing.js" local-file="$PROJECT_DIR$/Routing.js" />
+      <mapping local-file="$PROJECT_DIR$/Routing.js" url="http://localhost:8989/Routing.js" />
-      <mapping url="http://localhost:8989/Controller.js" local-file="$PROJECT_DIR$/Controller.js" />
+      <mapping local-file="$PROJECT_DIR$/Controller.js" url="http://localhost:8989/Controller.js" />
-      <mapping url="http://localhost:8989/Series" local-file="$PROJECT_DIR$/Series" />
+      <mapping local-file="$PROJECT_DIR$/Series" url="http://localhost:8989/Series" />
     </JSRemoteDebuggerConfigurationSettings>
     <RunnerSettings RunnerId="JavascriptDebugRunner" />
     <ConfigurationWrapper RunnerId="JavascriptDebugRunner" />

UI/Content/backbone.backgrid.paginator.css

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

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;
+      }
+    }
+  }
+}

UI/Index.html

@@ -10,7 +10,7 @@
     <link href="/Content/Messenger/messenger.future.css" rel='stylesheet' type='text/css'/>
     <link href="/content/theme.css" rel='stylesheet' type='text/css'>
     <link href="/content/fullcalendar.css" rel='stylesheet' type='text/css'>
-    <link href="/content/backbone.backgrid.paginator.css" rel='stylesheet' type='text/css'/>
+    <link href="/content/backbone.css" rel='stylesheet' type='text/css'/>
     <link href="/content/backbone.backgrid.filter.css" rel='stylesheet' type='text/css'/>
     <link href="/content/bootstrap.toggle-switch.css" rel='stylesheet' type='text/css'/>
     <link href="/AddSeries/addseries.css" rel='stylesheet' type='text/css'/>

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 .pager-btn": "changePage"
-        "click i": "preventLinkClick"
     },
 
     windowSize: 1,
 
     fastForwardHandleLabels: {
-        first: '<i class="icon-fast-backward"></i>',
+        first: 'icon-fast-backward',
-        prev : '<i class="icon-backward"></i>',
+        prev : 'icon-backward',
-        next : '<i class="icon-forward"></i>',
+        next : 'icon-forward',
-        last : '<i class="icon-fast-forward"></i>'
+        last : 'icon-fast-forward'
     },
 
     changePage: function (e) {
@@ -142,31 +143,27 @@ Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({
             return;
         }
 
-        if (!$(target).is('a')) {
+        var label = target.attr('data-action');
-            target = target.parent('a');
-        }
-
-        var label = target.html();
         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) {
+    makeHandles: function () {
-        e.preventDefault();
+
+        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;
     }
 });

UI/Shared/BackgridPaginatorTemplate.html

@@ -0,0 +1,12 @@
+<ul>
+    {{debug}}
+    {{#each handles}}
+        <li {{#if className}}class="{{className}}"{{/if}}>
+            {{#if pageNumber}}
+                <span>{{label}}</span>
+            {{else}}
+            <i class="pager-btn clickable {{label}}" data-action="{{action}}"></i>
+            {{/if}}
+        </li>
+    {{/each}}
+</ul>