Update 'show/hide recipes' (expand/collapse) functionality

Previously, it would expand the recipe if currently collapsed, and vice versa.
Now, if any recipes are currently expanded, it will collapse all; otherwise, all recipes will be expanded.

The 'expand all' functionality is necessary for full-text searching.
This commit is contained in:
kfrn 2019-12-17 22:49:06 +13:00
parent d184ed2fe9
commit 4359d6dd4a
2 changed files with 17 additions and 7 deletions

View File

@ -19,7 +19,7 @@
<nav class="sidebar well">
<h2 class="heading">Table of Contents</h2>
<a href="#about"><div class="contents-list">About this resource</div></a>
<div id="open-all" class="contents-list">Show/hide all recipes</div>
<div id="toggle-expand-collapse-all" class="contents-list">Expand/collapse all recipes</div>
<a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
<a href="#concepts"><div class="contents-list">Advanced FFmpeg concepts</div></a>
<a href="#rewrap"><div class="contents-list">Change container (rewrap)</div></a>

View File

@ -32,11 +32,21 @@ $(document).ready(function() {
}
})
// open all windows if button is clicked
$('#open-all').on("click", function(){
$('input[type=checkbox]').each(function(){
this.checked = !this.checked;
})
});
// Collapse all recipes when button is clicked
$('#toggle-expand-collapse-all').on("click", function(){
var checkboxes = $('input[type=checkbox]');
var anyRecipesOpen = $(checkboxes).is(':checked');
if (anyRecipesOpen) {
// Collapse all
$('input[type=checkbox]').each(function() {
this.checked = false;
});
} else new Promise(function(resolve, reject) {
// Expand all
$('input[type=checkbox]').each(function() {
this.checked = true;
});
});
});
});