https://20km.ch/templates/shaper_helixultimate/js/custom.js

1function OpenInNewTab(url) {
2
3  var win = window.open(url, '_blank');
4  win.focus();
5}
6
7// Find all YouTube videos
8var $allVideos = jQuery("iframe[src^='//www.youtube.com']"),
9
10  // The element that is fluid width
11  $fluidEl = jQuery("body");
12
13// Figure out and save aspect ratio for each video
14$allVideos.each(function () {
15
16  jQuery(this)
17    .data('aspectRatio', this.height / this.width)
18
19    // and remove the hard coded width/height
20    .removeAttr('height')
21    .removeAttr('width');
22
23});
24
25// When the window is resized
26jQuery(window).resize(function () {
27
28  var newWidth = $fluidEl.width();
29
30  // Resize all videos according to their own aspect ratio
31  $allVideos.each(function () {
32
33    var $el = jQuery(this);
34    $el
35      .width(newWidth)
36      .height(newWidth * $el.data('aspectRatio'));
37
38  });
39
40  // Kick off one resize to fix all videos on page load
41}).resize();
42
43
44document.addEventListener("DOMContentLoaded", () => {
45
46  /* rends tous les tableaux responsive */
47
48
49  let allTables2 = document.querySelectorAll("table:not(.tableau)");
50
51  allTables2.forEach(function (tableTag2) {
52
53    tableTag2.classList.add("table-responsive");
54    tableTag2.style.width = "unset";
55  });
56  var pageHasEntryImage = document.querySelector('.entry-image');
57  var pageHasEntryImageIMG = document.querySelector('.entry-image img');
58
59  let spMegamenuParent = document.getElementsByClassName('sp-megamenu-parent');
60  let spMainBody = document.getElementById('sp-main-body');
61  var pageHasEntryHeader = document.querySelector('.entry-header');
62
63
64  if (pageHasEntryImage) {
65    spMegamenuParent[0].classList.add("colorWhiteOverride");
66    spMainBody.classList.add("colorWhiteOverride");
67    if (pageHasEntryHeader) {
68      if ((pageHasEntryHeader.innerText.length > 0)) {
69        // pageHasEntryImageIMG.classList.add("marginTopUpFix");
70
71      }
72    }
73  } else {
74
75    if (pageHasEntryHeader) {
76      if (!(pageHasEntryHeader.innerText.length > 0)) {
77        spMainBody.classList.add("margin-top-reset");
78
79      }
80    } else {
81      spMainBody.classList.add("margin-top-reset");
82
83
84    }
85
86  }
87
88});
89
90document.addEventListener('click', function (e) {
91  e = e || window.event;
92  var target = e.target || e.srcElement;
93
94  if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
95    if (target.hasAttribute('data-target')) {
96      var m_ID = target.getAttribute('data-target');
97      document.getElementById(m_ID).classList.add('open');
98      e.preventDefault();
99    }
100  }
101
102  // Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
103  if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
104    var modal = document.querySelector('[class="modal open"]');
105    modal.classList.remove('open');
106    e.preventDefault();
107  }
108}, false);
109
110/*navigator.sayswho= (function(){
111    var ua= navigator.userAgent;
112    var tem; 
113    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
114    if(/trident/i.test(M[1])){
115        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
116        return 'IE '+(tem[1] || '');
117    }
118    if(M[1]=== 'Chrome'){
119        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
120        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
121    }
122    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
123    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
124    return M.join(' ');
125})();
126
127console.log(navigator.sayswho);*/
128
129/*--------------------------------------------------------*
130  | MENU MOBILE                                            |
131  | permet d'afficher le menu sur le natel et de cliquer   |
132  | sur le sous-menu (ouvrir et fermer)                    |
133  *-------------------------------------------------------*/
134$("#sp-menu-principal").ready(function () {
135
136
137  /* afficher les sous-menus */
138  $(".offcanvas-inner").on("click", function (event) {
139
140    // récupérer le menu cliqué
141    var menuClick = event.target.parentElement.className;
142    var showMenuClick = event.target.nextElementSibling.className;
143    var menuClass = convertToClass(menuClick);
144    var contientClass = menuClass.indexOf(".menu-parent-open");
145
146    // afficher le sous-menu cliqué
147    if (event.target.className == "menu-separator " && contientClass === -1) {
148      $(menuClass).addClass("menu-parent-open");
149      $(menuClass).children("." + showMenuClick).css("display", "block");
150      $(menuClass).children("." + showMenuClick).css("display", "block");
151    }
152
153    // fermer le sous-menu cliqué s'il est ouvert
154    if ((event.target.className == "menu-separator ") && contientClass === 320 || contientClass === 576) {
155      $(menuClass).children("." + showMenuClick).css("display", "none");
156      $(menuClass).removeClass("menu-parent-open");
157    }
158  });
159});
160

