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");
};
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() {
/* 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() {
function init_sustainer_forms () {
// Forms start in "invalid" form, with the errors shown, so that
// non-Javascript users see the errors by default and know what they must
// enter. Now we hide those for JavaScript users:
@ -108,63 +100,34 @@ $(document).ready(function() {
var selectSupportTypeFromHash = function() {
return supportTypeSelector(window.location.hash).click();
};
$window.bind("hashchange", selectSupportTypeFromHash);
$(window).bind("hashchange", selectSupportTypeFromHash);
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');
})
}
function init_expanders () {
// Conservancy does a lot each year, so we initially hide the "Year in
// Review" text insideexpandable <details> sections to avoid a wall of
// text. If the URL fragment matches one of our expandable sections, we
// automatically expand it - that's a direct link.
let details = qs('details' + window.location.hash) // eg. #WritingAndSpeaking
if (window.location.hash && details) {
details.open = true;
details.scrollIntoView();
}
// Exable convenient "expand all" link to expand/hide all sections at once.
qsa('.expander').forEach(function(expander) {
expander.innerHTML = expander.dataset['expandLinkText'];
expander.addEventListener('click', function() {
let details_elements = qsa('.expandable-section details');
let some_closed = Array.from(details_elements).some(el => !el.open);
details_elements.forEach(function(el) {
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>
</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>
<div data-read-more="Summary of our year&hellip;">
<details id="YearInReview">
<summary>Our Year in Review</summary>
<p>This has been a big year for Software Freedom Conservancy in our tireless
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>
<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
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">
<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>
<h3 id="NewStaff">New staff!</h3>
<div data-read-more="Click more for on our new staff&hellip;">
</details>
<details id="NewStaff">
<summary>New staff!</summary>
<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
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
support our growing organizational needs and mission. Helping make sure we
can provide solid FOSS replacements to proprietary technologies for all of us.</p>
</details>
</div>
<h3 id="WritingAndSpeaking">Writing and Speaking</h3>
<div data-read-more="Find out about our writing and speaking engagements&hellip;">
<details id="WritingAndSpeaking">
<summary>Writing and Speaking</summary>
<p>Our staff has been presenting and speaking about software freedom all year.
Our Executive Director Karen Sandler received an honorary doctorate from
Katholieke Universiteit Leuven for her incredible work in FOSS leadership, and
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">
<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
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>
was one of the most talked about from our own conference.
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
of FOSS and in critical infrastructure discussions and also presented in
classroom to educate students about software freedom.</p>
</details>
</div>
<h3 id="Highlights">Highlights from some of our projects</h3>
<div data-read-more="Read more about our projects&hellip;">
<details id="Highlights">
<summary>Highlights from some of our projects</summary>
<p>We've raised, administered and/or facilitated $1.8 million to improve
software freedom directly! This includes contractors, interns and students,
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
technical talks, project planning and continues to build the momentum and
reach for reproducibility. </p>
</details>
</div>
<p><a class="expander" data-expand-link-text="(Expand All Sections)"></a></p>
<h3 id="HelpUs">Help us Continue this Work</h3>
<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 that the world needs. <a href="/donate/">Please consider
donating now!</a></p>
</div>
<a class="expander" data-expand-link-text="(Expand All Sections)"></a>
</div>
<div class="donate-sidebar">