← back to Greenwallcoverings
add universal corner-nav.js (UR 4-icon: bag/account/search/menu)
ec3d6585be26f9f394a7a09cec415a69569dae1d · 2026-05-13 12:32:42 -0700 · Steve Abrams
Files touched
A public/corner-nav.jsM public/index.html
Diff
commit ec3d6585be26f9f394a7a09cec415a69569dae1d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 13 12:32:42 2026 -0700
add universal corner-nav.js (UR 4-icon: bag/account/search/menu)
---
public/corner-nav.js | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++
public/index.html | 3 +-
2 files changed, 185 insertions(+), 1 deletion(-)
diff --git a/public/corner-nav.js b/public/corner-nav.js
new file mode 100644
index 0000000..3ab2ef1
--- /dev/null
+++ b/public/corner-nav.js
@@ -0,0 +1,183 @@
+/* corner-nav.js — universal upper-right 4-icon nav for the DW fleet.
+ *
+ * What it does: injects a fixed top-right widget with four icons —
+ * 1. Bag → links to designerwallcoverings.com search for this site's keyword
+ * 2. Person → opens trade-account panel (info@<domain> + Shopify /account link)
+ * 3. Magnifier → toggles a search overlay; filters [data-grid] if present, else /search
+ * 4. Menu → toggles a drawer with the site's existing nav + sister-site links
+ *
+ * Self-styled. Idempotent. Drop-in: <script src="/corner-nav.js" defer></script>
+ *
+ * Per-site overrides: set `window.CornerNavConfig = { ... }` BEFORE the script loads.
+ * { bagUrl, accountUrl, searchSelector, menuLinks: [{name,url}], skipMenu: bool }
+ *
+ * Reference: Gucci / YSL top-right luxury nav pattern. Per Steve 2026-05-13.
+ */
+(function () {
+ 'use strict';
+ if (window.__cornerNavLoaded) return;
+ window.__cornerNavLoaded = true;
+
+ var CFG = window.CornerNavConfig || {};
+ var DOMAIN = location.hostname.replace(/^www\./, '');
+ var STEM = DOMAIN.replace(/\..+$/, '');
+ var BRAND = (document.querySelector('meta[name="brand"]') || {}).content
+ || (document.querySelector('.ns-name') || {}).textContent
+ || STEM.replace(/wallpaper|wallcovering(s)?|walls?/i, '').trim()
+ || STEM;
+
+ var BAG_URL = CFG.bagUrl || 'https://designerwallcoverings.com/search?q=' + encodeURIComponent(BRAND);
+ var ACCOUNT_URL = CFG.accountUrl || 'https://designerwallcoverings.com/account';
+ var INFO_EMAIL = CFG.infoEmail || ('info@' + DOMAIN);
+
+ // ---------- styles (scoped via .cnav prefix) ----------
+ var css = '\
+.cnav-wrap{position:fixed;top:14px;right:18px;z-index:9000;display:flex;align-items:center;gap:18px;padding:10px 16px;background:rgba(10,10,10,0.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-radius:999px;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#f5f1e8;font-size:13px;letter-spacing:0.04em;text-transform:uppercase}\
+.cnav-btn{background:none;border:0;cursor:pointer;color:inherit;padding:4px;display:flex;align-items:center;gap:8px;transition:opacity .2s}\
+.cnav-btn:hover{opacity:0.7}\
+.cnav-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\
+.cnav-btn .cnav-lbl{font-size:13px;font-weight:400;letter-spacing:0.06em}\
+.cnav-overlay{position:fixed;inset:0;z-index:8999;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity .2s}\
+.cnav-overlay.show{opacity:1;pointer-events:auto}\
+.cnav-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw);background:#0a0a0a;color:#f5f1e8;z-index:9001;transform:translateX(100%);transition:transform .3s ease;padding:88px 32px 24px;overflow-y:auto;border-left:1px solid rgba(255,255,255,0.08);box-sizing:border-box}\
+.cnav-panel.show{transform:translateX(0)}\
+.cnav-panel h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:20px;margin:0 0 16px;letter-spacing:0.04em}\
+.cnav-panel .cnav-close{position:absolute;top:18px;right:18px;background:none;border:0;color:#f5f1e8;font-size:28px;cursor:pointer;line-height:1;padding:6px}\
+.cnav-panel a, .cnav-panel button.cnav-link{display:block;padding:12px 0;color:#f5f1e8;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.08);font-size:15px;letter-spacing:0.02em;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer;font-family:inherit}\
+.cnav-panel a:hover, .cnav-panel button.cnav-link:hover{opacity:0.7}\
+.cnav-search{padding:14px 16px;width:100%;font-size:18px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.18);color:#f5f1e8;outline:none;box-sizing:border-box;margin-bottom:18px;font-family:inherit}\
+.cnav-search::placeholder{color:rgba(245,241,232,0.4)}\
+.cnav-sub{font-size:12px;color:rgba(245,241,232,0.55);margin:18px 0 8px;letter-spacing:0.08em;text-transform:uppercase}\
+@media (max-width:520px){.cnav-wrap{top:10px;right:10px;padding:8px 12px;gap:12px}.cnav-btn .cnav-lbl{display:none}.cnav-btn svg{width:20px;height:20px}}\
+';
+ var styleEl = document.createElement('style');
+ styleEl.setAttribute('data-cnav', '1');
+ styleEl.appendChild(document.createTextNode(css));
+ document.head.appendChild(styleEl);
+
+ // ---------- icons ----------
+ var ICONS = {
+ bag: '<svg viewBox="0 0 24 24"><path d="M6 7h12l-1 13H7L6 7Z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>',
+ person: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.2"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></svg>',
+ search: '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.3-4.3"/></svg>',
+ menu: '<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></svg>',
+ };
+
+ // ---------- widget ----------
+ var wrap = document.createElement('div');
+ wrap.className = 'cnav-wrap';
+ wrap.setAttribute('role', 'navigation');
+ wrap.setAttribute('aria-label', 'Primary');
+ wrap.innerHTML = '\
+ <a class="cnav-btn" href="' + BAG_URL + '" aria-label="Shop" title="Shop">' + ICONS.bag + '</a>\
+ <button class="cnav-btn" id="cnav-account" aria-label="Account" title="Account">' + ICONS.person + '</button>\
+ <button class="cnav-btn" id="cnav-search" aria-label="Search" title="Search">' + ICONS.search + '</button>\
+ <button class="cnav-btn" id="cnav-menu" aria-label="Menu" title="Menu">' + ICONS.menu + '<span class="cnav-lbl">Menu</span></button>\
+ ';
+
+ var overlay = document.createElement('div');
+ overlay.className = 'cnav-overlay';
+
+ // ---------- panels ----------
+ function panel(html) {
+ var p = document.createElement('aside');
+ p.className = 'cnav-panel';
+ p.innerHTML = '<button class="cnav-close" aria-label="Close">×</button>' + html;
+ return p;
+ }
+ function openPanel(p) { overlay.classList.add('show'); p.classList.add('show'); }
+ function closeAll() {
+ overlay.classList.remove('show');
+ document.querySelectorAll('.cnav-panel.show').forEach(function (el) { el.classList.remove('show'); });
+ }
+
+ // Account panel
+ var acct = panel('\
+ <h3>Trade account</h3>\
+ <p class="cnav-sub" style="margin-top:0">Verified-buyer access to memo samples, trade pricing, and project quoting.</p>\
+ <a href="' + ACCOUNT_URL + '">Sign in / register →</a>\
+ <a href="mailto:' + INFO_EMAIL + '?subject=' + encodeURIComponent('Trade account inquiry') + '">Email ' + INFO_EMAIL + '</a>\
+ <a href="tel:+18883734564">Call (888) 373-4564 · M–F 9–5 PT</a>\
+ ');
+
+ // Search panel — filters [data-grid] if present, otherwise dispatches to /search
+ var hasGrid = document.querySelector('[data-grid]') || document.querySelector('.product-grid') || document.querySelector('#shop');
+ var srch = panel('\
+ <h3>Search</h3>\
+ <input type="search" class="cnav-search" id="cnav-search-input" placeholder="Search ' + BRAND + '..." autocomplete="off">\
+ <div class="cnav-sub">Press enter to search · ESC to close</div>\
+ <div id="cnav-search-results" style="margin-top:18px"></div>\
+ ');
+
+ // Menu panel — auto-extract existing site nav
+ var existingLinks = [];
+ document.querySelectorAll('.ns-nav a, header nav a, nav.primary a').forEach(function (a) {
+ var name = (a.textContent || '').trim();
+ var url = a.getAttribute('href') || '#';
+ if (name && url && !existingLinks.some(function (e) { return e.name === name; })) {
+ existingLinks.push({ name: name, url: url });
+ }
+ });
+ if (!existingLinks.length) {
+ existingLinks = [
+ { name: 'Home', url: '/' },
+ { name: 'About', url: '/about' },
+ { name: 'Shop', url: BAG_URL },
+ ];
+ }
+ var menuLinks = (CFG.menuLinks && CFG.menuLinks.length) ? CFG.menuLinks : existingLinks;
+ var sisterLinks = [
+ { name: 'Designer Wallcoverings', url: 'https://designerwallcoverings.com' },
+ { name: 'Novasuede', url: 'https://novasuede.com' },
+ { name: 'Phillipe Romano', url: 'https://philipperomano.com' },
+ { name: 'Architectural Wallcoverings', url: 'https://architecturalwallcoverings.com' },
+ ];
+ var mnu = panel('\
+ <h3>' + BRAND + '</h3>\
+ ' + menuLinks.map(function (l) { return '<a href="' + l.url + '">' + l.name + '</a>'; }).join('') + '\
+ <div class="cnav-sub" style="margin-top:24px">Sister sites</div>\
+ ' + sisterLinks.filter(function (l) { return l.url.indexOf(DOMAIN) === -1; })
+ .map(function (l) { return '<a href="' + l.url + '">' + l.name + '</a>'; }).join('') + '\
+ ');
+
+ document.body.appendChild(wrap);
+ document.body.appendChild(overlay);
+ document.body.appendChild(acct);
+ document.body.appendChild(srch);
+ document.body.appendChild(mnu);
+
+ // ---------- wiring ----------
+ document.getElementById('cnav-account').addEventListener('click', function (e) { e.preventDefault(); openPanel(acct); });
+ document.getElementById('cnav-search').addEventListener('click', function (e) { e.preventDefault(); openPanel(srch); setTimeout(function () { document.getElementById('cnav-search-input').focus(); }, 320); });
+ document.getElementById('cnav-menu').addEventListener('click', function (e) { e.preventDefault(); openPanel(mnu); });
+ overlay.addEventListener('click', closeAll);
+ document.querySelectorAll('.cnav-close').forEach(function (b) { b.addEventListener('click', closeAll); });
+ document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeAll(); });
+
+ // Search — live-filter on-page grid if one exists; else submit to /search
+ var input = document.getElementById('cnav-search-input');
+ var results = document.getElementById('cnav-search-results');
+ if (input) {
+ input.addEventListener('input', function () {
+ var q = input.value.trim().toLowerCase();
+ if (!hasGrid) return;
+ var cards = hasGrid.querySelectorAll('[data-card], .product-card, .pcard, .grid-item');
+ var shown = 0;
+ cards.forEach(function (c) {
+ var t = c.textContent.toLowerCase();
+ var hit = !q || t.indexOf(q) !== -1;
+ c.style.display = hit ? '' : 'none';
+ if (hit) shown++;
+ });
+ results.textContent = q ? (shown + ' result' + (shown === 1 ? '' : 's') + ' on this page') : '';
+ });
+ input.addEventListener('keydown', function (e) {
+ if (e.key === 'Enter') {
+ var q = input.value.trim();
+ if (!q) return;
+ if (hasGrid) { closeAll(); hasGrid.scrollIntoView({ behavior: 'smooth' }); }
+ else { location.href = '/search?q=' + encodeURIComponent(q); }
+ }
+ });
+ }
+})();
diff --git a/public/index.html b/public/index.html
index ea6c1e4..1cd9185 100644
--- a/public/index.html
+++ b/public/index.html
@@ -548,7 +548,8 @@ loadGridPage();
</script>
<!-- ============================================================
DW UNIVERSAL CONTACT MODULE — fashion-house UX
- Inject before </body> in every DW-family sister site.
+ Inject before <script src="/corner-nav.js" defer></script>
+</body> in every DW-family sister site.
Self-contained: CSS + 4 modals + JS submission handlers.
Uses host site's CSS vars (--bg, --fg, --gold, --rule).
============================================================ -->
← cee679f remove stray contact modal markup that was rendering inline
·
back to Greenwallcoverings
·
chip-click → product details modal; vendor redacted in card 57c50be →