Changeset - 6b649e2f48e0
[Not reviewed]
0 3 0
Bradley M. Kuhn - 3 years ago 2020-11-26 03:27:53
bkuhn@sfconservancy.org
Supporter page: Support a “Expand All” link for collapsible sections

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.
3 files changed with 23 insertions and 2 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/forms.css
Show inline comments
...
 
@@ -103,12 +103,17 @@ img.appeal-match {
 
    border: 1px solid #fff;
 
    width: 10%;
 
    margin-top: .25em;
 
    margin-bottom: .25em;
 
    margin-right: 1em;
 
    background: #eee;
 
}
 
p.appeal-match-text  {
 
    width: 100%;
 
    border: 1px solid #fff;
 
    background: #eee;
 
}
 
a.expander {
 
    font-size: 75%;
 
    font-style: italic;
 
    text-align: center;
 
}
www/conservancy/static/js/supporter-page.js
Show inline comments
 
/* 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
 
*/
 

	
 
var NEW_AMOUNT_EVENT = 'conservancy:newamount';
 

	
 
var flipClass = function(elem, byeClass, hiClass) {
 
    var classList = elem.classList;
 
    classList.remove(byeClass);
 
    classList.add(hiClass);
 
}
...
 
@@ -119,13 +119,26 @@ $(document).ready(function() {
 
            // Do nothing, leave it alone
 
        } else {
 
            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) {
 
                $linkpara.replaceWith($readmore);
 
                $readmore.fadeIn('fast');
 
            });
 
            $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(); }); });
 
    });
 
});
www/conservancy/templates/supporter/index.html
Show inline comments
...
 
@@ -68,48 +68,51 @@
 

	
 
  {% include "supporter/form_partial.html" with form_id="annual" min_amt=120 article="an" only %}
 

	
 
  {% include "supporter/form_partial.html" with form_id="monthly" min_amt=10 only %}
 

	
 
  <a name="renew" class="hidden"></a>
 
  {% include "supporter/form_partial.html" with form_id="renewal" min_amt=120 verb="renew" article="an" supptype="annual" only %}
 
{% endif %}
 

	
 
<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">
 
  <p>Tony Sebro, delivering the keynote address at Copyleft Conf 2020. Photo copyright &copy; by Remy DeCausemaker, licensed <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a></p>
 
</div>
 

	
 
<p>2020 has been a difficult year. We&rsquo;ve all scrambled to keep ourselves
 
and our loved-ones safe and healthy, coped with the isolation connected
 
to lockdowns and quarantines, and dealt with the
 
disconnection from our support networks — including friends, family
 
and even childcare. We worried about racial equality and hope the fight for
 
social justice will result in basic rights that everyone deserves.</p>
 
<p>Throughout all of this, Conservancy remained focused on its mission and on
 
the free and open source software community. While cheering those working to help prevent the
 
spread of COVID-19 and those fighting for racial equality, we know our
 
expertise, skills, and mission can only tangentially improve those situations. While
 
<a href="/blog/2020/apr/21/workduringcovid/">contributing
 
where we can</a>, we remain focused on the long-term nature of
 
software freedom. We keep working to grow and support FOSS
 
communities to plan for ethical technology down the road, so that software
 
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
 
and in-person meetings could not happen. We gathered digitally every
 
Thursday with all who wanted to join since early March to discuss
 
important issues or just reach out to other people who care about software freedom. The topics of these chats varied widely from
 
helping family and friends to use FOSS tools to discussing impactful
 
presentations concerting copyleft to how to dismantle systemic racism in free software to
 
important software freedom policy issues like standing up to fight the
 
DMCA.</p>
 
</div>
 

	
...
 
@@ -190,14 +193,14 @@ for how to keep FOSS engaged without these essential in-person events.</p>
 
<h3 id="HelpUs">Help Us Continue our Mission</h3>
 
<p>We know this year brought unforeseen financial challenges.  Some of you have
 
faced unemployment, and many others are underemployed right now due to the
 
pandemic.  As you think about where to route your limited charitable
 
dollars this year, we ask that you think about how far your donation goes with Conservancy.  We&rsquo;ve remained a small, agile organization (some
 
even have called us scrappy) precisely because we have the most experienced
 
non-profit management team in FOSS.  We couldn&rsquo;t have predicted the
 
pandemic, but we did plan for the worst.  We&rsquo;re frugal, careful, and we plan ahead, so you can know that every
 
dollar you give to Conservancy is used to support critical work.  While companies sell
 
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 %}
0 comments (0 inline, 0 general)