Add slider to enable distant paging.

[quanweb.git] / app / lib.js

diff --git a/app/lib.js b/app/lib.js
index 7175471c084b4822b8f479e84b91858c78d079e8..50086d0db6c12fda13f253e31f41edbf7489a164 100644 (file)
--- a/app/lib.js
+++ b/app/lib.js
@@ -6,7 +6,34 @@ g_state = {
   count: 0,
   first: 0,
   ids: [],
-  last: 0,
+  last: (-1),
+  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() {
@@ -40,9 +67,19 @@ function constructSearchUrl() {
 }
 
 function onNext() {
+  if (g_state.last < (g_state.count - 1)) {
+    adjustPos(g_state.first + g_state.pageSize);
+  }
 }
 
 function onPrev() {
+  if (g_state.first > 0) {
+    adjustPos(g_state.first - g_state.pageSize);
+  }
+}
+
+function onSlide(value) {
+  adjustPos(value);
 }
 
 function onSearch() {
@@ -58,12 +95,14 @@ function onSearch() {
   .then((jsonValue) => {
     console.log('JSON response:  ', jsonValue);
     g_state.ids = jsonValue
-    g_state.first = 0
-    g_state.last = (g_state.ids.length) - 1;
-    if (g_state.last > 100) {
-      g_state.last = 100;
-    }
-    refreshData()
+    g_state.count = g_state.ids.length;
+    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;
@@ -78,7 +117,7 @@ function refreshData() {
   var i;
   var url = '/info/?ids=';
   for (i = g_state.first; i <= g_state.last; ++i) {
-    if (i > 0) {
+    if (i > g_state.first) {
       url += ',';
     }
     url += g_state.ids[i];
@@ -102,12 +141,16 @@ function refreshData() {
 function refreshLayout() {
   var i;
   var html = '';
-  for (i = g_state.first; i <= g_state.last; ++i) {
+  var limit = g_state.last - g_state.first;
+  for (i = 0; i <= limit; ++i) {
     var book = g_state.cache[i];
     html += bookHtml(book);
   }
 
   document.getElementById('books').innerHTML = html;
+  document.getElementById('first').innerHTML = (g_state.first + 1);
+  document.getElementById('last').innerHTML = (g_state.last + 1);
+  document.getElementById('count').innerHTML = g_state.count;
 }
 
 function report(message) {
@@ -116,10 +159,28 @@ function report(message) {
 
 function bookHtml(book) {
   console.log('bookHtml(): ', book);
-  var result = '<div class="book"><table><tr><td><a href="/book/' + book.Id + '">'
-             + '<img class="cover-thumb" src="/download/' + book.CoverId + '"/></a></td>'
-             + '<td><span class="popup">' + book.Description + '</span></td>'
-             + '</tr></table></div>';
+  var result = '<div class="book">'
+             +   '<table>'
+             +     '<tr>'
+             +       '<td><a href="/book/' + book.Id + '">';
+  if (0 == book.CoverId) {
+    result  +=          '(No cover available)'
+  } else {
+    result  +=          '<img class="cover-thumb" src="/download/' + book.CoverId + '"/>'
+  }
+  result    +=       '</a></td>'
+             +       '<td>'
+             +         '<p><b>' + book.Title + '</b></p>'
+             +         '<p>'
+             +           '<i>' + book.AuthorReading + '</i>';
+  if (typeof(book.SeriesName) !== 'undefined' && book.SeriesName.length > 0) {
+    result  +=           '<br/><i>' + book.SeriesName + ' ' + book.Volume + '</i>';
+  }
+  result    +=         '</p>'
+             +       '</td>'
+             +     '</tr>'
+             +   '</table>'
+             + '</div>';
   return result;
 }