140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
// main script
|
|
(function () {
|
|
"use strict";
|
|
|
|
// Dropdown Menu Toggler For Mobile
|
|
// ----------------------------------------
|
|
const dropdownMenuToggler = document.querySelectorAll(
|
|
".nav-dropdown > .nav-link",
|
|
);
|
|
|
|
dropdownMenuToggler.forEach((toggler) => {
|
|
toggler?.addEventListener("click", (e) => {
|
|
e.target.closest('.nav-item').classList.toggle("active");
|
|
});
|
|
});
|
|
|
|
// Testimonial Slider
|
|
// ----------------------------------------
|
|
new Swiper(".testimonial-slider", {
|
|
spaceBetween: 24,
|
|
loop: true,
|
|
pagination: {
|
|
el: ".testimonial-slider-pagination",
|
|
type: "bullets",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
});
|
|
|
|
|
|
// modals
|
|
function toggle_modal(target, show) {
|
|
target.classList.toggle("hidden", !show);
|
|
body.classList.toggle("overflow-hidden", show);
|
|
body.setAttribute("modal", show ? target.id : "");
|
|
}
|
|
|
|
const body = document.querySelector("body");
|
|
const show_modal_buttons = document.querySelectorAll("[data-modal-show]");
|
|
show_modal_buttons.forEach((btn) => {
|
|
const target = btn.getAttribute('data-modal-show');
|
|
const modal = document.querySelector(`#${target}`);
|
|
if (modal) {
|
|
btn.addEventListener("click", (e) => {
|
|
if (e.target.tagName !== 'A')
|
|
toggle_modal(modal, true);
|
|
});
|
|
}
|
|
});
|
|
|
|
const hide_modal_buttons = document.querySelectorAll("[data-modal-hide]");
|
|
hide_modal_buttons.forEach((btn) => {
|
|
const target = btn.getAttribute('data-modal-hide');
|
|
const modal = document.querySelector(`#${target}`);
|
|
if (modal) {
|
|
btn.addEventListener("click", (e) => {
|
|
toggle_modal(modal, false);
|
|
});
|
|
}
|
|
});
|
|
|
|
const modal_bg = document.querySelectorAll(".modal-bg");
|
|
modal_bg.forEach((bg) => {
|
|
bg.addEventListener("click", (e) => {
|
|
if (e.target === bg) {
|
|
toggle_modal(bg, false);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
var modal_id = body.getAttribute("modal");
|
|
if (modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
|
|
}
|
|
});
|
|
|
|
// timelines
|
|
// ----------------------------------------
|
|
const updateTimeline = (timeline) => {
|
|
const day_target = timeline.getAttribute("data-day-target");
|
|
timeline.querySelectorAll(".day-events:not(.hidden)").forEach((day_events) => { day_events.classList.toggle("hidden", true); });
|
|
timeline.querySelector(`[data-day-title="${day_target}"]`).classList.toggle("hidden", false);
|
|
timeline.querySelectorAll(`.day_listing.active`).forEach((listing) => {
|
|
listing.classList.toggle("inactive", true);
|
|
listing.classList.toggle("active", false);
|
|
});
|
|
var new_active = timeline.querySelector(`.day_listing[data-day-target="${day_target}"]`);
|
|
new_active.classList.toggle("active", true);
|
|
new_active.classList.toggle("inactive", false);
|
|
};
|
|
|
|
document.querySelectorAll(".timeline_grid_container").forEach((timeline) => {
|
|
const days = timeline.querySelector(".day-listing-container");
|
|
days.addEventListener("click", (e) => {
|
|
const day_target = e.target.getAttribute("data-day-target");
|
|
if (day_target) {
|
|
timeline.setAttribute("data-day-target", day_target);
|
|
updateTimeline(timeline);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Swipers
|
|
// ----------------------------------------
|
|
const swipers = document.querySelectorAll(".swiper-slider");
|
|
|
|
swipers.forEach((swiper) => {
|
|
new Swiper(swiper, {
|
|
spaceBetween: 24,
|
|
loop: true,
|
|
pagination: {
|
|
el: swiper.querySelector(".swiper-slider-pagination"),
|
|
type: "bullets",
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: swiper.querySelector(".swiper-button-next"),
|
|
prevEl: swiper.querySelector(".swiper-button-prev"),
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
});
|
|
});
|
|
})();
|
|
|
|
// c > js -devon
|