Content server: Allow direct navigation to a set of books in the book list. Fixes #7453 (Paginating of Content Server)

resources/content_server/browse/browse.css

@@ -355,6 +355,25 @@ h2.library_name {
     color: red;
 }
 
+#booklist > #pagelist { display: none; }
+
+#goto_page_dialog ul {
+    list-style-type: none;
+    font-size: medium;
+}
+
+#goto_page_dialog li {
+    margin-bottom: 1.5ex;
+}
+
+#goto_page_dialog a {
+    text-decoration: none;
+    color: blue;
+}
+
+#goto_page_dialog a:hover {
+    color: red;
+}
 
 #booklist .left .ui-button-text {
     font-size: medium;

resources/content_server/browse/browse.html

@@ -96,5 +96,6 @@
         </div>
     </div>
     <div id="book_details_dialog"></div>
+    <div id="goto_page_dialog"></div>
 </body>
 </html>

resources/content_server/browse/browse.js

@@ -202,6 +202,23 @@ function previous_page() {
     else last_page();
 }
 
+function gp_internal(id) {
+    var gp = $('#goto_page_dialog');
+    gp.dialog('close');
+    var elem = $("#booklist #" + id);
+    load_page(elem);
+}
+
+function goto_page() {
+    var gp = $('#goto_page_dialog');
+    var pl = $('#booklist > #pagelist');
+    gp.html(pl.html());
+    gp.dialog('option', 'title', pl.attr('title'));
+    gp.dialog('option', 'height', $(window).height() - 100);
+    gp.dialog('open');
+
+}
+
 function load_page(elem) {
     if (elem.is(":visible")) return;
     var ld = elem.find('.load_data');
@@ -251,6 +268,12 @@ function booklist(hide_sort) {
         modal: true,
         show: 'slide'
     });
+    $("#goto_page_dialog").dialog({
+        autoOpen: false,
+        modal: true,
+        show: 'slide'
+    });
+
     first_page(); 
 }
 

src/calibre/library/server/browse.py

@@ -43,18 +43,33 @@ def render_book_list(ids, prefix, suffix=''): # {{{
                 <div class="loaded"></div>
             </div>
             '''
-    rpages = []
+    pagelist_template = u'''\
+        <div class="pagelist">
+            <ul>
+                {pages}
+            </ul>
+        </div>
+    '''
+    rpages, lpages = [], []
     for i, x in enumerate(pages):
         pg, pos = x
         ld = xml(json.dumps(pg), True)
+        start, end = pos+1, pos+len(pg)
         rpages.append(page_template.format(i, ld,
             xml(_('Loading, please wait')) + '&hellip;',
-            start=pos+1, end=pos+len(pg), prefix=prefix))
+            start=start, end=end, prefix=prefix))
+        lpages.append(' '*20 + (u'<li><a href="#" title="Books {start} to {end}"'
+            ' onclick="gp_internal(\'{id}\'); return false;"> '
+            '{start}&nbsp;to&nbsp;{end}</a></li>').format(start=start, end=end,
+                id='page%d'%i))
     rpages = u'\n\n'.join(rpages)
+    lpages = u'\n'.join(lpages)
+    pagelist = pagelist_template.format(pages=lpages)
 
     templ = u'''\
             <h3>{0} {suffix}</h3>
             <div id="booklist">
+                <div id="pagelist" title="{goto}">{pagelist}</div>
                 <div class="listnav topnav">
                 {navbar}
                 </div>
@@ -64,24 +79,31 @@ def render_book_list(ids, prefix, suffix=''): # {{{
                 </div>
             </div>
             '''
-
+    gp_start = gp_end = ''
+    if len(pages) > 1:
+        gp_start = '<a href="#" onclick="goto_page(); return false;" title="%s">' % \
+                (_('Go to') + '&hellip;')
+        gp_end = '</a>'
     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}
+            {gp_start}
+                <span class="start">0</span> to <span class="end">0</span>
+            {gp_end}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)
+            next=_('Next'), num=num, gp_start=gp_start, gp_end=gp_end)
 
     return templ.format(_('Browsing %d books')%num, suffix=suffix,
-            pages=rpages, navbar=navbar)
+            pages=rpages, navbar=navbar, pagelist=pagelist,
+            goto=xml(_('Go to'), True) + '&hellip;')
 
 # }}}