From 782604653f77b9cb6fe70055573ae50f3b61c0eb Mon Sep 17 00:00:00 2001
From: Jeff Kayser <jeff.kayser@gmail.com>
Date: Tue, 14 Aug 2018 15:40:05 -0400
Subject: [PATCH] Add buttons to collapse child comments and expand all
 comments

---
 tildes/scss/modules/_btn.scss                    | 16 ++++++++++++++++
 .../js/behaviors/comment-collapse-all-button.js  | 11 +++++++++++
 .../js/behaviors/comment-expand-all-button.js    | 12 ++++++++++++
 tildes/tildes/templates/topic.jinja2             |  3 +++
 4 files changed, 42 insertions(+)
 create mode 100644 tildes/static/js/behaviors/comment-collapse-all-button.js
 create mode 100644 tildes/static/js/behaviors/comment-expand-all-button.js

diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss
index 0dc0641..90d901d 100644
--- a/tildes/scss/modules/_btn.scss
+++ b/tildes/scss/modules/_btn.scss
@@ -65,6 +65,22 @@
   }
 }
 
+.btn-comment-collapse-all {
+  margin-left: 0.4rem;
+  border-left-width: 1px;
+  @media (min-width: $size-md) {
+    margin-top: 0.35rem;
+  }
+}
+
+.btn-comment-expand-all {
+  margin-left: 0.2rem;
+  border-left-width: 1px;
+  @media (min-width: $size-md) {
+    margin-top: 0.35rem;
+  }
+}
+
 .btn-comment-tag {
   display: inline-flex;
   align-items: center;
diff --git a/tildes/static/js/behaviors/comment-collapse-all-button.js b/tildes/static/js/behaviors/comment-collapse-all-button.js
new file mode 100644
index 0000000..64827a5
--- /dev/null
+++ b/tildes/static/js/behaviors/comment-collapse-all-button.js
@@ -0,0 +1,11 @@
+$.onmount('[data-js-comment-collapse-all-button]', function() {
+    $(this).click(function(event) {
+        $('.comment[data-comment-depth="1"]:not(.is-comment-collapsed)').each(
+            function(idx, child) {
+                $(child).find(
+                    '[data-js-comment-collapse-button]:first').trigger('click');
+            });
+
+        $(this).blur();
+    });
+});
diff --git a/tildes/static/js/behaviors/comment-expand-all-button.js b/tildes/static/js/behaviors/comment-expand-all-button.js
new file mode 100644
index 0000000..2c5ac61
--- /dev/null
+++ b/tildes/static/js/behaviors/comment-expand-all-button.js
@@ -0,0 +1,12 @@
+$.onmount('[data-js-comment-expand-all-button]', function() {
+    $(this).click(function(event) {
+        $('.comment.is-comment-collapsed').each(
+            function(idx, child) {
+                $(child).find(
+                    '[data-js-comment-collapse-button]:first').trigger('click');
+            });
+
+
+        $(this).blur();
+    });
+});
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index 78e60a8..eeae4c8 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -153,6 +153,9 @@
       {% endtrans %}
       </h2>
 
+      <button class="btn btn-comment-collapse btn-comment-collapse-all" data-js-comment-collapse-all-button title="Collapse child comments">&minus;</button>
+      <button class="btn btn-comment-collapse btn-comment-expand-all" data-js-comment-expand-all-button title="Expand all comments">+</button>
+
       <form class="form-listing-options" method="get">
         <div class="form-group">
           <label for="comment_order">Comments sorted by</label>