https://www.hbart.fr/templates/hbart/js/fonctions_site.js

1/* PRINCIPES DU FONTIONS SITE
2- toutes les instructions habituelles doivent aller dans site_init();
3- les instructions liées à smoothstate doivent s'initialiser dans site_onPageLoad()
4- pour le chgt de page en AJAX, caler des update / restart dans le site_onAjaxLoad
5*/
6
7/*//  DEMARRAGE ///////////////////////////////*/
8$.jgo.prm = {
9  defaultActiveClass: 'active',
10  replaceSVGtoPNG: true,
11  aspireSVG: true,
12  handleIframeWmode: true,
13  watchScroll: true,
14  scrollPoint: $('header').height()
15};
16
17$(document).ready(function () {
18  $.jgo.init(); // init le .scrolled
19  site_init();
20  
21  // MiniScript Additionels
22  $('.txt_masque').each(function () {
23    const height = $(this).height(); // on récupère la hauteur de l'élément
24    $(this).css('margin-bottom', `-${height}px`); // on injecte à l'élément une margin negative = à sa hauteur (let height)
25  });
26
27  $('.encart_select').hover(function () {
28    const dataSelect = $(this).attr('data-slide');
29    $(this).addClass('active').siblings().removeClass('active');
30    console.log(dataSelect);
31    $('.encart-slide .screen').removeClass('active');
32    $(`.encart-slide .screen[data-slide="${dataSelect}"]`).addClass('active');
33  });
34});
35
36$(window).on('load', site_onPageLoad);
37
38/*//  INITIALISATION  ///////////////////////////////
39-> tous les codes qui s'executent au démarrage
40*/
41function site_init() {
42  $('body').addClass('ready');
43
44  if (is_iOs()) {
45    $('html').addClass('badios');
46  }
47
48  $('img:not([src])').addClass('lazyload');
49
50  ScrollTrigger.batch(".incrementation", {
51    onEnter: () => finalcountdown(),
52  });
53
54  $('nav.nav > ul').on('scroll', function () {
55    $('header').toggleClass('is-scrolled', $('nav.nav > ul').scrollTop() > 0);
56  });
57
58  if ($(window).width() <= 1025) {
59    $('.domaines > li > a').on('click', function (e) {
60      e.preventDefault();
61    });
62  }
63
64  const arrowRotate = document.querySelectorAll('.arrowRotate');
65  arrowRotate.forEach(flecheDeg => {
66    flecheDeg.addEventListener('click', () => {
67      flecheDeg.classList.toggle('aRotate');
68    });
69  });
70
71  $("#btMenu").on('click', function () {
72    $('body').toggleClass("menu-active");
73  });
74
75  $('input[name="ouvre-footer"]').off('change').on('change', function () {
76    $('html, body').scrollTop($(document).height());
77  });
78
79  initSwiper();
80  handleAncreAccueil();
81}
82
83checkBrowser();
84function checkBrowser() {
85  
86  // Get the user-agent string
87  let userAgentString = 
88  navigator.userAgent;
89  
90  // Detect Chrome
91  let chromeAgent = 
92  userAgentString.indexOf("Chrome") > -1;
93    
94  // Detect Safari
95  let safariAgent = 
96  userAgentString.indexOf("Safari") > -1;
97  
98  // Discard Safari since it also matches Chrome
99  if ((chromeAgent) && (safariAgent)) 
100  safariAgent = false;
101  
102  if(safariAgent == 1) {
103    $('body').addClass('safari');
104    console.log('safari');
105  } else{
106  
107    $("html").mousemove(function(event) {
108      var xPos = (event.clientX/$(window).width())-0.5;
109      var yPos = (event.clientY/$(window).height())-0.5;
110      var bg = ($("body"),
111            $("#mousecursor--bg")) 
112      , cursor = $("#mousecursor--small");
113        var elements = $("[data-hover], a, button, .bt, .bt2, .go, .hov, input, textarea");
114        gsap.to(bg, {
115          duration: 1,
116          display: "block",
117          top: event.clientY,
118          left: event.clientX,
119          ease: "elastic.out(0.1, 0.1)"
120        }),
121          gsap.to(cursor, {
122          duration: .02,
123          display: "block",
124          top: event.clientY,
125          left: event.clientX
126        }),
127          elements.on("mouseenter", function() {
128          $(bg).addClass("hover"),
129            $(cursor).addClass("hover")
130        }),
131          elements.on("mouseleave", function() {
132          $(bg).removeClass("hover"),
133            $(cursor).removeClass("hover")
134        })
135        
136        
137      });
138  }
139  
140}
141
142
143function addLazyLoadingToAllIframes() {
144  const iframes = document.querySelectorAll('iframe');
145  iframes.forEach(function (iframe) {
146    iframe.setAttribute('loading', 'lazy');
147  });
148}
149
150document.addEventListener("DOMContentLoaded", function () {
151  addLazyLoadingToAllIframes();
152});
153
154if ($.jgo.elementExiste('[selected="selected"]')) {
155  $("html, body").scrollTop($("#ancre").offset().top - 250); 
156}
157
158function initSwiper() {
159  new Swiper(
160    ".diaporama, .diaporama--accueil , .diaporama--laius, .diaporama--fond",
161    {
162      pagination: false,
163      createElements: true,
164      loop:true,
165      lazy: { loadOnTransitionStart: true, loadPrevNext: true },
166      navigation: false,
167      speed: 600,

168      effect: "fade",
169      fadeEffect: { crossFade: true },
170      autoplay: {
171        delay: 5000,
172        disableOnInteraction: false,
173      },
174    }
175  );
176  
177const diaporamas = document.querySelectorAll('.diaporama_annonces');
178  diaporamas.forEach((diaporama) => {
179    const nextBtn = diaporama.querySelector('.swiper-button-next');
180    const prevBtn = diaporama.querySelector('.swiper-button-prev');
181
182    new Swiper(diaporama, {
183      pagination: false,
184      createElements: true,
185      loop: true,
186      lazy: { loadOnTransitionStart: true, loadPrevNext: true },
187      speed: 700,
188      effect: "fade",
189      fadeEffect: { crossFade: true },
190      autoplay: false,
191      navigation: {
192        nextEl: nextBtn,
193        prevEl: prevBtn,
194      },
195    });
196  });
197  
198new Swiper('.slide-logos', {
199    loop: true,
200    slidesPerView: 3,
201    spaceBetween: 10,
202    // Active le swipe tactile
203    allowTouchMove: true,
204    centerInsufficientSlides: true, // centre aussi quand le nombre de slides est insuffisant
205    lazy: { 
206      loadOnTransitionStart: true, 
207      loadPrevNext: true 
208    },
209  autoplay: {
210    delay: 6000,
211    disableOnInteraction: false,
212  },
213  pagination: {
214    el: ".swiper-pagination",
215    clickable: true,
216  },
217  navigation: {
218    nextEl: ".swiper-button-next",
219    prevEl: ".swiper-button-prev",
220  },
221    // Paramètres responsive
222    breakpoints: {
223      800: {
224        slidesPerView: 6,
225        spaceBetween: 20,
226      },
227    },
228  });
229
230  new Swiper('.slide-vignettes', {
231    loop: true,
232    slidesPerView: 2,
233    spaceBetween: 5,
234    // Active le swipe tactile
235    allowTouchMove: true,
236    centerInsufficientSlides: true, // centre aussi quand le nombre de slides est insuffisant
237    lazy: { 
238    loadOnTransitionStart: true, 
239    loadPrevNext: true 
240  },
241  autoplay: {
242    delay: 6000,
243    disableOnInteraction: false,
244  },
245  pagination: {
246    el: ".swiper-pagination",
247    clickable: true,
248  },
249  navigation: {
250    nextEl: ".swiper-button-next",
251    prevEl: ".swiper-button-prev",
252  },
253    // Paramètres responsive
254    breakpoints: {
255      800: {
256        slidesPerView: 2,
257        spaceBetween: 20,
258      },
259    },
260  });
261  
262new Swiper(".swiper-x1", {
263  slidesPerView: 1,
264  spaceBetween: 30,
265  loop:true,
266  lazy: { 
267    loadOnTransitionStart: true, 
268    loadPrevNext: true 
269  },
270  autoplay: {
271    delay: 6000,
272    disableOnInteraction: false,
273  },
274  pagination: {
275    el: ".swiper-pagination",
276    clickable: true,
277  },
278  navigation: {
279    nextEl: ".swiper-button-next",
280    prevEl: ".swiper-button-prev",
281  },
282  breakpoints: {
283    1023: {
284      slidesPerView: 1,
285      spaceBetween: 10,
286    },
287  },
288});
289
290  new Swiper(".swiper-x1-x2-x1", {
291    slidesPerView: 1, // Default to 1 slide per view
292    spaceBetween: 30,
293    loop:true,
294    lazy: {
295      loadOnTransitionStart: true,
296      loadPrevNext: true,
297    },
298    autoplay: {
299      delay: 6000,
300      disableOnInteraction: false,
301    },
302    pagination: {
303      el: ".swiper-pagination",
304      clickable: true,
305    },
306    navigation: {
307      nextEl: ".swiper-button-next",
308      prevEl: ".swiper-button-prev",
309    },
310    breakpoints: {
311      700: {
312        slidesPerView: 2, // From 450px to 1023px, 2 slides per view
313        spaceBetween: 20,
314      },
315      1024: {
316        slidesPerView: 1, // From 1024px and above, back to 1 slide per view
317        spaceBetween: 30,
318      },
319    },
320  });
321
322  new Swiper(".swiper-x3", {
323    slidesPerView: 1,
324    // slidesPerGroup: 3,
325    spaceBetween: 30,
326    lazy: { loadOnTransitionStart: true, loadPrevNext: true },
327    lazy: {
328      loadPrevNext: true,
329    },
330    autoplay: {
331      delay: 6000,
332      disableOnInteraction: false,
333    },
334    pagination: {
335      el: ".swiper-pagination",
336      clickable: true,
337    },
338    navigation: {
339      nextEl: ".swiper-button-next",
340      prevEl: ".swiper-button-prev",
341    },
342    breakpoints: {
343      1023: {
344        slidesPerView: 3,
345        spaceBetween: 30,
346      },
347    },
348  });
349}
350
351const tables = document.querySelectorAll(".txt_contenu table");
352
353tables.forEach(function(table) {
354  const cells = table.querySelectorAll("td");
355  for (let i = 0; i < cells.length; i++) {
356    if (cells[i].offsetHeight > 150) {
357      table.classList.add("table_overflow_x");
358      break; // On sort de la boucle pour ce tableau dès qu'une cellule dépasse 150px
359    }
360  }
361});
362
363ScrollTrigger.batch(".vsy", {
364  toggleClass: "view-on",
365  once: true
366});
367
368function handleAncreAccueil() {
369  if (!$('nav.nav_multi > ul.sites.panel.active > li').eq(0).hasClass('active')) {
370    const href = $('nav.nav_multi > ul.sites.panel.active > li:first-child > a').attr('href');
371    $('nav.nav_multi > ul.sites.panel.active > li:first-child > a').attr('href', href + '#accueil');
372  }
373
374  const ancre = $(location).attr('hash');
375  if (ancre === "#accueil") {
376    $('.intro').remove();
377    ScrollTrigger.refresh();
378  }
379}
380
381function site_onPageLoad() {
382  $('body').addClass('loaded');
383}
384
385function site_onAjaxLoad() {
386  tryRefresh($.site.imgback.update, 'img back update');
387}
388
389function tryRefresh(fn, msg) {
390  try {
391    fn();
392  } catch (e) {
393    console.log('REFRESH ERR. : ' + msg + ' - ' + e);
394  }
395}
396
397function is_iOs() {
398  return navigator.userAgent.match('Version/7.0');
399}
400
401//gestion suppression de l'intro au scroll
402if ($('body').hasClass('accueil')) {
403  $(window).scroll(function () {
404    if ($(window).scrollTop() >= $(window).height() && $.jgo.elementExiste('.intro')) {
405      $('.intro').remove();
406      $('html, body').scrollTop(0);
407      ScrollTrigger.refresh()
408      $.jgo.prm.scrollPoint = $('#accueil').offset().top;
409    }
410  });
411}