https://www.ngttravel.com/js/scripts.js

1function mqLgHandler(e) { 
2    if(e.matches) {
3        // Reset navigation state for desktop
4        $('.ngt-nav-collapse').removeClass('open');
5        $('.ngt-nav-collapse').parent().parent().find('.nav__panel').removeAttr('style');
6
7        removeVideoPlaceholder();
8    }
9}
10
11function mqMobileHandler(e) {
12    if(e.matches) {
13        setVideoPlaceholder();
14
15        initialiseMobileCarousels();
16    }
17}
18
19function initialiseMobileCarousels() {
20    $('.ngt-carousel--mobile').not('.slick-initialized').slick({
21        autoplay: false,
22        arrows: false,
23        infinite: true,
24        mobileFirst: true,
25        responsive: [
26            {
27                breakpoint: 992,
28                settings: 'unslick'
29            }
30        ]
31    });
32
33    $('.ngt-carousel--mobile-only').not('.slick-initialized').slick({
34        autoplay: false,
35        arrows: false,
36        infinite: true,
37        mobileFirst: true,
38        responsive: [
39            {
40                breakpoint: 992,
41                settings: 'unslick'
42            }
43        ]
44    });
45}
46
47function setVideoPlaceholder() {
48    $('.hero__video').each(function() {
49        let $video = $(this);
50        let img = $video.attr('poster');        
51        $video.parent().attr('style', 'background-image: url("' + img + '");');        
52        $video.hide();
53    });
54}
55
56function removeVideoPlaceholder() {
57    $('.hero__video').each(function() {
58        let $video = $(this);
59        $video.parent().removeAttr('style');
60        $video.show();
61    });
62}
63
64function recaptchaCallback(response) {
65    console.log('response', response);
66    $.ajax({

67        type: "POST",
68        url: '/umbraco/surface/FormSurface/VerifyRecaptcha',
69        data: { response: response }
70    }).done(function (data) {
71        var result = $.parseJSON(data);
72
73        if (!result.success) {
74            $('body').data('verified', 'false');
75        }
76        else {
77            $('body').data('verified', 'true');
78        }
79    }).fail(function (jqXHR, textStatus, errorThrown) {
80        console.log('Unable to verify Recaptcha', errorThrown);
81    });
82}
83
84$(function() {
85    // Navigation
86    $('.ngt-nav-collapse').on('click', function(e) {
87        e.preventDefault();
88        $(this).closest('.nav-item').toggleClass('open');
89        $(this).parent().next().slideToggle();
90    });
91
92    $('.secondary-nav > .container > .navbar-nav > .nav-item').hover(
93        function () {
94            $(this).addClass('hover-active');
95            if($(this).find('.navbar-nav').length > 0) 
96                $('body').addClass('overlay');
97        },
98        function () {
99            $('body').removeClass('overlay');
100            let $that = $(this);
101            setTimeout(function () {
102                $that.removeClass('hover-active');
103            }, 300); 
104        }
105    );
106
107    $('.secondary-nav > .container > .navbar-nav > .nav-item').focus(function () {
108        $('.secondary-nav > .container > .navbar-nav > .nav-item').removeClass('hover-active');
109
110        $(this).addClass('hover-active');
111        if ($(this).find('.navbar-nav').length > 0)
112            $('body').addClass('overlay');
113    });
114
115    $('.secondary-nav > .container > .navbar-nav > .nav-item > .nav-link').focus(function () {
116        $(this).parent().prev().removeClass('hover-active');
117        $(this).parent().addClass('hover-active');
118    });
119
120    $('.secondary-nav > .container > .navbar-nav > .nav-item > .nav-link').focus(function () {
121        $(this).parent().parent().addClass('hover-active');        
122    });
123
124    $('li[class*="nav-item--hover-brand"]').hover(
125        function () {            
126            $(this).addClass('hover-active');
127        },
128        function () {
129            let $that = $(this);
130            setTimeout(function () {
131                $that.removeClass('hover-active');        
132            }, 300);            
133        }
134    );
135
136    $('li[class*="nav-item--hover-brand"]').focus(function () {
137        $(this).addClass('hover-active');
138        $('body').removeClass('overlay');
139    });
140
141    // Sticky nav
142    var $primaryNav = $('.primary-nav');
143    var primaryNavBreakpoint = $primaryNav.offset().top - 40;    
144
145    $(window).scroll(function (event) {
146        var posY = $(this).scrollTop();
147
148        if (posY > primaryNavBreakpoint)
149            $primaryNav.addClass('sticky');
150        else
151            $primaryNav.removeClass('sticky');
152
153        if (posY >

153 tripNavBreakpoint)
154            $tripNav.addClass('sticky');
155        else
156            $tripNav.removeClass('sticky');
157    });
158
159    // Trip sticky nav
160    var $breakpoint = $('#nav-breakpoint');
161    var $tripNav = $('.ngt-hero__nav');
162
163    if ($breakpoint.length > 0) {
164        var tripNavBreakpoint = $breakpoint.offset().top - 110;
165        
166        $(window).scroll(function (event) {
167            var posY2 = $(this).scrollTop();
168
169            if (posY2 > tripNavBreakpoint)
170                $tripNav.addClass('sticky');
171            else
172                $tripNav.removeClass('sticky');
173        });
174    }
175
176    $tripNav.find('.form-select').on('change', function (e) {
177        e.preventDefault();
178
179        var $el = $($(this).val()).get(0).scrollIntoView({ behavior: 'smooth' });
180    });
181
182    // Media queries for managing state across viewports
183    const mqLg  = window.matchMedia('(min-width: 992px)');
184    mqLg.addEventListener('change', mqLgHandler);
185
186    const mqMobile  = window.matchMedia('(max-width: 992px)');
187    mqMobile.addEventListener('change', mqMobileHandler);
188
189    // Video hero
190    if(window.matchMedia('(max-width: 992px)').matches)
191        setVideoPlaceholder();    
192
193    // Buttons
194    $('.tag-list--single-select .tag-list__link').on('click', function(e) {
195        e.preventDefault();
196        var $link = $(this);
197        $link.closest('.tag-list').find('.tag-list__link').not($(this)).removeClass('active');
198        $link.addClass('active');
199
200        var $target = $($link.attr('data-target'));
201        if ($target.length > 0) {
202            $target.closest('.ngt-tabs').find('.ngt-tabs__tab').removeClass('active');
203            $target.addClass('active');
204        }
205    });
206
207    $('.tag-list--multi-select .tag-list__link').on('click', function (e) {
208        e.preventDefault();
209        $(this).toggleClass('active');
210    });
211
212    // Tiles
213    $('.ngt-tile').on('click', function (e) {
214        e.preventDefault();
215        var $tile = $(this);
216
217        if ($tile.parent().parent().hasClass('js-filter-item')) {
218            $tile.toggleClass('active');
219        }
220        else {
221            $('.ngt-tile').not($tile).removeClass('active');
222            $tile.toggleClass('active');
223        }        
224    });
225
226    // Tooltips
227    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
228    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
229        return new bootstrap.Tooltip(tooltipTriggerEl)
230    });    
231
232    // Carousels
233    $('.ngt-carousel__thumbnail').on('click', function (e) {
234        e.preventDefault();
235
236        var $thumbnail = $(this);
237        $thumbnail.parent().parent().find('.ngt-carousel').slick('slickGoTo', $thumbnail.index());
238    });
239
240    $('.ngt-carousel').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
241        var $thumbnails = $(this).parent().find('.ngt-carousel__thumbnails');
242        if ($thumbnails.length > 0) {
243            $thumbnails.find('.ngt-carousel__thumbnail').removeClass('active');
244            $thumbnails.find('.ngt-carousel__thumbnail').eq(nextSlide).addClass('active');
245        }
246    });
247
248    initialiseMobileCarousels();
249
250    // Testimonials
251    $('.ngt-carousel--testimonials').not('.slick-initialized').slick({
252        autoplay: false,
253        arrows: false,
254        infinite: true
255    });    
256
257    // Gallery
258
259    // Only enable carousels when modal fired
260    var galleryModals = document.getElementsByClassName('ngt-modal--gallery');
261    if (galleryModals.length > 0) {
262        for (let i = 0; i < galleryModals.length; i++) {
263            galleryModals[i].addEventListener('shown.bs.modal', function (event) {
264                $('#' + $(galleryModals[i]).attr('id') + ' .ngt-carousel--gallery').not('.slick-initialized').slick({
265                    slidesToShow: 1,
266                    slidesToScroll: 1,
267                    arrows: false,
268                    fade: true,
269                    asNavFor: '#' + $(galleryModals[i]).attr('id') + ' .ngt-carousel--captions',
270                    autoplay: false
271                });
272
273                $('#' + $(galleryModals[i]).attr('id') + ' .ngt-carousel--captions').not('.slick-initialized').slick({
274                    slidesToShow: 1,
275                    slidesToScroll: 1,
276                    asNavFor: '#' + $(galleryModals[i]).attr('id') + ' .ngt-carousel--gallery',
277                    dots: false,

278                    arrows: false,
279                    autoplay: false,
280                    fade: true
281                });
282            });
283        }
284    }    
285
286    //triggered when modal is about to be shown
287    $('[id$=-team-modal]').on('show.bs.modal', function (e) {
288
289        //get data-id attribute of the clicked element
290        var text = $(e.relatedTarget).data('accordion-title');
291
292        $(e.currentTarget).find('#team-modal-breadcrumb-location').text(text);
293    });
294
295    // Viewport
296    $('.ngt-viewport__inner').on('click', function (e) {
297        var $viewport = $(this).closest('.ngt-viewport');
298        var $btn = $viewport.find('.ngt-viewport__expand .ngt-link');
299        $viewport.addClass('expanded');
300
301        var text = $btn.text();
302        if ($viewport.hasClass('expanded'))
303            $btn.text(text.replace('View', 'Hide'));
304        else {
305            $btn.text(text.replace('Hide', 'View'));
306        }
307    });
308
309    $('.ngt-viewport__expand .ngt-link').on('click', function (e) {
310        e.preventDefault();
311
312        var $btn = $(this);
313        var $viewport = $btn.closest('.ngt-viewport');
314        $viewport.toggleClass('expanded');
315
316        var text = $btn.text();
317        if ($viewport.hasClass('expanded'))
318            $btn.text(text.replace('View', 'Hide'));
319        else {            
320            $btn.text(text.replace('Hide', 'View'));
321        }
322    });    
323
324    // Pagination
325    $('.ngt-pagination .js-page-link').on('click', function (e) {
326        e.preventDefault();
327
328        var currentUrl = new URL(window.location.href);
329        var isPrev = $(this).parent().hasClass('ngt-pagination__prev');
330        var isNext = $(this).parent().hasClass('ngt-pagination__next');
331
332        var currentPage = parseInt(1);
333        if (/[?&]pageno=/.test(currentUrl.href)) {
334            // Exists so get it            
335            currentPage = parseInt(currentUrl.searchParams.get('pageno'));
336        }
337
338        if (isPrev)
339            currentPage--;
340        else if (isNext)
341            currentPage++;
342
343        currentUrl.searchParams.set('pageno', currentPage);
344
345        window.location = currentUrl.href;
346    });
347
348    // Item load
349    $loadContainers = $('.row[data-load]');
350    $loadContainers.each(function () {
351        var toLoad = parseInt($(this).data('load'));
352        var $items = $(this).find('[class^=col]');
353
354        $items.filter(':gt(' + (toLoad - 1) + ')').hide();
355    })
356
357    $('.js-show-more').on('click', function (e) {
358        e.preventDefault();
359
360        var $btn = $(this);
361        var $container = $($btn.data('target'));
362        var text = $btn.text();
363
364        if ($btn.hasClass('expanded')) {
365            $btn.text(text.replace('Show fewer', 'Load more'));
366            $btn.removeClass('expanded');
367
368            var toLoad = parseInt($container.data('load'));
369            var $items = $container.find('[class^=col]');
370
371            $items.filter(':gt(' + (toLoad - 1) + ')').hide();
372        }
373        else {            
374            $btn.text(text.replace('Load more', 'Show fewer'));
375            $btn.addClass('expanded');
376
377            $container.find('[class^=col]').show();
378        }        
379    });
380
381    // Search
382    $('.js-search-site').on('click', function (e) {
383        e.preventDefault();
384
385        var currentUrl = new URL(window.location.href);
386
387        currentUrl.searchParams.set('searchTerm', $('#Search_Term').val());
388
389        window.location = currentUrl.href;
390    });
391
392    // Scroll to top
393    $('.js-top').on('click', function (e) {
394        e.preventDefault();
395
396        $('.header').get(0).scrollIntoView({ behavior: 'smooth' });
397    });
398
399    // Accordion anchor links
400    $('.ngt-link').on('click', function (e) {
401        var $link = $(this);
402
403        if ($link.attr('href') == '#')
404            return;
405
406        if ($link.attr('href').startsWith('#')) {
407            var $el = $($link.attr('href'));
408            if ($el.length > 0 && $el.hasClass('ngt-accordion__header')) {
409                // Opens the accordion
410                $el.trigger('click');
411            }
412            else if ($('.ngt-hero--trip').length > 0) {
413                // On a hero page so offset links
414                e.preventDefault();
415                $el.get(0).scrollIntoView({ behaviour: 'smooth' });

416            }
417        }
418    });    
419});