From 4f031e05dd23223a9f7bbfead2a4dd7cac20e4d2 Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Wed, 13 Oct 2010 18:47:46 -0600
Subject: [PATCH] Sorting for CS category views

---
 resources/content_server/browse/browse.html   |   7 +-
 resources/content_server/browse/browse.js     | 146 +++++++-----------
 .../content_server/jquery.multiselect.css     |  21 +++
 .../content_server/jquery.multiselect.min.js  |  16 ++
 src/calibre/library/server/browse.py          | 118 +++++++++-----
 5 files changed, 173 insertions(+), 135 deletions(-)
 create mode 100644 resources/content_server/jquery.multiselect.css
 create mode 100644 resources/content_server/jquery.multiselect.min.js

diff --git a/resources/content_server/browse/browse.html b/resources/content_server/browse/browse.html
index 1258088741..b5c208fd46 100644
--- a/resources/content_server/browse/browse.html
+++ b/resources/content_server/browse/browse.html
@@ -12,17 +12,22 @@
 
     <link rel="stylesheet" type="text/css" href="/static/browse/browse.css" />
     <link type="text/css" href="/static/jquery_ui/css/pepper-grinder/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
+    <link rel="stylesheet" type="text/css" href="/static/jquery.multiselect.css" />
 
     <script type="text/javascript" src="/static/jquery.js"></script>
     <script type="text/javascript" src="/static/jquery.corner.js"></script>
 
     <script type="text/javascript"
         src="/static/jquery_ui/js/jquery-ui-1.8.5.custom.min.js"></script>
+    <script type="text/javascript"
+        src="/static/jquery.multiselect.min.js"></script>
 
 
     <script type="text/javascript" src="/static/browse/browse.js"></script>
 
     <script type="text/javascript">
