https://visittobago.gov.tt/themes/custom/visit_tobago/js/tobago.js?tm8ftb

1/*
2 Focus Script
3 */
4document.addEventListener("DOMContentLoaded", function(event) {
5  //get hero slider block
6  var heroSliderBlock = document.querySelector(".hero-slider-block");
7
8  if (heroSliderBlock && heroSliderBlock.length > 0) {
9    var flkty = new Flickity(elem, {
10      // options
11      cellAlign: "left",
12      contain: true,
13      draggable: true,
14      autoPlay: 6000,
15      pauseAutoPlayOnHover: false,
16      prevNextButtons: false,
17      pageDots: true,
18      wrapAround: true
19    });
20
21    var flkty = new Flickity(".hero-slider-block", {
22      // options
23      cellAlign: "left",
24      contain: true
25    });
26  }
27
28  //get sliders wrapper
29  var sliderBlock = document.querySelectorAll(".slider-wrapper");
30
31  if (sliderBlock && sliderBlock.length > 0) {
32    sliderBlock.forEach(function(item) {
33      //search for the slide conf on wrapper as data-flickity='{ "cellAlign": "left", "contain": true }'
34      if (item.dataset.flickity) {
35        item.flkty = new Flickity(item, item.dataset.flickity);
36      } else {
37        item.flkty = new Flickity(item, {
38          contain: false,
39          imagesLoaded: true,
40          fullscreen: true,
41          cellAlign: "center",
42          prevNextButtons: true,
43          pageDots: true,
44          draggable: true,
45          adaptiveHeight: true,
46          wrapAround: true
47        });
48      }
49    });
50  }
51});
52
53document.addEventListener("DOMContentLoaded", function(event) {
54  //get all grid with filters
55  var gridFilteredBlock = document.querySelectorAll(".grid-filtered-block");
56  if (gridFilteredBlock.length > 0) {
57    gridFilteredBlock.forEach(function(gridItem) {
58      //Get Tab and form filter
59      gridItem.tabs = gridItem.querySelectorAll(".filter-tabs .item");
60      gridItem.formInputs = gridItem.querySelectorAll(".filter-menu select");
61      gridItem.gridItems = gridItem.querySelectorAll(
62        ".filtered-wrapper .filtered-item"
63      );
64      gridItem.activeTab = null;
65      gridItem.filterCardType = null;
66      gridItem.filterPlace = null;
67      gridItem.enableFilter = false;
68      gridItem.filters = {
69        tab: gridItem.activeTab,
70        type: gridItem.filterCardType,
71        place: gridItem.filterPlace
72      };
73
74      //add event listener for tab filters
75      if (gridItem.gridItems.length > 0) {
76        gridItem.tabs.forEach(function(item) {
77          item.addEventListener("click", filterTab);
78          if (item.className.match(/\bactive\b/)) {
79            gridItem.activeTab = item.dataset.machinename;
80          }
81        });
82      }
83
84      //add event listener for inputs filters
85      if (gridItem.formInputs.length > 0) {
86        gridItem.formInputs.forEach(function(item) {
87          item.addEventListener("change", filterInputs);
88          var machineName = item.dataset.machinename;
89          if (machineName == "type") {
90            gridItem.filterCardType = item.value;
91          } else if (machineName == "place") {
92            gridItem.filterPlace = item.value;
93          }
94        });
95      }
96
97      //function for tab filters
98      function filterTab() {
99        gridItem.activeTab = this.dataset.machinename;
100        console.log(gridItem.activeTab);
101
102        //remove active class and pass it to the chosen one
103        gridItem.tabs.forEach(function(item) {
104          item.classList.remove("active");
105        });
106        this.classList.add("active");
107        FilterGridItems();
108      }
109
110      //function for form filters
111      function filterInputs() {
112        var machineName = this.dataset.machinename;
113        if (machineName == "type") {
114          gridItem.filterCardType = this.value;
115        } else if (machineName == "place") {
116          gridItem.filterPlace = this.value;
117        }
118        FilterGridItems();
119      }
120
121      /*
122       * Vertical cards filter and masonry behaviour(force mansory to recalculate positions)
123       */
124      gridItem.gridVerticalCardsWrapper = gridItem.querySelector(
125        ".grid-vertical-cards-wrapper"
126      );
127
128      function FilterGridItems() {
129        if (gridItem.gridItems.length > 0) {
130          gridItem.gridItems.forEach(function(item) {
131            if (gridItem.tabs.length > 0 || gridItem.formInputs.length > 0) {
132              if (gridItem.formInputs.length > 0) {
133                if (

134                  (item.dataset.place != gridItem.filterPlace &&
135                    gridItem.filterPlace != "none") ||
136                  (item.dataset.type != gridItem.filterCardType &&
137                    gridItem.filterCardType != "none") ||
138                  item.dataset.tab != gridItem.activeTab
139                ) {
140                  item.parentNode.parentNode.classList.add("hidden");
141                  item.parentNode.parentNode.classList.remove("visible");
142                  setTimeout(function() {
143                    item.parentNode.parentNode.setAttribute(
144                      "style",
145                      "display: none;"
146                    );
147                  }, 250);
148                } else {
149                  item.parentNode.parentNode.classList.add("visible");
150                  item.parentNode.parentNode.classList.remove("hidden");
151                  setTimeout(function() {
152                    item.parentNode.parentNode.setAttribute(
153                      "style",
154                      "dislay: inline-block;"
155                    );
156                  }, 250);
157                }
158              } else {
159                if (item.dataset.tab != gridItem.activeTab) {
160                  item.parentNode.parentNode.classList.add("hidden");
161                  item.parentNode.parentNode.classList.remove("visible");
162                  setTimeout(function() {
163                    item.parentNode.parentNode.setAttribute(
164                      "style",
165                      "display: none;"
166                    );
167                  }, 250);
168                } else {
169                  item.parentNode.parentNode.classList.add("visible");
170                  item.parentNode.parentNode.classList.remove("hidden");
171                  setTimeout(function() {
172                    item.parentNode.parentNode.setAttribute(
173                      "style",
174                      "dislay: inline-block;"
175                    );
176                  }, 250);
177                }
178              }
179
180              //force mansory realign
181              setTimeout(function() {
182                gridItem.msnry = new Masonry(
183                  gridItem.gridVerticalCardsWrapper,
184                  {
185                    itemSelector: ".item.visible", //items to organize and align
186                    horizontalOrder: true, //keep horizontal order
187                    percentPosition: true
188                  }
189                );
190              }, 251);
191
192              //Set number on number cards
193              gridItem.numberCards = gridItem.querySelectorAll(
194                ".number-card .title span"
195              );
196              if (gridItem.numberCards.length > 0) {
197                gridItem.numberCards.forEach(function(item, index) {
198                  value = ".";
199                  if (index < 9) {
200                    item.innerHTML = "0" + (index + 1) + value;
201                  } else {
202                    item.innerHTML = index + 1 + value;
203                  }
204                });
205              }
206            } else {
207              //force mansory realign
208              setTimeout(function() {
209                gridItem.msnry = new Masonry(
210                  gridItem.gridVerticalCardsWrapper,
211                  {
212                    itemSelector: ".item", //items to organize and align
213                    horizontalOrder: true, //keep horizontal order
214                    percentPosition: true
215                  }
216                );
217              }, 251);
218
219              //Set number on number cards
220              gridItem.numberCards = gridItem.querySelectorAll(
221                ".number-card .title span"
222              );
223              if (gridItem.numberCards.length > 0) {
224                gridItem.numberCards.forEach(function(item, index) {
225                  value = ".";
226                  if (index < 9) {
227                    item.innerHTML = "0" + (index + 1) + value;
228                  } else {
229                    item.innerHTML = index + 1 + value;
230                  }
231                });
232              }
233            }
234          });
235        }
236      }
237
238      //execute the filters
239      FilterGridItems();
240    });
241  }
242
243  /*
244   * Collapsible cards
245   */
246
247  //collapse trigger
248  var collapseTrigger = document.querySelectorAll(".collapsible");
249  if (collapseTrigger.length > 0) {
250    collapseTrigger.forEach(function(item) {
251      item.addEventListener("click", function() {
252        this.classList.toggle("active");
253        var content = this.nextElementSibling;
254        if (content.style.maxHeight) {
255          content.style.maxHeight = null;
256        } else {
257          content.style.maxHeight = content.scrollHeight + "px";
258        }
259      });
260    });
261  }
262
263  /*
264   * Get the sillhouette svg and set the viewBox height and width with the viewport
265   */
266

267  var h = window.innerHeight;
268  var w = window.innerWidth;
269  let heroSillhouettesm = document.getElementById("hero-sillhouette-sm");
270  if (heroSillhouettesm) {
271    heroSillhouettesm.setAttribute("viewBox", "0 0 " + w + " " + h + "");
272  }
273
274  //add window resize event recalculate the sillhouett viewbox
275  window.onresize = function(event) {
276    var h = window.innerHeight;
277    var w = window.innerWidth;
278    let heroSillhouettesm = document.getElementById("hero-sillhouette-sm");
279    if (heroSillhouettesm) {
280      heroSillhouettesm.setAttribute("viewBox", "0 0 " + w + " " + h + "");
281    }
282  };
283
284  /*
285   * Set animation for the hero
286   */
287
288  let cover = document.querySelectorAll(".hero-sillhouette");
289  cover.forEach(function(item) {
290    if (item) {
291      //loader
292      item.tl = new TimelineLite();
293      let sill = item.querySelector("#silhouette");
294      let fullScreem = item.querySelector("#full-screen");
295      item.tl.to(fullScreem, 1, { morphSVG: sill, ease: Back.easeOut }, "+=1");
296      // .to(cover, 1, {morphSVG: cover, ease: Power4.easeOut}, "+=3");
297    }
298  });
299
300  let content = document.querySelector(".hero__content__wrapper");
301  if (content) {
302    //instantiate a TimelineLite
303    var tl2 = new TimelineLite();
304    //add a from() tween at the beginning of the timline
305    tl2.from(content, 1, { delay: 1, right: 100, opacity: 0 }, "+=1");
306  }
307
308  let header = document.querySelector(".header");
309  if (header) {
310    //instantiate a TimelineLite
311    var tl3 = new TimelineLite();
312    //add a from() tween at the beginning of the timline
313    tl3.from(header, 0.5, { delay: 2.5, opacity: 0, top: 20 });
314  }
315
316  let heroBlockLogo = document.querySelector(".hero .main-logo");
317  if (heroBlockLogo) {
318    //instantiate a TimelineLite
319    var tl4 = new TimelineLite();
320    //add a from() tween at the beginning of the timline
321    tl4.from(heroBlockLogo, 1.5, { delay: 2.5, opacity: 0 });
322  }
323
324  let openMapBtn = document.getElementById("open-map__btn");
325
326  openMapBtn.addEventListener("click", function() {
327    let map = document.getElementById("activity-map");
328    let header = document.getElementById("header");
329    map.classList.toggle("activity-map--visible");
330    header.classList.toggle("header--active");
331  });
332});
333
334(function($) {
335  Drupal.behaviors.tabs = {
336    attach: function(context, settings) {
337      var $tabs = $(".tab-wrapper",context);
338      var anchor = window.location.hash.substring(1);
339      if (anchor) {
340        $tabs.find('a.tablinks').removeClass('active');
341        $tabs.find('a.tablinks[href="#' + anchor + '"]').addClass('active');
342        $tabs.find('div.tabcontent').hide();
343        $tabs.find('div.tabcontent[id=' + anchor + ']').show();
344      } else {
345        // Make the first tab active.
346        $tabs.find(".tablinks:first").addClass("active");
347        // Show the first tab content and hide all others on load.
348        $tabs
349          .find(".tabcontent:first")
350          .addClass("active")
351          .show();
352
353        $tabs
354          .find(".tabcontent")
355          .not(":first")
356          .hide();
357      }
358      // On tab click.
359      $tabs.find(".tablinks").on("click", function(e) {
360        e.preventDefault();
361        // Make the clicked tab active.
362        $(this)
363          .addClass("active")
364          .siblings()
365          .removeClass("active");
366
367        // Hide all tab contents and show the active tab content.
368        $tabs.find(".tabcontent").hide();
369        $tabs.find($(this).attr("href")).show();
370      });
371    }
372  };
373})(jQuery);
374
375(function($) {
376  // Work around to recalculate Mobile Slider flickity-viewport on window resize.
377  Drupal.behaviors.mobileSlider = {
378    attach: function(context, settings) {
379      var mobileSlider = $(".mobile-slider", context);
380      var slide = mobileSlider.find(".mobile-slider__slide");
381
382      $(window).on("resize", function() {
383        slide.css("min-height", "0");
384
385        setTimeout(function() {
386          slide.css("min-height", "100%");
387        }, 600);
388      });
389    }
390  };
391})(jQuery);