From c401e114e21100022b55aafbf1bb1ef46bc51a89 Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Fri, 8 May 2015 17:36:31 -0300
Subject: [PATCH] Ranking pagination

---
 index.html                    |   2 ++
 js/jquery.simplePagination.js | 341 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 js/main.js                    |  71 +++++++++++++++++++++++++++++++++++++++++++++--------------------------
 js/requirejs-config.js        |   6 +++++-
 sass/_proposal_detail.scss    |  44 ++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 437 insertions(+), 27 deletions(-)
 create mode 100644 js/jquery.simplePagination.js

diff --git a/index.html b/index.html
index 619addd..d838e99 100644
--- a/index.html
+++ b/index.html
@@ -292,6 +292,7 @@
     <script id="results" type="text/x-handlebars-template">
       <div class="loading">Carregando...</div>
       <div class="results-content hide">
+        <span class="total">Total de votos: <span class="value">{{pagination.total}}</span></span>
         <a href="#" class="vote-result">Fechar</a>
         <table>
           <tr class="header">
@@ -311,6 +312,7 @@
             </tr>
           {{/each}}
         </table>
+        <div class="paging"></div>
         <div class="updated-at">
           <span>Última atualização </span>
           <span class="timeago" title="{{updated_at}}"></span>
diff --git a/js/jquery.simplePagination.js b/js/jquery.simplePagination.js
new file mode 100644
index 0000000..2242efb
--- /dev/null
+++ b/js/jquery.simplePagination.js
@@ -0,0 +1,341 @@
+/**
+* simplePagination.js v1.6
+* A simple jQuery pagination plugin.
+* http://flaviusmatis.github.com/simplePagination.js/
+*
+* Copyright 2012, Flavius Matis
+* Released under the MIT license.
+* http://flaviusmatis.github.com/license.html
+*/
+
+(function($){
+
+	var methods = {
+		init: function(options) {
+			var o = $.extend({
+				items: 1,
+				itemsOnPage: 1,
+				pages: 0,
+				displayedPages: 5,
+				edges: 2,
+				currentPage: 0,
+				hrefTextPrefix: '#page-',
+				hrefTextSuffix: '',
+				prevText: 'Prev',
+				nextText: 'Next',
+				ellipseText: '&hellip;',
+				cssStyle: 'light-theme',
+				listStyle: '',
+				labelMap: [],
+				selectOnClick: true,
+				nextAtFront: false,
+				invertPageOrder: false,
+				useStartEdge : true,
+				useEndEdge : true,
+				onPageClick: function(pageNumber, event) {
+					// Callback triggered when a page is clicked
+					// Page number is given as an optional parameter
+				},
+				onInit: function() {
+					// Callback triggered immediately after initialization
+				}
+			}, options || {});
+
+			var self = this;
+
+			o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
+			if (o.currentPage)
+				o.currentPage = o.currentPage - 1;
+			else
+				o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
+			o.halfDisplayed = o.displayedPages / 2;
+
+			this.each(function() {
+				self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
+				methods._draw.call(self);
+			});
+
+			o.onInit();
+
+			return this;
+		},
+
+		selectPage: function(page) {
+			methods._selectPage.call(this, page - 1);
+			return this;
+		},
+
+		prevPage: function() {
+			var o = this.data('pagination');
+			if (!o.invertPageOrder) {
+				if (o.currentPage > 0) {
+					methods._selectPage.call(this, o.currentPage - 1);
+				}
+			} else {
+				if (o.currentPage < o.pages - 1) {
+					methods._selectPage.call(this, o.currentPage + 1);
+				}
+			}
+			return this;
+		},
+
+		nextPage: function() {
+			var o = this.data('pagination');
+			if (!o.invertPageOrder) {
+				if (o.currentPage < o.pages - 1) {
+					methods._selectPage.call(this, o.currentPage + 1);
+				}
+			} else {
+				if (o.currentPage > 0) {
+					methods._selectPage.call(this, o.currentPage - 1);
+				}
+			}
+			return this;
+		},
+
+		getPagesCount: function() {
+			return this.data('pagination').pages;
+		},
+
+		setPagesCount: function(count) {
+			this.data('pagination').pages = count;
+		},
+
+		getCurrentPage: function () {
+			return this.data('pagination').currentPage + 1;
+		},
+
+		destroy: function(){
+			this.empty();
+			return this;
+		},
+
+		drawPage: function (page) {
+			var o = this.data('pagination');
+			o.currentPage = page - 1;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		redraw: function(){
+			methods._draw.call(this);
+			return this;
+		},
+
+		disable: function(){
+			var o = this.data('pagination');
+			o.disabled = true;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		enable: function(){
+			var o = this.data('pagination');
+			o.disabled = false;
+			this.data('pagination', o);
+			methods._draw.call(this);
+			return this;
+		},
+
+		updateItems: function (newItems) {
+			var o = this.data('pagination');
+			o.items = newItems;
+			o.pages = methods._getPages(o);
+			this.data('pagination', o);
+			methods._draw.call(this);
+		},
+
+		updateItemsOnPage: function (itemsOnPage) {
+			var o = this.data('pagination');
+			o.itemsOnPage = itemsOnPage;
+			o.pages = methods._getPages(o);
+			this.data('pagination', o);
+			methods._selectPage.call(this, 0);
+			return this;
+		},
+
+		_draw: function() {
+			var	o = this.data('pagination'),
+				interval = methods._getInterval(o),
+				i,
+				tagName;
+
+			methods.destroy.call(this);
+			
+			tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
+
+			var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this);
+
+			// Generate Prev link
+			if (o.prevText) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
+			}
+
+			// Generate Next link (if option set for at front)
+			if (o.nextText && o.nextAtFront) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
+			}
+
+			// Generate start edges
+			if (!o.invertPageOrder) {
+				if (interval.start > 0 && o.edges > 0) {
+					if(o.useStartEdge) {
+						var end = Math.min(o.edges, interval.start);
+						for (i = 0; i < end; i++) {
+							methods._appendItem.call(this, i);
+						}
+					}
+					if (o.edges < interval.start && (interval.start - o.edges != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (interval.start - o.edges == 1) {
+						methods._appendItem.call(this, o.edges);
+					}
+				}
+			} else {
+				if (interval.end < o.pages && o.edges > 0) {
+					if(o.useStartEdge) {
+						var begin = Math.max(o.pages - o.edges, interval.end);
+						for (i = o.pages - 1; i >= begin; i--) {
+							methods._appendItem.call(this, i);
+						}
+					}
+
+					if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (o.pages - o.edges - interval.end == 1) {
+						methods._appendItem.call(this, interval.end);
+					}
+				}
+			}
+
+			// Generate interval links
+			if (!o.invertPageOrder) {
+				for (i = interval.start; i < interval.end; i++) {
+					methods._appendItem.call(this, i);
+				}
+			} else {
+				for (i = interval.end - 1; i >= interval.start; i--) {
+					methods._appendItem.call(this, i);
+				}
+			}
+
+			// Generate end edges
+			if (!o.invertPageOrder) {
+				if (interval.end < o.pages && o.edges > 0) {
+					if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (o.pages - o.edges - interval.end == 1) {
+						methods._appendItem.call(this, interval.end);
+					}
+					if(o.useEndEdge) {
+						var begin = Math.max(o.pages - o.edges, interval.end);
+						for (i = begin; i < o.pages; i++) {
+							methods._appendItem.call(this, i);
+						}
+					}
+				}
+			} else {
+				if (interval.start > 0 && o.edges > 0) {
+					if (o.edges < interval.start && (interval.start - o.edges != 1)) {
+						$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
+					} else if (interval.start - o.edges == 1) {
+						methods._appendItem.call(this, o.edges);
+					}
+
+					if(o.useEndEdge) {
+						var end = Math.min(o.edges, interval.start);
+						for (i = end - 1; i >= 0; i--) {
+							methods._appendItem.call(this, i);
+						}
+					}
+				}
+			}
+
+			// Generate Next link (unless option is set for at front)
+			if (o.nextText && !o.nextAtFront) {
+				methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
+			}
+		},
+
+		_getPages: function(o) {
+			var pages = Math.ceil(o.items / o.itemsOnPage);
+			return pages || 1;
+		},
+
+		_getInterval: function(o) {
+			return {
+				start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
+				end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
+			};
+		},
+
+		_appendItem: function(pageIndex, opts) {
+			var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
+
+			pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
+
+			options = {
+				text: pageIndex + 1,
+				classes: ''
+			};
+
+			if (o.labelMap.length && o.labelMap[pageIndex]) {
+				options.text = o.labelMap[pageIndex];
+			}
+
+			options = $.extend(options, opts || {});
+
+			if (pageIndex == o.currentPage || o.disabled) {
+				if (o.disabled) {
+					$linkWrapper.addClass('disabled');
+				} else {
+					$linkWrapper.addClass('active');
+				}
+				$link = $('<span class="current">' + (options.text) + '</span>');
+			} else {
+				$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
+				$link.click(function(event){
+					return methods._selectPage.call(self, pageIndex, event);
+				});
+			}
+
+			if (options.classes) {
+				$link.addClass(options.classes);
+			}
+
+			$linkWrapper.append($link);
+
+			if ($ul.length) {
+				$ul.append($linkWrapper);
+			} else {
+				self.append($linkWrapper);
+			}
+		},
+
+		_selectPage: function(pageIndex, event) {
+			var o = this.data('pagination');
+			o.currentPage = pageIndex;
+			if (o.selectOnClick) {
+				methods._draw.call(this);
+			}
+			return o.onPageClick(pageIndex + 1, event);
+		}
+
+	};
+
+	$.fn.pagination = function(method) {
+
+		// Method calling logic
+		if (methods[method] && method.charAt(0) != '_') {
+			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+		} else if (typeof method === 'object' || !method) {
+			return methods.init.apply(this, arguments);
+		} else {
+			$.error('Method ' +  method + ' does not exist on jQuery.pagination');
+		}
+
+	};
+
+})(jQuery);
diff --git a/js/main.js b/js/main.js
index 01d9047..772c99d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,7 +17,7 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F
 
   var loginButton;
 
-  var participa = true;
+  var participa = false;
   if(participa){
     var host = 'http://www.participa.br';
     var private_token = '375bee7e17d0021af7160ce664874618';  //participa
@@ -89,46 +89,65 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F
 
             $body.off('click', '.vote-result');
             $body.on('click', '.vote-result', function(e) {
-
               var $this = $(this);
               var $proposalDetail = $this.parents('.proposal-detail');
               var $resultsContainer = $proposalDetail.find('.results-container');
 
-              // $resultsContainer.toggle();
-              // $resultsContainer.toggleClass('hide');
-
               if($resultsContainer.css('display') === 'none') {
-
-                $resultsContainer.find('.loading').show();
-                $resultsContainer.find('.results-content').hide();
-
-                var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + private_token + '&limit=10';
-                $.getJSON(url).done(function( data ) {
-
-                  $resultsContainer.html(resultsTemplate(data));
-                  $resultsContainer.find('.loading').hide();
-                  $resultsContainer.find('.results-content').show();
-                  $(".timeago").timeago();
-                  $resultsContainer.show();
-
-                  // scroll to the end
-                  $('html, body').animate({
-                    scrollTop: $(document).height()
-                  }, 'fast');
-                });
-                $('.experience-proposal-container').hide();
-                $('.talk-proposal-container').hide();
+                Main.loadRanking($resultsContainer, topic_id, 1);
               } else {
                 $('.experience-proposal-container').show();
                 $('.talk-proposal-container').show();
                 $resultsContainer.hide();
               }
-
               e.preventDefault();
             });
           });
         },
 
