Pagination of book lists

resources/content_server/browse/browse.css

@@ -279,6 +279,7 @@ h2.library_name {
 #booklist div.left {
     float: left;
     height: 190px;
+    width: 100px;
     vertical-align: middle;
     text-align: center;
     margin-left: 1em;
@@ -288,6 +289,8 @@ h2.library_name {
 #booklist div.left img {
     display: block;
     margin-bottom: 1ex;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #booklist div.right {
@@ -312,6 +315,7 @@ h2.library_name {
 
 #booklist .formats a {
     text-decoration: none;
+    color: blue;
 }
 
 #booklist .formats a:hover {
@@ -326,5 +330,47 @@ h2.library_name {
     padding-bottom: 0.25em;
 }
 
+#booklist .listnav {
+    display: table;
+    width: 100%;
+}
+
+#booklist .listnav a {
+    color: blue;
+    text-decoration: none;
+}
+
+#booklist .listnav a:hover {
+    color: red;
+}
+
+#booklist .topnav {
+    border-bottom: solid black 1px;
+    margin-bottom: 1ex;
+}
+
+#booklist .navleft {
+    display: table-cell;
+    text-align: left;
+}
+
+#booklist .navleft a {
+    margin-right: 1em;
+}
+
+#booklist .navmiddle {
+    display: table-cell;
+    text-align: center;
+}
+
+#booklist .navright {
+    display: table-cell;
+    text-align: right;
+}
+
+#booklist .navright a {
+    margin-left: 1em;
+}
+
 /* }}} */
 

resources/content_server/browse/browse.js

@@ -138,9 +138,33 @@ function category() {
 
 // Booklist {{{
 
+function first_page() {
+    load_page($("#booklist #page0"));
+}
+
+function last_page() {
+    load_page($("#booklist .page").last());
+}
+
+function next_page() {
+    var elem = $("#booklist .page:visible").next('.page');
+    if (elem.length > 0) load_page(elem);
+    else first_page();
+}
+
+function previous_page() {
+    var elem = $("#booklist .page:visible").prev('.page');
+    if (elem.length > 0) load_page(elem);
+    else last_page();
+}
+
 function load_page(elem) {
-    var ids = elem.find(".load_data").attr('title');
-    var href = elem.find(".load_data").html();
+    if (elem.is(":visible")) return;
+    var ld = elem.find('.load_data');
+    var ids = ld.attr('title');
+    var href = ld.find(".url").attr('title');
+    elem.children(".loaded").hide();
+
     $.ajax({
         url: href,
         context: elem,
@@ -155,12 +179,14 @@ function load_page(elem) {
         },
         success: function(data) {
             this.children(".loaded").html(data);
-            this.children(".loaded").show();
-            this.children(".loading").hide();
             this.find(".left a.read").button();
+            this.children(".loading").hide();
+            this.parent().find('.navmiddle .start').html(this.find('.load_data .start').attr('title'));
+            this.parent().find('.navmiddle .end').html(this.find('.load_data .end').attr('title'));
+            this.children(".loaded").fadeIn(1000);
         }
     });
-    $("#booklist .page").hide();
+    $("#booklist .page:visible").hide();
     elem.children(".loaded").hide();
     elem.children(".loading").show();
     elem.show();
@@ -173,8 +199,7 @@ function booklist() {
         return;
     }
 
-    load_page($("#booklist #page0"));
-    
+    first_page(); 
 }
 
 // }}}

resources/content_server/browse/summary.html

@@ -1,6 +1,6 @@
 <div id="summary_{id}" class="summary">
     <div class="left">
-        <img alt="Cover of {title}" src="/get/thumb_120_120/{id}" />
+        <img alt="Cover of {title}" src="/get/thumb_90_120/{id}" />
         <a href="{href}" class="read" title="{read_tooltip}">{read_string}</a>
     </div>
     <div class="right">

src/calibre/library/server/browse.py

@@ -21,31 +21,62 @@ from calibre.library.comments import comments_to_html
 def render_book_list(ids):
     pages = []
     num = len(ids)
+    pos = 0
+    delta = 25
     while ids:
-        page = list(ids[:25])
-        pages.append(page)
-        ids = ids[25:]
+        page = list(ids[:delta])
+        pages.append((page, pos))
+        ids = ids[delta:]
+        pos += len(page)
     page_template = u'''\
             <div class="page" id="page{0}">
-                <div class="load_data" title="{1}">/browse/booklist_page</div>
+                <div class="load_data" title="{1}">
+                    <span class="url" title="/browse/booklist_page"></span>
+                    <span class="start" title="{start}"></span>
+                    <span class="end" title="{end}"></span>
+                </div>
                 <div class="loading"><img src="/static/loading.gif" /> {2}</div>
                 <div class="loaded"></div>
             </div>
             '''
     rpages = []
-    for i, pg in enumerate(pages):
+    for i, x in enumerate(pages):
+        pg, pos = x
         ld = xml(json.dumps(pg), True)
         rpages.append(page_template.format(i, ld,
-            xml(_('Loading, please wait')) + '&hellip;'))
+            xml(_('Loading, please wait')) + '&hellip;',
+            start=pos+1, end=pos+len(pg)))
     rpages = u'\n\n'.join(rpages)
 
     templ = u'''\
             <h3>{0}</h3>
             <div id="booklist">
+                <div class="listnav topnav">
+                {navbar}
+                </div>
                 {pages}
+                <div class="listnav bottomnav">
+                {navbar}
+                </div>
             </div>
             '''
-    return templ.format(_('Browsing %d books')%num, pages=rpages)
+
+    navbar = u'''\
+        <div class="navleft">
+            <a href="#" onclick="first_page(); return false;">{first}</a>
+            <a href="#" onclick="previous_page(); return false;">{previous}</a>
+        </div>
+        <div class="navmiddle">
+            <span class="start">0</span> to <span class="end">0</span> of {num}
+        </div>
+        <div class="navright">
+            <a href="#" onclick="next_page(); return false;">{next}</a>
+            <a href="#" onclick="last_page(); return false;">{last}</a>
+        </div>
+    '''.format(first=_('First'), last=_('Last'), previous=_('Previous'),
+            next=_('Next'), num=num)
+
+    return templ.format(_('Browsing %d books')%num, pages=rpages, navbar=navbar)
 
 def utf8(x): # {{{
     if isinstance(x, unicode):
@@ -182,7 +213,7 @@ class BrowseServer(object):
             opts = ['<option %svalue="%s">%s</option>' % (
                 'selected="selected" ' if k==sort else '',
                 xml(k), xml(n), ) for k, n in
-                    sorted(sort_opts, key=operator.itemgetter(1))]
+                    sorted(sort_opts, key=operator.itemgetter(1)) if k and n]
             ans = ans.replace('{sort_select_options}', ('\n'+' '*20).join(opts))
             lp = self.db.library_path
             if isbytestring(lp):
@@ -402,7 +433,7 @@ class BrowseServer(object):
         sort = self.browse_sort_book_list(items, list_sort)
         ids = [x[0] for x in items]
         html = render_book_list(ids)
-        return self.browse_template(sort).format(
+        return self.browse_template(sort, category=False).format(
                 title=_('Books in') + " " +category_name,
                 script='booklist();', main=html)