Add slider to enable distant paging.
authorChris Jaekl <cejaekl@yahoo.com>
Wed, 8 Nov 2017 10:25:46 +0000 (19:25 +0900)
committerChris Jaekl <cejaekl@yahoo.com>
Wed, 8 Nov 2017 10:25:46 +0000 (19:25 +0900)
app/index.html
app/lib.css
app/lib.js
main/handler.go

index 4b246d450ca51d4a55fbe3e0376e4720b28a251f..9b3331144f8d0159930c05858b51def93ad1da12 100644 (file)
@@ -6,10 +6,6 @@
   </head>
   
   <body> 
   </head>
   
   <body> 
-    <table class="header">
-      <tr><td class="box">&nbsp;</td><td class="title">eBook Library</td></tr>
-    </table>
-
     <form>
       <input id="search" onclick="onSearch();" type="button" value="Search"/> 
       Author: <input id="aut" type="text"/> 
     <form>
       <input id="search" onclick="onSearch();" type="button" value="Search"/> 
       Author: <input id="aut" type="text"/> 
       Series: <input id="ser" type="text"/>
     </form>
 
       Series: <input id="ser" type="text"/>
     </form>
 
-    <div class="footer">
-        <input id="back" onclick="onPrev();" value="Back" type="button"/>
-        <input id="forward" onclick="onNext();" value="Forward" type="button"/>
+    <div class="pager">
+      <input id="back" onclick="onPrev();" value="Back" type="button"/>
+      <input id="forward" onclick="onNext();" value="Forward" type="button"/>
+      <input id="slider" onchange="onSlide(this.value);" min="1" max="1" type="range" value="0"/>
       Showing <span id="first">0</span> through <span id="last">0</span> out of <span id="count">0</span> matching books.
     </div>
 
       Showing <span id="first">0</span> through <span id="last">0</span> out of <span id="count">0</span> matching books.
     </div>
 
index be1e367b4373a2454a25c36cd59504f4a8543838..0845b0d0411c41f5bbb379b15001662ff3bbe0a7 100644 (file)
@@ -22,7 +22,7 @@ div.book {
   border 3px solid #73ad21;
 }
 
   border 3px solid #73ad21;
 }
 
-div.footer {
+div.pager {
   background-color: #004080;
   border-color: #004080;
   border-style: solid;
   background-color: #004080;
   border-color: #004080;
   border-style: solid;
index 5e2ecf830b6ec52330446cf61f0dae3dd6ca06d8..50086d0db6c12fda13f253e31f41edbf7489a164 100644 (file)
@@ -7,7 +7,33 @@ g_state = {
   first: 0,
   ids: [],
   last: (-1),
   first: 0,
   ids: [],
   last: (-1),
-  pageSize: 100
+  pageSize: 9
+}
+
+function adjustPos(setting) {
+  var value = parseInt(setting)
+  
+  if (g_state.first === value) {
+    // No change
+    return;
+  }
+
+  var maxFirst = g_state.count - g_state.pageSize;
+
+  if (value < 0) {
+    g_state.first = 0;
+  } else if (value > maxFirst) {
+    g_state.first = maxFirst;
+  } else {
+    g_state.first = value;
+  }
+
+  g_state.last = g_state.first + g_state.pageSize - 1;
+  if (g_state.last >= g_state.count) {
+    g_state.last = g_state.count - 1;
+  }
+
+  refreshData();
 }
 
 function constructSearchUrl() {
 }
 
 function constructSearchUrl() {
@@ -42,28 +68,20 @@ function constructSearchUrl() {
 
 function onNext() {
   if (g_state.last < (g_state.count - 1)) {
 
 function onNext() {
   if (g_state.last < (g_state.count - 1)) {
-    g_state.first += g_state.pageSize;
-    g_state.last += g_state.pageSize;
-    if (g_state.last >= g_state.count) {
-      g_state.last = g_state.count - 1;
-    }
-
-    refreshData();
+    adjustPos(g_state.first + g_state.pageSize);
   }
 }
 
 function onPrev() {
   if (g_state.first > 0) {
   }
 }
 
 function onPrev() {
   if (g_state.first > 0) {
-    g_state.first -= g_state.pageSize;
-    if (g_state.first < 0) {
-      g_state.first = 0;
-    }
-    g_state.last = g_state.first + g_state.pageSize;
-    
-    refreshData();
+    adjustPos(g_state.first - g_state.pageSize);
   }
 }
 
   }
 }
 
+function onSlide(value) {
+  adjustPos(value);
+}
+
 function onSearch() {
   console.log('onSearch()');
 
 function onSearch() {
   console.log('onSearch()');
 
@@ -78,12 +96,13 @@ function onSearch() {
     console.log('JSON response:  ', jsonValue);
     g_state.ids = jsonValue
     g_state.count = g_state.ids.length;
     console.log('JSON response:  ', jsonValue);
     g_state.ids = jsonValue
     g_state.count = g_state.ids.length;
-    g_state.first = 0
-    g_state.last = (g_state.ids.length) - 1;
-    if (g_state.last > g_state.pageSize) {
-      g_state.last = g_state.pageSize;
-    }
-    refreshData()
+    g_state.first = (-1)
+
+    var elem = document.getElementById('slider');
+    elem.max = g_state.count;
+    elem.value = '0'
+
+    adjustPos(0);
   })
   .catch(err => { 
     var msg = 'Error fetching JSON from URL:  ' + url + ': ' + err + ':' + err.stack;
   })
   .catch(err => { 
     var msg = 'Error fetching JSON from URL:  ' + url + ': ' + err + ':' + err.stack;
index 8a74c627e96f534ba2f01ace20012601a4840cee..2d8076e35720c20e5422ecd87fe9eca83f70c7c9 100644 (file)
@@ -179,7 +179,6 @@ func handleInfo(w http.ResponseWriter, r *http.Request) {
 
 func handleSearch(w http.ResponseWriter, r *http.Request) {
   var err error
 
 func handleSearch(w http.ResponseWriter, r *http.Request) {
   var err error
-  fmt.Println("DEBUG:  handleSearch():  " + r.URL.Path)
 
   fields := []Field{Author, Title, Series}
 
 
   fields := []Field{Author, Title, Series}
 
@@ -190,7 +189,6 @@ func handleSearch(w http.ResponseWriter, r *http.Request) {
     paramName := fv.String()
     paramValues := r.Form[paramName]
     for _, pv := range(paramValues) {
     paramName := fv.String()
     paramValues := r.Form[paramName]
     for _, pv := range(paramValues) {
-      fmt.Println("DEBUG:  handleSearch():  ", paramName, "=", pv)
       if count >= len(terms) {
         fmt.Printf("WARNING:  limit of %d search terms exceeded.  One or more terms ignored.", len(terms))
         break
       if count >= len(terms) {
         fmt.Printf("WARNING:  limit of %d search terms exceeded.  One or more terms ignored.", len(terms))
         break