1// ------------------------------------------------------------------- 2// Virtual Pagination Script- By Dynamic Drive, available at: http://www.dynamicdrive.com 3// Last updated: Nov 21st, 2008 to v2.0 4// ** Adds ability to define multiple pagination DIVs (the secondary DIVs mirror primary DIV's contents) 5// ** Last viewed page persistence, so last viewed page can be remembered/ recalled within browser session. 6// ** Improvements to instance.navigate() to select a page using an arbitrary link or inside another script. 7// ** Ability to select a page using a URL parameter (ie: target.htm?virtualpiececlass=index). 8// 9// PUBLIC: virtualpaginate() 10// Main Virtual Paginate Object function. 11// ------------------------------------------------------------------- 12 13document.write('<style type="text/css">' //write out CSS for class ".hidepeice" that hides pieces of contents within pages 14 + '.hidepiece{display:none}\n' 15 + '@media print{.hidepiece{display:block !important;}}\n' 16 + '</style>'); 17 18function virtualpaginate(config) { //config: {piececlass:, piececontainer:, pieces_per_page:, defaultpage:, persist} 19 this.piececlass = config.piececlass; 20 var elementType = (typeof config.piececontainer == "undefined") ? "div" : config.piececontainer; //The type of element used to divide up content into pieces. Defaults to "div" 21 this.pieces = virtualpaginate.collectElementbyClass(config.piececlass, elementType); //get total number of divs matching class name 22 //Set this.chunksize: 1 if "chunksize" param is undefined, "chunksize" if it's less than total pieces available, or simply total pieces avail (show all) 23 this.chunksize = (typeof config.pieces_per_page == "undefined") ? 1 : (config.pieces_per_page > 0 && config.pieces_per_page < this.pieces.length) ? config.pieces_per_page : this.pieces.length; 24 this.pagecount = Math.ceil(this.pieces.length / this.chunksize); //calculate number of "pages" needed to show the divs 25 this.paginatediv = [], this.flatviewlinks = [], this.cpspan = [], this.selectmenu = []; 26 this.persist = config.persist; 27 var persistedpage = virtualpaginate.getCookie("dd_" + this.piececlass) || 0; 28 var urlselectedpage = virtualpaginate.urlparamselect(this.piececlass); //returns null or index from: mypage.htm?piececlass=index 29 this.currentpage = (typeof urlselectedpage == "number") ? urlselectedpage : ((this.persist) ? persistedpage : config.defaultpage); 30 this.currentpage = (this.currentpage < this.pagecount) ? parseInt(this.currentpage) : 0; //ensure currentpage is within range of available pages 31 this.showpage(this.currentpage); //Show selected page 32} 33 34// ------------------------------------------------------------------- 35// PUBLIC: navigate(keyword)- Calls this.showpage() based on parameter passed (0=page1, 1=page2 etc, "next", "first", or "last") 36// ------------------------------------------------------------------- 37 38virtualpaginate.prototype.navigate = function (keyword) { 39 var prevlinkindex = this.currentpage; //Get index of last clicked on page 40 if (keyword == "previous") 41 this.currentpage = (this.currentpage > 0) ? this.currentpage - 1 : (this.currentpage == 0) ? this.pagecount - 1 : 0; 42 else if (keyword == "next") 43 this.currentpage = (this.currentpage < this.pagecount - 1) ? this.currentpage + 1 : 0; 44 else if (keyword == "first") 45 this.currentpage = 0; 46 else if (keyword == "last") 47 this.currentpage = this.pagecount - 1; 48 //last page number 49 else 50 this.currentpage = parseInt(keyword); 51 this.currentpage = (this.currentpage < this.pagecount) ? this.currentpage : 0; //ensure pagenumber is within range of available pages 52 this.showpage(this.currentpage); 53 for (var p = 0; p < this.paginatediv.length; p++) { //loop through all pagination DIVs 54 if (this.flatviewpresent) 55 this.flatviewlinks[p][prevlinkindex].className = ""; //"Unhighlight" previous page (before this.currentpage increments) 56 if (this.selectmenupresent) 57 this.selectmenu[p].selectedIndex = this.currentpage; 58 if (this.flatviewpresent) 59 this.flatviewlinks[p][this.currentpage].className = "selected"; //"Highlight" current page 60 } 61 window.scrollTo(1, 1); 62}; 63// ------------------------------------------------------------------- 64// PUBLIC: buildpagination()- Create pagination interface by calling one or more of the paginate_build_() functions 65// ------------------------------------------------------------------- 66 67virtualpaginate.prototype.buildpagination = function(divids, optnavtext) { 68 var divids = (typeof divids == "string") ? [divids] : divids; //force divids to be an array of ids 69 var primarypaginatediv = divids.shift(); //get first id within divids[] 70 var paginaterawHTML = document.getElementById(primarypaginatediv).innerHTML; 71 this.paginate_build(primarypaginatediv, 0, optnavtext); 72 for (var i = 0; i < divids.length; i++) {
73 document.getElementById(divids[i]).innerHTML = paginaterawHTML; 74 this.paginate_build(divids[i], i + 1, optnavtext); 75 } 76}; 77// ------------------------------------------------------------------- 78// PRIVATE utility functions 79// ------------------------------------------------------------------- 80 81virtualpaginate.collectElementbyClass = function(classname, element) { //Returns an array containing DIVs with specified classname 82 if (document.querySelectorAll) { 83 var pieces = document.querySelectorAll(element + "." + classname); //return pieces as HTMLCollection 84 } else { 85 var classnameRE = new RegExp("(^|\\s+)" + classname + "($|\\s+)", "i"); //regular expression to screen for classname within element 86 var pieces = []; 87 var alltags = document.getElementsByTagName(element); 88 for (var i = 0; i < alltags.length; i++) { 89 if (typeof alltags[i].className == "string" && alltags[i].className.search(classnameRE) != -1) 90 pieces[pieces.length] = alltags[i]; //return pieces as array 91 } 92 } 93 return pieces; 94}; 95virtualpaginate.urlparamselect = function(vpclass) { 96 var result = window.location.search.match(new RegExp(vpclass + "=(\\d+)", "i")); //check for "?piececlass=2" in URL 97 return (result == null) ? null : parseInt(RegExp.$1); //returns null or index, where index (int) is the selected virtual page's index 98}; 99virtualpaginate.getCookie = function(Name) { 100 var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair 101 if (document.cookie.match(re)) //if cookie found 102 return document.cookie.match(re)[0].split("=")[1]; //return its value 103 return null; 104}; 105virtualpaginate.setCookie = function(name, value) { 106 document.cookie = name + "=" + value; 107}; 108// ------------------------------------------------------------------- 109// PRIVATE: showpage(pagenumber)- Shows a page based on parameter passed (0=page1, 1=page2 etc) 110// ------------------------------------------------------------------- 111 112virtualpaginate.prototype.showpage = function(pagenumber) { 113 var totalitems = this.pieces.length; //total number of broken up divs 114 var showstartindex = pagenumber * this.chunksize; //array index of div to start showing per pagenumber setting 115 var showendindex = showstartindex + this.chunksize - 1; //array index of div to stop showing after per pagenumber setting 116 for (var i = 0; i < totalitems; i++) { 117 if (i >= showstartindex && i <= showendindex) 118 this.pieces[i].style.display = "block"; 119 else 120 this.pieces[i].style.display = "none"; 121 } 122 if (this.persist) { //if persistence enabled 123 virtualpaginate.setCookie("dd_" + this.piececlass, this.currentpage); 124 } 125 if (this.cpspan.length > 0) { //if <span class="paginateinfo> element is present, update it with the most current info (ie: Page 3/4) 126 for (var p = 0; p < this.cpspan.length; p++) 127 this.cpspan[p].innerHTML = 'Page ' + (this.currentpage + 1) + '/' + this.pagecount; 128 } 129}; 130// ------------------------------------------------------------------- 131// PRIVATE: build() methods- Various methods to create pagination interfaces 132// paginate_paginate_build()- Main build() paginate function 133// paginate_output_flatview()- Accepts <span class="flatview"> element and populates it with sequential pagination links 134// paginate_paginate_build_flatview()- Parses the modified <span class="flatview"> element and assigns click behavior to the pagination links 135// paginate_build_selectmenu(paginatedropdown)- Accepts an empty SELECT element and turns it into pagination menu 136// paginate_build_regularlinks(paginatelinks)- Accepts a collection of links and screens out/ creates pagination out of ones with specific "rel" attr 137// paginate_build_cpinfo(cpspan)- Accepts <span class="paginateinfo"> element and displays current page info (ie: Page 1/4) 138// ------------------------------------------------------------------- 139 140virtualpaginate.prototype.paginate_build = function(divid, divpos, optnavtext) { 141 var instanceOfBox = this;
142 var paginatediv = document.getElementById(divid); 143 if (this.chunksize == this.pieces.length) { //if user has set to display all pieces at once, no point in creating pagination div 144 paginatediv.style.display = "none"; 145 return; 146 } 147 var paginationcode = paginatediv.innerHTML; //Get user defined, "unprocessed" HTML within paginate div 148 if (paginatediv.getElementsByTagName("select").length > 0) //if there's a select menu in div 149 this.paginate_build_selectmenu(paginatediv.getElementsByTagName("select")[0], divpos, optnavtext); 150 if (paginatediv.getElementsByTagName("a").length > 0) //if there are links defined in div 151 this.paginate_build_regularlinks(paginatediv.getElementsByTagName("a")); 152 var allspans = paginatediv.getElementsByTagName("span"); //Look for span tags within passed div 153 for (var i = 0; i < allspans.length; i++) { 154 if (allspans[i].className == "flatview") 155 this.paginate_output_flatview(allspans[i], divpos, optnavtext); 156 else if (allspans[i].className == "paginateinfo") 157 this.paginate_build_cpinfo(allspans[i], divpos); 158 } 159 this.paginatediv[divpos] = paginatediv; 160}; 161virtualpaginate.prototype.paginate_output_flatview = function(flatviewcontainer, divpos, anchortext) { 162 var flatviewhtml = ""; 163 var anchortext = anchortext || new Array(); 164 for (var i = 0; i < this.pagecount; i++) { 165 if (typeof anchortext[i] != "undefined") //if custom anchor text for this link exists 166 flatviewhtml += '<a href="#flatview" rel="' + i + '">' + anchortext[i] + '</a> '; 167//build pagination link using custom anchor text 168 else 169 flatviewhtml += '<a href="#flatview" rel="' + i + '">' + (i + 1) + '</a> '; //build pagination link using auto incremented sequential number instead 170 } 171 flatviewcontainer.innerHTML = flatviewhtml; 172 this.paginate_build_flatview(flatviewcontainer, divpos, anchortext); 173}; 174virtualpaginate.prototype.paginate_build_flatview = function(flatviewcontainer, divpos, anchortext) { 175 var instanceOfBox = this; 176 var flatviewhtml = ""; 177 this.flatviewlinks[divpos] = flatviewcontainer.getElementsByTagName("a"); 178 for (var i = 0; i < this.flatviewlinks[divpos].length; i++) { 179 this.flatviewlinks[divpos][i].onclick = function() { 180 var prevlinkindex = instanceOfBox.currentpage; //Get index of last clicked on flatview link 181 var curlinkindex = parseInt(this.getAttribute("rel")); 182 instanceOfBox.navigate(curlinkindex); 183 return false; 184 }; 185 } 186 this.flatviewlinks[divpos][this.currentpage].className = "selected"; //"Highlight" current flatview link 187 this.flatviewpresent = true; //indicate flat view links are present 188}; 189virtualpaginate.prototype.paginate_build_selectmenu = function(paginatedropdown, divpos, anchortext) { 190 var instanceOfBox = this; 191 var anchortext = anchortext || new Array(); 192 this.selectmenupresent = 1; 193 for (var i = 0; i < this.pagecount; i++) { 194 if (typeof anchortext[i] != "undefined") //if custom anchor text for this link exists, use anchor text as each OPTION's text 195 paginatedropdown.options[i] = new Option(anchortext[i], i); 196 else //else, use auto incremented, sequential numbers 197 paginatedropdown.options[i] = new Option("Page " + (i + 1) + " of " + this.pagecount, i); 198 } 199 paginatedropdown.selectedIndex = this.currentpage; 200 setTimeout(function() { paginatedropdown.selectedIndex = instanceOfBox.currentpage; }, 500); //refresh currently selected option (for IE's sake) 201 paginatedropdown.onchange = function() { 202 instanceOfBox.navigate(this.selectedIndex); 203 }; 204 this.selectmenu[divpos] = paginatedropdown; 205 this.selectmenu[divpos].selectedIndex = this.currentpage; //"Select" current page's corresponding option 206}; 207virtualpaginate.prototype.paginate_build_regularlinks = function(paginatelinks) { 208 var instanceOfBox = this; 209 for (var i = 0; i < paginatelinks.length; i++) { 210 var currentpagerel = paginatelinks[i].getAttribute("rel"); 211 if (currentpagerel == "previous" || currentpagerel == "next" || currentpagerel == "first" || currentpagerel == "last") { //screen for these "rel" values 212 paginatelinks[i].onclick = function() { 213 instanceOfBox.navigate(this.getAttribute("rel")); 214 return false; 215 }; 216 } 217 } 218};
219virtualpaginate.prototype.paginate_build_cpinfo = function(cpspan, divpos) { 220 this.cpspan[divpos] = cpspan; 221 cpspan.innerHTML = 'Page ' + (this.currentpage + 1) + '/' + this.pagecount; 222};
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.