https://www.bullardfurniture.com/js/header/header-layout-6.js

1document.addEventListener('alpine:init', () => {
2
3    Alpine.store('mobileMenu', {
4        show: false,
5        toggle(value) {
6            this.show = typeof value !== 'undefined' ? value : !this.show;
7            if (this.show) {
8                document.body.classList.add('__menu-open');
9            } else {
10                document.body.classList.remove('__menu-open');
11                document.dispatchEvent(new Event('mobile-menu-close'));
12            }
13        }
14    });
15
16    Alpine.store('headerMask', {
17        on: false,
18        hoverIntentTimeout: null,
19        hoverIntentTimeout1: null,
20        lastTarget: null,
21        toggle() {
22            this.on = !this.on;
23        }
24    });
25
26    Alpine.data('headerApp', () => ({
27        init() {
28            window.addEventListener('load', () => {
29                this.calculateMobileOffset();
30            });
31
32            this.setCurrentBreakpoint();
33
34            window.addEventListener('scroll', () => { this.handleScroll(); });
35            window.addEventListener('resize', () => {
36                this.setCurrentBreakpoint();
37                this.handleScroll();
38                this.calculateMobileOffset();
39            });
40
41            document.addEventListener('cart-status-mouseenter', () => {
42                Alpine.store('headerMask').on = true;
43            });
44
45            document.addEventListener('cart-status-mouseleave', () => {
46                Alpine.store('headerMask').on = false;
47            });
48        },
49        showSearch: false,
50        searchFocus: false,
51        isMobile: false,
52        prevScrollPos: window.scrollY,
53        breakpoint: 992,
54        hoverIntent(show, callback, target) {
55
56            if (typeof callback !== 'function') {
57                console.error('Callback must be a function');
58                return;
59            }
60
61            clearTimeout(Alpine.store('headerMask').hoverIntentTimeout);
62
63            if (show) {
64                Alpine.store('headerMask').hoverIntentTimeout = setTimeout(() => {
65                    if (target) {
66                        if (target !== Alpine.store('headerMask').lastTarget) {
67                            target.dispatchEvent(new CustomEvent('non-nav-hover', { detail: {}, bubbles: true }));
68                            Alpine.store('headerMask').lastTarget = target;
69                        }
70                    }
71
72                    Alpine.store('headerMask').on = true;
73                    callback();
74                }, 100);
75            } else {
76                Alpine.store('headerMask').hoverIntentTimeout = setTimeout(() => {
77                    Alpine.store('headerMask').on = false;
78                    callback();
79                }, 500);
80            }
81
82        },
83        setCurrentBreakpoint() {
84            const isMobile = window.matchMedia('(max-width: 991px)').matches;
85            this.isMobile = isMobile;
86        },
87        handleShowSearch() {
88            this.showSearch = !this.showSearch;
89
90            if (this.showSearch) {
91                $('.hlv6-search__text-box').focus();
92            } else {
93                $('.hlv6-search__text-box').blur();
94            }
95        },
96        handleScroll() {
97            const currentScrollPos = window.scrollY;
98            const deltaThreshold = 50; // Minimum number of pixels to scroll before triggering the behavior
99
100            if (Math.abs(currentScrollPos - this.prevScrollPos) > deltaThreshold && !this.showSearch) {
101                if (window.innerWidth <= this.breakpoint) {
102                    let topOffset = 0;
103                    if (this.prevScrollPos > currentScrollPos) {
104                        // Scrolling up
105                        topOffset = "0";
106                    } else {
107                        // Scrolling down
108                        const headerHeight = document.getElementById("header").offsetHeight;
109                        topOffset = `-${headerHeight}`;
110                    }
111                    document.getElementById("header").style.top = `${topOffset}px`;
112                    document.dispatchEvent(new CustomEvent('header-scroll', { detail: { headerOffset: topOffset }, bubbles: true }));
113                } else {
114                    // Reset header position on screens larger than the breakpoint
115                    document.getElementById("header").style.top = "0";
116                }
117
118                this.prevScrollPos = currentScrollPos;
119            }
120
121            setTimeout(() => {
122                this.calculateMobileOffset();
123            }, 200);
124        },
125        handleMask() {
126            if (this.isMobile) {
127                if (!this.showSearch && !Alpine.store('mobileMenu').show) {
128                    Alpine.store('headerMask').on = false;
129                } else {
130                    Alpine.store('headerMask').on = true;
131                }
132            } else {
133                Alpine.store('headerMask').toggle();
134            }
135        },
136        calculateMobileOffset() {
137
138            function calculateHeight() {
139                var mobileMenu = document.querySelector('.hlv6-mobile-menu');
140                var hlv6 = document.querySelector('.hlv6');
141                var rect = hlv6.getBoundingClientRect();
142
143                if (rect.top == 0)
144                    mobileMenu.style.top = (hlv6.offsetHeight) + "px";
145                else
146                    mobileMenu.style.top = (rect.top + hlv6.offsetHeight) + "px";
147            }
148
149            // Wait for the next animation frame
150            window.requestAnimationFrame(calculateHeight);
151        },
152        focusSearch() {
153            setTimeout(() => {
154                this.handleShowSearch();
155            }, 250);
156        }
157    }));
158
159    Alpine.data('headerNav', () => ({
160        init() {
161            document.addEventListener('mobile-menu-close', () => {
162                setTimeout(() => { this.resetNav(); }, 500);
163            });
164        },
165        initialHeight: 0,
166        activeNav0: null,
167        activeNav0Show: null,
168        activeNav1: null,
169        activeNav1Show: null,
170        activeSecondaryNav0Show: null,
171        mouseEnter(level, index, hasChildren) {
172            if (level == 0) {
173                this.activeNav0 = index;
174                this.activeNav1 = null;
175                this.activeNav1Show = null;
176                clearTimeout(Alpine.store('headerMask').hoverIntentTimeout);
177
178                Alpine.store('headerMask').hoverIntentTimeout = setTimeout(() => {
179                    if (this.activeNav0 == index) {
180                        document.dispatchEvent(new CustomEvent('nav-hover', { detail: {}, bubbles: true }));
181                        this.activeNav0Show = index;
182                        Alpine.store('headerMask').on = hasChildren ? true : false;
183                    }
184                }, 100);
185            }
186
187            if (level == 1) {
188                this.activeNav1 = index;
189
190                Alpine.store('headerMask').hoverIntentTimeout1 = setTimeout(() => {
191                    if (this.activeNav1 == index) {
192                        this.activeNav1Show = index;
193                    }
194                }, 100);
195            }
196        },
197        mouseLeave(level, index) {
198            if (level == 0) {
199                clearTimeout(Alpine.store('headerMask').hoverIntentTimeout);
200
201                Alpine.store('headerMask').hoverIntentTimeout = setTimeout(() => {
202                    if (this.activeNav0 == index) {
203                        this.activeNav0 = this.activeNav0Show = null;
204                        this.activeNav1 = this.activeNav1Show = null;
205                        Alpine.store('headerMask').on = false;
206                    }
207                }, 500);
208            }
209        },

210        setActiveNav0(index, event, hasChildren) {
211            if (hasChildren) event.preventDefault();
212
213            this.activeSecondaryNav0Show = null;
214            this.activeNav0Show = this.activeNav0Show == index ? null : index;
215
216            this.$nextTick(() => {
217                this.scrollIntoView(event.target);
218            });
219        },
220        setActiveSecondaryNav0(index, event, hasChildren) {
221            if (hasChildren) event.preventDefault();
222
223            this.activeNav0Show = null;
224            this.activeSecondaryNav0Show = this.activeSecondaryNav0Show == index ? null : index;
225        },
226        setActiveNav1(index, event, hasChildren) {
227            if (hasChildren) event.preventDefault();
228
229            this.activeNav1Show = this.activeNav1Show == index ? null : index;
230
231            this.$nextTick(() => {
232                this.scrollIntoView(event.target);
233            });
234        },
235        scrollIntoView(element) {
236            if (element) {
237                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
238            }
239        },
240        resetNav() {
241            this.activeNav0 = null;
242            this.activeNav0Show = null;
243            this.activeNav1 = null;
244            this.activeNav1Show = null;
245            this.activeSecondaryNav0Show = null;
246        }
247    }));
248
249});
250
251document.addEventListener('alpine:initialized', () => {
252    document.querySelectorAll('#header [data-bs-toggle="tooltip"]').forEach(el => {
253        bootstrap.Tooltip.getOrCreateInstance(el);
254    });
255});