← back to Corkwallcovering
public/corner-nav-accordion.js
298 lines
/* corner-nav-accordion.js — FLEET-READY two-hamburger corner navigation.
Generalized from the CRCP build (commercialrealestate/public/corner-nav.js, live on
crcp.agentabrams.com). This is a DISTINCT component from _shared/corner-nav.js (the
Gucci top-right-pill + left-account nav) — do NOT confuse the two.
Drop-in on ANY site: <script src="/corner-nav-accordion.js" defer></script>
• TOP-LEFT ☰ → the whole site, grouped into collapsed accordion sections
(current page's group carries a gold "you-are-here" dot + its link
highlighted; per-section count badges). All sections start COLLAPSED.
• TOP-RIGHT ▤ → "On this page" jump links auto-built from the page's own headings,
plus the full site menu below.
Overlay + Esc + click-out to close. Reserves header padding. Folds legacy top-tabs
into the hamburgers while leaving page controls (inputs/buttons/selects) intact.
WHAT MAKES IT FLEET-READY (vs the CRCP original's hardcoded 26-page GROUPS array):
─────────────────────────────────────────────────────────────────────────────────
The site map is now PER-SITE DATA, resolved in this priority order:
(a) window.CORNER_NAV_CONFIG — an inline object set before this script (no fetch, fastest)
(b) /corner-nav.manifest.json — a tiny per-site JSON this component fetches (RECOMMENDED)
(c) auto-discovery — a flat "This site" section built from the page's own
header/footer/nav <a> links (last-resort fallback so the
menu is never empty even with zero config).
Also:
• CLEAN-URL aware — normalizes current path + every href, so "/about", "/about.html" and
"about" all match. Emits hrefs exactly as the manifest authored them.
• PALETTE via CSS custom properties with hard fallbacks — inherits each site's theme when
the site defines the vars, else uses the CRCP dark/gold default. Override any of:
--cnav-drawer-bg --cnav-fg --cnav-muted --cnav-accent --cnav-line
--cnav-burger-bg --cnav-overlay
• Idempotent, self-contained, a11y-friendly.
MANIFEST / CONFIG SHAPE (both use the same object):
{ "site": "Cork Wallcovering", // optional; shown as the ☰ drawer subtitle
"groups": [
{ "title": "Explore", "items": [ ["/", "🏠 Home"], ["/about", "About"] ] },
{ "title": "Reference", "items": [ ["/care", "Care"], ["/vocabulary", "Vocabulary"] ] }
] }
Each item is [href, label]. Label may include an emoji/glyph. Href may be clean or .html.
*/
(function () {
if (window.__cornerNav) return; window.__cornerNav = true;
// ── path helpers (clean-URL aware) ───────────────────────────────────────────────────
function norm(p) {
if (!p) return '';
try { if (/^https?:/i.test(p)) p = new URL(p, location.href).pathname; } catch (e) {}
p = p.split('#')[0].split('?')[0];
p = p.replace(/\.html?$/i, '');
p = p.replace(/^\/+/, '').replace(/\/+$/, '');
if (p === 'index') p = '';
return p.toLowerCase();
}
var CUR = norm(location.pathname);
// ── default palette (CRCP dark/gold) — every value is a CSS-var-with-fallback ─────────
var C = {
burgerBg: 'var(--cnav-burger-bg, rgba(20,25,37,.92))',
fg: 'var(--cnav-fg, #e6e8ec)',
line: 'var(--cnav-line, #232a38)',
accent: 'var(--cnav-accent, #C8A24B)',
muted: 'var(--cnav-muted, #8A93A2)',
drawerBg: 'var(--cnav-drawer-bg, #11161f)',
secLine: 'var(--cnav-sec-line, #1b212c)',
overlay: 'var(--cnav-overlay, rgba(0,0,0,.5))'
};
// ── styles (scoped under .cnav*, driven by the vars above) ────────────────────────────
var css = '' +
'.cnav-burger{position:fixed;top:10px;z-index:9998;display:flex;align-items:center;gap:6px;' +
'background:' + C.burgerBg + ';color:' + C.fg + ';border:1px solid rgba(255,255,255,.14);' +
'border-radius:10px;padding:8px 11px;font-size:15px;line-height:1;cursor:pointer;' +
'box-shadow:0 2px 10px rgba(0,0,0,.35);backdrop-filter:blur(3px);}' +
'.cnav-burger:hover{border-color:' + C.accent + ';color:' + C.accent + ';}' +
'.cnav-burger.left{left:10px;} .cnav-burger.right{right:10px;}' +
'.cnav-burger .lbl{font-size:12px;letter-spacing:.3px;} @media(max-width:640px){.cnav-burger .lbl{display:none;}}' +
'.cnav-ov{position:fixed;inset:0;background:' + C.overlay + ';z-index:9998;opacity:0;pointer-events:none;transition:opacity .18s;}' +
'.cnav-ov.on{opacity:1;pointer-events:auto;}' +
'.cnav-drawer{position:fixed;top:0;bottom:0;width:min(330px,88vw);background:' + C.drawerBg + ';color:' + C.fg + ';z-index:9999;' +
'box-shadow:0 0 40px rgba(0,0,0,.5);display:flex;flex-direction:column;transition:transform .2s ease;' +
'font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}' +
'.cnav-drawer.left{left:0;border-right:1px solid ' + C.line + ';transform:translateX(-104%);}' +
'.cnav-drawer.right{right:0;border-left:1px solid ' + C.line + ';transform:translateX(104%);}' +
'.cnav-drawer.on{transform:translateX(0);}' +
'.cnav-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid ' + C.line + ';' +
'font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:' + C.accent + ';}' +
'.cnav-hd .sub{display:block;color:' + C.muted + ';font-size:10.5px;letter-spacing:.3px;text-transform:none;margin-top:2px;}' +
'.cnav-hd button{background:none;border:0;color:' + C.muted + ';font-size:20px;cursor:pointer;line-height:1;}' +
'.cnav-hd button:hover{color:' + C.fg + ';}' +
'.cnav-body{overflow-y:auto;padding:6px 0 24px;flex:1;}' +
'.cnav-sec{border-bottom:1px solid ' + C.secLine + ';}' +
'.cnav-sec>h4{margin:0;padding:12px 16px;font-size:12.5px;font-weight:700;letter-spacing:.3px;color:' + C.fg + ';' +
'cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:8px;}' +
'.cnav-sec>h4:hover{color:#fff;background:rgba(255,255,255,.02);}' +
'.cnav-sec>h4 .lt{display:flex;align-items:center;gap:8px;min-width:0;}' +
'.cnav-sec>h4 .rt{display:flex;align-items:center;gap:9px;color:' + C.muted + ';}' +
'.cnav-sec>h4 .cnt{font-size:11px;font-variant-numeric:tabular-nums;background:' + C.secLine + ';border:1px solid ' + C.line + ';border-radius:9px;padding:0 7px;line-height:17px;}' +
'.cnav-sec>h4 .car{color:' + C.accent + ';transition:transform .15s;font-size:11px;}' +
'.cnav-sec.collapsed>h4 .car{transform:rotate(-90deg);}' +
'.cnav-sec.collapsed .cnav-list{display:none;}' +
'.cnav-sec.cur-sec>h4{color:#fff;} .cnav-sec.cur-sec .cnt{border-color:' + C.accent + ';color:' + C.accent + ';}' +
'.cnav-sec .curdot{width:7px;height:7px;border-radius:50%;background:' + C.accent + ';box-shadow:0 0 6px rgba(200,162,75,.55);flex:0 0 7px;}' +
'.cnav-list{padding:2px 0 8px;}' +
'.cnav-list a{display:block;padding:8px 16px 8px 22px;color:' + C.fg + ';opacity:.86;text-decoration:none;font-size:13.5px;border-left:2px solid transparent;}' +
'.cnav-list a:hover{background:rgba(200,162,75,.08);color:#fff;opacity:1;}' +
'.cnav-list a.cur{color:' + C.accent + ';opacity:1;border-left-color:' + C.accent + ';background:rgba(200,162,75,.10);font-weight:600;}' +
'.cnav-empty{padding:14px 16px;color:' + C.muted + ';font-size:13px;}';
var st = document.createElement('style'); st.textContent = css; document.head.appendChild(st);
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
// ── overlay ───────────────────────────────────────────────────────────────────────
var ov = el('div', 'cnav-ov'); document.body.appendChild(ov);
function closeAll() {
document.querySelectorAll('.cnav-drawer.on').forEach(function (d) { d.classList.remove('on'); });
ov.classList.remove('on');
document.querySelectorAll('.cnav-burger').forEach(function (b) { b.setAttribute('aria-expanded', 'false'); });
}
ov.addEventListener('click', closeAll);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeAll(); });
// ── a collapsible accordion section (always starts COLLAPSED) ────────────────────────
function section(title, opts) {
opts = opts || {};
var sec = el('div', 'cnav-sec collapsed' + (opts.current ? ' cur-sec' : ''));
var dot = opts.current ? '<span class="curdot" title="you are here"></span>' : '';
var cnt = (opts.count != null) ? '<span class="cnt">' + opts.count + '</span>' : '';
var h = el('h4', null, '<span class="lt">' + dot + '<span>' + title + '</span></span>' +
'<span class="rt">' + cnt + '<span class="car">▾</span></span>');
var list = el('div', 'cnav-list');
h.addEventListener('click', function () { sec.classList.toggle('collapsed'); });
sec.appendChild(h); sec.appendChild(list); sec._list = list;
return sec;
}
function drawer(side, title, sub) {
var d = el('div', 'cnav-drawer ' + side);
var hd = el('div', 'cnav-hd', '<span>' + title + (sub ? '<span class="sub">' + sub + '</span>' : '') + '</span>');
var x = el('button', null, '✕'); x.setAttribute('aria-label', 'Close'); x.addEventListener('click', closeAll);
hd.appendChild(x);
var body = el('div', 'cnav-body');
d.appendChild(hd); d.appendChild(body); document.body.appendChild(d); d._body = body;
return d;
}
// ── PER-SITE NAV RESOLUTION ──────────────────────────────────────────────────────────
var GROUPS = null, SITE_LABEL = null;
function ingest(cfg) {
if (!cfg) return false;
var groups = Array.isArray(cfg) ? cfg : cfg.groups;
if (!groups || !groups.length) return false;
GROUPS = groups.map(function (g) {
return { title: g.title || 'Menu',
items: (g.items || []).filter(function (it) { return it && it[0]; }) };
}).filter(function (g) { return g.items.length; });
if (!GROUPS.length) { GROUPS = null; return false; }
SITE_LABEL = (Array.isArray(cfg) ? null : cfg.site) || null;
return true;
}
// (c) auto-discovery fallback — one flat "This site" section from the page's own links.
function autoDiscover() {
var seen = {}, items = [];
document.querySelectorAll('header a[href], footer a[href], nav a[href], .nav a[href]').forEach(function (a) {
if (a.closest('.cnav-drawer')) return;
var href = a.getAttribute('href') || '';
if (/^(mailto:|tel:|javascript:)/i.test(href)) return;
if (href.charAt(0) === '#') return;
if (/^https?:/i.test(href)) { try { if (new URL(href, location.href).host !== location.host) return; } catch (e) { return; } }
var key = norm(href);
if (key in seen) return; seen[key] = 1;
var label = (a.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 40) || (key || 'Home');
items.push([href || '/', label]);
});
if (!items.length) return false;
GROUPS = [{ title: 'This site', items: items }];
return true;
}
function groupsTotal() { return GROUPS.reduce(function (n, g) { return n + g.items.length; }, 0); }
// ── LEFT drawer + RIGHT drawer are (re)built once GROUPS resolve ──────────────────────
var left = drawer('left', 'Navigate', 'the whole site');
var right = drawer('right', 'On this page', 'jump to a section');
function buildLeft() {
left._body.innerHTML = '';
var sub = left.querySelector('.cnav-hd .sub'); if (sub && SITE_LABEL) sub.textContent = SITE_LABEL;
GROUPS.forEach(function (g) {
var hasCur = g.items.some(function (it) { return norm(it[0]) === CUR; });
var sec = section(g.title, { count: g.items.length, current: hasCur });
g.items.forEach(function (it) {
var a = el('a', norm(it[0]) === CUR ? 'cur' : '', it[1]);
a.href = it[0]; a.addEventListener('click', closeAll); sec._list.appendChild(a);
});
left._body.appendChild(sec);
});
}
function slug(s) { return s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '').slice(0, 40) || 'sec'; }
function buildOnThisPage() {
right._body.innerHTML = '';
var jump = section('Sections on this page', { current: true });
var nodes = Array.prototype.slice.call(document.querySelectorAll('main h2, section > h2, h2.sec, .panel > h3, section > h3'));
var seen = {}, count = 0;
nodes.forEach(function (n) {
if (n.closest('.cnav-drawer')) return;
if (!n.offsetParent && n.offsetHeight === 0) return;
var txt = (n.textContent || '').replace(/\s+/g, ' ').trim();
txt = txt.replace(/^[▸▾▿▶◀⌄˅▼>\s]+/, '');
if (!txt) return; txt = txt.slice(0, 46);
if (!n.id) { var s = slug(txt), u = s, i = 2; while (document.getElementById(u)) { u = s + '-' + (i++); } n.id = u; }
if (seen[n.id]) return; seen[n.id] = 1;
var a = el('a', '', txt); a.href = '#' + n.id; a.addEventListener('click', closeAll);
jump._list.appendChild(a); count++;
});
if (count) { jump.querySelector('.rt').insertAdjacentHTML('afterbegin', '<span class="cnt">' + count + '</span>'); right._body.appendChild(jump); }
else { right._body.appendChild(el('div', 'cnav-empty', 'No jump-to sections on this page. Use the ☰ menu (top-left) to go to another page.')); }
var nav = section('Go to another page', { count: groupsTotal() });
GROUPS.forEach(function (g) {
g.items.forEach(function (it) {
var a = el('a', norm(it[0]) === CUR ? 'cur' : '', it[1]);
a.href = it[0]; a.addEventListener('click', closeAll); nav._list.appendChild(a);
});
});
right._body.appendChild(nav);
}
// ── the two hamburgers ──────────────────────────────────────────────────────────────
function burger(side, glyph, label, onOpen) {
var b = el('button', 'cnav-burger ' + side, glyph + ' <span class="lbl">' + label + '</span>');
b.setAttribute('aria-label', label); b.setAttribute('aria-expanded', 'false');
var target = side === 'left' ? left : right;
b.addEventListener('click', function (e) {
e.stopPropagation();
if (!GROUPS) return; // nav not resolved yet
var open = target.classList.contains('on'); closeAll();
if (!open) { if (onOpen) onOpen(); target.classList.add('on'); ov.classList.add('on'); b.setAttribute('aria-expanded', 'true'); }
});
document.body.appendChild(b); return b;
}
burger('left', '☰', 'Menu', null);
burger('right', '▤', 'Sections', buildOnThisPage);
// Reserve corner space on the top bar so its title / controls clear the burgers.
function reserve() {
var bar = document.querySelector('header'); if (!bar) return;
var cs = getComputedStyle(bar);
bar.style.paddingLeft = Math.max(parseInt(cs.paddingLeft, 10) || 0, 104) + 'px';
bar.style.paddingRight = Math.max(parseInt(cs.paddingRight, 10) || 0, 120) + 'px';
}
// Fold old horizontal top-tabs into the hamburgers: hide inter-page nav LINKS in the header
// (every destination lives in the ☰ menu) but LEAVE page controls (sliders, buttons, selects)
// and the brand/logo home link.
function hideTopTabs() {
document.querySelectorAll('header a[href], .topnav a[href], nav.nav a[href], .nav a[href]').forEach(function (a) {
if (a.closest('.cnav-drawer')) return;
if (a.classList.contains('ns-brand') || a.classList.contains('logo')) return;
var href = a.getAttribute('href') || '';
if (/\.html([?#].*)?$/i.test(href) || href === '/' || href.charAt(0) === '#' ||
(/^\/[a-z0-9\-]+$/i.test(href) && !/^\/(products?|sample|cart|api)\b/i.test(href))) a.style.display = 'none';
});
['.topnav', 'nav.nav', 'header .nav'].forEach(function (sel) {
document.querySelectorAll(sel).forEach(function (w) {
var hasVisibleControl = Array.prototype.some.call(w.children, function (c) {
if (c.tagName === 'A') return c.style.display !== 'none';
return c.offsetParent !== null || /INPUT|BUTTON|SELECT|SPAN|LABEL/.test(c.tagName);
});
if (!hasVisibleControl) w.style.display = 'none';
});
});
}
function apply() { reserve(); hideTopTabs(); }
// ── resolve the nav, then wire everything ────────────────────────────────────────────
function ready(fn) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn); else fn(); }
function finish() { buildLeft(); apply(); }
// (a) inline config wins immediately (no fetch)
if (ingest(window.CORNER_NAV_CONFIG)) {
ready(finish);
} else {
// (b) fetch the per-site manifest, then (c) auto-discover on any failure
var url = (window.CORNER_NAV_MANIFEST || '/corner-nav.manifest.json');
fetch(url, { credentials: 'same-origin' })
.then(function (r) { return r.ok ? r.json() : null; })
.then(function (j) { ingest(j); })
.catch(function () { /* fall through to auto-discover below */ })
.finally(function () {
ready(function () {
if (!GROUPS && !autoDiscover()) GROUPS = [{ title: 'This site', items: [['/', 'Home']] }];
finish();
});
});
}
})();