From 4af861d44a9ecb4e8fcdf798e9f97eac495aac98 Mon Sep 17 00:00:00 2001
From: Wes Cook <im@wescook.ca>
Date: Fri, 28 Jun 2019 06:09:37 -0700
Subject: [PATCH] Add button to collapse previously-read comments

The button will only appear when:

* User has the "mark new comments" setting enabled
* User has the "collapse old comments automatically" setting disabled
* The current topic has some new comments
---
 .../behaviors/comment-collapse-read-button.js | 60 +++++++++++++++++++
 tildes/tildes/templates/topic.jinja2          |  9 +++
 2 files changed, 69 insertions(+)
 create mode 100644 tildes/static/js/behaviors/comment-collapse-read-button.js

diff --git a/tildes/static/js/behaviors/comment-collapse-read-button.js b/tildes/static/js/behaviors/comment-collapse-read-button.js
new file mode 100644
index 0000000..f278595
--- /dev/null
+++ b/tildes/static/js/behaviors/comment-collapse-read-button.js
@@ -0,0 +1,60 @@
+// Copyright (c) 2019 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+$.onmount("[data-js-comment-collapse-read-button]", function() {
+    var commentExpand = function(idx, elem) {
+        $(elem).removeClass("is-comment-collapsed");
+        $(elem).removeClass("is-comment-collapsed-individual");
+    };
+
+    var commentCollapse = function(idx, elem) {
+        $(elem).removeClass("is-comment-collapsed-individual");
+        $(elem).addClass("is-comment-collapsed");
+    };
+
+    var commentCollapseIndividual = function(idx, elem) {
+        $(elem).removeClass("is-comment-collapsed");
+        $(elem).addClass("is-comment-collapsed-individual");
+    };
+
+    $(this).click(function() {
+        // expand all comments to start with consistent state
+        $(".is-comment-collapsed, .is-comment-collapsed-individual").each(
+            commentExpand
+        );
+
+        // fully collapse the "shallowest" comment in a branch with no new descendants
+        $(".comment").each(function(idx, elem) {
+            if (
+                $(elem).parents(".is-comment-collapsed").length === 0 &&
+                $(elem).find(".is-comment-new").length === 0
+            )
+                $(elem).each(commentCollapse);
+        });
+
+        // expand new comments
+        $(".is-comment-new").each(function(idx, elem) {
+            $(elem)
+                // expand new comments just in case they were collapsed above
+                .each(commentExpand)
+                // do the same for their immediate parents
+                .parent()
+                .closest(".comment")
+                .each(commentExpand)
+                // individual-collapse all of their ancestors unless they're an
+                // immediate parent of a new comment (in the case one new comment
+                // responds to another)
+                .parents(".comment")
+                .each(function(idx2, ancestor) {
+                    if (
+                        $(ancestor).find(
+                            "> .comment-tree > .comment-tree-item > .is-comment-new"
+                        ).length === 0
+                    )
+                        commentCollapseIndividual(idx2, ancestor);
+                });
+        });
+
+        $(this).blur();
+    });
+});
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index 42c0a4c..19ec77e 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -171,6 +171,15 @@
 
       <div class="btn-group">
         <button class="btn btn-sm btn-light" data-js-comment-collapse-all-button>Collapse replies</button>
+
+        {# Display the "Collapse read" button if the user is tracking comment visits
+           but not automatically collapsing old comments, and there are new comments #}
+        {% if request.user.track_comment_visits
+             and not request.user.collapse_old_comments
+             and topic.comments_since_last_visit > 0 %}
+          <button class="btn btn-sm btn-light" data-js-comment-collapse-read-button>Collapse read</button>
+        {% endif %}
+
         <button class="btn btn-sm btn-light" data-js-comment-expand-all-button>Expand all</button>
       </div>