update next button

public/css/main.css

@@ -178,24 +178,50 @@ a:hover {
 }
 
 .previous {
-  background-color: #f1f1f1;
-  color: black;
+  background-color: #cccccc;
+  color: #0f0f0f;
+
   margin-left:40%;
   cursor: pointer;
   border-radius: .2rem;
+  border: none;
+  border: 0px;
+  width: 6em;
+  height: 2em;
   
 }
+.previous:disabled,
+.previous[disabled]{
+  cursor: not-allowed;
+  background-color: #f1f1f1;
+  color: #666666;
+}
+.next:disabled,
+.next[disabled]{
+  background-color: #0069d970;
+  color: #666666;
+  cursor: not-allowed;
+}
 #papercount{
   text-align: center;
 }
 .next {
-  background-color: #2196f3 !important;
+  /* background-color: #2196f3 !important; */
   color: white;
   cursor: pointer;
   border-radius: .2rem;
+  color: #fff;
+  border: none;
+  border: 0px;
+  background-color: #0069d9;
+  width: 6em;
+  height: 2em;
+
 }
 .next:hover{
-  background-color: #007bff !important;
+  background-color: #005bbd !important;
+  border: none;
+  border: 0px;
 }
 
 .round {

public/index.html

@@ -265,8 +265,10 @@
       </div>
       
     </div>
-    <div class="container" style="margin-top:1em;"><p id="papercount">1 - 6 (45)</p><a onclick="pagecountback()" id="previousbutton" class="previous">&laquo; Previous</a>
-    <a onclick="pagecount()" id="nextbutton" class="next">Next &raquo;</a></div>
+    <div id="nextblock" class="container" style="margin-top:1em;"><p id="papercount">1 - 6 (45)</p>
+    <button onclick="pagecountback()" id="previousbutton" class="previous" type="button" disabled>&laquo; Previous</button>  
+    <!-- <a onclick="pagecountback()" id="previousbutton" class="previous"> Previous</a> -->
+    <button onclick="pagecount()" id="nextbutton" class="next" type="button">Next &raquo;</button></div>
     
     <hr>
     <div class="container">

public/js/citationSheetParse.js

@@ -177,7 +177,7 @@ load_excel_citation(function () {
     var arrayLength = stuff_paper.length;
     for (var i = 0; i < arrayLength; i++) {
 
-        if (Math.abs(arrayLength - i) <= max_paper_list) {
+        if (i < max_paper_list && i <= arrayLength) {
             addpaper(stuff_paper[i]);
         }
         //Do something

public/js/paper_nextpage.js

@@ -8,7 +8,7 @@ nextpage()
 function pagecountback(){
 pagenumb = pagenumb - (max_paper_list)
 if (pagenumb <= 0){
-    pagenumb = -1
+    pagenumb = 0
 }
 nextpage()   
 }
@@ -25,15 +25,15 @@ var nextpage = function() {
     //         //Do something
     //     }
     // });
-
-
+    document.getElementById("previousbutton").disabled = false;
+    document.getElementById("nextbutton").disabled = false;
     // get paper from the Sabo result
     stuff_paper = jsonContent;
     var new_row = document.getElementById("cont_paper")
     new_row.innerHTML = "";
     var arrayLength = stuff_paper.length;
     for (var i = 0; i < arrayLength; i++) {
-        if (i > pagenumb && i <= (pagenumb + max_paper_list) && i<= arrayLength){
+        if (i >= pagenumb && i < (pagenumb + max_paper_list) && i<= arrayLength){
             // if (Math.abs(arrayLength - i) <= (max_paper_list)) {
             console.log("close to " + i)
             addpaper(stuff_paper[i]);
@@ -41,11 +41,13 @@ var nextpage = function() {
             var endnumb = startnumb + max_paper_list
             if (pagenumb <= 0){
                 startnumb = 0
+                document.getElementById("previousbutton").disabled = true;
             }
             startnumb += 1
             endnumb += 1
             if (endnumb >= stuff_paper.length){
                 endnumb = stuff_paper.length
+                document.getElementById("nextbutton").disabled = true;
             }
             document.getElementById("papercount").innerHTML = startnumb + " - " + endnumb + " (" + stuff_paper.length + ")";
         // }   

public/js/search.js

@@ -36,7 +36,7 @@ function search() {
 function search_paper() {
     const fuse = new Fuse(stuff_paper, options_paper);
     searchanswer_paper = fuse.search(document.getElementById("search-input_paper").value)
-
+    document.getElementById("nextblock").style.display = "none";
     var new_row = document.getElementById("cont_paper")
     new_row.innerHTML = "";
     var searchLength = searchanswer_paper.length;
@@ -158,7 +158,8 @@ function searchToggle_paper(obj, evt) {
         new_row.innerHTML = "";
         var arrayLength = stuff_paper.length;
         for (var i = 0; i < arrayLength; i++) {
-            if (Math.abs(arrayLength - i) <= 2) {
+            document.getElementById("nextblock").style.display = "block";
+            if (i <= max_paper_list) {
                 addpaper(stuff_paper[i]);
             }
 

readme.md

@@ -16,7 +16,7 @@ Website for Geoinformatic Research Group (Prof. Coors)
 
 ### Tasks for Patrick:
 - [ ] In the current "add_paper.js", all BIBTEX buttons share the same ID and not work yet. I will hide this feature for now and add it back when the BIBTEX is read made. (for later)
-- [ ] Currently, I have set in the public/js/config.js the max number of the paper lists. We have to implement the "show more"/ "Pagination" feature. (Patrick) 
+- [x] Currently, I have set in the public/js/config.js the max number of the paper lists. We have to implement the "show more"/ "Pagination" feature. (Patrick) 
 - [x] Make sure the Search feature works. (Patrick)
 - [ ] Currently, the "public\js\language.js" only translate some part of the webpage.(later..)