Merge pull request #4 from mashruravi/feat-comments-collapse

Collapse comments like in hacker news
datatau-net · Jul 1, 2019 · 92f1365 · 92f1365
2 parents 3c6c896 + 22273ae
commit 92f1365
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 2 deletions.
diff --git a/static/js/app.js b/static/js/app.js
@@ -52,3 +52,72 @@ function upvotePost(item) {
 function upvoteComment(item) {
     upvote(item, 'comment')
 }
+
+function noshow (el) { if (el) { el.classList.add('noshow'); } }
+function elShow (el) { if (el) { el.classList.remove('noshow'); } }
+function vis(el, on) { if (el) { on ? el.classList.remove('nosee') : el.classList.add('nosee'); } }
+
+function ind(el) { if (el) { return (el.getElementsByTagName('img')[0] || { width: 0 }).width; } }
+function aeach(fn, a) { return Array.prototype.forEach.call(a, fn); }
+function acut(a, m, n) { return Array.prototype.slice.call(a, m, n); }
+
+function allof(cls) { return document.getElementsByClassName(cls); }
+function allcomments() { return allof('comtr'); }
+function allcollapsed() { return allof('coll'); }
+
+function posf (f, a) { for (var i=0; i < a.length; i++) { if (f(a[i])) return i; } return -1; }
+function apos (x, a) { return (typeof x == 'function') ? posf(x,a) : Array.prototype.indexOf.call(a,x) }
+function afind (x, a) { var i = apos(x, a); return (i >= 0) ? a[i] : null; }
+
+function toggle(ev, id) {
+    var node = document.getElementById(id);
+    var isCollapsed = afind(node, allcollapsed());
+    isCollapsed ? node.classList.remove('coll') : node.classList.add('coll');
+    recollapse();
+    ev.stopPropagation();
+    return false;
+}
+
+function expand(tr) {
+    elShow(tr);
+    elShow(tr.querySelector('.comment'));
+    vis(tr.querySelector('.votelinks'), true);
+    tr.querySelector('.togg').innerHTML = '[-]';
+}
+
+function kidsOf(id) {
+    var kids = [];
+    var comments = allcomments();
+    var node = document.getElementById(id);
+    var i = apos(node, comments);
+    if (i >= 0) {
+        kids = acut(comments, i+1);
+        var n = ind(node);
+        var j = apos(function(tr) { return ind(tr) <= n }, kids);
+        if (j >= 0) { kids = acut(kids, 0, j); }
+    }
+    return kids;
+}
+
+function squish(tr) {
+    if (tr.classList.contains('noshow')) {
+        return;
+    }
+    aeach(noshow, kidsOf(tr.id));
+    var toggle = tr.querySelector('.togg');
+    toggle.innerHTML = '[+'+ (getChildrenCount(tr.id) + 1) +']';
+    noshow(tr.querySelector('.comment'));
+    vis(tr.querySelector('.votelinks'), false);
+}
+
+function recollapse() {
+    var comments = allcomments();
+    aeach(expand, comments);
+
+    var collapsed = allcollapsed();
+    aeach(squish, collapsed);
+}
+
+function getChildrenCount(id) {
+    return kidsOf(id).length;
+}
diff --git a/templates/comments/comments_tree.html b/templates/comments/comments_tree.html
@@ -5,7 +5,7 @@
     <table border='0'>
       <tr>
         <td class='ind'>
-          <div style="height:1px; width:{{ ind }}"></div>
+          <img src="s.gif" height="1px" width="{{ ind|default:'0' }}">
         </td>
         <td class="votelinks" valign="top">
           <div class="center">
@@ -42,7 +42,7 @@
                 | <a href="{% url 'comment_edit' comment_id=comment.id %}">edit</a>
                 | <a href="{% url 'comment_delete' comment_id=comment.id %}">delete</a>
                 {% endifequal %}
-                <a class="togg" n="{{ comment.comment_set.count|add:" 1" }}"
+                <a class="togg"
                    href="javascript:void(0)"
                    onclick="return toggle(event, {{ comment.id }})">[-]
             </a>