diff options
Diffstat (limited to 'http')
-rw-r--r-- | http/res/ranking.js | 284 |
1 files changed, 193 insertions, 91 deletions
diff --git a/http/res/ranking.js b/http/res/ranking.js index 2bba8a1..c0338dd 100644 --- a/http/res/ranking.js +++ b/http/res/ranking.js @@ -1,100 +1,202 @@ -var playerClick = function(ev) { - if (!$(ev.target).closest('a').size()) { - var row = $(this); - var pid = row.find('td.pid').text(); - if (pid) { - var link = 'players/' + pid.trim() + '.html'; - location.href = link; - } +$.fn.paginate = function(pagesize, page) { + + var $this = this; + if (pagesize == 'clear') { + $this.removeAttr('data-paginate'); + $this.find('[data-paginate-visible]').removeAttr('data-paginate-visible'); + $this.find('tbody tr').show(); + return; + } + + var pagesize = pagesize || 50; + var page = page || 1; + + var rows = $this.find('tbody tr'); + if (!$this.attr('data-paginate')) { + $this.attr('data-paginate', pagesize); + rows.filter(':visible').attr('data-paginate-visible', 1); + } else { + pagesize = parseInt($this.attr('data-paginate')); } -} - -var parseHash = function() { - var hash = location.hash.replace(/^#/, ''); - var hashParams = hash.split(';'); - var params = new Map(); - hashParams.forEach(function(hashParam) { - var param = hashParam.split(':'); - if (param.length > 1) { - params.set(param[0], param[1].split(',')); + + var visible = rows.filter('[data-paginate-visible=1]'); + visible.each(function(index, row) { + row = $(row); + if (index >= (page-1)*pagesize + && index < page*pagesize) { + row.show(); + } else { // rollin', rollin', rollin'... + row.hide(); } }); - return params; -} - -var constructHash = function(params) { - return Array.from(params).map(function(param) { - return param[0] + ':' + param[1].join(','); - }).join(';'); -} - -var readHash = function() { - $('button.btn-primary').removeClass('btn-primary'); - var params = parseHash(); - params.forEach(function(values, param) { - values.forEach(function(value) { - $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary'); + + return visible.size(); +}; + +var ranking = { + + playerClick : function(ev) { + if (!$(ev.target).closest('a').size()) { + var row = $(this); + var pid = row.find('td.pid').text(); + if (pid) { + var link = 'players/' + pid.trim() + '.html'; + location.href = link; + } + } + }, + + parseHash : function() { + var hash = location.hash.replace(/^#/, ''); + var hashParams = hash.split(';'); + var params = new Map(); + hashParams.forEach(function(hashParam) { + var param = hashParam.split(':'); + if (param.length > 1) { + params.set(param[0], param[1].split(',')); + } }); - }); - var allParams = ['age', 'gender', 'region']; - allParams.forEach(function(param) { - if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) { - $('button[data-clear="' + param + '"]').addClass('btn-primary'); + return params; + }, + + constructHash : function(params) { + return Array.from(params).map(function(param) { + return param[0] + ':' + param[1].join(','); + }).join(';'); + }, + + readHash : function() { + $('button.btn-primary').removeClass('btn-primary'); + var params = ranking.parseHash(); + params.forEach(function(values, param) { + values.forEach(function(value) { + $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary'); + }); + }); + var allParams = ['age', 'gender', 'region']; + allParams.forEach(function(param) { + if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) { + $('button[data-clear="' + param + '"]').addClass('btn-primary'); + } else { + $('#filters').collapse(); + } + }); + ranking.filterRows(params); + var pagesize = 40; + var page = params.get('page') || [0]; + var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0])); + ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1); + ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1); + }, + + filterRows : function(params) { + $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() { + var row = $(this); + var hidden = false; + params.forEach(function(value, param) { + if (param != 'page') { + if (value.indexOf(row.find('td.' + param).text().trim()) == -1) { + row.hide(); + hidden = true; + } + } + }); + if (!hidden) { + row.show(); + } + }); + $('table.table tbody tr:visible').eq(0).addClass('gold'); + $('table.table tbody tr:visible').eq(1).addClass('silver'); + $('table.table tbody tr:visible').eq(2).addClass('bronze'); + $('table.table').css('opacity', 1); + }, + + buildPaginator: function(selector, count, pagesize, page) { + var box = $(selector); + box.html(''); + var buttonGroup = $('<div>').addClass('btn-group'); + var pages = parseInt(Math.ceil(count / pagesize)); + buttonGroup.attr('data-pages', pages); + buttonGroup.append($('<button>').addClass('btn btn-default paginator-prev').attr('type', 'button').text('<<')); + for (var i = 0; i < pages; i++) { + var pageBtn = $('<button>').addClass('btn btn-default paginator-page').attr('type', 'button').attr('data-page', i+1).text(i+1); + if (i+1 == page) { + pageBtn.addClass('btn-primary'); + } + buttonGroup.append(pageBtn); + } + buttonGroup.append($('<button>').addClass('btn btn-default paginator-next').attr('type', 'button').text('>>')); + box.append(buttonGroup); + }, + + changePage: function() { + $('table.table').css('opacity', 0.1); + var btn = $(this); + var page = parseInt(btn.attr('data-page')); + var params = ranking.parseHash(); + var currentPage = params.get('page'); + currentPage = currentPage ? parseInt(currentPage[0]) : 1; + if (btn.hasClass('paginator-prev')) { + page = currentPage - 1; + } + if (btn.hasClass('paginator-next')) { + page = currentPage + 1; + } + var count = parseInt(btn.closest('[data-pages]').attr('data-pages')); + if (page > 0 && page <= count) { + params.set('page', [page]); + location.hash = ranking.constructHash(params); } else { - $('#filters').collapse(); + $('table.table').css('opacity', 1); } - }); - filterRows(params); -} - -var filterRows = function(params) { - $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() { - var row = $(this); - params.forEach(function(value, param) { - if (value.indexOf(row.find('td.' + param).text().trim()) == -1) { - row.hide(); + }, + + init : function() { + + $('.container .table tbody tr').click(ranking.playerClick); + + $(document).ready(function() { + $(window).on('hashchange', ranking.readHash).trigger('hashchange'); + }); + + $('button[data-filter]').click(function() { + $('table.table-paginate').paginate('clear'); + $('table.table').css('opacity', 0.1); + var button = $(this); + var params = ranking.parseHash(); + var param = params.get(button.attr('data-filter')); + var value = button.attr('data-value'); + var index = param ? param.indexOf(value) : -1; + if (index > -1) { + param = param.filter(function(v) { return v != value; }); + } else { + if (!param) { + param = []; + } + param.push(value); } + if (!param.length) { + params.delete(button.attr('data-filter')); + } else { + params.set(button.attr('data-filter'), param); + } + params.delete('page'); + location.hash = ranking.constructHash(params); }); - }); - $('table.table tbody tr:visible').eq(0).addClass('gold'); - $('table.table tbody tr:visible').eq(1).addClass('silver'); - $('table.table tbody tr:visible').eq(2).addClass('bronze'); - $('table.table').css('opacity', 1); -} - -$('.container .table tbody tr').click(playerClick); - -$(document).ready(function() { - $(window).on('hashchange', readHash).trigger('hashchange'); -}); - -$('button[data-filter]').click(function() { - $('table.table').css('opacity', 0.1); - var button = $(this); - var params = parseHash(); - var param = params.get(button.attr('data-filter')); - var value = button.attr('data-value'); - var index = param ? param.indexOf(value) : -1; - if (index > -1) { - param = param.filter(function(v) { return v != value; }); - } else { - if (!param) { - param = []; - } - param.push(value); - } - if (!param.length) { - params.delete(button.attr('data-filter')); - } else { - params.set(button.attr('data-filter'), param); + + $('button[data-clear]').click(function() { + $('table.table-paginate').paginate('clear'); + $('table.table').css('opacity', 0.1); + var button = $(this); + var params = ranking.parseHash(); + params.delete(button.attr('data-clear')); + params.delete('page'); + location.hash = ranking.constructHash(params); + }); + + $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage); } - location.hash = constructHash(params); -}); - -$('button[data-clear]').click(function() { - $('table.table').css('opacity', 0.1); - var button = $(this); - var params = parseHash(); - params.delete(button.attr('data-clear')); - location.hash = constructHash(params); -}); + +}; + +ranking.init(); |