161/* récupérer le nom de la classe et la convertir en classe js css */
162function convertToClass(menuClick) {
163  const arrClass = menuClick.split(" ");
164  let classMenuClick = "";
165
166  for (var nbClass = 0; nbClass < arrClass.length; nbClass++) {
167    classMenuClick += classMenuClick + "." + arrClass[nbClass];
168  }
169
170  return classMenuClick;
171}
172
173
174/*$(document).ready(function() {
175	 
176     
177	 // ajouter un espace entre le contenu et le menu (le menu fixe couvre une partie du contenu)
178	 var addEspaceTop = $("#sp-fil-ariane").next().attr("id");
179	  $("#"+addEspaceTop).css("padding-top","260px")
180	 
181});*/
182
183$(document).ready(function () {
184  
185  // Vérifier si les balises existent
186  if ($('.article-header h1[itemprop="headline"]').length > 0 || $('h2:contains("Parcours & tarifs")').length > 0 || $("#sp-fil-ariane").next().attr("id") == "sp-main-body") {
187
188    // Balises existent, ajouter un espace de 260px
189    var addEspaceTop = $("#sp-fil-ariane").next().attr("id");
190
191    if ($("#sp-fil-ariane").next().attr("id") == "sp-top-blanc-2" || $("#sp-fil-ariane").next().attr("id") == "sp-slider") {
192      $("#" + addEspaceTop).css("padding-top", "125px");
193    } else {
194      $("#" + addEspaceTop).css("padding-top", "190px");
195    }
196  } else {
197    // Balises n'existent pas, ajouter un espace 
198    var addEspaceTop = $("#sp-fil-ariane").next().attr("id");
199    $("#" + addEspaceTop).css("padding-top", "125px");
200  }
201});
202
203/* ANIMATION VENIR AUX 20KM */
204// for storing mouse x / y position
205var mousePos = {
206  x: -10,
207  y: -10
208};
209
210// select the .box DOM elements
211var boxElements = document.getElementsByClassName('box');
212
213// create an array of objects to store the box elements and their image
214// positions
215var boxes = [];
216for (var i = 0; i < boxElements.length; i++) {
217  boxes.push({
218    el: boxElements[i],
219    targetX: 0,
220    targetY: 0,
221    prevX: 0,
222    prevY: 0,
223    x: 0,
224    y: 0,
225    left: boxElements[i].offsetLeft,
226    top: boxElements[i].offsetTop,
227    size: boxElements[i].offsetWidth
228  })
229}
230
231function mousemove(e) {
232  // update mouse position
233  mousePos.x = e.pageX;
234  mousePos.y = e.pageY;
235}
236
237function updateBox(box) {
238  // check if mouse is in box area
239  if (mousePos.x > box.left && mousePos.x < (box.left + box.size)
240    && mousePos.y > box.top && mousePos.y < (box.top + box.size)) {
241    // the mouse is in the space over the box - update the box image target position dependent on how far the mouse position is from the center of the box (box size/2)
242    box.targetX = (box.size / 2 - (mousePos.x - box.left)) * 0.1;
243    box.targetY = (box.size / 2 - (mousePos.y - box.top)) * 0.1;
244  } else {
245    // otherwise the box isn't being hovered, its target is 0
246    box.targetX = 0;
247    box.targetY = 0;
248  }
249
250  // update the image element position by lerping position to target
251  // https://codepen.io/rachsmith/post/animation-tip-lerp
252  box.x += (box.targetX - box.x) * 0.2;
253  box.y += (box.targetY - box.y) * 0.2;
254
255  // check that the values aren't really small already, to overcome javascripts poor handling of high precision math
256  if (Math.abs(box.x) < .001) box.x = 0;
257  if (Math.abs(box.y) < .001) box.y = 0;
258
259  // only update CSS if the position has changed since last loop
260  if (box.prevX !== box.x && box.prevY !== box.y) {
261    // update css of image element
262    box.el.children[0].children[0].style.transform = 'translate3d(' + box.x + 'px, ' + box.y + 'px, 0)';
263  }
264
265  // update prev values for next comparison
266  box.prevX = box.x;
267  box.prevY = box.y;
268}
269
270function loop() {
271  // in the loop - updated each of the boxes
272  for (var i = 0, l = boxes.length; i < l; i++) {
273    updateBox(boxes[i]);
274  }
275  requestAnimationFrame(loop);
276}
277
278function resize() {
279  // the box positions/sizes have updated on resize, so they need to be
280  // reset
281  for (var i = 0; i < boxes.length; i++) {
282    boxes[i].left = boxes[i].el.offsetLeft;
283    boxes[i].top = boxes[i].el.offsetTop;
284    boxes[i].size = boxes[i].el.offsetWidth;
285  }
286}
287
288// attach the mouse event listener to the document
289document.addEventListener('mousemove', mousemove);
290// listen for resize event, so box sizes can be updated
291window.addEventListener('resize', resize);
292// run the animation loop
293loop();
294
295
296
297/*--------------------------------------------------------*
298  | MENU MOBILE                                            |
299  | permet d'afficher le menu sur le natel et de cliquer   |
300  | sur le sous-menu (ouvrir et fermer)                    |
301  *-------------------------------------------------------*/
302
303// Script.js
304
305// Fonction pour gérer le zoom in et out
306function handleZoomEffects() {
307  const newsletterSection = document.getElementById('newsletter');
308
309  // Vérifie si l'ancre contient l'ID "newsletter" dans l'URL
310  if (window.location.hash === '#newsletter') {
311    // Ajoute la classe pour le zoom in
312    newsletterSection.classList.add('zoom-in');
313
314    // Après un certain délai, ajoute la classe pour le zoom out
315    setTimeout(function () {
316      newsletterSection.classList.remove('zoom-in');
317      newsletterSection.classList.add('zoom-out');
318    }, 3000); // Délai de 3 secondes
319  }
320}
321
322// Appelle la fonction au chargement du script
323handleZoomEffects();
324
325// Ajoute un gestionnaire d'événements pour détecter les changements d'URL (navigation interne)
326window.addEventListener('hashchange', handleZoomEffects);
327
328
329
330
331