1/* 2 Paginator 3000 3 - idea by ecto (ecto.ru) 4 - coded by karaboz (karaboz.ru) 5 - modified for wordpress by dzhus (dzhus.com) 6 7*/ 8 9/* 10 Paginator class 11 paginatorHolderId - id of the html element where paginator will be placed as innerHTML (String): required 12 pagesTotal - number of pages (Number, required) 13 pagesSpan - number of pages which are visible at once (Number, required) 14 pageCurrent - the number of current page (Number, required) 15 baseUrl - the url of the website (String) 16 if baseUrl is 'http://www.yourwebsite.com/pages/' the links on the pages will be: 17 http://www.yourwebsite.com/pages/1, http://www.yourwebsite.com/pages/2, etc 18 afterBase - the string that follows the baseUrl 19 For example it may be a search query 20*/ 21var Paginator = function(paginatorHolderId, pagesTotal, pagesSpan, pageCurrent, baseUrl, afterBase){ 22 if(!document.getElementById(paginatorHolderId) || !pagesTotal || !pagesSpan) return false; 23 24 this.inputData = { 25 paginatorHolderId: paginatorHolderId, 26 pagesTotal: pagesTotal, 27 pagesSpan: pagesSpan < pagesTotal ? pagesSpan : pagesTotal, 28 pageCurrent: pageCurrent, 29 baseUrl: baseUrl ? baseUrl : '/pages/', 30 afterBase: afterBase ? afterBase : '' 31 }; 32 33 this.html = { 34 holder: null, 35 36 table: null, 37 trPages: null, 38 trScrollBar: null, 39 tdsPages: null, 40 41 scrollBar: null, 42 scrollThumb: null, 43 44 pageCurrentMark: null 45 }; 46 47 48 this.prepareHtml(); 49 50 this.initScrollThumb(); 51 this.initPageCurrentMark(); 52 this.initEvents(); 53 54 this.scrollToPageCurrent(); 55} 56 57/* 58 Set all .html properties (links to dom objects) 59*/ 60Paginator.prototype.prepareHtml = function(){ 61 62 this.html.holder = document.getElementById(this.inputData.paginatorHolderId); 63 this.html.holder.innerHTML = this.makePagesTableHtml(); 64 65 this.html.table = this.html.holder.getElementsByTagName('table')[0]; 66 67 var trPages = this.html.table.getElementsByTagName('tr')[0]; 68 this.html.tdsPages = trPages.getElementsByTagName('td'); 69 70 this.html.scrollBar = getElementsByClassName(this.html.table, 'div', 'scroll_bar')[0]; 71 this.html.scrollThumb = getElementsByClassName(this.html.table, 'div', 'scroll_thumb')[0]; 72 this.html.pageCurrentMark = getElementsByClassName(this.html.table, 'div', 'current_page_mark')[0]; 73 74 // hide scrollThumb if there is no scroll (we see all pages at once) 75 if(this.inputData.pagesSpan == this.inputData.pagesTotal){ 76 addClass(this.html.holder, 'fullsize'); 77 } 78} 79 80/* 81 Make html for pages (table) 82*/ 83Paginator.prototype.makePagesTableHtml = function(){ 84 var tdWidth = (100 / this.inputData.pagesSpan) + '%'; 85 86 var html = '' + 87 '<table width="100%">' + 88 '<tr>' 89 for (var i=1; i<=this.inputData.pagesSpan; i++){ 90 html += '<td width="' + tdWidth + '"></td>'; 91 } 92 html += '' + 93 '</tr>' + 94 '<tr>' + 95 '<td colspan="' + this.inputData.pagesSpan + '">' + 96 '<div class="scroll_bar">' + 97 '<div class="scroll_trough"></div>' + 98 '<div class="scroll_thumb">' + 99 '<div class="scroll_knob"></div>' + 100 '</div>' + 101 '<div class="current_page_mark"></div>' + 102 '</div>' + 103 '</td>' + 104 '</tr>' + 105 '</table>'; 106 107 return html; 108} 109 110/* 111 Set all needed properties for scrollThumb and it's width 112*/ 113Paginator.prototype.initScrollThumb = function(){ 114 this.html.scrollThumb.widthMin = '8'; // minimum width of the scrollThumb (px) 115 this.html.scrollThumb.widthPercent = this.inputData.pagesSpan/this.inputData.pagesTotal * 100; 116 117 this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth; 118 this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent; 119 120 this.html.scrollThumb.xPosMin = 0; 121 this.html.scrollThumb.xPosMax; 122 123 this.html.scrollThumb.widthActual; 124 125 this.setScrollThumbWidth(); 126 127} 128 129Paginator.prototype.setScrollThumbWidth = function(){ 130 // Try to set width in percents 131 this.html.scrollThumb.style.width = this.html.scrollThumb.widthPercent + "%"; 132 133 // Fix the actual width in px 134 this.html.scrollThumb.widthActual = this.html.scrollThumb.offsetWidth; 135 136 // If actual width less then minimum which we set 137 if(this.html.scrollThumb.widthActual < this.html.scrollThumb.widthMin){ 138 this.html.scrollThumb.style.width = this.html.scrollThumb.widthMin + 'px'; 139 } 140 141 this.html.scrollThumb.xPosMax = this.html.table.offsetWidth - this.html.scrollThumb.widthActual; 142} 143 144Paginator.prototype.moveScrollThumb = function(){ 145 this.html.scrollThumb.style.left = this.html.scrollThumb.xPos + "px"; 146} 147 148 149/* 150 Set all needed properties for pageCurrentMark, it's width and move it 151*/ 152Paginator.prototype.initPageCurrentMark = function(){ 153 this.html.pageCurrentMark.widthMin = '3'; 154 this.html.pageCurrentMark.widthPercent = 100 / this.inputData.pagesTotal; 155 this.html.pageCurrentMark.widthActual; 156 157 this.setPageCurrentPointWidth(); 158 this.movePageCurrentPoint(); 159} 160 161Paginator.prototype.setPageCurrentPointWidth = function(){ 162 // Try to set width in percents 163 this.html.pageCurrentMark.style.width = this.html.pageCurrentMark.widthPercent + '%'; 164 165 // Fix the actual width in px 166 this.html.pageCurrentMark.widthActual = this.html.pageCurrentMark.offsetWidth; 167 168 // If actual width less then minimum which we set 169 if(this.html.pageCurrentMark.widthActual < this.html.pageCurrentMark.widthMin){ 170 this.html.pageCurrentMark.style.width = this.html.pageCurrentMark.widthMin + 'px'; 171 } 172} 173 174Paginator.prototype.movePageCurrentPoint = function(){ 175 if(this.html.pageCurrentMark.widthActual < this.html.pageCurrentMark.offsetWidth){ 176 this.html.pageCurrentMark.style.left = (this.inputData.pageCurrent - 1)/this.inputData.pagesTotal * this.html.table.offsetWidth - this.html.pageCurrentMark.offsetWidth/2 + "px"; 177 } else { 178 this.html.pageCurrentMark.style.left = (this.inputData.pageCurrent - 1)/this.inputData.pagesTotal * this.html.table.offsetWidth + "px"; 179 } 180} 181 182 183 184/* 185 Drag, click and resize events 186*/ 187Paginator.prototype.initEvents = function(){ 188 var _this = this; 189 190 this.html.scrollThumb.onmousedown = function(e){ 191 if (!e) var e = window.event; 192 e.cancelBubble = true; 193 if (e.stopPropagation) e.stopPropagation(); 194 195 var dx = getMousePosition(e).x - this.xPos; 196 document.onmousemove = function(e){ 197 if (!e) var e = window.event; 198 _this.html.scrollThumb.xPos = getMousePosition(e).x - dx; 199 200 // the first: draw pages, the second: move scrollThumb (it was logically but ie sucks!) 201 _this.moveScrollThumb(); 202 _this.drawPages(); 203 204 205 } 206 document.onmouseup = function(){ 207 document.onmousemove = null; 208 _this.enableSelection(); 209 } 210 _this.disableSelection(); 211 } 212 213 this.html.scrollBar.onmousedown = function(e){ 214 if (!e) var e = window.event; 215 if(matchClass(_this.paginatorBox, 'fullsize')) return; 216 217 _this.html.scrollThumb.xPos = getMousePosition(e).x - getPageX(_this.html.scrollBar) - _this.html.scrollThumb.offsetWidth/2; 218 219 _this.moveScrollThumb(); 220 _this.drawPages(); 221 222 223 } 224 225 // Comment the row beneath if you set paginator width fixed 226 addEvent(window, 'resize', function(){Paginator.resizePaginator(_this)}); 227} 228 229/* 230 Redraw current span of pages 231*/ 232Paginator.prototype.drawPages = function(){ 233 var percentFromLeft = this.html.scrollThumb.xPos/(this.html.table.offsetWidth); 234 var cellFirstValue = Math.round(percentFromLeft * this.inputData.pagesTotal); 235 236 var html = ""; 237 // drawing pages control the position of the scrollThumb on the edges! 238 if(cellFirstValue < 1){ 239 cellFirstValue = 1; 240 this.html.scrollThumb.xPos = 0; 241 this.moveScrollThumb(); 242 } else if(cellFirstValue >= this.inputData.pagesTotal - this.inputData.pagesSpan) { 243 cellFirstValue = this.inputData.pagesTotal - this.inputData.pagesSpan + 1; 244 this.html.scrollThumb.xPos = this.html.table.offsetWidth - this.html.scrollThumb.offsetWidth; 245 this.moveScrollThumb(); 246 } 247 248 249 250 for(var i=0; i<this.html.tdsPages.length; i++){ 251 var cellCurrentValue = cellFirstValue + i; 252 if(cellCurrentValue == this.inputData.pageCurrent){ 253 html = "<span>" + "<strong>" + cellCurrentValue + "</strong>" + "</span>"; 254 } else { 255 html = "<span>" + "<a href='" + this.inputData.baseUrl + cellCurrentValue + this.inputData.afterBase + "'>" + cellCurrentValue + "</a>" + "</span>"; 256 } 257 this.html.tdsPages[i].innerHTML = html; 258 } 259} 260 261/* 262 Scroll to current page 263*/ 264Paginator.prototype.scrollToPageCurrent = function(){ 265 this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth; 266 this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent; 267 268 this.moveScrollThumb(); 269 this.drawPages(); 270 271} 272 273 274 275Paginator.prototype.disableSelection = function(){ 276 document.onselectstart = function(){ 277 return false;
278 } 279 this.html.scrollThumb.focus(); 280} 281 282Paginator.prototype.enableSelection = function(){ 283 document.onselectstart = function(){ 284 return true; 285 } 286} 287 288/* 289 Function is used when paginator was resized (window.onresize fires it automatically) 290 Use it when you change paginator with DHTML 291 Do not use it if you set fixed width of paginator 292*/ 293Paginator.resizePaginator = function (paginatorObj){ 294 295 paginatorObj.setPageCurrentPointWidth(); 296 paginatorObj.movePageCurrentPoint(); 297 298 paginatorObj.setScrollThumbWidth(); 299 paginatorObj.scrollToPageCurrent(); 300} 301 302 303 304 305/* 306 Global functions which are used 307*/ 308function getElementsByClassName(objParentNode, strNodeName, strClassName){ 309 var nodes = objParentNode.getElementsByTagName(strNodeName); 310 if(!strClassName){ 311 return nodes; 312 } 313 var nodesWithClassName = []; 314 for(var i=0; i<nodes.length; i++){ 315 if(matchClass( nodes[i], strClassName )){ 316 nodesWithClassName[nodesWithClassName.length] = nodes[i]; 317 } 318 } 319 return nodesWithClassName; 320} 321 322 323function addClass( objNode, strNewClass ) { 324 replaceClass( objNode, strNewClass, '' ); 325} 326 327function removeClass( objNode, strCurrClass ) { 328 replaceClass( objNode, '', strCurrClass ); 329} 330 331function replaceClass( objNode, strNewClass, strCurrClass ) { 332 var strOldClass = strNewClass; 333 if ( strCurrClass && strCurrClass.length ){ 334 strCurrClass = strCurrClass.replace( /\s+(\S)/g, '|$1' ); 335 if ( strOldClass.length ) strOldClass += '|'; 336 strOldClass += strCurrClass; 337 } 338 objNode.className = objNode.className.replace( new RegExp('(^|\\s+)(' + strOldClass + ')($|\\s+)', 'g'), '$1' ); 339 objNode.className += ( (objNode.className.length)? ' ' : '' ) + strNewClass; 340} 341 342function matchClass( objNode, strCurrClass ) { 343 return ( objNode && objNode.className.length && objNode.className.match( new RegExp('(^|\\s+)(' + strCurrClass + ')($|\\s+)') ) ); 344} 345 346 347function addEvent(objElement, strEventType, ptrEventFunc) { 348 if (objElement.addEventListener) 349 objElement.addEventListener(strEventType, ptrEventFunc, false); 350 else if (objElement.attachEvent) 351 objElement.attachEvent('on' + strEventType, ptrEventFunc); 352} 353function removeEvent(objElement, strEventType, ptrEventFunc) { 354 if (objElement.removeEventListener) objElement.removeEventListener(strEventType, ptrEventFunc, false); 355 else if (objElement.detachEvent) objElement.detachEvent('on' + strEventType, ptrEventFunc); 356} 357 358 359function getPageY( oElement ) { 360 var iPosY = oElement.offsetTop; 361 while ( oElement.offsetParent != null ) { 362 oElement = oElement.offsetParent; 363 iPosY += oElement.offsetTop; 364 if (oElement.tagName == 'BODY') break; 365 } 366 return iPosY; 367} 368 369function getPageX( oElement ) { 370 var iPosX = oElement.offsetLeft; 371 while ( oElement.offsetParent != null ) { 372 oElement = oElement.offsetParent; 373 iPosX += oElement.offsetLeft; 374 if (oElement.tagName == 'BODY') break; 375 } 376 return iPosX; 377} 378 379function getMousePosition(e) { 380 if (e.pageX || e.pageY){ 381 var posX = e.pageX; 382 var posY = e.pageY; 383 }else if (e.clientX || e.clientY) { 384 var posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 385 var posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 386 } 387 return {x:posX, y:posY} 388}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.