template-toggle: add admin 'View all — compare' overlay (all 6 templates live side-by-side)

3e325c5faf66dbdd4838d2001068107338624c9b · 2026-08-07 13:53:47 -0700 · Steve Abrams
Files touched

M public/template-toggle.js
Diff

commit 3e325c5faf66dbdd4838d2001068107338624c9b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Aug 7 13:53:47 2026 -0700

    template-toggle: add admin 'View all — compare' overlay (all 6 templates live side-by-side)
---
 public/template-toggle.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/public/template-toggle.js b/public/template-toggle.js
index 361bca04..ec6fcd70 100644
--- a/public/template-toggle.js
+++ b/public/template-toggle.js
@@ -53,11 +53,57 @@
       '#rentv-tt .menu a:hover{background:#141a21;border-left-color:#c8102e;color:#fff}',
       '#rentv-tt .menu a.on{background:#141a21;border-left-color:#c8102e;color:#fff}',
       '#rentv-tt .menu a .star{color:#c6a24a}',
-      '#rentv-tt .menu .ft{padding:8px 13px;border-top:1px solid #1c232b;color:#6b747d;font:600 10px Inter}'
+      '#rentv-tt .menu a.va{border-bottom:1px solid #1c232b;color:#fff;font-weight:800}',
+      '#rentv-tt .menu a.va .ic{color:#c8102e}',
+      '#rentv-tt .menu .ft{padding:8px 13px;border-top:1px solid #1c232b;color:#6b747d;font:600 10px Inter}',
+      /* ---- View-all overlay ---- */
+      '#rentv-va{position:fixed;inset:0;z-index:2147483500;background:#05070a;display:none;flex-direction:column}',
+      '#rentv-va.open{display:flex}',
+      '#rentv-va .vh{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid #1c232b;background:#0b0e12}',
+      '#rentv-va .vh .t{color:#e7ecf1;font:800 14px Inter,sans-serif;letter-spacing:.02em}',
+      '#rentv-va .vh .t small{color:#7b848d;font-weight:600;margin-left:8px}',
+      '#rentv-va .vh .x{color:#dbe1e7;background:#141a21;border:1px solid #2a323b;border-radius:9px;padding:7px 13px;cursor:pointer;font:800 12px Inter}',
+      '#rentv-va .vh .x:hover{border-color:#c8102e;color:#fff}',
+      '#rentv-va .vg{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px}',
+      '@media(max-width:1100px){#rentv-va .vg{grid-template-columns:repeat(2,1fr)}}',
+      '@media(max-width:680px){#rentv-va .vg{grid-template-columns:1fr}}',
+      '#rentv-va .card{background:#0b0e12;border:1px solid #1c232b;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}',
+      '#rentv-va .card.chosen{border-color:#c6a24a}',
+      '#rentv-va .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid #1c232b}',
+      '#rentv-va .cap .nm{color:#fff;font:800 12px Inter}',
+      '#rentv-va .cap .nm .star{color:#c6a24a;margin-left:6px;font-size:11px}',
+      '#rentv-va .cap .go{color:#c8102e;text-decoration:none;font:800 11px Inter;border:1px solid #c8102e;border-radius:7px;padding:4px 9px}',
+      '#rentv-va .cap .go:hover{background:#c8102e;color:#fff}',
+      '#rentv-va .fw{position:relative;width:100%;height:300px;overflow:hidden;background:#11161c}',
+      '#rentv-va .fw iframe{position:absolute;top:0;left:0;width:1400px;height:1050px;border:0;transform:scale(.30);transform-origin:top left;pointer-events:none}',
+      '#rentv-va .fw .clk{position:absolute;inset:0;cursor:pointer}'
     ].join('');
     document.head.appendChild(s);
   }
 
+  function buildViewAll(chosen) {
+    if (document.getElementById('rentv-va')) return document.getElementById('rentv-va');
+    var va = document.createElement('div'); va.id = 'rentv-va';
+    va.innerHTML =
+      '<div class="vh"><div class="t">RENTV 2026 — View all templates' +
+      '<small>Original + A–E · live previews · click any to open full</small></div>' +
+      '<button class="x" type="button">Close ✕</button></div>' +
+      '<div class="vg">' +
+      TPL.map(function (t) {
+        var isChosen = t.k === chosen;
+        return '<div class="card' + (isChosen ? ' chosen' : '') + '">' +
+          '<div class="cap"><span class="nm">' + t.name + (isChosen ? '<span class="star">★ chosen</span>' : '') + '</span>' +
+          '<a class="go" href="' + t.url + '">Open ↗</a></div>' +
+          '<div class="fw"><iframe src="' + t.url + '" loading="lazy" scrolling="no" title="' + t.name + '"></iframe>' +
+          '<a class="clk" href="' + t.url + '" aria-label="Open ' + t.name + '"></a></div></div>';
+      }).join('') +
+      '</div>';
+    document.body.appendChild(va);
+    va.querySelector('.x').addEventListener('click', function () { va.classList.remove('open'); });
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') va.classList.remove('open'); });
+    return va;
+  }
+
   function render(chosen) {
     css();
     var cur = currentKey();
@@ -65,6 +111,7 @@
     var wrap = document.createElement('div'); wrap.id = 'rentv-tt';
     wrap.innerHTML =
       '<div class="menu"><div class="hd">Switch front-end template</div>' +
+      '<a href="#" class="va" id="rentv-va-open"><span><span class="ic">◱</span> View all — compare</span></a>' +
       TPL.map(function (t) {
         return '<a href="' + t.url + '" class="' + (t.k === cur ? 'on' : '') + '">' +
           '<span>' + t.name + '</span>' + (t.k === chosen ? '<span class="star">★ chosen</span>' : '') + '</a>';
@@ -73,6 +120,9 @@
       '<div class="pill"><span class="dot"></span><span class="cur">' + curName + '</span><span class="cx">▾ Templates</span></div>';
     document.body.appendChild(wrap);
     wrap.querySelector('.pill').addEventListener('click', function () { wrap.classList.toggle('open'); });
+    wrap.querySelector('#rentv-va-open').addEventListener('click', function (e) {
+      e.preventDefault(); wrap.classList.remove('open'); buildViewAll(chosen).classList.add('open');
+    });
     document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) wrap.classList.remove('open'); });
   }
← e6e748c4 rentv 2026: admin front-end template toggle · back to Rentv 2026 · TK-10105: fix heygen 'Not logged in' auth wiring in buildloo cf5c27a7 →