Download as
Browse Code »

Commit c401e114e21100022b55aafbf1bb1ef46bc51a89

Authored by Victor Costa
1 parent 30e209dc
Exists in master and in 7 other branches build, build2, capa, captcha, contigency_plan_recaptcha, production, staging

Ranking pagination

Showing 5 changed files with 437 additions and 27 deletions   Show diff stats
index.html
  Diff comments   View file @c401e11
... ... @@ -292,6 +292,7 @@
292 292 <script id="results" type="text/x-handlebars-template">
293 293 <div class="loading">Carregando...</div>
294 294 <div class="results-content hide">
  295 + <span class="total">Total de votos: <span class="value">{{pagination.total}}</span></span>
295 296 <a href="#" class="vote-result">Fechar</a>
296 297 <table>
297 298 <tr class="header">
... ... @@ -311,6 +312,7 @@
311 312 </tr>
312 313 {{/each}}
313 314 </table>
  315 + <div class="paging"></div>
314 316 <div class="updated-at">
315 317 <span>Última atualização </span>
316 318 <span class="timeago" title="{{updated_at}}"></span>
... ...
js/jquery.simplePagination.js 0 → 100644
  Diff comments   View file @c401e11
... ... @@ -0,0 +1,341 @@
  1 +/**
  2 +* simplePagination.js v1.6
  3 +* A simple jQuery pagination plugin.
  4 +* http://flaviusmatis.github.com/simplePagination.js/
  5 +*
  6 +* Copyright 2012, Flavius Matis
  7 +* Released under the MIT license.
  8 +* http://flaviusmatis.github.com/license.html
  9 +*/
  10 +
  11 +(function($){
  12 +
  13 + var methods = {
  14 + init: function(options) {
  15 + var o = $.extend({
  16 + items: 1,
  17 + itemsOnPage: 1,
  18 + pages: 0,
  19 + displayedPages: 5,
  20 + edges: 2,
  21 + currentPage: 0,
  22 + hrefTextPrefix: '#page-',
  23 + hrefTextSuffix: '',
  24 + prevText: 'Prev',
  25 + nextText: 'Next',
  26 + ellipseText: '&hellip;',
  27 + cssStyle: 'light-theme',
  28 + listStyle: '',
  29 + labelMap: [],
  30 + selectOnClick: true,
  31 + nextAtFront: false,
  32 + invertPageOrder: false,
  33 + useStartEdge : true,
  34 + useEndEdge : true,
  35 + onPageClick: function(pageNumber, event) {
  36 + // Callback triggered when a page is clicked
  37 + // Page number is given as an optional parameter
  38 + },
  39 + onInit: function() {
  40 + // Callback triggered immediately after initialization
  41 + }
  42 + }, options || {});
  43 +
  44 + var self = this;
  45 +
  46 + o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
  47 + if (o.currentPage)
  48 + o.currentPage = o.currentPage - 1;
  49 + else
  50 + o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
  51 + o.halfDisplayed = o.displayedPages / 2;
  52 +
  53 + this.each(function() {
  54 + self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
  55 + methods._draw.call(self);
  56 + });
  57 +
  58 + o.onInit();
  59 +
  60 + return this;
  61 + },
  62 +
  63 + selectPage: function(page) {
  64 + methods._selectPage.call(this, page - 1);
  65 + return this;
  66 + },
  67 +
  68 + prevPage: function() {
  69 + var o = this.data('pagination');
  70 + if (!o.invertPageOrder) {
  71 + if (o.currentPage > 0) {
  72 + methods._selectPage.call(this, o.currentPage - 1);
  73 + }
  74 + } else {
  75 + if (o.currentPage < o.pages - 1) {
  76 + methods._selectPage.call(this, o.currentPage + 1);
  77 + }
  78 + }
  79 + return this;
  80 + },
  81 +
  82 + nextPage: function() {
  83 + var o = this.data('pagination');
  84 + if (!o.invertPageOrder) {
  85 + if (o.currentPage < o.pages - 1) {
  86 + methods._selectPage.call(this, o.currentPage + 1);
  87 + }
  88 + } else {
  89 + if (o.currentPage > 0) {
  90 + methods._selectPage.call(this, o.currentPage - 1);
  91 + }
  92 + }
  93 + return this;
  94 + },
  95 +
  96 + getPagesCount: function() {
  97 + return this.data('pagination').pages;
  98 + },
  99 +
  100 + setPagesCount: function(count) {
  101 + this.data('pagination').pages = count;
  102 + },
  103 +
  104 + getCurrentPage: function () {
  105 + return this.data('pagination').currentPage + 1;
  106 + },
  107 +
  108 + destroy: function(){
  109 + this.empty();
  110 + return this;
  111 + },
  112 +
  113 + drawPage: function (page) {
  114 + var o = this.data('pagination');
  115 + o.currentPage = page - 1;
  116 + this.data('pagination', o);
  117 + methods._draw.call(this);
  118 + return this;
  119 + },
  120 +
  121 + redraw: function(){
  122 + methods._draw.call(this);
  123 + return this;
  124 + },
  125 +
  126 + disable: function(){
  127 + var o = this.data('pagination');
  128 + o.disabled = true;
  129 + this.data('pagination', o);
  130 + methods._draw.call(this);
  131 + return this;
  132 + },
  133 +
  134 + enable: function(){
  135 + var o = this.data('pagination');
  136 + o.disabled = false;
  137 + this.data('pagination', o);
  138 + methods._draw.call(this);
  139 + return this;
  140 + },
  141 +
  142 + updateItems: function (newItems) {
  143 + var o = this.data('pagination');
  144 + o.items = newItems;
  145 + o.pages = methods._getPages(o);
  146 + this.data('pagination', o);
  147 + methods._draw.call(this);
  148 + },
  149 +
  150 + updateItemsOnPage: function (itemsOnPage) {
  151 + var o = this.data('pagination');
  152 + o.itemsOnPage = itemsOnPage;
  153 + o.pages = methods._getPages(o);
  154 + this.data('pagination', o);
  155 + methods._selectPage.call(this, 0);
  156 + return this;
  157 + },
  158 +
  159 + _draw: function() {
  160 + var o = this.data('pagination'),
  161 + interval = methods._getInterval(o),
  162 + i,
  163 + tagName;
  164 +
  165 + methods.destroy.call(this);
  166 +
  167 + tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
  168 +
  169 + var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this);
  170 +
  171 + // Generate Prev link
  172 + if (o.prevText) {
  173 + methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
  174 + }
  175 +
  176 + // Generate Next link (if option set for at front)
  177 + if (o.nextText && o.nextAtFront) {
  178 + methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
  179 + }
  180 +
  181 + // Generate start edges
  182 + if (!o.invertPageOrder) {
  183 + if (interval.start > 0 && o.edges > 0) {
  184 + if(o.useStartEdge) {
  185 + var end = Math.min(o.edges, interval.start);
  186 + for (i = 0; i < end; i++) {
  187 + methods._appendItem.call(this, i);
  188 + }
  189 + }
  190 + if (o.edges < interval.start && (interval.start - o.edges != 1)) {
  191 + $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  192 + } else if (interval.start - o.edges == 1) {
  193 + methods._appendItem.call(this, o.edges);
  194 + }
  195 + }
  196 + } else {
  197 + if (interval.end < o.pages && o.edges > 0) {
  198 + if(o.useStartEdge) {
  199 + var begin = Math.max(o.pages - o.edges, interval.end);
  200 + for (i = o.pages - 1; i >= begin; i--) {
  201 + methods._appendItem.call(this, i);
  202 + }
  203 + }
  204 +
  205 + if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
  206 + $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  207 + } else if (o.pages - o.edges - interval.end == 1) {
  208 + methods._appendItem.call(this, interval.end);
  209 + }
  210 + }
  211 + }
  212 +
  213 + // Generate interval links
  214 + if (!o.invertPageOrder) {
  215 + for (i = interval.start; i < interval.end; i++) {
  216 + methods._appendItem.call(this, i);
  217 + }
  218 + } else {
  219 + for (i = interval.end - 1; i >= interval.start; i--) {
  220 + methods._appendItem.call(this, i);
  221 + }
  222 + }
  223 +
  224 + // Generate end edges
  225 + if (!o.invertPageOrder) {
  226 + if (interval.end < o.pages && o.edges > 0) {
  227 + if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
  228 + $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  229 + } else if (o.pages - o.edges - interval.end == 1) {
  230 + methods._appendItem.call(this, interval.end);
  231 + }
  232 + if(o.useEndEdge) {
  233 + var begin = Math.max(o.pages - o.edges, interval.end);
  234 + for (i = begin; i < o.pages; i++) {
  235 + methods._appendItem.call(this, i);
  236 + }
  237 + }
  238 + }
  239 + } else {
  240 + if (interval.start > 0 && o.edges > 0) {
  241 + if (o.edges < interval.start && (interval.start - o.edges != 1)) {
  242 + $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  243 + } else if (interval.start - o.edges == 1) {
  244 + methods._appendItem.call(this, o.edges);
  245 + }
  246 +
  247 + if(o.useEndEdge) {
  248 + var end = Math.min(o.edges, interval.start);
  249 + for (i = end - 1; i >= 0; i--) {
  250 + methods._appendItem.call(this, i);
  251 + }
  252 + }
  253 + }
  254 + }
  255 +
  256 + // Generate Next link (unless option is set for at front)
  257 + if (o.nextText && !o.nextAtFront) {
  258 + methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
  259 + }
  260 + },
  261 +
  262 + _getPages: function(o) {
  263 + var pages = Math.ceil(o.items / o.itemsOnPage);
  264 + return pages || 1;
  265 + },
  266 +
  267 + _getInterval: function(o) {
  268 + return {
  269 + start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
  270 + end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
  271 + };
  272 + },
  273 +
  274 + _appendItem: function(pageIndex, opts) {
  275 + var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
  276 +
  277 + pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
  278 +
  279 + options = {
  280 + text: pageIndex + 1,
  281 + classes: ''
  282 + };
  283 +
  284 + if (o.labelMap.length && o.labelMap[pageIndex]) {
  285 + options.text = o.labelMap[pageIndex];
  286 + }
  287 +
  288 + options = $.extend(options, opts || {});
  289 +
  290 + if (pageIndex == o.currentPage || o.disabled) {
  291 + if (o.disabled) {
  292 + $linkWrapper.addClass('disabled');
  293 + } else {
  294 + $linkWrapper.addClass('active');
  295 + }
  296 + $link = $('<span class="current">' + (options.text) + '</span>');
  297 + } else {
  298 + $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
  299 + $link.click(function(event){
  300 + return methods._selectPage.call(self, pageIndex, event);
  301 + });
  302 + }
  303 +
  304 + if (options.classes) {
  305 + $link.addClass(options.classes);
  306 + }
  307 +
  308 + $linkWrapper.append($link);
  309 +
  310 + if ($ul.length) {
  311 + $ul.append($linkWrapper);
  312 + } else {
  313 + self.append($linkWrapper);
  314 + }
  315 + },
  316 +
  317 + _selectPage: function(pageIndex, event) {
  318 + var o = this.data('pagination');
  319 + o.currentPage = pageIndex;
  320 + if (o.selectOnClick) {
  321 + methods._draw.call(this);
  322 + }
  323 + return o.onPageClick(pageIndex + 1, event);
  324 + }
  325 +
  326 + };
  327 +
  328 + $.fn.pagination = function(method) {
  329 +
  330 + // Method calling logic
  331 + if (methods[method] && method.charAt(0) != '_') {
  332 + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  333 + } else if (typeof method === 'object' || !method) {
  334 + return methods.init.apply(this, arguments);
  335 + } else {
  336 + $.error('Method ' + method + ' does not exist on jQuery.pagination');
  337 + }
  338 +
  339 + };
  340 +
  341 +})(jQuery);
