openvibers/openvibe.tools Commits

Home folds say how much they hold (#191)

OP OpenVibers committed 11 days ago · dfa85659e1 · 2 files, +16 −2

Changes

ddiff --git a/apps/gateway/server/pages/site.js b/apps/gateway/server/pages/site.js
iindex dc56eae..bff1c9e 100644
---- a/apps/gateway/server/pages/site.js
++++ b/apps/gateway/server/pages/site.js
@@@ -110,6 +110,7 @@ details{border-bottom:1px solid var(--border,rgba(255,255,255,.08));padding:12px
  .fold-h>h2{margin:0;flex:1 1 auto}
  .fold-h:focus-within{outline:2px solid var(--accent,#3b82f6);outline-offset:2px}
  .fold-mark{flex:none}
++.fold-n{flex:none;font-size:.82rem;font-weight:600;color:var(--text-muted,#7386a3);font-variant-numeric:tabular-nums}
  .fold-count{margin-left:4px;font-size:13px;font-weight:650;color:var(--text-muted,#7d8aa0);font-variant-numeric:tabular-nums;vertical-align:middle}
  .fold-mark::after{content:'+';font-size:22px;font-weight:400;color:var(--text-muted,#7d8aa0)}
  .fold-toggle:checked~.fold-h .fold-mark::after{content:'\\2212'}
@@@ -120,7 +121,7 @@ details{border-bottom:1px solid var(--border,rgba(255,255,255,.08));padding:12px
  .fold-block{margin-top:40px}
  .fold-toggle{display:none}
  .fold-h{min-height:0;margin-bottom:6px;cursor:default}
--.fold-mark{display:none}
++.fold-mark,.fold-n{display:none}
  .fold-body{display:block}
  }
  .fam-all{margin:10px 0 0;font-size:14px}.fam-all a{font-weight:650;text-decoration:none}
ddiff --git a/apps/gateway/server/short.js b/apps/gateway/server/short.js
iindex 9c34c4e..d9d5248 100644
---- a/apps/gateway/server/short.js
++++ b/apps/gateway/server/short.js
@@@ -24,13 +24,26 @@ const str = (v) => (v && typeof v === 'object' && typeof v.s === 'string') ? v.s
   *
   *   foldBlock({ id, head, html, bare })
   */
++/**
++ * What a fold holds, counted, for its line ("7 questions", "latest 5", "3 items"): a folded part still says how much
++ * is behind it (the owner's rule, 2026-10-31: folds show their count). The 11-01 pass missed this checkbox fold.
++ */
++function foldMeta(body, cls = '') {
++    const s = typeof body === 'string' ? body : String((body && (body.s || body.html || body.value)) || body || '');
++    const n = (re) => (s.match(re) || []).length;
++    const shipped = /data-ov-shipped="list"[^>]*?data-limit="(\d+)"|data-limit="(\d+)"[^>]*?data-ov-shipped="list"/.exec(s);
++    const q = n(/<details[\s>]/g), li = n(/<li[\s>]/g), a = n(/<a\s/g);
++    const text = shipped ? `latest ${shipped[1] || shipped[2]}` : q > 1 ? `${q} questions` : li > 1 ? `${li} items` : a > 1 ? `${a} links` : '';
++    return text ? `<span${cls ? ` class="${cls}"` : ''}>${text}</span>` : '';
++}
++
  function foldBlock({ id, head, html, bare = false }) {
      const key = `fold-${esc(id)}`;
      // The class is `fold-block`, not `fold`: this site already has a `fold` of its own (the <details> fold in the
      // developer block), and the two must not share their rules.
      return `<div class="fold-block${bare ? ' fold-bare' : ''}" id="${key}">`
          + `<input class="fold-toggle" type="checkbox" id="${key}-open">`
--        + `<label class="fold-h" for="${key}-open">${str(head)}<span class="fold-mark" aria-hidden="true"></span></label>`
++        + `<label class="fold-h" for="${key}-open">${str(head)}${foldMeta(str(html), 'fold-n')}<span class="fold-mark" aria-hidden="true"></span></label>`
          + `<div class="fold-body">${str(html)}</div></div>`;
  }