448 lines
14 KiB
TypeScript
448 lines
14 KiB
TypeScript
import Swiper from "swiper";
|
|
import { Autoplay, Keyboard, Navigation, Pagination } from "swiper/modules";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Define a multiplier according to the window size.
|
|
|
|
function getWindowWidth() {
|
|
return window.innerWidth;
|
|
}
|
|
window.onresize = getWindowWidth;
|
|
|
|
// SWIPER
|
|
const swiperConfig = {
|
|
"swiper-banner": {
|
|
modules: [Pagination, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
loop: true,
|
|
direction: "vertical",
|
|
pagination: {
|
|
el: ".swiper-banner-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"" + className + " bnt btn-link\" title=\"Aller à la slide " + index + "\"></button>";
|
|
},
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
on: {
|
|
init: function (swiper: Swiper) {
|
|
const slides = swiper.slides;
|
|
const bullets = swiper.pagination.bullets as HTMLElement[];
|
|
|
|
bullets.forEach(function (element, index) {
|
|
// Apply the picture to the bullet
|
|
const slidePicture = slides[index].querySelector("#background-" + index) as HTMLImageElement;
|
|
element.style.backgroundImage = "url('" + slidePicture.src + "')";
|
|
element.style.backgroundPosition = "center";
|
|
element.style.backgroundRepeat = "no-repeat";
|
|
element.style.backgroundSize = "cover";
|
|
// Bullet superposition
|
|
element.style.zIndex = String(100 - index);
|
|
element.style.left = String(2.5 * index) + "rem";
|
|
});
|
|
}
|
|
}
|
|
},
|
|
"swiper-teams": {
|
|
modules: [Autoplay, Navigation, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-teams-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"" + className + "\" title=\"Aller à la slide " + index + "\"></button>";
|
|
},
|
|
},
|
|
},
|
|
"swiper-news": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-news-button-next",
|
|
prevEl: ".swiper-news-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.3,
|
|
},
|
|
768: {
|
|
slidesPerView: 2.3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-we-move": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.3,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next-custom",
|
|
prevEl: ".swiper-button-prev-custom",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2.3,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3.3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-we-hire": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1.2,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".video-next",
|
|
prevEl: ".video-prev",
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.2,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
},
|
|
},
|
|
"swiper-we-hire-testimonials": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1.2,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".testi-next",
|
|
prevEl: ".testi-prev",
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.2,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
},
|
|
},
|
|
"swiper-year": {
|
|
modules: [Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
slideToClickedSlide: true,
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 0,
|
|
},
|
|
1200: {
|
|
slidesPerView: 1.3,
|
|
spaceBetween: 0,
|
|
},
|
|
},
|
|
},
|
|
"swiper-sites-map": {
|
|
centeredSlides: true,
|
|
modules: [Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
992: {
|
|
slidesPerView: 1,
|
|
},
|
|
1200: {
|
|
slidesPerView: 1.3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-sites-pictures": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".swiper-sites-pictures-button-next",
|
|
prevEl: ".swiper-sites-pictures-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.1,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
1200: {
|
|
slidesPerView: 1.3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-sites-words": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-sites-words-button-next",
|
|
prevEl: ".swiper-sites-words-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
992: {
|
|
centeredSlides: false,
|
|
slidesPerView: 2,
|
|
},
|
|
},
|
|
},
|
|
"swiper-sites-brands": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: "auto",
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 1.1,
|
|
spaceBetween: 0,
|
|
},
|
|
768: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
1200: {
|
|
slidesPerView: 1.3,
|
|
},
|
|
},
|
|
},
|
|
"swiper-commitments-life": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-commitments-life-button-next",
|
|
prevEl: ".swiper-commitments-life-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
992: {
|
|
slidesPerView: 2,
|
|
},
|
|
},
|
|
},
|
|
"swiper-commitments-earth": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-commitments-earth-button-next",
|
|
prevEl: ".swiper-commitments-earth-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
992: {
|
|
slidesPerView: 2,
|
|
},
|
|
},
|
|
},
|
|
"swiper-commitments-testimonials": {
|
|
modules: [Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1.1,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-commitments-testimonials-button-next",
|
|
prevEl: ".swiper-commitments-testimonials-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
breakpoints: {
|
|
992: {
|
|
slidesPerView: 2,
|
|
centeredSlides: false,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>;
|
|
window.__SLIDERS = new Map<string,SwiperSlider>();
|
|
|
|
for (const htmlElt of swiperVol) {
|
|
if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
|
|
throw new Error(`Undefined swiper id ${htmlElt.id}`);
|
|
}
|
|
// @ts-ignore
|
|
const swiper = new Swiper(htmlElt, swiperConfig[htmlElt.id as keyof typeof swiperConfig]);
|
|
window.__SLIDERS.set(
|
|
htmlElt.id,
|
|
{
|
|
element: htmlElt,
|
|
swiper: swiper,
|
|
});
|
|
if (swiper.el.id === "swiper-teams") {
|
|
const btnPlayPause = document.querySelector(".swiper-pagination-playpause");
|
|
btnPlayPause?.addEventListener("click", function () {
|
|
const svgs = btnPlayPause.querySelectorAll("svg");
|
|
svgs?.forEach(svg => {
|
|
svg.classList.toggle("d-none");
|
|
});
|
|
(swiper.autoplay.paused) ? swiper.autoplay.start() : swiper.autoplay.pause();
|
|
});
|
|
}
|
|
}
|
|
|
|
// GoToTop Button
|
|
const backToTopBtn = document.getElementById("backtotop")as HTMLElement;
|
|
window.onscroll = function () {
|
|
if (
|
|
document.body.scrollTop > 50 ||
|
|
document.documentElement.scrollTop > 50
|
|
) {
|
|
backToTopBtn.style.display = "flex";
|
|
} else {
|
|
backToTopBtn.style.display = "none";
|
|
}
|
|
};
|
|
backToTopBtn.addEventListener("click", function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
});
|
|
|
|
// * Video frames.
|
|
const videoFrameList = document.querySelectorAll(
|
|
".video-frame"
|
|
) as NodeListOf<HTMLLinkElement>;
|
|
for (const videoLink of videoFrameList) {
|
|
if (!videoLink.dataset.newtab) {
|
|
if (!videoLink.dataset.type) {
|
|
throw new Error("Missing dataset type");
|
|
}
|
|
if (!videoLink.dataset.frame) {
|
|
throw new Error("Missing dataset frame");
|
|
}
|
|
// @ts-ignore
|
|
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
|
|
|
|
const newIframe = document.createElement("iframe");
|
|
newIframe.frameBorder = "0";
|
|
newIframe.allow = "fullscreen";
|
|
newIframe.width = "1920px";
|
|
newIframe.height = "1080px";
|
|
newIframe.setAttribute("allowfullscreen", "allowfullscreen");
|
|
|
|
// @ts-ignore
|
|
const instance = new FsLightbox();
|
|
instance.props.sources = [newIframe];
|
|
|
|
setTimeout(() => {
|
|
videoLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
|
|
// * This comes fslightbox lib
|
|
// @ts-ignore
|
|
instance.open();
|
|
setTimeout(function () {
|
|
// @ts-ignore
|
|
newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
|
|
? String(videoLink.href)
|
|
: String(videoLink.dataset.frame);
|
|
}, 50);
|
|
return false;
|
|
});
|
|
}, 300);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Bootstrap Carousel
|
|
// Set all carousel items to the same height
|
|
export function carouselNormalization(carouselId: string) {
|
|
const heights = [] as number[]; //create empty array to store height values
|
|
let tallest = 0; //create variable to make note of the tallest slide
|
|
|
|
const carouselItems = document.getElementById(carouselId)?.getElementsByClassName("carousel-item") as HTMLCollectionOf<HTMLElement>;
|
|
if (carouselItems === undefined) {
|
|
return;
|
|
}
|
|
for (const carouselItem of carouselItems) {
|
|
let was_show = 0;
|
|
// We need to display all elements to get their height, but we also need to remember which one was displayed first.
|
|
if (carouselItem.classList.contains("active")) {
|
|
was_show = 1;
|
|
} else {
|
|
carouselItem.classList.add("active");
|
|
was_show = 0;
|
|
}
|
|
|
|
heights.push(carouselItem.offsetHeight);
|
|
|
|
if (was_show == 0) {
|
|
carouselItem.classList.remove("active");
|
|
}
|
|
}
|
|
|
|
tallest = Math.max.apply(null, heights); //cache largest value
|
|
for (const carouselItem of carouselItems) {
|
|
carouselItem.style.minHeight = tallest + "px";
|
|
}
|
|
}
|