Open on the condensed list, with a More info button for the full document

This commit is contained in:
Gmer4Lfe
2026-08-05 18:03:47 -04:00
parent aeb8c01370
commit 99486b1eaf
2 changed files with 45 additions and 17 deletions
+37 -17
View File
@@ -503,26 +503,29 @@ $runningScripts = array_unique($runningScripts);
<div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</span>
<span class="vv-sug-title">How do I use this</span>
<!-- stopPropagation: the whole header is the collapse target, so without it the
button would switch view and immediately shut the block it just changed. -->
<button class="vv-more-btn" id="vv-howto-more" type="button"
onclick="event.stopPropagation(); vvToggleHowToMore(this)">More info</button>
</div>
<!-- Rendered from pages/readme/scheduler-readme.md, not maintained here. That file is
also what the AI tab retrieves, so the panel you read and the answer the
assistant gives are the same text and cannot drift — the same argument that
makes this page parse script PURPOSE blocks instead of restating them.
Two views of one file, swapped rather than stacked. Collapsed shows the terse
one-line-per-control list this help used to be — short enough that Next Runs and
the error blocks stay on screen, which an earlier always-visible tier of 33
table rows was not. Expanding replaces it with the full document.
.vv-sug-brief is the inverse of .vv-sug-body; vvToggleSug() and
vvRestoreSugStates() drive both. -->
Two views of one file, both inside the collapsible body so the chevron still
means what it means everywhere else on this page. Open lands on the terse
one-line-per-control list — short enough that Next Runs and the error blocks
stay on screen. "More info" swaps in the full document for when you actually
need the walkthroughs. -->
<div class="vv-sug-body vv-info-body">
<div class="vv-doc">
<ul class="vv-info-cols" id="vv-howto-brief">
<?= vv_docs_brief('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars,
fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
</ul>
<div class="vv-doc" id="vv-howto-full" style="display:none">
<?= vv_docs_render('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars) ?>
</div>
</div>
<ul class="vv-info-cols vv-sug-brief vv-info-body" style="display:none">
<?= vv_docs_brief('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars,
fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
</ul>
</div>
<!-- ── Next Runs ── -->
@@ -2109,13 +2112,31 @@ function vvToggleSug(header) {
body.style.display = open ? 'none' : '';
chevron.textContent = open ? '▸' : '▾';
const block = header.closest('[data-save-key]');
// Optional collapsed-state summary: shown exactly when the body is hidden. Lets a block put
// something terse on screen while shut instead of nothing, without a second toggle to manage.
const brief = block && block.querySelector('.vv-sug-brief');
if (brief) brief.style.display = open ? '' : 'none';
if (block) localStorage.setItem('vv-sug-' + block.dataset.saveKey, open ? '0' : '1');
}
// Condensed ↔ full for the help block. Both views live inside the collapsible body, so this is
// only about which one is on screen — the chevron still collapses the block outright, the same
// as every other block on the page. Persisted, because which depth you want is a preference and
// not a per-visit decision.
function vvToggleHowToMore(btn) {
const brief = document.getElementById('vv-howto-brief');
const full = document.getElementById('vv-howto-full');
if (!brief || !full) return;
const showFull = full.style.display === 'none';
full.style.display = showFull ? '' : 'none';
brief.style.display = showFull ? 'none' : '';
btn.textContent = showFull ? 'Less' : 'More info';
btn.classList.toggle('vv-more-on', showFull);
localStorage.setItem('vv-howto-more', showFull ? '1' : '0');
}
function vvRestoreHowToMore() {
if (localStorage.getItem('vv-howto-more') !== '1') return;
const btn = document.getElementById('vv-howto-more');
if (btn) vvToggleHowToMore(btn);
}
function vvRestoreSugStates() {
document.querySelectorAll('[data-save-key]').forEach(block => {
const saved = localStorage.getItem('vv-sug-' + block.dataset.saveKey);
@@ -2126,9 +2147,8 @@ function vvRestoreSugStates() {
const open = saved === '1';
body.style.display = open ? '' : 'none';
if (chevron) chevron.textContent = open ? '▾' : '▸';
const brief = block.querySelector('.vv-sug-brief');
if (brief) brief.style.display = open ? 'none' : '';
});
vvRestoreHowToMore();
}
// Suggested cron click in script browser tree: apply to the matching card cron input and save