... ...
js/main.js
  Diff comments   View file @c401e11
... ... @@ -17,7 +17,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
17 17  
18 18 var loginButton;
19 19  
20   - var participa = true;
  20 + var participa = false;
21 21 if(participa){
22 22 var host = 'http://www.participa.br';
23 23 var private_token = '375bee7e17d0021af7160ce664874618'; //participa
... ... @@ -89,46 +89,65 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
89 89  
90 90 $body.off('click', '.vote-result');
91 91 $body.on('click', '.vote-result', function(e) {
92   -
93 92 var $this = $(this);
94 93 var $proposalDetail = $this.parents('.proposal-detail');
95 94 var $resultsContainer = $proposalDetail.find('.results-container');
96 95  
97   - // $resultsContainer.toggle();
98   - // $resultsContainer.toggleClass('hide');
99   -
100 96 if($resultsContainer.css('display') === 'none') {
101   -
102   - $resultsContainer.find('.loading').show();
103   - $resultsContainer.find('.results-content').hide();
104   -
105   - var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + private_token + '&limit=10';
106   - $.getJSON(url).done(function( data ) {
107   -
108   - $resultsContainer.html(resultsTemplate(data));
109   - $resultsContainer.find('.loading').hide();
110   - $resultsContainer.find('.results-content').show();
111   - $(".timeago").timeago();
112   - $resultsContainer.show();
113   -
114   - // scroll to the end
115   - $('html, body').animate({
116   - scrollTop: $(document).height()
117   - }, 'fast');
118   - });
119   - $('.experience-proposal-container').hide();
120   - $('.talk-proposal-container').hide();
  97 + Main.loadRanking($resultsContainer, topic_id, 1);
121 98 } else {
122 99 $('.experience-proposal-container').show();
123 100 $('.talk-proposal-container').show();
124 101 $resultsContainer.hide();
125 102 }
126   -
127 103 e.preventDefault();
128 104 });
129 105 });
130 106 },
131 107  
  108 + loadRanking: function($resultsContainer, topic_id, page) {
  109 + $resultsContainer.find('.loading').show();
  110 + $resultsContainer.find('.results-content').hide();
  111 +
  112 + var per_page = 10;
  113 + var url = host + '/api/v1/proposals_discussion_plugin/' + topic_id + '/ranking' + '?private_token=' + private_token + '&per_page='+per_page+'&page='+page;
  114 + $.getJSON(url).done(function( data, stats, xhr ) {
  115 + data.pagination = {
  116 + total: parseInt(xhr.getResponseHeader('Total')),
  117 + per_page: parseInt(xhr.getResponseHeader('Per-Page')),
  118 + page: page,
  119 + };
  120 +
  121 + $resultsContainer.html(resultsTemplate(data));
  122 + $resultsContainer.find('.loading').hide();
  123 + $resultsContainer.find('.results-content').show();
  124 + $(".timeago").timeago();
  125 + $resultsContainer.show();
  126 +
  127 + if(data.pagination.total > data.pagination.per_page) {
  128 + $resultsContainer.find('.paging').pagination({
  129 + items: data.pagination.total,
  130 + itemsOnPage: data.pagination.per_page,
  131 + currentPage: data.pagination.page,
  132 + prevText: 'Anterior',
  133 + nextText: 'Próximo',
  134 + cssStyle: 'compact-theme',
  135 + onPageClick: function(page, e) {
  136 + Main.loadRanking($resultsContainer, topic_id, page);
  137 + e.preventDefault();
  138 + }
  139 + });
  140 + }
  141 +
  142 + // scroll to the end
  143 + $('html, body').animate({
  144 + scrollTop: $(document).height()
  145 + }, 'fast');
  146 + });
  147 + $('.experience-proposal-container').hide();
  148 + $('.talk-proposal-container').hide();
  149 + },
  150 +