+        var sort_cookie_name = "{sort_cookie_name}";
+        var sort_select_label = "{sort_select_label}";
         $(document).ready(function() {{
                 init();
                 {script}
@@ -67,7 +72,7 @@
 
         <div id="content">
             <div class="sort_select">
-                <label>{sort_select_label}&nbsp;</label>
+                <label>{sort_select_label}</label>
                 <select id="sort_combobox">
                     {sort_select_options}
                 </select>
diff --git a/resources/content_server/browse/browse.js b/resources/content_server/browse/browse.js
index d534ea15c1..b7ca3ed2f4 100644
--- a/resources/content_server/browse/browse.js
+++ b/resources/content_server/browse/browse.js
@@ -1,106 +1,64 @@
 
-// Widgets {{{
+// Cookies {{{
 
-// Combobox {{{
-
-(function( $ ) {
-    $.widget( "ui.combobox", {
-        _create: function() {
-            var self = this,
-                select = this.element.hide(),
-                selected = select.children( ":selected" ),
-                value = selected.val() ? selected.text() : "";
-            var input = $( "<input>" )
-                .insertAfter( select )
-                .val( value )
-                .autocomplete({
-                    delay: 0,
-                    minLength: 0,
-                    source: function( request, response ) {
-                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
-                        response( select.children( "option" ).map(function() {
-                            var text = $( this ).text();
-                            if ( this.value && ( !request.term || matcher.test(text) ) )
-                                return {
-                                    label: text.replace(
-                                        new RegExp(
-                                            "(?![^&;]+;)(?!<[^<>]*)(" +
-                                            $.ui.autocomplete.escapeRegex(request.term) +
-                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
-                                        ), "<strong>$1</strong>" ),
-                                    value: text,
-                                    option: this
-                                };
-                        }) );
-                    },
-                    select: function( event, ui ) {
-                        ui.item.option.selected = true;
-                        self._trigger( "selected", event, {
-                            item: ui.item.option
-                        });
-                    },
-                    change: function( event, ui ) {
-                        if ( !ui.item ) {
-                            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
-                                valid = false;
-                            select.children( "option" ).each(function() {
-                                if ( this.value.match( matcher ) ) {
-                                    this.selected = valid = true;
-                                    return false;
-                                }
-                            });
-                            if ( !valid ) {
-                                // remove invalid value, as it didn't match anything
-                                $( this ).val( "" );
-                                select.val( "" );
-                                return false;
-                            }
-                        }
-                    }
-                })
-                .addClass( "ui-widget ui-widget-content ui-corner-left" );
-
-            input.data( "autocomplete" )._renderItem = function( ul, item ) {
-                return $( "<li></li>" )
-                    .data( "item.autocomplete", item )
-                    .append( "<a>" + item.label + "</a>" )
-                    .appendTo( ul );
-            };
-
-            $( "<button>&nbsp;</button>" )
-                .attr( "tabIndex", -1 )
-                .attr( "title", "Show All Items" )
-                .insertAfter( input )
-                .button({
-                    icons: {
-                        primary: "ui-icon-triangle-1-s"
-                    },
-                    text: false
-                })
-                .removeClass( "ui-corner-all" )
-                .addClass( "ui-corner-right ui-button-icon" )
-                .click(function() {
-                    // close if already visible
-                    if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
-                        input.autocomplete( "close" );
-                        return;
-                    }
-
-                    // pass empty string as value to search for, displaying all results
-                    input.autocomplete( "search", "" );
-                    input.focus();
-                });
+function cookie(name, value, options) {
+    if (typeof value != 'undefined') { // name and value given, set cookie
+        options = options || {};
+        if (value === null) {
+            value = '';
+            options.expires = -1;
         }
-    });
-})( jQuery );
-// }}}
+        var expires = '';
+        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+            var date;
+            if (typeof options.expires == 'number') {
+                date = new Date();
+                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+            } else {
+                date = options.expires;
+            }
+            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
+        }
+        // CAUTION: Needed to parenthesize options.path and options.domain
+        // in the following expressions, otherwise they evaluate to undefined
+        // in the packed version for some reason...
+        var path = options.path ? '; path=' + (options.path) : '';
+        var domain = options.domain ? '; domain=' + (options.domain) : '';
+        var secure = options.secure ? '; secure' : '';
+        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+    } else { // only name given, get cookie
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+};
 
 // }}}
 
 // Sort {{{
 
 function init_sort_combobox() {
-    $("#sort_combobox").combobox();
+    $("#sort_combobox").multiselect({
+       multiple: false,
+       header: sort_select_label,
+       noneSelectedText: sort_select_label,
+       selectedList: 1,
+       click: function(event, ui){
+            $(this).multiselect("close");
+            cookie(sort_cookie_name, ui.value, {expires: 365});
+            window.location.reload();
+       }
+    });
 }
 
 // }}}
diff --git a/resources/content_server/jquery.multiselect.css b/resources/content_server/jquery.multiselect.css
new file mode 100644
index 0000000000..3797daac06
--- /dev/null
+++ b/resources/content_server/jquery.multiselect.css
@@ -0,0 +1,21 @@
+.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
+.ui-multiselect span.ui-icon { float:right }
+
+.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
+.ui-multiselect-header ul { font-size:0.9em }
+.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
+.ui-multiselect-header a { text-decoration:none }
+.ui-multiselect-header a:hover { text-decoration:underline }
+.ui-multiselect-header span.ui-icon { float:left }
+.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }
+
+.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000 }
+.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
+.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
+.ui-multiselect-checkboxes label input { position:relative; top:1px }
+.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
+.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
+.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }
+
+/* remove label borders in IE6 because IE6 does not support transparency */
+* html .ui-multiselect-checkboxes label { border:none }
diff --git a/resources/content_server/jquery.multiselect.min.js b/resources/content_server/jquery.multiselect.min.js
new file mode 100644
index 0000000000..e463db29ac
--- /dev/null
+++ b/resources/content_server/jquery.multiselect.min.js
@@ -0,0 +1,16 @@
+/*
+ * jQuery MultiSelect UI Widget 1.5
+ * Copyright (c) 2010 Eric Hynds
+ *
+ * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
+ *
+ * Depends:
+ *   - jQuery 1.4.2
+ *   - jQuery UI 1.8 (widget factory and effects if you want to use them)
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+*/
+(function(e){var o=0;e.widget("ech.multiselect",{options:{header:true,height:175,minWidth:225,classes:"",checkAllText:"Check all",uncheckAllText:"Uncheck all",noneSelectedText:"Select options",selectedText:"# selected",selectedList:0,show:"",hide:"",autoOpen:false,multiple:true,position:{}},_create:function(){var c=this.element,a=this.options,b=[],d=[],g=c.attr("title"),f=c.id||o++;this.speed=e.fx.speeds._default;this._isOpen=false;b.push('<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all'); a.classes.length&&b.push(" "+a.classes);b.push('"');g.length&&b.push(' title="'+g+'"');b.push('><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>'+a.noneSelectedText+"</span></button>");b.push('<div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all '+(a.classes.length?a.classes:"")+'">');b.push('<div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix">');b.push('<ul class="ui-helper-reset">');if(a.header===true&&a.multiple){b.push('<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>'+ a.checkAllText+"</span></a></li>");b.push('<li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>'+a.uncheckAllText+"</span></a></li>")}else typeof a.header==="string"&&b.push("<li>"+a.header+"</li>");b.push('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>');b.push("</ul>");b.push("</div>");b.push('<ul class="ui-multiselect-checkboxes ui-helper-reset">');c.find("option").each(function(h){var i= e(this),l=i.html(),m=this.value;h=this.id||"ui-multiselect-"+f+"-option-"+h;var j=i.parent(),k=i.is(":disabled"),n=["ui-corner-all"];if(j.is("optgroup")){j=j.attr("label");if(e.inArray(j,d)===-1){b.push('<li class="ui-multiselect-optgroup-label"><a href="#">'+j+"</a></li>");d.push(j)}}if(m.length>0){k&&n.push("ui-state-disabled");b.push('<li class="'+(k?"ui-multiselect-disabled":"")+'">');b.push('<label for="'+h+'" class="'+n.join(" ")+'"><input id="'+h+'" type="'+(a.multiple?"checkbox":"radio")+ '" value="'+m+'" title="'+l+'"');i.is(":selected")&&b.push(' checked="checked"');k&&b.push(' disabled="disabled"');b.push(" />"+l+"</label></li>")}});b.push("</ul></div>");this.button=c.hide().after(b.join("")).next("button");this.menu=this.button.next("div.ui-multiselect-menu");this.labels=this.menu.find("label");this.buttonlabel=this.button.find("span").eq(-1);if(!a.multiple)this.radios=this.menu.find(":radio");this._setButtonWidth();this._setMenuWidth();this._bindEvents();this.button[0].defaultValue= this.update()},_init:function(){this.options.header||this.menu.find("div.ui-multiselect-header").hide();this.options.autoOpen&&this.open();this.element.is(":disabled")&&this.disable()},_bindEvents:function(){function c(){a[a._isOpen?"close":"open"]();return false}var a=this,b=this.button;b.find("span").bind("click.multiselect",c);b.bind({click:c,keypress:function(d){switch(d.keyCode){case 27:case 38:case 37:a.close();break;case 39:case 40:a.open()}},mouseenter:function(){b.hasClass("ui-state-disabled")|| e(this).addClass("ui-state-hover")},mouseleave:function(){e(this).removeClass("ui-state-hover")},focus:function(){b.hasClass("ui-state-disabled")||e(this).addClass("ui-state-focus")},blur:function(){e(this).removeClass("ui-state-focus")}});this.menu.find("div.ui-multiselect-header a").bind("click.multiselect",function(d){e(this).hasClass("ui-multiselect-close")?a.close():a[e(this).hasClass("ui-multiselect-all")?"checkAll":"uncheckAll"]();d.preventDefault()}).end().find("li.ui-multiselect-optgroup-label a").bind("click.multiselect", function(d){var g=e(this),f=g.parent().nextUntil("li.ui-multiselect-optgroup-label").find("input:visible");a._toggleChecked(f.filter(":checked").length!==f.length,f);a._trigger("optgrouptoggle",d,{inputs:f.get(),label:g.parent().text(),checked:f[0].checked});d.preventDefault()}).end().delegate("label","mouseenter",function(){if(!e(this).hasClass("ui-state-disabled")){a.labels.removeClass("ui-state-hover");e(this).addClass("ui-state-hover").find("input").focus()}}).delegate("label","keydown",function(d){switch(d.keyCode){case 9:case 27:a.close(); break;case 38:case 40:case 37:case 39:a._traverse(d.keyCode,this);break;case 13:d.preventDefault();e(this).find("input").trigger("click")}}).delegate(":checkbox, :radio","click",function(d){var g=this.value,f=this.checked;if(e(this).is(":disabled")||a._trigger("click",d,{value:this.value,text:this.title,checked:f})===false)d.preventDefault();else{a.options.multiple||a.radios.not(this).removeAttr("checked");a.element.find("option").filter(function(){return this.value===g}).attr("selected",f?"selected": "");a.update(!d.originalEvent?f?-1:1:0)}});e(document).bind("click.multiselect",function(d){d=e(d.target);a._isOpen&&!d.closest("div.ui-multiselect-menu").length&&!d.is("button.ui-multiselect")&&a.close()})},_setButtonWidth:function(){var c=this.element.outerWidth(),a=this.options;if(/\d/.test(a.minWidth)&&c<a.minWidth)c=a.minWidth;this.button.width(c)},_setMenuWidth:function(){var c=this.menu,a=this.button.outerWidth()-parseInt(c.css("padding-left"),10)-parseInt(c.css("padding-right"),10)-parseInt(c.css("border-right-width"), 10)-parseInt(c.css("border-left-width"),10);c.width(a||this.button.outerWidth())},_traverse:function(c,a){var b=e(a),d=c===38||c===37?true:false;b=b.parent()[d?"prevAll":"nextAll"]("li:not(.ui-multiselect-disabled, .ui-multiselect-optgroup-label)")[d?"last":"first"]();if(b.length)b.find("label").trigger("mouseover");else{b=this.menu.find("ul:last");this.menu.find("label")[d?"last":"first"]().trigger("mouseover");b.scrollTop(d?b.height():0)}},_toggleChecked:function(c,a){var b=a&&a.length?a:this.labels.find("input"); if(!this.options.multiple&&c)b=b.eq(0);b.not(":disabled").attr("checked",c?"checked":"");this.update();this.element.find("option").not(":disabled").attr("selected",c?"selected":"")},_toggleDisabled:function(c){this.button.attr("disabled",c?"disabled":"")[c?"addClass":"removeClass"]("ui-state-disabled");this.menu.find("input").attr("disabled",c?"disabled":"").parent()[c?"addClass":"removeClass"]("ui-state-disabled");this.element.attr("disabled",c?"disabled":"")},update:function(){var c=this.options, a=this.labels.find("input"),b=a.filter(":checked"),d=b.length;c=d===0?c.noneSelectedText:e.isFunction(c.selectedText)?c.selectedText.call(this,d,a.length,b.get()):/\d/.test(c.selectedList)&&c.selectedList>0&&d<=c.selectedList?b.map(function(){return this.title}).get().join(", "):c.selectedText.replace("#",d).replace("#",a.length);this.buttonlabel.html(c);return c},open:function(){var c=this.button,a=this.menu,b=this.speed,d=this.options;if(!(this._trigger("beforeopen")===false||c.hasClass("ui-state-disabled")|| this._isOpen)){e(":ech-multiselect").not(this.element).each(function(){var i=e(this);i.multiselect("isOpen")&&i.multiselect("close")});var g=a.find("ul:last"),f=d.show,h=c.position();if(e.isArray(d.show)){f=d.show[0];b=d.show[1]||this.speed}g.scrollTop(0).height(d.height);if(e.ui.position&&!e.isEmptyObject(d.position)){d.position.of=d.position.of||c;a.show().position(d.position).hide().show(f,b)}else a.css({top:h.top+c.outerHeight(),left:h.left}).show(f,b);this.labels.eq(0).trigger("mouseover").trigger("mouseenter").find("input").trigger("focus"); c.addClass("ui-state-active");this._isOpen=true;this._trigger("open")}},close:function(){if(this._trigger("beforeclose")!==false){var c=this.options,a=c.hide,b=this.speed;if(e.isArray(c.hide)){a=c.hide[0];b=c.hide[1]||this.speed}this.menu.hide(a,b);this.button.removeClass("ui-state-active").trigger("blur").trigger("mouseleave");this._trigger("close");this._isOpen=false}},enable:function(){this._toggleDisabled(false)},disable:function(){this._toggleDisabled(true)},checkAll:function(){this._toggleChecked(true); this._trigger("checkAll")},uncheckAll:function(){this._toggleChecked(false);this._trigger("uncheckAll")},getChecked:function(){return this.menu.find("input").filter(":checked")},destroy:function(){e.Widget.prototype.destroy.call(this);this.button.remove();this.menu.remove();this.element.show();return this},isOpen:function(){return this._isOpen},widget:function(){return this.menu},_setOption:function(c,a){var b=this.menu;switch(c){case "header":b.find("div.ui-multiselect-header")[a?"show":"hide"](); break;case "checkAllText":b.find("a.ui-multiselect-all span").eq(-1).text(a);break;case "uncheckAllText":b.find("a.ui-multiselect-none span").eq(-1).text(a);break;case "height":b.find("ul:last").height(parseInt(a,10));break;case "minWidth":this.options[c]=parseInt(a,10);this._setButtonWidth();this._setMenuWidth();break;case "selectedText":case "selectedList":case "noneSelectedText":this.options[c]=a;this.update();break;case "classes":b.add(this.button).removeClass(this.options.classes).addClass(a)}e.Widget.prototype._setOption.apply(this, arguments)}})})(jQuery);
\ No newline at end of file
diff --git a/src/calibre/library/server/browse.py b/src/calibre/library/server/browse.py
index fc49a92025..864f97d1ec 100644
--- a/src/calibre/library/server/browse.py
+++ b/src/calibre/library/server/browse.py
@@ -5,7 +5,7 @@ __license__   = 'GPL v3'
 __copyright__ = '2010, Kovid Goyal <kovid@kovidgoyal.net>'
 __docformat__ = 'restructuredtext en'
 
