Add JS enhancement to thread page: expand/collapse all CWs

brutaldon/templates/main/thread.html

@@ -15,7 +15,9 @@ mastodon.status_context(<numerical id>)
 {% endcomment %}
 
 {% block content %}
-    <h1 class="title">Thread</h1>
+    <h1 id="title" class="title">
+        Thread
+    </h1>
     {% for ancestor in context.ancestors %}
         {% include "main/toot_partial.html" with toot=ancestor %}
         <hr class="is-hidden">
@@ -29,3 +31,35 @@ mastodon.status_context(<numerical id>)
 
 
 {% endblock %}
+
+{% block page_scripts_inline %}
+    <script type="application/javascript">
+     document.addEventListener('DOMContentLoaded', function () {
+         var theButton = document.createElement('p');
+         theButton.textContent = "Expand CWs";
+         theButton.classList.toggle('button');
+         document.querySelector('#title').insertAdjacentElement('afterend', theButton);
+         var details = document.querySelectorAll('details');
+         var openState = false;
+
+         if (details != null) {
+             theButton.addEventListener('click', function() {
+                 openState = details.item(0).hasAttribute('open');
+                 details.forEach(function ($el) {
+                     if (openState)
+                         {
+                             $el.removeAttribute('open');
+                         } else
+                     {
+                         $el.setAttribute('open', '');
+                     }
+                 });
+                 openState = !openState;
+                 if (openState) { theButton.textContent = 'Collapse CWs'; }
+                 else { theButton.textContent = "Expand CWs"; };
+                 theButton.classList.toggle('is-active');
+             });
+         };
+     });
+    </script>
+{% endblock %}