https://vermontvacation.com/wp-content/themes/bvk-theme/js/utilities.js?ver=1

1jQuery(document).ready(function ($) {
2
3    var contentLinks = $(".acf-block a, .wp-block-group a");
4
5    // contentLinks.filter(function () {
6    //     return this.hostname && this.hostname !== location.hostname;
7    // }).addClass('link--external');
8
9
10    contentLinks.each(function () {
11        var a = new RegExp('/' + window.location.host + '/');
12        if (!a.test(this.href)) {
13            $(this).click(function (event) {
14                event.preventDefault();
15                event.stopPropagation();
16                window.open(this.href, '_blank');
17            });
18        }
19    });
20
21    // Accordion
22    var acc = document.getElementsByClassName("accordion__toggle");
23    var i;
24
25    for (i = 0; i < acc.length; i++) {
26        acc[i].addEventListener("click", function () {
27            this.classList.toggle("active");
28
29            var panel = this.nextElementSibling;
30            if (panel.style.display === "block") {
31                panel.style.display = "none";
32                panel.setAttribute("aria-expanded", "false");
33            } else {
34                panel.style.display = "block";
35                panel.setAttribute("aria-expanded", "true");
36            }
37        });
38    }
39
40    // Hero Video / In Page Hero responsive source (mobile vs desktop)
41    // Swapped via JS rather than <source media="..."> since browser support
42    // for re-evaluating that on video elements is unreliable. Both components
43    // have their own scoped classes, so this matches either.
44    var heroVideos = document.querySelectorAll(".hero-video__video, .in-page-hero__video");
45    var isMobileViewport = window.matchMedia("(max-width: 767px)").matches;
46    var v;
47
48    for (v = 0; v < heroVideos.length; v++) {
49        var mobileSrc = heroVideos[v].getAttribute("data-src-mobile");
50        var mobileType = heroVideos[v].getAttribute("data-type-mobile");
51        var source = heroVideos[v].querySelector("source");
52
53        if (isMobileViewport && mobileSrc && source) {
54            source.src = mobileSrc;
55            if (mobileType) {
56                source.type = mobileType;
57            }
58            heroVideos[v].load();
59        }
60    }
61
62    // Hero Video / In Page Hero play/pause toggle
63    var heroVideoToggles = document.querySelectorAll(".hero-video__toggle, .in-page-hero__toggle");
64    var t;
65
66    for (t = 0; t < heroVideoToggles.length; t++) {
67        heroVideoToggles[t].addEventListener("click", function () {
68            var media = this.parentNode;
69            var video = media.querySelector(".hero-video__video, .in-page-hero__video");
70            var pauseIcon = media.querySelector(".hero-video__toggle-icon--pause, .in-page-hero__toggle-icon--pause");
71            var playIcon = media.querySelector(".hero-video__toggle-icon--play, .in-page-hero__toggle-icon--play");
72            if (!video) { return; }
73
74            if (video.paused) {
75                video.play();
76                if (pauseIcon) { pauseIcon.style.display = "block"; }
77                if (playIcon) { playIcon.style.display = "none"; }
78                this.setAttribute("aria-pressed", "false");
79                this.setAttribute("aria-label", "Pause video");
80            } else {
81                video.pause();
82                if (pauseIcon) { pauseIcon.style.display = "none"; }
83                if (playIcon) { playIcon.style.display = "block"; }
84                this.setAttribute("aria-pressed", "true");
85                this.setAttribute("aria-label", "Play video");
86            }
87        });
88    }
89
90    if (window.location.href.indexOf("favorites") > -1) {
91        $(".header__utility-favorites").addClass('favorites--active');
92    }
93
94    // Carousel Slider -- CENTER
95    $('.image-carousel__gallery-center').slick({
96        infinite: true,
97        slidesToShow: 3,
98        slidesToScroll: 1,
99        arrows: true,
100        nextArrow: '<div class="slick-arrow slick-next"></div>',
101        prevArrow: '<div class="slick-arrow slick-prev"></div>',
102        responsive: [
103            {
104                breakpoint: 900,
105                settings: {
106                    slidesToShow: 2,
107                }
108            },
109            {
110                breakpoint: 600,
111                settings: {
112                    slidesToShow: 1,
113                }
114            }
115        ]
116    });
117
118    // Carousel Slider -- LEFT
119    $('.image-carousel__gallery-left').slick({
120        infinite: true,
121        slidesToShow: 2.4,
122        slidesToScroll: 1,
123        rtl: true,
124        arrows: true,
125        nextArrow: '<div class="slick-arrow slick-next"></div>',
126        prevArrow: '<div class="slick-arrow slick-prev"></div>',
127        responsive: [
128            {
129                breakpoint: 900,
130                settings: {
131                    slidesToShow: 2,
132                    infinite: true,
133                }
134            },
135            {
136                breakpoint: 600,
137                settings: {
138                    slidesToShow: 1,
139                }
140            }
141        ]
142    });
143
144    // Carousel Slider -- RIGHT
145    $('.image-carousel__gallery-right').slick({
146        infinite: true,
147        slidesToShow: 2.4,
148        slidesToScroll: 1,
149        arrows: true,
150        nextArrow: '<div class="slick-arrow slick-prev"></div>',
151        prevArrow: '<div class="slick-arrow slick-next"></div>',
152        responsive: [
153            {
154                breakpoint: 900,
155                settings: {
156                    slidesToShow: 2,
157                    infinite: true,
158                }
159            },
160            {
161                breakpoint: 600,
162                settings: {
163                    slidesToShow: 1,
164                }
165            }
166        ]
167    });
168
169    // Image Scroller Gallery -- continuous pan (CSS animation; see _image-scroller.scss).
170    // Duration is set per-instance here so the pace stays readable regardless of
171    // how many images are in the gallery, rather than a single fixed-length loop.
172    var secondsPerSlide = 4;
173
174    $('.image-scroller__gallery-track').each(function () {
175        var slideCount = $(this).find('.image-scroller__gallery-slide').length / 2;
176        $(this).css('animation-duration', (slideCount * secondsPerSlide) + 's');
177    });
178
179    $('#openSearch').click(function () {
180        $('#modalSearch').addClass('site-search--open');
181        $('body').addClass('site-search--modal');
182        $('.header').removeClass('header--open');
183        $('html, body').css({
184            overflow: 'hidden',
185            height: '100vh'
186        });
187    });
188
189    $('#closeSearch .fa-times').click(function () {
190        $('#modalSearch').removeClass('site-search--open');
191        $('body').removeClass('site-search--modal');
192        $('html, body').css({
193            overflow: '',
194            height: ''
195        });
196    });
197
198    $('#openHamburger').click(function () {
199        $('.header').addClass('header--open');
200        $('#modalSearch').removeClass('site-search--open');
201        $('body').removeClass('site-search--modal');
202        $('html, body').css({
203            overflow: 'hidden',
204            height: '100vh'
205        });
206    });
207
208    $('#closeHamburger').click(function () {
209        $('.header').removeClass('header--open');
210        $('html, body').css({
211            overflow: '',
212            height: ''
213        });
214    });
215
216    // Auto-open search modal from query param
217    const params = new URLSearchParams(window.location.search);
218    if (params.get('searchform') === 'open') {
219
220        // Trigger the same opening logic as clicking #openSearch
221        $('#modalSearch').addClass('site-search--open');
222        $('body').addClass('site-search--modal');
223        $('.header').removeClass('header--open');
224        $('html, body').css({
225            overflow: 'hidden',
226            height: '100vh'
227        });
228    }
229
230    var navLink = $('.menu-item-has-children > a');
231    $(navLink).click(function (e) {
232        e.preventDefault();
233    });
234
235    var navItem = $('#menu-off-canvas > li');
236
237    if (navItem.hasClass('current-menu-parent')) {
238        $('.current-menu-parent').addClass('menu-item--active');

239        $('.current-menu-parent .sub-menu').addClass('sub-menu--active');
240    }
241
242        navItem.click(function () {
243        var $menuImg = $('img.menu-image', this).first();
244        var imgUrl = $menuImg.attr('data-src') || $menuImg.attr('data-litespeed-src') || $menuImg.attr('src');
245        var titleAttr = $('a', this).attr('title');
246        var imageTitle = $('.header__canvas-image-title');
247        var imageDiv = $('.header__canvas-image');
248        if (imgUrl) {
249            imageDiv.css("background-image", "url(" + imgUrl + ")");
250        }
251        imageTitle.html(titleAttr);
252
253        var menuItem = $('.menu-item');
254        menuItem.removeClass('menu-item--active');
255        $(this).addClass('menu-item--active');
256
257        var activeSubMenu = $('.sub-menu', this);
258        var subMenu = $('.sub-menu');
259        activeSubMenu.addClass('sub-menu--active');
260        if (subMenu.hasClass('sub-menu--active')) {
261            subMenu.removeClass('sub-menu--active');
262            activeSubMenu.addClass('sub-menu--active');
263        }
264
265    });
266
267    // Mobile Search Toggle
268    $('.site-header__search-toggle').click(function () {
269        $('.site-header__mobile-search').toggleClass('site-header__mobile-search--active');
270    });
271
272    // Masonry
273    var $grid = $('.grid').masonry({
274        itemSelector: '.grid-item',
275        percentPosition: true,
276        columnWidth: '.grid-sizer',
277        gutter: 20,
278    });
279    $grid.imagesLoaded().progress(function () {
280        $grid.masonry();
281    });
282
283    //Sticky Navigation
284    var header = document.getElementById('header');
285    var sticky = header.offsetTop;
286
287    window.onscroll = function () {
288        stickyNav()
289    };
290
291    function stickyNav() {
292        if (window.pageYOffset > sticky) {
293            header.classList.add('sticky');
294        } else {
295            header.classList.remove('sticky');
296        }
297    }
298    
299});