Client side changes for new API

* Handle hierarchal comments data format
* New comments fetching parameters: limit, parent, after
* Link to load more comments

isso/js/app/api.js

@@ -128,13 +128,15 @@ define(["app/lib/promise", "app/globals"], function(Q, globals) {
         return deferred.promise;
     };
 
-    var fetch = function(tid) {
+    var fetch = function(tid, limit, parent, lastcreated) {
+        if(typeof(limit) == 'undefined') limit = 0;
+        if(typeof(parent) == 'undefined') parent = null;
         var deferred = Q.defer();
-        curl("GET", endpoint + "/?" + qs({uri: tid || location}), null, function(rv) {
+        curl("GET", endpoint + "/?" + qs({uri: tid || location, limit: limit, parent: parent, after: lastcreated}), null, function(rv) {
             if (rv.status === 200) {
                 deferred.resolve(JSON.parse(rv.body));
             } else if (rv.status === 404) {
-                deferred.resolve([]);
+                deferred.resolve({total_replies: 0});
             } else {
                 deferred.reject(rv.body);
             }

isso/js/app/isso.js

@@ -84,8 +84,51 @@ define(["app/text/html", "app/dom", "app/utils", "app/config", "app/api", "app/m
         return el;
     };
 
-    var insert = function(comment, scrollIntoView) {
+    var insert_loader = function(commentWrapper, lastcreated) {
+        var entrypoint;
+        if (commentWrapper.id === null) {
+            entrypoint = $("#isso-root");
+            commentWrapper.name = 'null';
+        } else {
+            entrypoint = $("#isso-" + commentWrapper.id + " > .text-wrapper > .isso-follow-up");
+            commentWrapper.name = commentWrapper.id;
+        }
+        var el = $.htmlify(Mark.up(templates["comment_loader"], commentWrapper));
+
+        entrypoint.append(el);
+
+        $("a.load_hidden", el).toggle("click",
+            function() {
+                el.remove();
+                api.fetch($("#isso-thread").getAttribute("data-isso-id"), limit=20, parent=commentWrapper.id, lastcreated=lastcreated).then(
+                    function(rv) {
+                        if (rv.total_replies == 0) {
+                            return;
+                        }
+
+                        var lastcreated = 0;
+                        rv.replies.forEach(function(commentObject) {
+                            insert(commentObject, false);
+                            if(commentObject.created > lastcreated) {
+                                lastcreated = commentObject.created;
+                            }
+                        });
+
+                        if(rv.hidden_replies > 0) {
+                            insert_loader(rv, lastcreated);
+                        }
+
+                        if (window.location.hash.length > 0) {
+                            $(window.location.hash).scrollIntoView();
+                        }
+                    },
+                    function(err) {
+                        console.log(err);
+                    });
+            });
+    };
 
+    var insert = function(comment, scrollIntoView) {
         var el = $.htmlify(Mark.up(templates["comment"], comment));
 
         // update datetime every 60 seconds
@@ -132,7 +175,7 @@ define(["app/text/html", "app/dom", "app/utils", "app/config", "app/api", "app/m
         );
 
         // update vote counter, but hide if votes sum to 0
-        var votes = function(value) {
+        var votes = function(value) {
             var span = $("span.votes", footer);
             if (span === null && value !== 0) {
                 footer.prepend($.new("span.votes", value));
@@ -261,10 +304,27 @@ define(["app/text/html", "app/dom", "app/utils", "app/config", "app/api", "app/m
         if (! config["reply-to-self"] && utils.cookie("isso-" + comment.id)) {
             show($("a.reply", footer).detach());
         }
+
+        if(comment.hasOwnProperty('replies')) {
+            var lastcreated = 0;
+            comment.replies.forEach(function(replyObject) {
+                insert(replyObject, false);
+                if(replyObject.created > lastcreated) {
+                    lastcreated = replyObject.created;
+                }
+
+            });
+            if(comment.hidden_replies > 0) {
+                insert_loader(comment, lastcreated);
+            }
+
+        }
+
     };
 
     return {
         insert: insert,
+        insert_loader: insert_loader,
         Postbox: Postbox
     };
 });

isso/js/app/text/comment-loader.html

@@ -0,0 +1,3 @@
+<div class="isso-comment-loader" id="isso-loader-{{ name | blank }}">
+    <a class="load_hidden" href="#">{{ hidden_replies }} hidden</a>
+</div>

isso/js/app/text/html.js

@@ -1,6 +1,7 @@
-define(["text!./postbox.html", "text!./comment.html"], function (postbox, comment) {
+define(["text!./postbox.html", "text!./comment.html", "text!./comment-loader.html"], function (postbox, comment, comment_loader) {
     return {
         postbox: postbox,
-        comment: comment
+        comment: comment,
+        comment_loader: comment_loader
     };
 });

isso/js/embed.js

@@ -26,16 +26,24 @@ require(["app/lib/ready", "app/config", "app/api", "app/isso", "app/count", "app
         $("#isso-thread").append(new isso.Postbox(null));
         $("#isso-thread").append('<div id="isso-root"></div>');
 
-        api.fetch($("#isso-thread").getAttribute("data-isso-id")).then(
+        api.fetch($("#isso-thread").getAttribute("data-isso-id"), limit=20).then(
             function(rv) {
-                if (! rv.length) {
+                if (rv.total_replies == 0) {
                     $("#isso-thread > h4").textContent = Mark.up("{{ i18n-no-comments }}");
                     return;
                 }
 
-                $("#isso-thread > h4").textContent = Mark.up("{{ i18n-num-comments | pluralize : `n` }}", {n: rv.length});
-                for (var i=0; i < rv.length; i++) {
-                    isso.insert(rv[i], false);
+                $("#isso-thread > h4").textContent = Mark.up("{{ i18n-num-comments | pluralize : `n` }}", {n: rv.total_replies});
+                var lastcreated = 0;
+                rv.replies.forEach(function(commentObject) {
+                    isso.insert(commentObject, false);
+                    if(commentObject.created > lastcreated) {
+                        lastcreated = commentObject.created;
+                    }
+                });
+
+                if(rv.hidden_replies > 0) {
+                    isso.insert_loader(rv, lastcreated);
                 }
 
                 if (window.location.hash.length > 0) {