-import operator, os, sys
+import operator, os
 from urllib import quote
 from binascii import hexlify
 
@@ -13,9 +13,8 @@ import cherrypy
 
 from calibre.constants import filesystem_encoding
 from calibre import isbytestring, force_unicode, prepare_string_for_xml as xml
-from calibre.library.server.utils import Offsets
 
-def paginate(offsets, content, base_url, up_url=None):
+def paginate(offsets, content, base_url, up_url=None): # {{{
     'Create markup for pagination'
 
     if '?' not in base_url:
@@ -72,13 +71,15 @@ def paginate(offsets, content, base_url, up_url=None):
         </div>
     '''
     return templ.format(navbar=navbar, content=content)
+# }}}
 
-def utf8(x):
+def utf8(x): # {{{
     if isinstance(x, unicode):
         x = x.encode('utf-8')
     return x
+# }}}
 
-def render_rating(rating, container='span'):
+def render_rating(rating, container='span'): # {{{
     if rating < 0.1:
         return '', ''
     added = 0
@@ -99,7 +100,9 @@ def render_rating(rating, container='span'):
     ans.append('</%s>'%container)
     return u''.join(ans), rstring
 
-def get_category_items(category, items, offsets, db):
+# }}}
+
+def get_category_items(category, items, db): # {{{
 
     def item(i):
         templ = (u'<li title="{4}" class="category-item">'
@@ -118,9 +121,41 @@ def get_category_items(category, items, offsets, db):
         return templ.format(xml(name), rating,
                 xml(desc), xml(quote(href)), rstring)
 
-    items = list(map(item, items[offsets.offset:offsets.slice_upper_bound]))
+    items = list(map(item, items))
     return '\n'.join(['<ul>'] + items + ['</ul>'])
 
+# }}}
+
+class Endpoint(object): # {{{
+    'Manage encoding, mime-type, last modified, cookies, etc.'
+
+    def __init__(self, mimetype='text/html', sort_type='category'):
+        self.mimetype = mimetype
+        self.sort_type = sort_type
+        self.sort_kwarg = sort_type + '_sort'
+        self.sort_cookie_name = 'calibre_browse_server_sort_'+self.sort_type
+
+    def __call__(eself, func):
+
+        def do(self, *args, **kwargs):
+            sort_val = None
+            cookie = cherrypy.request.cookie
+            if cookie.has_key(eself.sort_cookie_name):
+                sort_val = cookie[eself.sort_cookie_name].value
+            kwargs[eself.sort_kwarg] = sort_val
+
+            ans = func(self, *args, **kwargs)
+            cherrypy.response.headers['Content-Type'] = eself.mimetype
+            updated = self.db.last_modified()
+            cherrypy.response.headers['Last-Modified'] = \
+                self.last_modified(max(updated, self.build_time))
+            ans = utf8(ans)
+            return ans
+
+        do.__name__ = func.__name__
+
+        return do
+# }}}
 
 class BrowseServer(object):
 
@@ -134,26 +169,34 @@ class BrowseServer(object):
                 self.browse_search)
         connect('browse_book', base_href+'/book/{uuid}', self.browse_book)
 
-    def browse_template(self, category=True):
+    def browse_template(self, sort, category=True):
 
         def generate():
+            scn = 'calibre_browse_server_sort_'
+
             if category:
                 sort_opts = [('rating', _('Average rating')), ('name',
                     _('Name')), ('popularity', _('Popularity'))]
+                scn += 'category'
             else:
+                scn += 'list'
                 fm = self.db.field_metadata
-                sort_opts = [(x, fm[x]['name']) for x in fm.sortable_field_keys()
-                        if fm[x]['name']]
-            prefix = 'category' if category else 'book'
+                sort_opts, added = [], set([])
+                for x in fm.sortable_field_keys():
+                    n = fm[x]['name']
+                    if n not in added:
+                        added.add(n)
+                        sort_opts.append((x, n))
+
             ans = P('content_server/browse/browse.html',
                     data=True).decode('utf-8')
             ans = ans.replace('{sort_select_label}', xml(_('Sort by')+':'))
-            opts = ['<option value="%s_%s">%s</option>' % (prefix, xml(k),
-                xml(n)) for k, n in
+            ans = ans.replace('{sort_cookie_name}', scn)
+            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))]
-            opts = ['<option value="_default">'+xml(_('Select one')) +
-                    '&hellip;</option>'] + opts
-            ans = ans.replace('{sort_select_options}', '\n\t\t\t'.join(opts))
+            ans = ans.replace('{sort_select_options}', ('\n'+' '*20).join(opts))
             lp = self.db.library_path
             if isbytestring(lp):
                 lp = force_unicode(lp, filesystem_encoding)
@@ -197,10 +240,12 @@ class BrowseServer(object):
 
         main = '<div class="toplevel"><h3>{0}</h3><ul>{1}</ul></div>'\
                 .format(_('Choose a category to browse by:'), '\n\n'.join(cats))
-        return self.browse_template().format(title='',
+        return self.browse_template('name').format(title='',
                     script='toplevel();', main=main)
 
-    def browse_category(self, category, offset, sort, subcategory=None):
+    def browse_category(self, category, sort):
+        if sort not in ('rating', 'name', 'popularity'):
+            sort = 'name'
         categories = self.categories_cache()
         category_meta = self.db.field_metadata
         category_name = category_meta[category]['name']
@@ -210,18 +255,20 @@ class BrowseServer(object):
 
         items = categories[category]
 
-        base_url='/browse/category/'+category+'?'
-        if subcategory is not None:
-            base_url += 'subcategory='+quote(subcategory)
+        name_keyg = lambda x: getattr(x, 'sort', x.name).lower()
+        items.sort(key=name_keyg)
+        if sort == 'popularity':
+            items.sort(key=operator.attrgetter('count'), reverse=True)
+        elif sort == 'rating':
+            items.sort(key=operator.attrgetter('avg_rating'), reverse=True)
+
+        base_url='/browse/category/'+category
         if sort is not None:
-            base_url += 'sort='+quote(sort)
+            base_url += '?sort='+quote(sort)
 
         script = 'category();'
 
-        max_items = sys.maxint
-        offsets = Offsets(offset, max_items, len(items))
-        items = list(items)[offsets.offset:offsets.offset+max_items]
-        items = get_category_items(category, items, offsets, self.db)
+        items = get_category_items(category, items, self.db)
         main = u'''
             <div class="category">
                 <h3>{0}</h3>
@@ -234,29 +281,20 @@ class BrowseServer(object):
                 xml(_('Browsing by')+': ' + category_name), items,
                 xml(_('Up'), True))
 
-        return self.browse_template().format(title=category_name,
+        return self.browse_template(sort).format(title=category_name,
                 script=script, main=main)
 
 
 
-    def browse_catalog(self, category=None, offset=0, sort=None,
-            subcategory=None):
+    @Endpoint()
+    def browse_catalog(self, category=None, category_sort=None):
         'Entry point for top-level, categories and sub-categories'
-        try:
-            offset = int(offset)
-        except:
-            raise cherrypy.HTTPError(404, 'Not found')
-
         if category == None:
             ans = self.browse_toplevel()
         else:
-            ans = self.browse_category(category, offset, sort)
+            ans = self.browse_category(category, category_sort)
 
-        cherrypy.response.headers['Content-Type'] = 'text/html'
-        updated = self.db.last_modified()
-        cherrypy.response.headers['Last-Modified'] = \
-            self.last_modified(max(updated, self.build_time))
-        return utf8(ans)
+        return ans
 
     # }}}