+        loadRanking: function($resultsContainer, topic_id, page) {
+          $resultsContainer.find('.loading').show();
+          $resultsContainer.find('.results-content').hide();
+
+          var per_page = 10;
+          var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + private_token + '&per_page='+per_page+'&page='+page;
+          $.getJSON(url).done(function( data, stats, xhr ) {
+            data.pagination = {
+              total: parseInt(xhr.getResponseHeader('Total')),
+              per_page: parseInt(xhr.getResponseHeader('Per-Page')),
+              page: page,
+            };
+
+            $resultsContainer.html(resultsTemplate(data));
+            $resultsContainer.find('.loading').hide();
+            $resultsContainer.find('.results-content').show();
+            $(".timeago").timeago();
+            $resultsContainer.show();
+
+            if(data.pagination.total > data.pagination.per_page) {
+              $resultsContainer.find('.paging').pagination({
+                items: data.pagination.total,
+                itemsOnPage: data.pagination.per_page,
+                currentPage: data.pagination.page,
+                prevText: 'Anterior',
+                nextText: 'Próximo',
+                cssStyle: 'compact-theme',
+                onPageClick: function(page, e) {
+                  Main.loadRanking($resultsContainer, topic_id, page);
+                  e.preventDefault();
+                }
+              });
+            }
+
+            // scroll to the end
+            $('html, body').animate({
+              scrollTop: $(document).height()
+            }, 'fast');
+          });
+          $('.experience-proposal-container').hide();
+          $('.talk-proposal-container').hide();
+        },
+
         loginCallback: function(loggedIn, token) {
           logged_in = loggedIn;
           $('.login .message').text('');
diff --git a/js/requirejs-config.js b/js/requirejs-config.js
index fde4be3..4f06788 100644
--- a/js/requirejs-config.js
+++ b/js/requirejs-config.js
@@ -14,6 +14,7 @@ requirejs.config({
         jquery_cookie: 'jquery.cookie',
         jquery_timeago: 'jquery.timeago',
         jquery_timeago_pt: 'jquery.timeago.pt-br',
+        jquery_simplePagination: 'jquery.simplePagination',
         handlebars: 'handlebars-v3.0.1',
         handlebars_helpers: 'handlebars-helpers',
         jquery_maxlength: 'jquery.maxlength.min',
@@ -37,6 +38,9 @@ requirejs.config({
       'jquery_timeago_pt': {
         deps: ['jquery_timeago']
       },
+      'jquery_simplePagination': {
+        deps: ['jquery']
+      },
       'jquery_ui': {
         deps: ['jquery']
       },
@@ -62,5 +66,5 @@ requirejs.config({
     }
 });
 
-requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'handlebars_helpers']);
+requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'jquery_simplePagination', 'handlebars_helpers']);
 requirejs(['slick', 'fastclick', 'jquery_maxlength', 'layout','main']);
