101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
/**
|
|
* Chrome Tint
|
|
* -
|
|
* Tint the browser chrome (status bar + home indicator area) to match
|
|
* the site header / footer when those elements are in view.
|
|
*
|
|
* - top of screen (status bar / notch / Dynamic Island):
|
|
* controlled by the <meta name="theme-color"> tag. iOS Safari
|
|
* picks up runtime updates.
|
|
*
|
|
* - bottom of screen (home indicator area, behind the address bar):
|
|
* a fixed pseudo-element filled with `env(safe-area-inset-bottom)`
|
|
* takes its background from a body class that this module toggles
|
|
* when the footer is in view.
|
|
*
|
|
* The header color (#032F46) is the darker end of the .site-header
|
|
* gradient. The footer color (#102C45) is the sRGB equivalent of
|
|
* the `--color-cwc-blue-02` token used by .site-footer. If those
|
|
* colors change in source, update HEADER_COLOR / FOOTER_COLOR below.
|
|
*
|
|
* - "In view" = any pixel of the element overlaps the viewport.
|
|
*
|
|
* No-ops if either the header or footer is missing, or if
|
|
* IntersectionObserver isn't supported (older browsers).
|
|
*/
|
|
|
|
const HEADER_COLOR = '#032F46';
|
|
const FOOTER_COLOR = '#102C45';
|
|
const THEME_META_NAME = 'theme-color';
|
|
const FOOTER_IN_VIEW_CLASS = 'footer-in-view';
|
|
|
|
function ensureThemeColorMeta() {
|
|
let meta = document.head.querySelector(`meta[name="${THEME_META_NAME}"]`);
|
|
if (!meta) {
|
|
meta = document.createElement('meta');
|
|
meta.setAttribute('name', THEME_META_NAME);
|
|
document.head.appendChild(meta);
|
|
}
|
|
return meta;
|
|
}
|
|
|
|
function setTopTint(color) {
|
|
const meta = ensureThemeColorMeta();
|
|
if (color == null) {
|
|
// Clear: iOS Safari falls back to the page background.
|
|
meta.removeAttribute('content');
|
|
} else {
|
|
meta.setAttribute('content', color);
|
|
}
|
|
}
|
|
|
|
function setBottomTint(active) {
|
|
document.body.classList.toggle(FOOTER_IN_VIEW_CLASS, active);
|
|
}
|
|
|
|
function initChromeTint() {
|
|
if (typeof IntersectionObserver === 'undefined') return;
|
|
|
|
const header = document.querySelector('.site-header');
|
|
const footer = document.querySelector('.site-footer');
|
|
if (!header && !footer) return;
|
|
|
|
// Top tint state. Truthy means the header is currently in view.
|
|
let headerInView = false;
|
|
// Bottom tint state. Truthy means the footer is currently in view.
|
|
let footerInView = false;
|
|
|
|
const apply = () => {
|
|
// Top tint is the header color ONLY when the header is in view.
|
|
// When only the footer is in view, the top tint is cleared (the
|
|
// user only asked for header-color at the top).
|
|
if (headerInView) {
|
|
setTopTint(HEADER_COLOR);
|
|
} else {
|
|
setTopTint(null);
|
|
}
|
|
// Bottom tint is the footer color ONLY when the footer is in view.
|
|
setBottomTint(footerInView);
|
|
};
|
|
|
|
const buildObserver = (el, onChange) => {
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
onChange(entry.isIntersecting);
|
|
}
|
|
apply();
|
|
},
|
|
// Zero threshold + no rootMargin = "any pixel in view".
|
|
{ threshold: 0, rootMargin: '0px' },
|
|
);
|
|
io.observe(el);
|
|
return io;
|
|
};
|
|
|
|
if (header) buildObserver(header, (v) => { headerInView = v; });
|
|
if (footer) buildObserver(footer, (v) => { footerInView = v; });
|
|
}
|
|
|
|
export default initChromeTint;
|