Merge 76d8ab3f23 into dc883e672a

docs/docs/configuration/client.rst

@@ -19,6 +19,7 @@ preferably in the script tag which embeds the JS:
             data-isso-avatar-bg="#f0f0f0"
             data-isso-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
             data-isso-vote="true"
+            data-isso-sorting="oldest"
             data-vote-levels=""
             src="/prefix/js/embed.js"></script>
 
@@ -125,6 +126,28 @@ For example, the value `"-5,5"` will cause each `isso-comment` to be given one o
 
 These classes can then be used to customize the appearance of comments (eg. put a star on popular comments)
 
+data-isso-sorting
+-----------------
+
+A comma-separated list of thread sorting methods that are applied in the
+specified order.
+
+Possible sorting methods:
+
+- `newest`: Bring newest comments to the top
+- `oldest`: Bring oldest comments to the top
+- `upvotes`: Bring most liked comments to the top
+
+You can combine sorting methods. If you specify `upvotes,newest`, then comments
+will be sorted by upvotes, and comments with the same number of upvotes will be
+sorted by date (newest first).
+
+Note that only the top level threads are sorted according to this
+configuration. The thread replies are still sorted in chronological order
+(oldest first), so that they can be read from top to bottom.
+
+Default sorting is `oldest`.
+
 data-isso-id
 ------------
 

isso/js/app/config.js

@@ -10,6 +10,7 @@ define(function() {
         "max-comments-top": "inf",
         "max-comments-nested": 5,
         "reveal-on-click": 5,
+        "sorting": "oldest",
         "avatar": true,
         "avatar-bg": "#f0f0f0",
         "avatar-fg": ["#9abf88", "#5698c4", "#e279a3", "#9163b6",

isso/js/embed.js

@@ -42,6 +42,40 @@ require(["app/lib/ready", "app/config", "app/i18n", "app/api", "app/isso", "app/
 
                 var lastcreated = 0;
                 var count = rv.total_replies;
+
+                // Sorting functions
+                var sortfuncs = {
+                    oldest: function(a, b) { return a.created - b.created; },
+                    newest: function(a, b) { return b.created - a.created; },
+                    upvotes: function(a, b) { return b.likes - a.likes; },
+                };
+
+                // Handle sorting configuration
+                var sort_by = config["sorting"].split(",")
+                                               .map(function(x) { return x.trim(); })
+                                               .filter(function(x) { return x; });
+                function sortfunc(a, b) {
+                    var i = 0;
+                    while (true) {
+                        var func = sortfuncs[sort_by[i]];
+                        if (func === undefined) {
+                            console.warn("Invalid sorting mode:", sort_by[i]);
+                            return sortfuncs.oldest(a, b);
+                        }
+                        var compared = func(a, b);
+                        if (compared == 0 && sort_by[i + 1] !== undefined) {
+                            i++;
+                        } else {
+                            return compared;
+                        }
+                    }
+                }
+                if (sort_by.length === 0) {
+                    console.warn("Invalid sorting config:", config["sorting"]);
+                } else {
+                    rv.replies.sort(sortfunc);
+                }
+
                 rv.replies.forEach(function(comment) {
                     isso.insert(comment, false);
                     if(comment.created > lastcreated) {