132 151 loginCallback: function(loggedIn, token) {
133 152 logged_in = loggedIn;
134 153 $('.login .message').text('');
... ...
js/requirejs-config.js
  Diff comments   View file @c401e11
... ... @@ -14,6 +14,7 @@ requirejs.config({
14 14 jquery_cookie: 'jquery.cookie',
15 15 jquery_timeago: 'jquery.timeago',
16 16 jquery_timeago_pt: 'jquery.timeago.pt-br',
  17 + jquery_simplePagination: 'jquery.simplePagination',
17 18 handlebars: 'handlebars-v3.0.1',
18 19 handlebars_helpers: 'handlebars-helpers',
19 20 jquery_maxlength: 'jquery.maxlength.min',
... ... @@ -37,6 +38,9 @@ requirejs.config({
37 38 'jquery_timeago_pt': {
38 39 deps: ['jquery_timeago']
39 40 },
  41 + 'jquery_simplePagination': {
  42 + deps: ['jquery']
  43 + },
40 44 'jquery_ui': {
41 45 deps: ['jquery']
42 46 },
... ... @@ -62,5 +66,5 @@ requirejs.config({
62 66 }
63 67 });
64 68  
65   -requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'handlebars_helpers']);
  69 +requirejs(['jquery', 'proposal_app', 'jquery_ui', 'jquery_xdomainrequest', 'jquery_timeago_pt', 'jquery_simplePagination', 'handlebars_helpers']);
66 70 requirejs(['slick', 'fastclick', 'jquery_maxlength', 'layout','main']);
... ...
sass/_proposal_detail.scss
  Diff comments   View file @c401e11
... ... @@ -140,6 +140,50 @@
140 140 color: gray;
141 141 float: right;
142 142 }
  143 + .total {
  144 + padding: 10px;
  145 + color: gray;
  146 + font-size: 14px;
  147 + float: left;
  148 + }
  149 + .simple-pagination {
  150 + padding: 5px 5px 5px 0;
  151 + ul {
  152 + list-style: none;
  153 + padding: 0;
  154 + display: table;
  155 + margin: 0 auto;
  156 + li {
  157 + list-style: none;
  158 + padding: 0;
  159 + margin: 0;
  160 + float: left;
  161 + a, span {
  162 + float: left;
  163 + color: white;
  164 + font-size: 14px;
  165 + line-height: 24px;
  166 + font-weight: normal;
  167 + text-align: center;
  168 + min-width: 14px;
  169 + padding: 0 7px;
  170 + background: $color;
  171 + width: 100%;
  172 + text-transform: none;
  173 + }
  174 + .prev {
  175 + border-radius: 3px 0 0 3px;
  176 + }
  177 + .next {
  178 + border-right: 1px solid #AAA;
  179 + border-radius: 0 3px 3px 0;
  180 + }
  181 + .current {
  182 + opacity: 0.5;
  183 + }
  184 + }
  185 + }
  186 + }
143 187 }
144 188 table {
145 189 clear: both;
... ...