Mercurial > kallithea
diff rhodecode/public/js/rhodecode.js @ 3776:13241a4075e9 beta
Unified the paginators for pylons and YUI.
- YUI based paginators now behave more like the ones generated with pylons
- introduced new custom pylons paginator for customizations needed to unify both
author | Marcin Kuzminski <marcin@python-works.com> |
---|---|
date | Mon, 22 Apr 2013 14:11:40 +0200 |
parents | 25dbbdae3ed9 |
children | 62fb395a459d |
line wrap: on
line diff
--- a/rhodecode/public/js/rhodecode.js Sun Apr 21 23:37:56 2013 +0200 +++ b/rhodecode/public/js/rhodecode.js Mon Apr 22 14:11:40 2013 +0200 @@ -2207,6 +2207,289 @@ } + + +var YUI_paginator = function(links_per_page, containers){ + // my custom paginator + (function () { + + var Paginator = YAHOO.widget.Paginator, + l = YAHOO.lang, + setId = YAHOO.util.Dom.generateId; + + Paginator.ui.MyFirstPageLink = function (p) { + this.paginator = p; + + p.subscribe('recordOffsetChange',this.update,this,true); + p.subscribe('rowsPerPageChange',this.update,this,true); + p.subscribe('totalRecordsChange',this.update,this,true); + p.subscribe('destroy',this.destroy,this,true); + + // TODO: make this work + p.subscribe('firstPageLinkLabelChange',this.update,this,true); + p.subscribe('firstPageLinkClassChange',this.update,this,true); + }; + + Paginator.ui.MyFirstPageLink.init = function (p) { + p.setAttributeConfig('firstPageLinkLabel', { + value : 1, + validator : l.isString + }); + p.setAttributeConfig('firstPageLinkClass', { + value : 'yui-pg-first', + validator : l.isString + }); + p.setAttributeConfig('firstPageLinkTitle', { + value : 'First Page', + validator : l.isString + }); + }; + + // Instance members and methods + Paginator.ui.MyFirstPageLink.prototype = { + current : null, + leftmost_page: null, + rightmost_page: null, + link : null, + span : null, + dotdot : null, + getPos : function(cur_page, max_page, items){ + var edge = parseInt(items / 2) + 1; + if (cur_page <= edge){ + var radius = Math.max(parseInt(items / 2), items - cur_page); + } + else if ((max_page - cur_page) < edge) { + var radius = (items - 1) - (max_page - cur_page); + } + else{ + var radius = parseInt(items / 2); + } + + var left = Math.max(1, (cur_page - (radius))) + var right = Math.min(max_page, cur_page + (radius)) + return [left, cur_page, right] + }, + render : function (id_base) { + var p = this.paginator, + c = p.get('firstPageLinkClass'), + label = p.get('firstPageLinkLabel'), + title = p.get('firstPageLinkTitle'); + + this.link = document.createElement('a'); + this.span = document.createElement(); + + var _pos = this.getPos(p.getCurrentPage(), p.getTotalPages(), 5); + this.leftmost_page = _pos[0]; + this.rightmost_page = _pos[2]; + + setId(this.link, id_base + '-first-link'); + this.link.href = '#'; + this.link.className = c; + this.link.innerHTML = label; + this.link.title = title; + YAHOO.util.Event.on(this.link,'click',this.onClick,this,true); + + setId(this.span, id_base + '-first-span'); + this.span.className = c; + this.span.innerHTML = label; + + this.current = p.getCurrentPage() > 1 ? this.link : this.span; + return this.current; + }, + update : function (e) { + var p = this.paginator; + var _pos = this.getPos(p.getCurrentPage(), p.getTotalPages(), 5); + this.leftmost_page = _pos[0]; + this.rightmost_page = _pos[2]; + + if (e && e.prevValue === e.newValue) { + return; + } + + var par = this.current ? this.current.parentNode : null; + if (this.leftmost_page > 1) { + if (par && this.current === this.span) { + par.replaceChild(this.link,this.current); + this.current = this.link; + } + } else { + if (par && this.current === this.link) { + par.replaceChild(this.span,this.current); + this.current = this.span; + } + } + }, + destroy : function () { + YAHOO.util.Event.purgeElement(this.link); + this.current.parentNode.removeChild(this.current); + this.link = this.span = null; + }, + onClick : function (e) { + YAHOO.util.Event.stopEvent(e); + this.paginator.setPage(1); + } + }; + + })(); + (function () { + + var Paginator = YAHOO.widget.Paginator, + l = YAHOO.lang, + setId = YAHOO.util.Dom.generateId; + + Paginator.ui.MyLastPageLink = function (p) { + this.paginator = p; + + p.subscribe('recordOffsetChange',this.update,this,true); + p.subscribe('rowsPerPageChange',this.update,this,true); + p.subscribe('totalRecordsChange',this.update,this,true); + p.subscribe('destroy',this.destroy,this,true); + + // TODO: make this work + p.subscribe('lastPageLinkLabelChange',this.update,this,true); + p.subscribe('lastPageLinkClassChange', this.update,this,true); + }; + + Paginator.ui.MyLastPageLink.init = function (p) { + p.setAttributeConfig('lastPageLinkLabel', { + value : -1, + validator : l.isString + }); + p.setAttributeConfig('lastPageLinkClass', { + value : 'yui-pg-last', + validator : l.isString + }); + p.setAttributeConfig('lastPageLinkTitle', { + value : 'Last Page', + validator : l.isString + }); + + }; + + Paginator.ui.MyLastPageLink.prototype = { + + current : null, + leftmost_page: null, + rightmost_page: null, + link : null, + span : null, + dotdot : null, + na : null, + getPos : function(cur_page, max_page, items){ + var edge = parseInt(items / 2) + 1; + if (cur_page <= edge){ + var radius = Math.max(parseInt(items / 2), items - cur_page); + } + else if ((max_page - cur_page) < edge) { + var radius = (items - 1) - (max_page - cur_page); + } + else{ + var radius = parseInt(items / 2); + } + + var left = Math.max(1, (cur_page - (radius))) + var right = Math.min(max_page, cur_page + (radius)) + return [left, cur_page, right] + }, + render : function (id_base) { + var p = this.paginator, + c = p.get('lastPageLinkClass'), + label = p.get('lastPageLinkLabel'), + last = p.getTotalPages(), + title = p.get('lastPageLinkTitle'); + + var _pos = this.getPos(p.getCurrentPage(), p.getTotalPages(), 5); + this.leftmost_page = _pos[0]; + this.rightmost_page = _pos[2]; + + this.link = document.createElement('a'); + this.span = document.createElement(); + this.na = this.span.cloneNode(false); + + setId(this.link, id_base + '-last-link'); + this.link.href = '#'; + this.link.className = c; + this.link.innerHTML = label; + this.link.title = title; + YAHOO.util.Event.on(this.link,'click',this.onClick,this,true); + + setId(this.span, id_base + '-last-span'); + this.span.className = c; + this.span.innerHTML = label; + + setId(this.na, id_base + '-last-na'); + + if (this.rightmost_page < p.getTotalPages()){ + this.current = this.link; + } + else{ + this.current = this.span; + } + + this.current.innerHTML = p.getTotalPages(); + return this.current; + }, + + update : function (e) { + var p = this.paginator; + + var _pos = this.getPos(p.getCurrentPage(), p.getTotalPages(), 5); + this.leftmost_page = _pos[0]; + this.rightmost_page = _pos[2]; + + if (e && e.prevValue === e.newValue) { + return; + } + + var par = this.current ? this.current.parentNode : null, + after = this.link; + if (par) { + + // only show the last page if the rightmost one is + // lower, so we don't have doubled entries at the end + if (!(this.rightmost_page < p.getTotalPages())){ + after = this.span + } + + if (this.current !== after) { + par.replaceChild(after,this.current); + this.current = after; + } + } + this.current.innerHTML = this.paginator.getTotalPages(); + + }, + destroy : function () { + YAHOO.util.Event.purgeElement(this.link); + this.current.parentNode.removeChild(this.current); + this.link = this.span = null; + }, + onClick : function (e) { + YAHOO.util.Event.stopEvent(e); + this.paginator.setPage(this.paginator.getTotalPages()); + } + }; + + })(); + + var pagi = new YAHOO.widget.Paginator({ + rowsPerPage: links_per_page, + alwaysVisible: false, + template : "{PreviousPageLink} {MyFirstPageLink} {PageLinks} {MyLastPageLink} {NextPageLink}", + pageLinks: 5, + containerClass: 'pagination-wh', + currentPageClass: 'pager_curpage', + pageLinkClass: 'pager_link', + nextPageLinkLabel: '>', + previousPageLinkLabel: '<', + containers:containers + }) + + return pagi +} + + + // global hooks after DOM is loaded YUE.onDOMReady(function(){