← back to Wallpaperdefinitions
header A-rebuild: dw-header.js wins fleet — patched to hide original header + corner-nav + v1, fix centered site-name (title fallback), add theme toggle; v1 removed from index
1c9f844eaa81e31a412ee195a5ae6c3aa53facc5 · 2026-06-01 14:49:50 -0700 · SteveStudio2
Files touched
M public/dw-header.jsM public/index.html
Diff
commit 1c9f844eaa81e31a412ee195a5ae6c3aa53facc5
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Mon Jun 1 14:49:50 2026 -0700
header A-rebuild: dw-header.js wins fleet — patched to hide original header + corner-nav + v1, fix centered site-name (title fallback), add theme toggle; v1 removed from index
---
public/dw-header.js | 36 +++++++++++++++---
public/index.html | 107 +---------------------------------------------------
2 files changed, 33 insertions(+), 110 deletions(-)
diff --git a/public/dw-header.js b/public/dw-header.js
index 0f10a0b..39f29a5 100644
--- a/public/dw-header.js
+++ b/public/dw-header.js
@@ -31,7 +31,10 @@
.replace(/\s+/g, ' ').trim()
.replace(/\b\w/g, function (c) { return c.toUpperCase(); });
}
- var SITE_NAME = CFG.siteName || titleCase(STEM);
+ // digit-only STEM = localhost IP (127.0.0.1); fall back to <title> first segment
+ var SITE_NAME = CFG.siteName || (/^\d+$/.test(STEM)
+ ? ((document.title || '').split(/\s*[|–—-]\s*/)[0].trim() || titleCase(STEM))
+ : titleCase(STEM));
var HOME = CFG.homeUrl || '/';
var ACCENT = CFG.accent || (getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()) || '#9B7B4F';
var NAV = CFG.navLinks || [
@@ -82,6 +85,9 @@
'.dwh-drawer a:last-child,.dwh-drawer button:last-child{border-bottom:0}',
'.dwh-drawer a:hover,.dwh-drawer button:hover{background:rgba(245,241,232,.06)}',
'.dwh-head{padding:10px 22px 8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:' + ACCENT + '}',
+ '.dwh-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:12px}',
+ '.dwh-toggle{width:34px;height:34px;border-radius:50%;border:1px solid rgba(245,241,232,.25);background:transparent;color:#f5f1e8;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s}',
+ '.dwh-toggle:hover{border-color:' + ACCENT + ';color:' + ACCENT + '}',
].join('\n');
document.head.appendChild(css);
@@ -94,13 +100,18 @@
(isAdmin ? '<button type="button" class="dwh-burger dwh-admin" id="dwhAdmin" aria-label="Admin tools" aria-controls="dwhAdminDrawer" aria-expanded="false"><span></span><span></span><span></span></button>' : '') +
'</div>' +
'<a href="' + esc(HOME) + '" class="dwh-name">' + esc(SITE_NAME) + '</a>' +
- '<div class="dwh-spacer"></div>' +
+ '<div class="dwh-right"><button type="button" class="dwh-toggle" id="dwhTheme" aria-label="Toggle light/dark theme" title="Toggle theme">☾</button></div>' +
'<nav class="dwh-drawer" id="dwhNavDrawer" aria-label="Primary">' + linksHTML(NAV) + '</nav>' +
(isAdmin ? '<nav class="dwh-drawer dwh-admin-drawer" id="dwhAdminDrawer" aria-label="Admin tools"><div class="dwh-head">Admin tools</div>' + linksHTML(ADMIN) + '<button type="button" data-act="logout">Sign out admin</button></nav>' : '');
- // remove any pre-existing inline header so we don't double up
- var old = document.querySelector('header.ns-header, header.dwh:not(:first-of-type)');
- if (old && old.className.indexOf('dwh') === -1) old.style.display = 'none';
+ // Replace every pre-existing site header / corner-nav / inline hamburger so we
+ // don't double-stack. dw-header is the sole header now (Steve 2026-06-01: dw-header
+ // rebuild wins the fleet). Covers: inline <header> (any class but .dwh), the
+ // legacy ns-header, corner-nav pill, and the DW-HAMBURGER-NAV v1 fixed button/panel.
+ try {
+ document.querySelectorAll('header:not(.dwh), .ns-header, .cnav-wrap, #dwBurgerBtn, #dwBurgerPanel')
+ .forEach(function (el) { el.style.display = 'none'; });
+ } catch (e) {}
document.body.insertBefore(header, document.body.firstChild);
@@ -126,4 +137,19 @@
if (typeof window[act] === 'function') { e.preventDefault(); window[act](); }
});
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { close('dwhNavDrawer', 'dwhNav'); close('dwhAdminDrawer', 'dwhAdmin'); } });
+
+ // ---- theme toggle (self-contained; replaces the original header's toggle) ----
+ function applyTheme(t) {
+ document.documentElement.dataset.theme = t;
+ var b = document.getElementById('dwhTheme');
+ if (b) b.textContent = (t === 'dark') ? '☀' : '☾'; // ☀ when dark, ☾ when light
+ }
+ try { var savedT = localStorage.getItem('dwTheme'); if (savedT === 'dark' || savedT === 'light') applyTheme(savedT); else applyTheme(document.documentElement.dataset.theme || 'light'); } catch (e) {}
+ var themeBtn = document.getElementById('dwhTheme');
+ if (themeBtn) themeBtn.addEventListener('click', function () {
+ var cur = (document.documentElement.dataset.theme === 'dark') ? 'dark' : 'light';
+ var nxt = (cur === 'dark') ? 'light' : 'dark';
+ applyTheme(nxt);
+ try { localStorage.setItem('dwTheme', nxt); } catch (e) {}
+ });
})();
diff --git a/public/index.html b/public/index.html
index 0c64bda..0063355 100644
--- a/public/index.html
+++ b/public/index.html
@@ -713,107 +713,6 @@ toggle.addEventListener('click', () => {
applyDensity(densInput.value);
})();
</script>
-<!-- DW-HAMBURGER-NAV v1 (canonical 2026-05-10) -->
-<style id="dw-hamburger-styles">
- /* Canonical hamburger nav — always visible top-right, all viewports.
- Standing rule (Steve, 2026-05-08): hamburger is the primary nav. */
- .dw-burger-btn {
- position: fixed; top: 18px; right: 18px; z-index: 9999;
- width: 44px; height: 44px;
- background: rgba(20,20,20,0.78); color: #f5f1e8;
- backdrop-filter: blur(8px) saturate(140%);
- -webkit-backdrop-filter: blur(8px) saturate(140%);
- border: 1px solid rgba(245,241,232,0.18); border-radius: 50%;
- cursor: pointer; padding: 0;
- display: flex; flex-direction: column; align-items: center; justify-content: center;
- gap: 4px;
- box-shadow: 0 6px 20px rgba(0,0,0,0.35);
- transition: background 200ms, transform 200ms;
- }
- .dw-burger-btn:hover { background: rgba(20,20,20,0.92); }
- .dw-burger-btn span {
- display: block; width: 20px; height: 1.5px; background: currentColor;
- transition: transform 220ms, opacity 220ms;
- }
- .dw-burger-btn[aria-expanded="true"] span:nth-child(1) {
- transform: translateY(5.5px) rotate(45deg);
- }
- .dw-burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
- .dw-burger-btn[aria-expanded="true"] span:nth-child(3) {
- transform: translateY(-5.5px) rotate(-45deg);
- }
- .dw-burger-panel {
- position: fixed; top: 72px; right: 18px; z-index: 9998;
- min-width: 240px; max-width: 88vw;
- background: rgba(15,15,15,0.96);
- backdrop-filter: blur(14px) saturate(140%);
- -webkit-backdrop-filter: blur(14px) saturate(140%);
- border: 1px solid rgba(245,241,232,0.12);
- border-radius: 14px;
- box-shadow: 0 18px 50px rgba(0,0,0,0.55);
- padding: 10px 0;
- display: none;
- font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
- }
- .dw-burger-panel.open { display: block; }
- .dw-burger-panel a,
- .dw-burger-panel button {
- display: block; width: 100%;
- padding: 13px 22px;
- color: #f5f1e8 !important;
- background: transparent; border: 0; cursor: pointer;
- text-decoration: none !important;
- font-size: 15px; font-weight: 400;
- text-align: left;
- letter-spacing: 0;
- border-bottom: 1px solid rgba(245,241,232,0.06);
- transition: background 160ms, color 160ms;
- box-sizing: border-box;
- }
- .dw-burger-panel a:last-child,
- .dw-burger-panel button:last-child { border-bottom: 0; }
- .dw-burger-panel a:hover,
- .dw-burger-panel button:hover {
- background: rgba(245,241,232,0.06);
- color: #ffffff !important;
- }
- @media (max-width: 480px) {
- .dw-burger-btn { top: 12px; right: 12px; width: 40px; height: 40px; }
- .dw-burger-panel { top: 62px; right: 12px; }
- }
- /* Avoid double-print on sites already adopting a top-of-page header
- that overlaps z-index. Reserve safe space near top-right. */
-</style>
-<button type="button" class="dw-burger-btn" id="dwBurgerBtn"
- aria-label="Toggle menu" aria-controls="dwBurgerPanel"
- aria-expanded="false">
- <span></span><span></span><span></span>
-</button>
-<nav class="dw-burger-panel" id="dwBurgerPanel" aria-label="Primary">
- <a href="/">Wallpaper Definitions</a>
- <a href="#definitions">Definitions</a>
- <a href="#cta">Browse Catalog</a>
- <a href="https://designerwallcoverings.com">DW</a>
- <a href="mailto:info@wallpaperdefinitions.com">Contact</a>
-</nav>
-<script>
-(function(){
- var btn = document.getElementById('dwBurgerBtn');
- var panel = document.getElementById('dwBurgerPanel');
- if (!btn || !panel) return;
- function close(){ panel.classList.remove('open'); btn.setAttribute('aria-expanded','false'); }
- function toggle(){
- var open = panel.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- btn.addEventListener('click', function(e){ e.stopPropagation(); toggle(); });
- document.addEventListener('click', function(e){
- if (panel.classList.contains('open') && !panel.contains(e.target) && e.target !== btn) close();
- });
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
-})();
-</script>
-<!-- /DW-HAMBURGER-NAV v1 -->
<!-- Big Red customer chat — lower-left, woman-avatar, vendor-redacted retail persona. -->
@@ -840,9 +739,7 @@ toggle.addEventListener('click', () => {
window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
}
</script>
-<!-- dw-header.js REMOVED 2026-06-01 (fleet hamburger-overlap fix): it injected a 2nd
- header (left burgers + centered name) colliding with the inline DW-HAMBURGER-NAV v1
- (fixed circular ☰ upper-right). DW-HAMBURGER-NAV v1 is the sole nav. To re-enable
- dw-header.js, remove DW-HAMBURGER-NAV v1 first. -->
+<script>window.DwHeaderConfig={siteName:" Wallpaperdefinitions",accent:"#9B7B4F",navLinks:[{name:'Home',url:'/'},{name:'Collections',url:'#shop'},{name:'About',url:'/about'},{name:'Care',url:'/care.html'},{name:'History',url:'/history.html'}],adminLinks:[{name:'Shopify admin',url:'https://admin.shopify.com',external:true},{name:'Edit hero',url:'#'},{name:'Analytics',url:'#'}]};</script>
+<script src="/dw-header.js" defer></script>
</body>
</html>
← da783c3 header: remove dw-header.js — fixes overlapping hamburgers (
·
back to Wallpaperdefinitions
·
header name → domain name 'Wallpaperdefinitions' (remove odd 95c53b8 →