Refresh paginations buttons instead of fully rendering each time.

This prevent the already displayed pagination buttons to be unresponsive
when clicking on them while the rendering JS function is running.

3 files changed, 123 insertions, 43 deletions

diff --git a/htroot/js/yacysearch.js b/htroot/js/yacysearch.js
index 0b397b121..263e2e536 100644
--- a/htroot/js/yacysearch.js
+++ b/htroot/js/yacysearch.js
@@ -42,64 +42,135 @@ function fadeOutBar() {
 }
 
 /**
+ * @param buttonsList the DOM list element containing the pagination buttons
  * @param offset item number to start with
  * @param itemsperpage count of items requested per page
  * @param totalcount count of items available from YaCy node for this query
- * @returns pagination buttons
+ * @param navurlbase the search url without pagination parameters
+ * @param localQuery when true the search query is limited to the YaCy peer local data
+ * @param jsResort when true results resorting with JavaScript is enabled
  */
-function renderPaginationButtons(offset, itemsperpage, totalcount, navurlbase, localQuery, jsResort) {
-	var resnav = "<ul class=\"pagination\">";
+function renderPaginationButtons(buttonsList, offset, itemsperpage, totalcount,
+		navurlbase, localQuery, jsResort) {
+	var buttons = buttonsList.getElementsByTagName("li");
+	if (buttons.length < 2) {
+		/* At least prev and next page buttons are expected to be here */
+		return;
+	}
+	
 	var thispage = Math.floor(offset / itemsperpage);
 	var firstPage = thispage - (thispage % 10);
+	
+	var prevPageElement = buttons[0];
+	var prevPageLink = prevPageElement.firstChild;
 	if (thispage == 0) {
-		resnav += "<li class=\"disabled\"><a title=\"Previous page\" href=\"#\">&laquo;</a></li>";
+		/* First page : the prev page button is disabled */
+		prevPageElement.className = "disabled";
+		if (prevPageLink != null) {
+			prevPageLink.accessKey = null;
+			prevPageLink.href = "#";
+		}
 	} else {
-	 	resnav += "<li><a id=\"prevpage\" title=\"Previous page\" accesskey=\"p\" href=\"";
-	 	if (jsResort) {
-			resnav += ("javascript:numberedPage(" + (thispage - 1) + ");");
-		} else {
-			resnav += (navurlbase + "&amp;startRecord=" + ((thispage - 1) * itemsperpage));
+		prevPageElement.className = "";
+		if (prevPageLink != null) {
+			prevPageLink.accessKey = "p";
+			if (jsResort) {
+				prevPageLink.href = "javascript:numberedPage(" + (thispage - 1)
+						+ ");";
+			} else {
+				prevPageLink.href = (navurlbase + "&startRecord=" + ((thispage - 1) * itemsperpage));
+			}
 		}
-	  	resnav += "\">&laquo;</a></li>";
 	}
 	
+	var nextPageElement = buttons[buttons.length - 1];
+
 	var totalPagesNb = Math.floor(1 + ((totalcount - 1) / itemsperpage));
 	var numberofpages = Math.min(10, totalPagesNb - firstPage);
-	if (!numberofpages) numberofpages = 10;
-	for (i = firstPage; i < (firstPage + numberofpages); i++) {
-	    if (i == thispage) {
-	       resnav += "<li class=\"active\"><a href=\"#\">";
-	       resnav += (i + 1);
-	       resnav += "</a></li>";
-	    } else {
-	       resnav += "<li><a href=\"";
-	       if (jsResort) {
-                       resnav += ("javascript:numberedPage(" + (i) + ");");
-	       } else {
-		       resnav += (navurlbase + "&amp;startRecord=" + (i * itemsperpage));
-               }
-	       resnav += "\">" + (i + 1) + "</a></li>";
-	    }
+	if (!numberofpages) {
+		numberofpages = 10;
+	}
+	if(numberofpages > 1) {
+		buttonsList.className = "pagination";
+	} else {
+		/* Hide the pagination buttons when there is less than one page of results */
+		buttonsList.className = "pagination hidden";
+	}
+	var btnIndex = 1;
+	var btnElement, pageLink;
+	/* Update existing buttons or add new ones according to the new pagination */
+	for (var i = firstPage; i < (firstPage + numberofpages); i++) {
+		if (btnIndex < (buttons.length - 1)) {
+			btnElement = buttons[btnIndex];
+			pageLink = btnElement.firstChild;
+		} else {
+			btnElement = document.createElement("li");
+			btnElement.id = "pageBtn" + btnIndex;
+			pageLink = document.createElement("a");
+			btnElement.appendChild(pageLink);
+		}
+		if (pageLink != null) {
+			if (i == thispage) {
+				btnElement.className = "active";
+				pageLink.href = "#";
+			} else {
+				btnElement.className = "";
+				if (jsResort) {
+					pageLink.href = "javascript:numberedPage(" + (i) + ");";
+				} else {
+					pageLink.href = navurlbase + "&startRecord=" + (i * itemsperpage);
+				}
+			}
+			pageLink.innerText = (i + 1);
+		}
+
+		if (btnIndex >= (buttons.length - 1)) {
+			/*
+			 * Insert the newly created button now that all its modifications
+			 * are done
+			 */
+			buttonsList.insertBefore(btnElement, buttons[buttons.length - 1]);
+		}
+
+		btnIndex++;
 	}
-	if ((localQuery && thispage >= (totalPagesNb - 1)) || (!localQuery && thispage >= (numberofpages - 1))) {
-		resnav += "<li class=\"disabled\"><a href=\"#\" title=\"Next page\">&raquo;</a></li>";
+
+	/* Remove existing buttons now in excess */
+	while (btnIndex < (buttons.length - 1)) {
+		buttonsList.removeChild(buttons[buttons.length - 2]);
+	}
+
+	var nextPageLink = nextPageElement.firstChild;
+	if ((localQuery && thispage >= (totalPagesNb - 1))
+			|| (!localQuery && thispage >= (numberofpages - 1))) {
+		/* Last page on a local query, or last fetchable page in p2p mode : the next page button is disabled */
+		nextPageElement.className = "disabled";
+		if (nextPageLink != null) {
+			nextPageLink.accessKey = null;
+			nextPageLink.href = "#";
+		}
 	} else {
-	    resnav += "<li><a id=\"nextpage\" title=\"Next page\" accesskey=\"n\" href=\"";
-	    if (jsResort) {
-		resnav += ("javascript:numberedPage(" + (thispage + 1) + ");");
-	    } else {
-		resnav += (navurlbase + "&amp;startRecord=" + ((thispage + 1) * itemsperpage));
-	    }
-	    resnav += "\">&raquo;</a>";
+		nextPageElement.className = "";
+		if (nextPageLink != null) {
+			nextPageLink.accessKey = "n";
+			if (jsResort) {
+				nextPageLink.href = "javascript:numberedPage(" + (thispage + 1)
+						+ ");";
+			} else {
+				nextPageLink.href = navurlbase + "&startRecord="
+						+ ((thispage + 1) * itemsperpage);
+			}
+		}
 	}
-	resnav += "</ul>";
-	return resnav;
 }
 
 /**
  * Parses a string representing an integer value
- * @param strIntValue formatted string
- * @returns the number value or undefined when the string is undefined, or NaN when the string is not a number
+ * 
+ * @param strIntValue
+ *            formatted string
+ * @returns the number value or undefined when the string is undefined, or NaN
+ *          when the string is not a number
  */
 function parseFormattedInt(strIntValue) {
 	var inValue;
@@ -187,9 +258,9 @@ function statistics(offset, itemscount, itemsperpage, totalcount, localIndexCoun
 	  }
 	  progresseBarElement.setAttribute('style',"width:" + percent + "%");
   }
-  var resnavElement = document.getElementById("resNav");
-  if (resnavElement != null && !jsResort) {
-	  resnavElement.innerHTML = renderPaginationButtons(offsetIntValue, itemsperpageIntValue, totalcountIntValue, navurlbase, localQuery, jsResort);
+  var buttonsList = document.getElementById("paginationButtons");
+  if (buttonsList != null && !jsResort) {
+	  renderPaginationButtons(buttonsList, offsetIntValue, itemsperpageIntValue, totalcountIntValue, navurlbase, localQuery, jsResort);
   }
 }
 
diff --git a/htroot/js/yacysort.js b/htroot/js/yacysort.js
index fcb4f3f7b..fb0b378b8 100644
--- a/htroot/js/yacysort.js
+++ b/htroot/js/yacysort.js
@@ -87,7 +87,10 @@ var displayPage = function(isPageChange, pageNumber) {
   $("#offset").html(offset);
   $("#itemscount").html(itemscount);
 
-  $("#resNav").html(renderPaginationButtons(offset, requestedResults, totalcount, null, theLocalQuery, true));
+  var buttonsList = document.getElementById("paginationButtons");
+  if(buttonsList != null) {
+	  renderPaginationButtons(buttonsList, offset, requestedResults, totalcount, null, theLocalQuery, true);
+  }
 
   //latestinfo();
 
diff --git a/htroot/yacysearch.html b/htroot/yacysearch.html
index 3736c0d57..4c7b6417b 100644
--- a/htroot/yacysearch.html
+++ b/htroot/yacysearch.html
@@ -211,7 +211,13 @@ document.getElementById("Enter").innerHTML = "search again";
 	::
 	::
 	::
-	<span id="resNav" class="col-sm-12  col-md-12" style="display: inline;"></span>
+	<span id="resNav" class="col-sm-12  col-md-12" style="display: inline;">
+		<ul id="paginationButtons" class="pagination hidden">
+			<li id="prevpage" class="disabled"><a title="Previous page" href="#">&laquo;</a></li>
+			<li class="active"><a href="#">1</a></li>
+			<li id="nextpage" class="disabled"><a title="Next page" href="#">&raquo;</a></li>
+		</ul>
+	</span>
 	::
 #(/num-results)#