/**
* Transparent-header rules consume the measured heights at first paint on every
* template, so the transparent case opts in globally here instead of per-section.
*/
if (document.querySelector('#header-component')?.hasAttribute('transparent')) {
measureHeaderHeights();
}
/**
* Sets `--top-row-height`, consumed by the header underlays and submenus. Deferred to a
* rAF so the height read doesn't force layout mid-parse, and scoped to the
* header, where all consumers live, so the write only invalidates the header subtree.
* Mimics the `--top-row-height` write in updateHeaderHeights() in utilities.js
*/
(function setTopRowHeight() {
const header = document.querySelector('#header-component');
const headerTopRow = header?.querySelector('.header__row--top');
if (!headerTopRow) return;
window.requestAnimationFrame(function () {
header.style.setProperty('--top-row-height', `${headerTopRow.getBoundingClientRect().height}px`);
});
})();
/**
* Sets `--transparent-header-offset-boolean` when the first section must offset itself
* under a transparent header. The non-offset case relies on the `0` default declared in
* sections/header.liquid — unlike updateTransparentHeaderOffset() in utilities.js, which
* re-runs on editor changes and must write '0' to reset a previously written '1'.
*/
(function updateTransparentHeaderOffset() {
const header = document.querySelector('#header-component');
const headerSection = document.querySelector('#header-group .header-section');
if (!headerSection || !header?.hasAttribute('transparent')) return;
const hasImmediateSection = headerSection.nextElementSibling?.classList.contains('shopify-section');
if (!hasImmediateSection) {
document.body.style.setProperty('--transparent-header-offset-boolean', '1');
}
})();