571 lines
21 KiB
TypeScript
571 lines
21 KiB
TypeScript
import printJS from "print-js";
|
|
import Swiper from "swiper";
|
|
import { Autoplay, Keyboard, Navigation, Pagination } from "swiper/modules";
|
|
import route from "../../modules/route";
|
|
|
|
const laravelRoute = route.methods.route;
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// * VIDEO FRAMES.
|
|
const videoFrameList = document.querySelectorAll(
|
|
".video-frame"
|
|
) as NodeListOf<HTMLLinkElement>;
|
|
for (const videoLink of videoFrameList) {
|
|
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);
|
|
}
|
|
|
|
// * BREEDING CARDS
|
|
const breedingCards = document.getElementsByClassName("breeding-card");
|
|
for (const breedingCard of breedingCards) {
|
|
const breedingCardBtns = breedingCard.getElementsByClassName("btn");
|
|
const breedingCardTexts = breedingCard.getElementsByTagName("p");
|
|
breedingCard.addEventListener("mouseenter", () => {
|
|
for (const breedingCardBtn of breedingCardBtns) {
|
|
breedingCardBtn.classList.remove("btn-quint");
|
|
breedingCardBtn.classList.add("btn-secondary");
|
|
}
|
|
for (const breedingCardText of breedingCardTexts) {
|
|
breedingCardText.classList.remove("text-white");
|
|
}
|
|
});
|
|
breedingCard.addEventListener("mouseleave", () => {
|
|
for (const breedingCardBtn of breedingCardBtns) {
|
|
breedingCardBtn.classList.remove("btn-secondary");
|
|
breedingCardBtn.classList.add("btn-quint");
|
|
}
|
|
for (const breedingCardText of breedingCardTexts) {
|
|
breedingCardText.classList.add("text-white");
|
|
}
|
|
});
|
|
}
|
|
|
|
// * NEWSLETTERS
|
|
// Hide text over the card during the animation
|
|
const newsletterCardWrapper = document.getElementById("club-part-wrapper");
|
|
if (newsletterCardWrapper) {
|
|
const newsletterCardUpperTexts = newsletterCardWrapper.getElementsByClassName("club-text");
|
|
const newsletterCards = newsletterCardWrapper.getElementsByClassName("card");
|
|
for (const newsletterCard of newsletterCards) {
|
|
newsletterCard.addEventListener("mouseenter", () => {
|
|
for (const newsletterCardUpperText of newsletterCardUpperTexts) {
|
|
newsletterCardUpperText.classList.add("fade-hide");
|
|
}
|
|
});
|
|
newsletterCard.addEventListener("mouseleave", () => {
|
|
for (const newsletterCardUpperText of newsletterCardUpperTexts) {
|
|
newsletterCardUpperText.classList.remove("fade-hide");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// Subscribe to newsletter
|
|
const newsletterSubmitBtn = document.getElementById("newsletter-submit");
|
|
const newsletterEmailInput = document.getElementById("newsletter-email") as HTMLInputElement;
|
|
const newsletterEmailCheckbox = document.getElementById("newsletter-agree") as HTMLInputElement;
|
|
const newsletterMessageDiv = document.getElementById("newsletter-message");
|
|
if (newsletterSubmitBtn && newsletterEmailInput && newsletterEmailCheckbox && newsletterMessageDiv) {
|
|
|
|
// Submit the request
|
|
newsletterSubmitBtn.addEventListener("click", function () {
|
|
// Reset error field
|
|
newsletterMessageDiv.classList.remove("text-success");
|
|
newsletterMessageDiv.classList.remove("text-danger");
|
|
newsletterMessageDiv.textContent = "";
|
|
|
|
const addSingleOptinRoute = laravelRoute("fo.add-single-optin");
|
|
if (addSingleOptinRoute === null) {
|
|
return;
|
|
}
|
|
window.axios.post(addSingleOptinRoute, {
|
|
email: newsletterEmailInput.value,
|
|
agree: newsletterEmailCheckbox.checked
|
|
})
|
|
.then(function (response) {
|
|
newsletterMessageDiv.classList.remove("d-none");
|
|
newsletterMessageDiv.classList.add("text-success");
|
|
newsletterMessageDiv.textContent = String(response.data);
|
|
newsletterEmailInput.value = "";
|
|
})
|
|
.catch(function (error) {
|
|
newsletterMessageDiv.classList.remove("d-none");
|
|
newsletterMessageDiv.classList.add("text-danger");
|
|
if (error.response.status == 422) {
|
|
const errors = error.response.data.errors;
|
|
for (const errorKey in errors) {
|
|
const errorP = document.createElement("p");
|
|
errorP.classList.add("m-0");
|
|
errorP.textContent = errors[errorKey];
|
|
newsletterMessageDiv.appendChild(errorP);
|
|
}
|
|
} else {
|
|
newsletterMessageDiv.textContent = error.response.data;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// SWIPER
|
|
const swiperConfig = {
|
|
"swiper-recruitment-offers": {
|
|
modules: [Navigation, Keyboard, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1.3,
|
|
initialSlide: 0,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-recruitment-offers-button-next",
|
|
prevEl: ".swiper-recruitment-offers-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-recruitment-offers-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"btn btn-tertiary rounded-circle border-0 mx-2 p-0 " + className + "\" title=\"Aller à la slide " + index + "\"></button>";
|
|
},
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 25,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 35,
|
|
},
|
|
992: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 55,
|
|
},
|
|
},
|
|
},
|
|
"swiper-recruitment-jobs": {
|
|
modules: [Navigation, Keyboard, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1.3,
|
|
centeredSlides: true,
|
|
spaceBetween: 10,
|
|
navigation: {
|
|
nextEl: ".swiper-recruitment-jobs-button-next",
|
|
prevEl: ".swiper-recruitment-jobs-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-recruitment-jobs-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"btn btn-tertiary rounded-circle border-0 mx-2 p-0 " + className + "\" title=\"Aller à la slide " + index + "\"></button>";
|
|
},
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2.3,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
initialSlide: 1,
|
|
},
|
|
},
|
|
},
|
|
"swiper-recruitment-news-corporates": {
|
|
modules: [Navigation, Keyboard, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 3,
|
|
spaceBetween: 1,
|
|
slidesPerGroup: 3,
|
|
navigation: {
|
|
nextEl: ".swiper-recruitment-news-corporates-button-next",
|
|
prevEl: ".swiper-recruitment-news-corporates-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
pagination: {
|
|
el: ".swiper-recruitment-news-corporates-pagination",
|
|
clickable: true,
|
|
type: "bullets",
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"btn btn-tertiary rounded-circle border-0 mx-2 p-0 " + className + "\" title=\"Aller à la slide " + index + "\"></button>";
|
|
},
|
|
},
|
|
},
|
|
"swiper-main-slides": {
|
|
modules: [Autoplay, Navigation, Keyboard],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
spaceBetween: 0,
|
|
autoplay: {
|
|
delay: 15000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: ".swiper-main-slides-button-next",
|
|
prevEl: ".swiper-main-slides-button-prev",
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
"swiper-demarche": {
|
|
modules: [Navigation, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: ".swiper-demarche-button-next",
|
|
prevEl: ".swiper-demarche-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-demarche-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"" + className + "\" title=\"Aller à la slide " + (index + 1) + "\"></button>";
|
|
},
|
|
},
|
|
},
|
|
"swiper-commitments": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: ".swiper-commitments-button-next",
|
|
prevEl: ".swiper-commitments-button-prev",
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 5,
|
|
},
|
|
},
|
|
},
|
|
"swiper-cards-commitments": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1.3,
|
|
navigation: {
|
|
nextEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-next",
|
|
prevEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-prev",
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2.5,
|
|
},
|
|
992: {
|
|
slidesPerView: 4,
|
|
},
|
|
},
|
|
},
|
|
"swiper-historicalmilestone-desktop": {
|
|
modules: [Autoplay, Navigation],
|
|
grabCursor: true,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
slidesPerView: 1,
|
|
autoplay: {
|
|
delay: 15000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: "#story-historical-milestones .swiper-historicalmilestone-desktop-button-next",
|
|
prevEl: "#story-historical-milestones .swiper-historicalmilestone-desktop-button-prev",
|
|
},
|
|
},
|
|
"swiper-historicalmilestone-years": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
centeredSlides: true,
|
|
spaceBetween: 5,
|
|
slidesPerView: 2,
|
|
navigation: {
|
|
nextEl: "#story-historical-milestones .swiper-historicalmilestone-years-button-next",
|
|
prevEl: "#story-historical-milestones .swiper-historicalmilestone-years-button-prev",
|
|
},
|
|
breakpoints: {
|
|
576: {
|
|
slidesPerView: 4,
|
|
},
|
|
1200: {
|
|
slidesPerView: 10,
|
|
},
|
|
1400: {
|
|
slidesPerView: 12,
|
|
},
|
|
},
|
|
},
|
|
"swiper-products-discover": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: "#products-list .swiper-products-discover-button-next",
|
|
prevEl: "#products-list .swiper-products-discover-button-prev",
|
|
},
|
|
},
|
|
"swiper-recipes": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".swiper-recipes-button-next",
|
|
prevEl: ".swiper-recipes-button-prev",
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
spaceBetween: 40,
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
centeredSlides: false,
|
|
},
|
|
},
|
|
},
|
|
"swiper-products": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1.5,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".swiper-products-button-next",
|
|
prevEl: ".swiper-products-button-prev",
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
spaceBetween: 40,
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
centeredSlides: false,
|
|
},
|
|
},
|
|
},
|
|
"swiper-testimonials": {
|
|
modules: [Navigation, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".swiper-testimonials-button-next",
|
|
prevEl: ".swiper-testimonials-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-testimonial-pagination",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
spaceBetween: 40,
|
|
},
|
|
},
|
|
},
|
|
"swiper-videos": {
|
|
modules: [Navigation, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
centeredSlides: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".swiper-videos-button-next",
|
|
prevEl: ".swiper-videos-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-videos-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"btn btn-tertiary rounded-circle border-0 mx-2 p-0 " + className + "\" title=\"Aller à la slide " + (index + 1) + "\"></button>";
|
|
},
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 1.6,
|
|
},
|
|
992: {
|
|
slidesPerView: 1.9,
|
|
},
|
|
},
|
|
},
|
|
"swiper-breeding-galery-slides": {
|
|
modules: [Navigation, Pagination],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".slider-breeding-galery-btn-next",
|
|
prevEl: ".slider-breeding-galery-btn-prev",
|
|
},
|
|
|
|
breakpoints: {
|
|
768: {
|
|
spaceBetween: 40,
|
|
slidesPerView: 2,
|
|
centeredSlides: false,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
centeredSlides: false,
|
|
},
|
|
},
|
|
|
|
|
|
pagination: {
|
|
el: ".swiper-breeding-galery-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index: number, className: string) {
|
|
return "<button class=\"" + className + "\" title=\"Aller à la slide " + (index + 1) + "\"></button>";
|
|
},
|
|
},
|
|
},
|
|
"swiper-breeding-portrait-slides": {
|
|
modules: [Navigation],
|
|
grabCursor: true,
|
|
slidesPerView: 1,
|
|
centeredSlides: true,
|
|
loop: true,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: ".slider-breeding-portrait-btn-next",
|
|
prevEl: ".slider-breeding-portrait-btn-prev",
|
|
},
|
|
|
|
breakpoints: {
|
|
768: {
|
|
spaceBetween: 40,
|
|
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-main-slides") {
|
|
const btnPlayPause = document.querySelector("#swiper-main-slides .swiper-pagination-playpause");
|
|
btnPlayPause?.addEventListener("click", function () {
|
|
eventBtnPlayPause(swiper, document.querySelector("#swiper-main-slides .swiper-pagination-playpause"));
|
|
});
|
|
swiper.on("transitionEnd", function() {
|
|
const svgs = document.querySelector("#swiper-main-slides .swiper-pagination-playpause")?.querySelectorAll("svg");
|
|
if (svgs) {
|
|
svgs[0].classList.remove("d-none");
|
|
svgs[1].classList.add("d-none");
|
|
}
|
|
});
|
|
}
|
|
if (swiper.el.id === "swiper-videos") {
|
|
document.querySelectorAll("#swiper-videos .swiper-slide").forEach(slide => {
|
|
if (!slide.classList.contains("swiper-slide-active")) {
|
|
slide.setAttribute("inert", "true");
|
|
}
|
|
});
|
|
swiper.on("transitionEnd", function() {
|
|
document.querySelector("#swiper-videos .swiper-slide-active")?.removeAttribute("inert");
|
|
document.querySelector("#swiper-videos .swiper-slide-prev")?.setAttribute("inert", "true");
|
|
document.querySelector("#swiper-videos .swiper-slide-next")?.setAttribute("inert", "true");
|
|
});
|
|
}
|
|
}
|
|
|
|
function eventBtnPlayPause(swiper: Swiper, btnPlayPause: HTMLElement | null) {
|
|
const svgs = btnPlayPause?.querySelectorAll("svg");
|
|
svgs?.forEach(svg => {
|
|
svg.classList.toggle("d-none");
|
|
});
|
|
(swiper?.autoplay.paused) ? swiper?.autoplay.start() : swiper?.autoplay.pause();
|
|
}
|
|
|
|
// BTN PRINT
|
|
const eltsButtonPrintProd = document.getElementsByClassName(
|
|
"btn-printing"
|
|
) as HTMLCollectionOf<HTMLButtonElement>;
|
|
|
|
// @ts-ignore
|
|
window.printJS = printJS;
|
|
|
|
for (const eltButtonPrintProd of eltsButtonPrintProd) {
|
|
eltButtonPrintProd.addEventListener("click", function () {
|
|
const pathname = window.location.pathname;
|
|
const pathnameAsArray = pathname.split("/");
|
|
const itemName = pathnameAsArray[pathnameAsArray.length - 1];
|
|
setTimeout(() => {
|
|
// ! Seule solution: imprimer un pdf spécifique pour avoir le rendu souhaité.
|
|
// @ts-ignore
|
|
printJS({
|
|
printable: "recettes/" + itemName + "/print-commercial-sheet",
|
|
type: "pdf",
|
|
showModal: true,
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// BTN SHARE
|
|
const btnCollapse = document.getElementById("btn-share") as HTMLButtonElement | null;
|
|
if (btnCollapse) {
|
|
const bsCollapse = new window.bootstrap.Collapse("#btn-share", {
|
|
toggle: false
|
|
});
|
|
btnCollapse.parentElement?.addEventListener("mouseenter", () => { bsCollapse.show(); });
|
|
btnCollapse.parentElement?.addEventListener("mouseleave", () => { bsCollapse.hide(); });
|
|
}
|
|
});
|