ZDDC
7fd96c7c78
The .app-header__logo SVG was decorative on every tool. Web's strongest convention is "click logo → go home" — so users tapping it expecting that fallback got nothing. Now the logo is wrapped in an anchor whose href reflects the URL the page was loaded from: file:// → no wrap (no server home to point at) / → wrap, href=/ (deployment root) /index.html / /<tool>.html → wrap, href=/ (root, no project) /<project>/... → wrap, href=/<project> (project landing) The wrap happens client-side at DOMContentLoaded via shared/logo.js, loaded by every tool's build.sh after toast/nav. Idempotent — a template-supplied anchor or a second mount call is a no-op. The companion shared/logo.css adds a subtle hover/focus affordance (opacity 0.82, focus ring) so the logo reads as clickable without otherwise altering its visual weight. Tools opt out by setting window.zddc.logo.disabled = true before DOMContentLoaded (e.g. for deployments that pin the logo to an external destination). Five Playwright tests (tests/logo.spec.js) lock the contract: no-wrap on file://, href=/ at root, href=/<project> in project subtree, aria-label matches target, idempotent re-mount. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
// shared/logo.js — turn the inert <svg class="app-header__logo"> on
|
|
// every tool's header into a clickable link. The destination is the
|
|
// nearest "home" the user can sensibly back out to:
|
|
//
|
|
// file:// → no wrap (no server home)
|
|
// http(s)://host/ → wrap, href = /
|
|
// http(s)://host/<tool>.html (deployment root)→ wrap, href = /
|
|
// http(s)://host/<project>/... → wrap, href = /<project>
|
|
//
|
|
// When inside a project, the logo takes the user to the project
|
|
// landing (synthetic page with the four lifecycle-stage cards + MDL
|
|
// instructions). When at the deployment root, the logo points at /
|
|
// (the project picker). Offline, the logo stays decorative — there's
|
|
// no real "home" to go to.
|
|
//
|
|
// Mounts as a sibling-replacement on DOMContentLoaded: wraps the
|
|
// existing logo SVG in an <a>, preserving classes and attributes.
|
|
// Idempotent: re-mounting on an already-wrapped logo is a no-op.
|
|
//
|
|
// Tools that want to override (e.g. a deployment that pins logo to
|
|
// an external URL) can set window.zddc.logo.disabled = true before
|
|
// DOMContentLoaded and inject their own anchor.
|
|
(function () {
|
|
'use strict';
|
|
|
|
if (!window.zddc) window.zddc = {};
|
|
if (window.zddc.logo) return;
|
|
|
|
function projectSegment(pathname) {
|
|
var parts = pathname.split('/').filter(Boolean);
|
|
if (parts.length === 0) return null;
|
|
var first = parts[0];
|
|
// Tool HTMLs at the deployment root (index.html, archive.html
|
|
// with ?projects=...) don't carry a project segment.
|
|
if (first.indexOf('.') !== -1) return null;
|
|
return first;
|
|
}
|
|
|
|
function targetHref() {
|
|
if (typeof location === 'undefined') return null;
|
|
if (location.protocol !== 'http:' && location.protocol !== 'https:') {
|
|
return null;
|
|
}
|
|
if (window.zddc.logo && window.zddc.logo.disabled) return null;
|
|
var seg = projectSegment(location.pathname);
|
|
return seg ? '/' + encodeURIComponent(seg) : '/';
|
|
}
|
|
|
|
function mount() {
|
|
var logo = document.querySelector('.app-header__logo');
|
|
if (!logo) return;
|
|
// Already wrapped (template-supplied anchor, or a previous mount).
|
|
if (logo.parentElement && logo.parentElement.tagName === 'A' &&
|
|
logo.parentElement.classList.contains('app-header__logo-link')) {
|
|
return;
|
|
}
|
|
var href = targetHref();
|
|
if (!href) return;
|
|
var a = document.createElement('a');
|
|
a.href = href;
|
|
a.className = 'app-header__logo-link';
|
|
var label = href === '/' ? 'ZDDC home' : 'Project home';
|
|
a.title = label;
|
|
a.setAttribute('aria-label', label);
|
|
logo.parentNode.insertBefore(a, logo);
|
|
a.appendChild(logo);
|
|
}
|
|
|
|
window.zddc.logo = {
|
|
mount: mount,
|
|
// Test seam.
|
|
_projectSegment: projectSegment,
|
|
_targetHref: targetHref,
|
|
disabled: false,
|
|
};
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', mount, { once: true });
|
|
} else {
|
|
mount();
|
|
}
|
|
})();
|