diff --git a/sass/_proposal_detail.scss b/sass/_proposal_detail.scss
index 725da6a..2f858a0 100644
--- a/sass/_proposal_detail.scss
+++ b/sass/_proposal_detail.scss
@@ -140,6 +140,50 @@
             color: gray;
             float: right;
           }
+          .total {
+            padding: 10px;
+            color: gray;
+            font-size: 14px;
+            float: left;
+          }
+          .simple-pagination {
+            padding: 5px 5px 5px 0;
+            ul {
+              list-style: none;
+              padding: 0;
+              display: table;
+              margin: 0 auto;
+              li {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                float: left;
+                a, span {
+                  float: left;
+                  color: white;
+                  font-size: 14px;
+                  line-height: 24px;
+                  font-weight: normal;
+                  text-align: center;
+                  min-width: 14px;
+                  padding: 0 7px;
+                  background: $color;
+                  width: 100%;
+                  text-transform: none;
+                }
+                .prev {
+                  border-radius: 3px 0 0 3px;
+                }
+                .next {
+                  border-right: 1px solid #AAA;
+                  border-radius: 0 3px 3px 0;
+                }
+                .current {
+                  opacity: 0.5;
+                }
+              }
+            }
+          }
         }
         table {
           clear: both;
--
libgit2 0.21.2