https://www.elle.cz/js/modules/brandingAdOffset.js

1import {getVisibleViewportHeight} from '../core/measure.js';
2import {createRafScheduler} from '../core/rafScheduler.js';
3
4const OFFSET_ROOT_SELECTOR = '[data-branding-ad-offset-root]';
5const OFFSET_HEADER_SELECTOR = '[data-branding-ad-offset-header]';
6const BRANDING_AD_TOP_VARIABLE = '--ui-advert-item-top--branding';
7const SCROLL_HEADER_SELECTOR = '[data-js-module~="header-scroll-reveal"]';
8const headerSchedulers = new WeakMap();
9
10export const initBrandingAdOffset = () => {
11  const offsetRoot = document.querySelector(OFFSET_ROOT_SELECTOR);
12  const scrollHeader = document.querySelector(SCROLL_HEADER_SELECTOR);
13  const offsetHeader = document.querySelector(OFFSET_HEADER_SELECTOR)
14    || scrollHeader?.closest('.site-header-container');
15  const tracksStickyOffset = offsetHeader?.contains(scrollHeader) === true;
16
17  if (!(offsetHeader instanceof HTMLElement) || (!(offsetRoot instanceof HTMLElement) && !tracksStickyOffset)) {
18    return;
19  }
20
21  if (headerSchedulers.has(offsetHeader)) {
22    return headerSchedulers.get(offsetHeader).schedule;
23  }
24
25  let lastVisibleHeight = -1;
26  let isTransitioning = false;
27
28  const syncOffset = () => {
29    const visibleHeight = Math.round(getVisibleViewportHeight(offsetHeader));
30    if (visibleHeight !== lastVisibleHeight) {
31      lastVisibleHeight = visibleHeight;
32      if (offsetRoot instanceof HTMLElement) {
33        offsetRoot.style.setProperty(BRANDING_AD_TOP_VARIABLE, `${visibleHeight}px`);
34      }
35
36      if (tracksStickyOffset) {
37        document.body.style.setProperty('--site-sticky-header-ad-offset', `${visibleHeight}px`);
38      }
39    }
40
41    if (isTransitioning) {
42      syncScheduler.schedule();
43    }
44  };
45
46  const syncScheduler = createRafScheduler(syncOffset);
47  headerSchedulers.set(offsetHeader, syncScheduler);
48
49  const syncTransition = (event) => {
50    if (event.target !== offsetHeader || event.propertyName !== 'transform') {
51      return;
52    }
53
54    isTransitioning = event.type === 'transitionrun';
55    syncScheduler.flush();
56  };
57
58  offsetHeader.addEventListener('transitionrun', syncTransition);
59  offsetHeader.addEventListener('transitionend', syncTransition);
60  offsetHeader.addEventListener('transitioncancel', syncTransition);
61
62  if (typeof ResizeObserver !== 'undefined') {
63    const resizeObserver = new ResizeObserver(syncScheduler.schedule);
64    resizeObserver.observe(offsetHeader);
65  }
66
67  window.addEventListener('scroll', syncScheduler.flush, {passive: true});
68  window.addEventListener('resize', syncScheduler.schedule);
69  window.addEventListener('orientationchange', syncScheduler.schedule);
70  window.addEventListener('pageshow', syncScheduler.schedule);
71  syncScheduler.flush();
72  return syncScheduler.schedule;
73};