From 141a2681ef19207ea3da6012d82eb7b88d0f5ec3 Mon Sep 17 00:00:00 2001
From: "Bradley M. Kuhn" <bkuhn@sfconservancy.org>
Date: Wed, 25 Nov 2020 19:15:11 -0800
Subject: [PATCH] =?UTF-8?q?Supporter=20page:=20Support=20a=20=E2=80=9CExpa?=
 =?UTF-8?q?nd=20All=E2=80=9D=20link=20for=20collapsible=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I wrap the entire section that has material that can be expanded in a
div with class `expandable-section`.  Once doing so, if you provide an
anchor with the class of `expander`, that anchor will be created with
text in the `data-expand-link-text` attribute.

I've also added some CSS to make the link look a certain way, for
good measure.
---
 www/conservancy/static/css/forms.css           |  5 +++++
 www/conservancy/static/js/supporter-page.js    | 15 ++++++++++++++-
 www/conservancy/templates/supporter/index.html |  5 ++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/www/conservancy/static/css/forms.css b/www/conservancy/static/css/forms.css
index f4c89bba..6c4837e1 100644
--- a/www/conservancy/static/css/forms.css
+++ b/www/conservancy/static/css/forms.css
@@ -112,3 +112,8 @@ p.appeal-match-text  {
     border: 1px solid #fff;
     background: #eee;
 }
+a.expander {
+    font-size: 75%;
+    font-style: italic;
+    text-align: center;
+}
diff --git a/www/conservancy/static/js/supporter-page.js b/www/conservancy/static/js/supporter-page.js
index 2f15550a..543a62f7 100644
--- a/www/conservancy/static/js/supporter-page.js
+++ b/www/conservancy/static/js/supporter-page.js
@@ -1,5 +1,5 @@
 /* Copyright (C) 2012-2013 Denver Gingerich, 
-** Copyright (C) 2013-2014 Bradley M. Kuhn,
+** Copyright (C) 2013-2014, 2020 Bradley M. Kuhn,
 ** Copyright (C) 2016, 2020 Brett Smith.
 ** License: GPLv3-or-later
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
@@ -128,4 +128,17 @@ $(document).ready(function() {
             $readmore.hide().replaceWith($linkpara);
         }
     });
+    $('a[data-expand-link-text]').each(function(index, element) {
+        var $element = $(element);
+        $element.append($element.data('expand-link-text'));
+        $element.removeAttr('data-expand-link-text');
+    });
+    $('.expandable-section').each(function(index) {
+        var $expandlink = $(this).children('.expander');
+        var $ourexpandablesection = $(this);
+        $expandlink.addClass('active').trigger('click');
+        $expandlink.on('click', function(event) {
+            $expandlink.fadeOut('slow');
+            $ourexpandablesection.find('.read-more').each(function(index) { $(this).click(); }); });
+    });
 });
diff --git a/www/conservancy/templates/supporter/index.html b/www/conservancy/templates/supporter/index.html
index 8e02d823..eb74437e 100644
--- a/www/conservancy/templates/supporter/index.html
+++ b/www/conservancy/templates/supporter/index.html
@@ -77,6 +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="picture right" style="clear: 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">
@@ -101,6 +102,8 @@ freedom can be in the service of human freedom.</p>
 <p>We&rsquo;re proud of how much we&rsquo;ve been able to accomplish in the last year,
 even in the face of so many obstacles.</p>
 
+<a class="expander" data-expand-link-text="(Expand All Sections)"/>
+
 <h3 id="StayingConnected">Staying Connected</h3>
 <div data-read-more="Read more about staying connected&hellip;">
 <p>We helped folks stay connected, even when travel
@@ -199,5 +202,5 @@ dollar you give to Conservancy is used to support critical work.  While companie
 you products this end of year season, we offer you a chance to donate to something much bigger. By becoming a Conservancy Supporter, you can put
 your money to work fighting for the freedom and rights of all software
 users.</p>
-
+</div>
 {% endblock %}