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

Replace complex expanding JS with native <details> elements

Browse source 
Have retained the "expand all" behaviour - just with less code.
This commit is contained in:
Ben Sturmfels 2024-05-09 13:53:50 +10:00
parent fb690c1676
commit 8a9f796eb1
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0
2 changed files with 46 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
conservancy/static/js/supporter-page.js
View file

@ -30,21 +30,13 @@ var supportTypeSelector = function(supportTypeHash) {
return $(supportTypeHash + "Selector"); return $(supportTypeHash + "Selector");
}; };
var $window = $(window); /* We've sometimes published links that say #renew instead of #renewal.
Rewrite that to work as intended. */
if (window.location.hash === "#renew") {
window.location.hash = "#renewal";
}
$window.load(function() { function init_sustainer_forms () {
/* We've sometimes published links that say #renew instead of #renewal.
Rewrite that to work as intended. */
if (window.location.hash === "#renew") {
window.location.hash = "#renewal";
}
var $selectorLink = supportTypeSelector(window.location.hash);
if ($selectorLink.length > 0) {
$window.scrollTop($selectorLink.offset().top);
}
});
$(document).ready(function() {
// Forms start in "invalid" form, with the errors shown, so that // Forms start in "invalid" form, with the errors shown, so that
// non-Javascript users see the errors by default and know what they must // non-Javascript users see the errors by default and know what they must
// enter. Now we hide those for JavaScript users: // enter. Now we hide those for JavaScript users:
@ -108,63 +100,34 @@ $(document).ready(function() {
var selectSupportTypeFromHash = function() { var selectSupportTypeFromHash = function() {
return supportTypeSelector(window.location.hash).click(); return supportTypeSelector(window.location.hash).click();
}; };
$window.bind("hashchange", selectSupportTypeFromHash); $(window).bind("hashchange", selectSupportTypeFromHash);
if (selectSupportTypeFromHash().length === 0) { if (selectSupportTypeFromHash().length === 0) {
supportTypeSelector("#annual").click(); 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 function init_expanders () {
// the data-read-more atrribute on the div specific to this section // Conservancy does a lot each year, so we initially hide the "Year in
var $linkpara = $('<p><a class="read-more"></a></p>'); // Review" text insideexpandable <details> sections to avoid a wall of
var $readlink = $linkpara.children('a'); // text. If the URL fragment matches one of our expandable sections, we
$readlink.append($readmore.data('read-more')); // automatically expand it - that's a direct link.
$readlink.on('click', function(event) { let details = qs('details' + window.location.hash) // eg. #WritingAndSpeaking
// When clicked, we'll restore the actual text and fade it in if (window.location.hash && details) {
// quickly, and also see if there are any remaining details.open = true;
// expandable sections left in this particular expandable details.scrollIntoView();
// section. If none are left, make the "Expand all" button }
// (which lives in an 'a' anchor of the class 'expander') disappear. // Exable convenient "expand all" link to expand/hide all sections at once.
$linkpara.replaceWith($readmore); qsa('.expander').forEach(function(expander) {
$readmore.fadeIn('fast'); expander.innerHTML = expander.dataset['expandLinkText'];
$expandable_counts[$ourid]--; expander.addEventListener('click', function() {
if ($expandable_counts[$ourid] <= 0) { let details_elements = qsa('.expandable-section details');
$readmore.closest(".expandable-section" ) let some_closed = Array.from(details_elements).some(el => !el.open);
.children('a.expander').each(function(index, element){ details_elements.forEach(function(el) {
$(element).fadeOut('slow'); el.open = some_closed;
})
}
}); });
$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'));
});
$('.expandable-section').each(function(index) {
var $expandlink = $(this).find('a.expander');
var $ourexpandablesection = $(this);
$expandlink.on('click', function(event) {
$expandlink.fadeOut('slow');
$ourexpandablesection.find('.read-more').each(function(index) { $(this).click(); });
}); });
}); });
}); }
init_sustainer_forms();
init_expanders();

46
conservancy/templates/supporter/index.html
View file

@ -80,10 +80,10 @@
<li>Hiring team members to get projects <a href="https://reproducible-builds.org/news/">like Reproducible Builds</a> to continue pushing the forefront of software reproducibility</li> <li>Hiring team members to get projects <a href="https://reproducible-builds.org/news/">like Reproducible Builds</a> to continue pushing the forefront of software reproducibility</li>
</ul> </ul>
<a class="expander" data-expand-link-text="(Expand All Sections)"></a> <p><a class="expander" data-expand-link-text="(Expand All Sections)"></a></p>
<h3 id="YearInReview">Our Year in Review</h3> <details id="YearInReview">
<div data-read-more="Summary of our year&hellip;"> <summary>Our Year in Review</summary>
<p>This has been a big year for Software Freedom Conservancy in our tireless <p>This has been a big year for Software Freedom Conservancy in our tireless
efforts to promote ethical technology, increase diversity and inclusion in efforts to promote ethical technology, increase diversity and inclusion in
@ -97,7 +97,7 @@ and while we finalize details for next year, we hope to see you there to join
us in community!</p> us in community!</p>
<div class="picture-small right"> <img src="https://nextcloud.sfconservancy.org/apps/files_sharing/publicpreview/pnZYsi2CkjscLwc?file=/&fileId=24825&x=1366&y=768&a=true&etag=f4341a40f90786b0356201c21278ee23" alt="SFC lawyers posing outside at the courthouse“ " /></a> <div class="picture-small right"> <img src="https://nextcloud.sfconservancy.org/apps/files_sharing/publicpreview/pnZYsi2CkjscLwc?file=/&fileId=24825&x=1366&y=768&a=true&etag=f4341a40f90786b0356201c21278ee23" alt="SFC lawyers posing outside at the courthouse“ " /></a>
<p>SFC lawyers after recent Vizio case- CC BY-SA 4.0</div> <p>SFC lawyers after recent Vizio case- CC BY-SA 4.0</p></div>
<p>Our <a href="https://vizio.sfconservancy.org">lawsuit against Vizio</a>— the first <p>Our <a href="https://vizio.sfconservancy.org">lawsuit against Vizio</a>— the first
lawsuit of its kind to seek <b>third party beneficiary rights to the lawsuit of its kind to seek <b>third party beneficiary rights to the
@ -150,12 +150,10 @@ account will be approved.</p>
<div class="picture-small right"> <div class="picture-small right">
<a href="https://sfconservancy.org/videos/sfc-introduction_1080p.mp4"><img src="https://sfconservancy.org/videos/sfc-introduction-video_poster.jpg" alt="Thumbnail of video showing a tree and Software Freedom" /></a> <a href="https://sfconservancy.org/videos/sfc-introduction_1080p.mp4"><img src="https://sfconservancy.org/videos/sfc-introduction-video_poster.jpg" alt="Thumbnail of video showing a tree and Software Freedom" /></a>
</div> </div>
</div> </details>
<h3 id="NewStaff">New staff!</h3>
<div data-read-more="Click more for on our new staff&hellip;">
<details id="NewStaff">
<summary>New staff!</summary>
<p>SFC hired two additional employees this year! General Counsel Rick Sanders <p>SFC hired two additional employees this year! General Counsel Rick Sanders
joins the team to help with our continued legal needs. Rick has over 20 years joins the team to help with our continued legal needs. Rick has over 20 years
experience as a intellectual-property litigator. His expertise has been experience as a intellectual-property litigator. His expertise has been
@ -166,17 +164,15 @@ Linux and free software, Paul's belief in the power of free software to help
people engage with technology in non-exploitative ways fits in perfectly to people engage with technology in non-exploitative ways fits in perfectly to
support our growing organizational needs and mission. Helping make sure we support our growing organizational needs and mission. Helping make sure we
can provide solid FOSS replacements to proprietary technologies for all of us.</p> can provide solid FOSS replacements to proprietary technologies for all of us.</p>
</details>
</div> <details id="WritingAndSpeaking">
<summary>Writing and Speaking</summary>
<h3 id="WritingAndSpeaking">Writing and Speaking</h3>
<div data-read-more="Find out about our writing and speaking engagements&hellip;">
<p>Our staff has been presenting and speaking about software freedom all year. <p>Our staff has been presenting and speaking about software freedom all year.
Our Executive Director Karen Sandler received an honorary doctorate from Our Executive Director Karen Sandler received an honorary doctorate from
Katholieke Universiteit Leuven for her incredible work in FOSS leadership, and Katholieke Universiteit Leuven for her incredible work in FOSS leadership, and
her advocacy and pursuit of software freedom and rights for all. her advocacy and pursuit of software freedom and rights for all.
In November she spoke at <a href="https://www.sfscon.it/talks/the-history-of-and-path-forward-for-copyleft-and-the-gpl/">SFSCON about "The History of, and Path forward for, Copyleft and the GPL"</a>.</p> In November she spoke at <a href="https://www.sfscon.it/talks/the-history-of-and-path-forward-for-copyleft-and-the-gpl/">SFSCON about "The History of, and Path forward for, Copyleft and the GPL"</a>.</p>
<div class="picture-small right"> <div class="picture-small right">
<video class="small-right" controls="" poster="/videos/2023-02-02_Sandler-Karen_KU-Leuven_Honorary-Doctorate_still.png" id="doctorate_vid"> <video class="small-right" controls="" poster="/videos/2023-02-02_Sandler-Karen_KU-Leuven_Honorary-Doctorate_still.png" id="doctorate_vid">
@ -198,7 +194,6 @@ community discussion about the RHEL policy change</a>.
As a panel member, he was the only representative for the FOSS community on As a panel member, he was the only representative for the FOSS community on
the FTC's discussion <a href="https://sfconservancy.org/news/2023/oct/04/ftc-ai-panel/">“Creative Economy and Generative AI“</a></p> the FTC's discussion <a href="https://sfconservancy.org/news/2023/oct/04/ftc-ai-panel/">“Creative Economy and Generative AI“</a></p>
<p>Our Director of Compliance, Denver Gingerich, spoke at SFSCON talking about what it's really like to <a href="https://www.sfscon.it/talks/how-do-you-really-do-gpl-enforcement/">enforce the GPL</a>. His talk at FOSSY titled <a href="https://2023.fossy.us/schedule/presentation/84/">You don't carry a phone?! Improving societal acceptance of abnormal people</a> <p>Our Director of Compliance, Denver Gingerich, spoke at SFSCON talking about what it's really like to <a href="https://www.sfscon.it/talks/how-do-you-really-do-gpl-enforcement/">enforce the GPL</a>. His talk at FOSSY titled <a href="https://2023.fossy.us/schedule/presentation/84/">You don't carry a phone?! Improving societal acceptance of abnormal people</a>
was one of the most talked about from our own conference. was one of the most talked about from our own conference.
Pono represented SFC at <a href="https://www.socallinuxexpo.org/scale/19x">SCaLE Pono represented SFC at <a href="https://www.socallinuxexpo.org/scale/19x">SCaLE
@ -208,13 +203,11 @@ SFC staffers also participate in key meetings to represent community interests
in a variety of FOSS related discussions concerning security, governmental use in a variety of FOSS related discussions concerning security, governmental use
of FOSS and in critical infrastructure discussions and also presented in of FOSS and in critical infrastructure discussions and also presented in
classroom to educate students about software freedom.</p> classroom to educate students about software freedom.</p>
</details>
</div> <details id="Highlights">
<summary>Highlights from some of our projects</summary>
<h3 id="Highlights">Highlights from some of our projects</h3>
<div data-read-more="Read more about our projects&hellip;">
<p>We've raised, administered and/or facilitated $1.8 million to improve <p>We've raised, administered and/or facilitated $1.8 million to improve
software freedom directly! This includes contractors, interns and students, software freedom directly! This includes contractors, interns and students,
administrators, and grants for creation, distribution and maintenance of free administrators, and grants for creation, distribution and maintenance of free
@ -273,12 +266,9 @@ code related and process related talks. The <a href="https://reproducible-builds
annual summit was hosted in Hamburg featuring incredible annual summit was hosted in Hamburg featuring incredible
technical talks, project planning and continues to build the momentum and technical talks, project planning and continues to build the momentum and
reach for reproducibility. </p> reach for reproducibility. </p>
</details>
<p><a class="expander" data-expand-link-text="(Expand All Sections)"></a></p>
</div>
<h3 id="HelpUs">Help us Continue this Work</h3> <h3 id="HelpUs">Help us Continue this Work</h3>
<div style="overflow: auto"> <div style="overflow: auto">
@ -298,11 +288,7 @@ reach for reproducibility. </p>
Software Freedom Conservancy continues to be the beacon of change for Software Freedom Conservancy continues to be the beacon of change for
software freedom that the world needs. <a href="/donate/">Please consider software freedom that the world needs. <a href="/donate/">Please consider
donating now!</a></p> donating now!</a></p>
</div> </div>
<a class="expander" data-expand-link-text="(Expand All Sections)"></a>
</div> </div>
<div class="donate-sidebar"> <div class="donate-sidebar">