https://epixtraining.com/scripts/app.js

1document.addEventListener('DOMContentLoaded', function () {
2  function initSplide(selector, options) {
3    if (typeof Splide === 'undefined' || !document.querySelector(selector)) {
4      return;
5    }
6    var splide = new Splide(selector, options);
7    splide.mount();
8  }
9
10  initSplide('#splide1', {
11    type: 'loop',
12    drag: 'free',
13    autoplay: true,
14    focus: 'left',
15    pagination: false,
16    perPage: 4,
17    perMove: 1,
18    classes: {
19      prev: 'splide__arrow--prev left-arr',
20      next: 'splide__arrow--next right-arr'
21    }
22  });
23
24  initSplide('#splide2', {
25    type: 'loop',
26    drag: 'free',
27    autoplay: true,
28    focus: 'left',
29    pagination: false,
30    perPage: 5,
31    breakpoints: {
32      575.98: {
33        perPage: 2
34      }
35    },
36    perMove: 1,
37    classes: {
38      prev: 'splide__arrow--prev left-arr',
39      next: 'splide__arrow--next right-arr'
40    }
41  });
42
43  var hamBtn = document.getElementById('ham-btn');
44  if (hamBtn) {
45    hamBtn.addEventListener('click', function () {
46      document.body.classList.toggle('open');
47    });
48  }
49
50  document.querySelectorAll('.menu li').forEach(function (item) {
51    item.addEventListener('click', function () {
52      document.body.classList.toggle('open');
53    });
54  });
55
56  function bindModal(config) {
57    var trigger = document.querySelector(config.trigger);
58    var overlays = document.querySelectorAll(config.overlaySelector);
59    var modals = document.querySelectorAll(config.modalSelector);
60    var closes = document.querySelectorAll(config.closeSelector);
61    var allTargets = document.querySelectorAll(config.overlaySelector + ', ' + config.modalSelector);
62
63    function addState() {
64      allTargets.forEach(function (el) {
65        el.classList.add(config.activeClass);
66      });
67    }
68
69    function removeState() {
70      allTargets.forEach(function (el) {
71        el.classList.remove(config.activeClass);
72      });
73    }
74
75    if (trigger) {
76      trigger.addEventListener('click', addState);
77    }
78
79    closes.forEach(function (btn) {
80      btn.addEventListener('click', removeState);
81    });
82
83    overlays.forEach(function (overlay) {
84      overlay.addEventListener('click', function (event) {
85        var clickedInsideModal = false;
86        modals.forEach(function (modal) {
87          if (modal.contains(event.target) || event.target === modal) {
88            clickedInsideModal = true;
89          }
90        });
91
92        if (!clickedInsideModal) {
93          removeState();
94        }
95      });
96    });
97  }
98
99  bindModal({
100    trigger: '#terms',
101    overlaySelector: '.modal-overlay',
102    modalSelector: '.modal',
103    closeSelector: '.close-modal',
104    activeClass: 'active'
105  });
106
107  bindModal({
108    trigger: '#faq',
109    overlaySelector: '.modal-overlay-2',
110    modalSelector: '.modal-2',
111    closeSelector: '.close-modal-2',
112    activeClass: 'active-2'
113  });
114
115  bindModal({
116    trigger: '#contact-form',
117    overlaySelector: '.modal-overlay-3',
118    modalSelector: '.modal-3',
119    closeSelector: '.close-modal-3',
120    activeClass: 'active-3'
121  });
122
123  // Studio picker modal (Essayer + Achetez)
124  var studioOverlay = document.querySelector('.modal-overlay-4');
125  var studioModal = document.querySelector('.modal-4');
126  var studioClose = document.querySelector('.close-modal-4');
127
128  function openStudioModal() {
129    if (studioOverlay) studioOverlay.classList.add('active-4');
130    if (studioModal) studioModal.classList.add('active-4');
131  }
132
133  function closeStudioModal() {
134    if (studioOverlay) studioOverlay.classList.remove('active-4');
135    if (studioModal) studioModal.classList.remove('active-4');
136  }
137
138  document.querySelectorAll('.studio-picker-trigger').forEach(function (btn) {
139    btn.addEventListener('click', openStudioModal);
140  });
141
142  if (studioClose) {
143    studioClose.addEventListener('click', closeStudioModal);
144  }
145
146  if (studioOverlay) {
147    studioOverlay.addEventListener('click', function (event) {
148      if (!studioModal.contains(event.target) && event.target !== studioModal) {
149        closeStudioModal();
150      }
151    });
152  }
153
154  var btnMontreal = document.getElementById('btn-montreal');
155  var btnLaval = document.getElementById('btn-laval');
156
157  if (btnMontreal) {
158    btnMontreal.addEventListener('click', function () {
159      window.location.href = '/buy/montreal/';
160    });
161  }
162
163  if (btnLaval) {
164    btnLaval.addEventListener('click', function () {
165      window.location.href = '/buy/laval/';
166    });
167  }
168});