Merge pull request #10 from emkael/custom-pagination

Custom pagination
Fixes #8 

2 files changed, 53 insertions, 10 deletions

diff --git a/http/res/ranking.js b/http/res/ranking.js
index 61cb856..f5b3d5e 100644
--- a/http/res/ranking.js
+++ b/http/res/ranking.js
@@ -69,17 +69,22 @@ var ranking = {
 
     savedParams : new Map(),
 
+    paramChanged: function(params, param) {
+        var newParam = params.get(param) || [];
+        var oldParam = ranking.savedParams.get(param) || [];
+        return (newParam.length != oldParam.length) || (newParam.join(',') != oldParam.join(','));
+    },
+
     readHash : function() {
         var params = ranking.parseHash(location.hash);
         var allParams = ['age', 'gender', 'region', 'name'];
         var paramsChanged = false;
         allParams.forEach(function(param) {
-            var newParam = params.get(param) || [];
-            var oldParam = ranking.savedParams.get(param) || [];
-            if (newParam.length != oldParam.length || newParam.join(',') != oldParam.join(',')) {
-                paramsChanged = true;
-            }
+            paramsChanged |= ranking.paramChanged(params, param);
         });
+        if (ranking.paramChanged(params, 'pagesize')) {
+            $('table.data-table').removeAttr('data-paginate');
+        }
         $('button.btn-primary').removeClass('btn-primary');
         params.forEach(function(values, param) {
             values.forEach(function(value) {
@@ -112,7 +117,11 @@ var ranking = {
         }
         $('table.data-table, .filters .panel-body').css('opacity', 1);
         ranking.filtersDisabled = false;
-        var pagesize = 40;
+        ranking.paginate(params);
+    },
+
+    paginate: function(params) {
+        var pagesize = params.get('pagesize') ? parseInt(params.get('pagesize')[0]) : parseInt($('select#pagesize').val());
         var page = params.get('page') || [0];
         var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0]));
         $('table.data-table tbody tr[data-paginate-visible=1]').eq(0).addClass('gold');
@@ -120,6 +129,7 @@ var ranking = {
         $('table.data-table tbody tr[data-paginate-visible=1]').eq(2).addClass('bronze');
         ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1);
         ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1);
+        $(document).trigger('pagesizeChanged', { 'count': count, 'size': pagesize });
     },
 
     filtersDisabled: false,
@@ -134,7 +144,7 @@ var ranking = {
                         row.hide();
                         hidden = true;
                     }
-                } else if (param != 'page') {
+                } else if (param.substr(0, 4) != 'page') {
                     if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
                         row.hide();
                         hidden = true;
@@ -192,10 +202,13 @@ var ranking = {
         $('.container .table tbody tr').click(ranking.playerClick);
 
         $(document).ready(function() {
-            $(window).on('hashchange', ranking.readHash).trigger('hashchange');
+            $(window).on('hashchange', function() {
+                ranking.filtersDisabled = true;
+                $('table.data-table, .filters .panel-body').css('opacity', 0.1);
+                ranking.readHash();
+            }).trigger('hashchange');
         });
 
-
         var handleParams = function(callback, target, ev) {
             if (!ranking.filtersDisabled) {
                 ranking.filtersDisabled = true;
@@ -261,7 +274,22 @@ var ranking = {
             }, $(this));
         });
 
+        $('select#pagesize').change(function() {
+            $('table.data-table').removeAttr('data-paginate');
+            handleParams(function(target, ev) {
+                var params = ranking.parseHash(location.hash);
+                params.delete('page');
+                params.set('pagesize', [parseInt(target.val())]);
+                return params;
+            }, $(this));
+        });
+
         $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage);
+
+        $(document).on('pagesizeChanged', function(ev, params) {
+            $('span#paginate-count').text(params.count);
+            $('select#pagesize').val(params.size);
+        });
     }
 
 };
diff --git a/templates/ranking.html b/templates/ranking.html
index 6451c35..7c10843 100644
--- a/templates/ranking.html
+++ b/templates/ranking.html
@@ -149,7 +149,22 @@
           </div>
         </div>
       </div>
-      <div id="top-paginator" class="text-center"></div>
+      <div class="form-inline text-center">
+        <div class="input-group" id="top-paginator"></div>
+        <div class="input-group" role="group">
+          <div class="input-group-addon">Na stronę:</div>
+          <div class="input-group">
+            <select id="pagesize" class="form-control">
+              <option value="50" selected="selected">50</option>
+              <option value="100">100</option>
+              <option value="200">200</option>
+              <option value="500">500</option>
+              <option value="1000">1000</option>
+            </select>
+          </div>
+          <span class="input-group-addon">razem: <span id="paginate-count">1000</span></span>
+        </div>
+      </div>
       <br />
       <div class="table-responsive">
         <table class="data-table table table-striped table-hover table-paginate">