New: Jump to page on tables (click on page number)

src/UI/.idea/jsLibraryMappings.xml

@@ -1,3 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project version="4" />
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <excludedPredefinedLibrary name="HTML" />
+    <excludedPredefinedLibrary name="HTML5 / EcmaScript 5" />
+  </component>
+</project>
 

src/UI/.idea/jsLinters/jshint.xml

@@ -8,16 +8,16 @@
     <option es3="false" />
     <option forin="true" />
     <option immed="true" />
+    <option latedef="true" />
     <option newcap="true" />
     <option noarg="true" />
     <option noempty="false" />
     <option nonew="true" />
     <option plusplus="false" />
     <option undef="true" />
+    <option unused="true" />
     <option strict="true" />
     <option trailing="false" />
-    <option latedef="true" />
-    <option unused="true" />
     <option quotmark="single" />
     <option maxdepth="3" />
     <option asi="false" />

src/UI/Content/Backgrid/paginator.less

@@ -34,6 +34,10 @@
         text-decoration : none;
       }
 
+      select {
+        width: auto;
+      }
+
       .pager-btn {
         .clickable;
       }

src/UI/Handlebars/Helpers/Enumerable.js

@@ -0,0 +1,25 @@
+'use strict';
+define(
+    [
+        'handlebars'
+    ], function (Handlebars) {
+        Handlebars.registerHelper('times', function(n, block) {
+            var accum = '';
+
+            for(var i = 0; i < n; ++i) {
+                accum += block.fn(i);
+            }
+
+            return accum;
+        });
+
+        Handlebars.registerHelper('for', function(from, to, incr, block) {
+            var accum = '';
+
+            for(var i = from; i < to; i += incr) {
+                accum += block.fn(i);
+            }
+
+            return accum;
+        });
+    });

src/UI/Handlebars/backbone.marionette.templates.js

@@ -11,6 +11,7 @@ define(
         'Handlebars/Helpers/Quality',
         'Handlebars/Helpers/System',
         'Handlebars/Helpers/EachReverse',
+        'Handlebars/Helpers/EachReverse',
         'Handlebars/Handlebars.Debug'
     ], function (Templates) {
         return function () {

src/UI/Shared/Grid/JumpToPageTemplate.html

@@ -0,0 +1,9 @@
+<select>
+    {{#each pages}}
+        {{#if current}}
+            <option value="{{page}}" selected="selected">{{page}}</option>
+        {{else}}
+            <option value="{{page}}">{{page}}</option>
+        {{/if}}
+    {{/each}}
+</select>

src/UI/Shared/Grid/Pager.js

@@ -1,16 +1,20 @@
 'use strict';
 define(
     [
+        'jquery',
         'marionette',
         'backgrid.paginator'
-    ], function (Marionette, Paginator) {
+    ], function ($, Marionette, Paginator) {
 
         return Paginator.extend({
 
             template: 'Shared/Grid/PagerTemplate',
 
             events: {
-                'click .pager-btn': 'changePage'
+                'click .pager-btn'             : 'changePage',
+                'click .x-page-number'         : '_showPageJumper',
+                'change .x-page-number select' : '_jumpToPage',
+                'blur .x-page-number select'   : 'render'
             },
 
             windowSize: 1,
@@ -25,7 +29,7 @@ define(
             changePage: function (e) {
                 e.preventDefault();
 
-                var target =this.$(e.target);
+                var target = this.$(e.target);
 
                 if (target.closest('li').hasClass('disabled')) {
                     return;
@@ -77,7 +81,7 @@ define(
                 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;
+                currentPage = firstPage ? currentPage - 1 : currentPage;
                 var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize;
                 var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize);
 
@@ -145,6 +149,42 @@ define(
                 this.delegateEvents();
 
                 return this;
+            },
+
+            _showPageJumper: function (e) {
+                if ($(e.target).is('select')) {
+                    return;
+                }
+
+                var templateFunction = Marionette.TemplateCache.get('Shared/Grid/JumpToPageTemplate');
+                var state = this.collection.state;
+                var currentPage = Math.max(state.currentPage, state.firstPage);
+                currentPage = state.firstPage ? currentPage - 1 : currentPage;
+
+                var pages = [];
+
+                for (var i = 0; i < this.collection.state.lastPage; i++) {
+                    if (i === currentPage) {
+                        pages.push({ page: i + 1, current: true });
+                    }
+
+                    else {
+                        pages.push({ page: i + 1 });
+                    }
+                }
+
+                this.$el.find('.x-page-number').html(templateFunction({
+                    pages      : pages
+                }));
+
+                this.$el.find('.x-page-number select').trigger('click');
+            },
+
+            _jumpToPage: function () {
+                var selectedPage = parseInt(this.$el.find('.x-page-number select').val(), 10);
+
+                this.$el.find('.x-page-number').html('<i class="icon-spinner icon-spin"></i>');
+                this.collection.getPage(selectedPage);
             }
         });
     });

src/UI/Shared/Grid/PagerTemplate.html

@@ -2,7 +2,7 @@
     {{#each handles}}
         <li {{#if className}}class="{{className}}"{{/if}} >
             {{#if pageNumber}}
-                <span>{{pageNumber}} / {{lastPage}}</span>
+                <span class="x-page-number">{{pageNumber}} / {{lastPage}}</span>
             {{else}}
             <i class="pager-btn clickable {{label}}" data-action="{{action}}"/>
             {{/if}}