https://my.theford.com/bundles/madelaphil/js/global-header.js

1const ACTIVE_CLASS = 'is-active';
2
3export function init() {
4    const globalHeader = document.querySelector('.js-global-header');
5
6    if (!globalHeader) {
7        return;
8    }
9
10    const popovers = globalHeader.querySelectorAll('[popover]');
11
12    for (const popover of popovers) {
13        const button = document.querySelector(`[popovertarget="${popover.id}"]`);
14
15        popover.addEventListener('toggle', ({ newState }) => {
16            if (newState === 'open') {
17                button.setAttribute('aria-expanded', 'true');
18                button.classList.add(ACTIVE_CLASS);
19            } else {
20                button.setAttribute('aria-expanded', 'false');
21                button.classList.remove(ACTIVE_CLASS);
22            }
23        });
24    }
25
26    const globalAlerts = document.querySelector('.global-alert');
27    const globalHeaderSticky = document.querySelector('.global-header');
28    // Ticket Timer is used in CMS
29    const ticketTimer = document.querySelector('.ticket-timer');
30    // Unit Timer is used in BO
31    const unitTimer = document.querySelector('#unit-timer');
32
33    const handleScroll = () => {
34        if (!globalHeaderSticky) return;
35
36        const currentHeight = globalHeader.offsetHeight;
37        const y = window.scrollY;
38
39        if (y >= currentHeight - 50) {
40            globalHeaderSticky.classList.add('header-scroll');
41        } else {
42            globalHeaderSticky.classList.remove('header-scroll');
43        }
44    };
45
46    const setGroupHeight = () => {
47        const alertsHeight = globalAlerts ? globalAlerts.offsetHeight : 0;
48        const headerHeight = globalHeaderSticky ? globalHeaderSticky.offsetHeight : 0;
49        const ticketTimerHeight = ticketTimer ? ticketTimer.offsetHeight : 0;
50        const unitTimerHeight = unitTimer ? unitTimer.offsetHeight : 0;
51        const totalTimerHeight = ticketTimerHeight + unitTimerHeight;
52
53        document.documentElement.style.setProperty(
54            '--bo-header-height', `${alertsHeight + headerHeight}px`
55        );
56        document.documentElement.style.setProperty(
57            '--bo-alert-height', `${alertsHeight}px`
58        );
59        document.documentElement.style.setProperty(
60            '--bo-header-height-with-alert', `${alertsHeight + headerHeight + totalTimerHeight}px`
61        );
62    };
63
64    // Use a ResizeObserver to detect changes in the size of .global-alerts, .ticket-timer and #unit-timer
65    if ('ResizeObserver' in window) {
66        const resizeObserver = new ResizeObserver(() => {
67            setGroupHeight();
68        });
69
70        if (globalAlerts) {
71            resizeObserver.observe(globalAlerts);
72        }
73
74        if (ticketTimer) {
75            resizeObserver.observe(ticketTimer);
76        }
77
78        if (unitTimer) {
79            resizeObserver.observe(unitTimer);
80        }
81    }
82
83    setGroupHeight();
84    window.addEventListener('scroll', handleScroll, { passive: true });
85    window.addEventListener('resize', setGroupHeight);
86}