From 152d24ed99e7b75be8f338085252ca3a6498be84 Mon Sep 17 00:00:00 2001
From: "Bradley M. Kuhn" <bkuhn@sfconservancy.org>
Date: Thu, 26 Nov 2020 09:21:44 -0800
Subject: [PATCH] =?UTF-8?q?Supporter:=20js:=20fade=20out=20=E2=80=9CExpand?=
 =?UTF-8?q?=20All=E2=80=9D=20anchor=20when=20all=20sections=20expand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The expandable sections can be expanded either one-by-one, or with
the “Expand All” button.  Add a counter for each expandable
section (which requires their div's to have 'id' attributes, lest
they be counted in the '__global' section of expandables).

The __global counter will work as advertised if you have no 'id'
attributes on any of your 'expandable-section'-classed div's, but if
you mix a __global without an id with ones that *do* have an id, it's
likely this particular code won't work for that.

Finally, add some documentation which is probably over-documenting
for someone who knows Javascript and jQuery well, but it took me a
while to figure out this code so I felt throwing some notes in there
might be helpful.
---
 www/conservancy/static/js/supporter-page.js   | 27 ++++++++++++++++++-
 .../templates/supporter/index.html            |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/www/conservancy/static/js/supporter-page.js b/www/conservancy/static/js/supporter-page.js
index 5e5f4e18..49da881a 100644
--- a/www/conservancy/static/js/supporter-page.js
+++ b/www/conservancy/static/js/supporter-page.js
@@ -110,24 +110,49 @@ $(document).ready(function() {
     if (selectSupportTypeFromHash().length === 0) {
         supportTypeSelector("#annual").click();
     }
-
     var want_id = window.location.hash.substr(1) || "do not match any id";
+    var $expandable_counts = [];
+    // First, build a count of expandable div sections
+    $('div.expandable-section').each(function(index, section) {
+        var $ourid = $(section).attr('id');
+        if ($ourid == undefined) { $ourid = "__global"; }
+        $expandable_counts[$ourid] = 0;
+    });
     $('div[data-read-more]').each(function(index, readmore) {
         var $readmore = $(readmore)
         var $header = $readmore.prev('h3');
         if ($header.length && $header[0].id === want_id) {
             // Do nothing, leave it alone
         } else {
+            var $ourid = $readmore.closest(".expandable-section" ).attr('id');
+            if ($ourid == undefined) { $ourid = "__global"; }
+
+            // Set up the link for this specific section using the text from
+            // the data-read-more atrribute on the div specific to this section
             var $linkpara = $('<p><a class="read-more"></a></p>');
             var $readlink = $linkpara.children('a');
             $readlink.append($readmore.data('read-more'));
             $readlink.on('click', function(event) {
+                // When clicked, we'll restore the actual text and fade it in
+                // quickly, and also see if there are any remaining
+                // expandable sections left in this particular expandable
+                // section.  If none are left, make the "Expand all" button
+                // (which lives in an 'a' anchor of the class 'expander') disappear.
                 $linkpara.replaceWith($readmore);
                 $readmore.fadeIn('fast');
+                $expandable_counts[$ourid]--;
+                if ($expandable_counts[$ourid] <= 0) {
+                  $readmore.closest(".expandable-section" )
+                  .children('a.expander').each(function(index, element){
+                       $(element).fadeOut('slow');
+                  })
+                }
             });
             $readmore.hide().replaceWith($linkpara);
+            $expandable_counts[$ourid]++;
         }
     });
+    // Final two each's enable the "Expand All" link.
     $('a[data-expand-link-text]').each(function(index, element) {
         var $element = $(element);
         $element.append($element.data('expand-link-text'));
diff --git a/www/conservancy/templates/supporter/index.html b/www/conservancy/templates/supporter/index.html
index e3443c46..bd70a602 100644
--- a/www/conservancy/templates/supporter/index.html
+++ b/www/conservancy/templates/supporter/index.html
@@ -77,7 +77,7 @@
 <span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>
 
 <hr style="clear: both;"/>
-<div class="expandable-section">
+<div class="expandable-section" id="2020-summary">
 
 <div class="picture-small right">
   <img src="/img/2020_Sebro-Tony_CopyleftConf.jpg" alt="Tony Sebro speaks on stage in front of a slide comparing 1800&rsquo;s Eschatology and Golden Era Hip Hop">