Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Supporter: js: fade out “Expand All” anchor when all sections expand

Browse source 
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.
This commit is contained in:
Bradley Kuhn 2020-11-26 09:21:44 -08:00
parent b5c1ca6ed1
commit 2ba369aa5c
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
www/conservancy/static/js/supporter-page.js
View file

@ -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');
});
$readmore.hide().replaceWith($linkpara);
$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'));

2
www/conservancy/templates/supporter/index.html
View file

@ -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">