This commit is contained in:
Enkly
886
public/assets/js/main.js
Normal file
886
public/assets/js/main.js
Normal file
@@ -0,0 +1,886 @@
|
||||
/*=============== SHOW MENU ===============*/
|
||||
const navMenu = document.getElementById('nav-menu'),
|
||||
navToggle = document.getElementById('nav-toggle'),
|
||||
navClose = document.getElementById('nav-close')
|
||||
|
||||
/* Menu show */
|
||||
if(navToggle) {
|
||||
navToggle.addEventListener('click', () =>{
|
||||
navMenu.classList.add('show-menu')
|
||||
})
|
||||
}
|
||||
|
||||
/* Menu hidden */
|
||||
if(navClose) {
|
||||
navClose.addEventListener('click', () =>{
|
||||
navMenu.classList.remove('show-menu')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== SHOW AGENCY DROPDOWN MENU ===============*/
|
||||
const agencyDropdownItems = document.querySelectorAll('.dropdownagency__item')
|
||||
|
||||
// 1. Select each dropdown item.
|
||||
agencyDropdownItems.forEach((item) =>{
|
||||
const dropdownButton = item.querySelector('.dropdown__button')
|
||||
|
||||
// 2. Select each button click.
|
||||
dropdownButton.addEventListener('click', () =>{
|
||||
|
||||
// 7. Select the current show-dropdown class.
|
||||
const showDropdown = document.querySelector('.show-dropdown')
|
||||
|
||||
// 5. Call the toggleItem function.
|
||||
agencyToggleItem(item)
|
||||
|
||||
// 8. Remove the show-dropdown class from other items.
|
||||
if(showDropdown && showDropdown != item) {
|
||||
toggleItem(showDropdown)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 3. Create a function to display the dropdown.
|
||||
const agencyToggleItem = (item) =>{
|
||||
|
||||
// 3.1. Select each dropdown content.
|
||||
const agencyDropdownContainer = item.querySelector('.dropdownagency__container')
|
||||
|
||||
// 6. If the same item contains the show-dropdown class, remove.
|
||||
if(item.classList.contains('show-dropdown')) {
|
||||
agencyDropdownContainer.removeAttribute('style')
|
||||
item.classList.remove('show-dropdown')
|
||||
} else {
|
||||
// 4. Add the maximum height to dropdown content and add the show-dropdown class.
|
||||
agencyDropdownContainer.style.height = agencyDropdownContainer.scrollHeight + 'px'
|
||||
item.classList.add('show-dropdown')
|
||||
}
|
||||
}
|
||||
|
||||
/*=============== SHOW PRODUCTS DROPDOWN MENU ===============*/
|
||||
const dropdownItems = document.querySelectorAll('.dropdown__item')
|
||||
|
||||
// 1. Select each dropdown item.
|
||||
dropdownItems.forEach((item) =>{
|
||||
const dropdownButton = item.querySelector('.dropdown__button')
|
||||
|
||||
// 2. Select each button click.
|
||||
dropdownButton.addEventListener('click', () =>{
|
||||
|
||||
// 7. Select the current show-dropdown class.
|
||||
const showDropdown = document.querySelector('.show-dropdown')
|
||||
|
||||
// 5. Call the toggleItem function.
|
||||
toggleItem(item)
|
||||
|
||||
// 8. Remove the show-dropdown class from other items.
|
||||
if(showDropdown && showDropdown != item) {
|
||||
agencyToggleItem(showDropdown)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 3. Create a function to display the dropdown.
|
||||
const toggleItem = (item) =>{
|
||||
|
||||
// 3.1. Select each dropdown content.
|
||||
const dropdownContainer = item.querySelector('.dropdown__container')
|
||||
|
||||
// 6. If the same item contains the show-dropdown class, remove.
|
||||
if(item.classList.contains('show-dropdown')) {
|
||||
dropdownContainer.removeAttribute('style')
|
||||
item.classList.remove('show-dropdown')
|
||||
} else {
|
||||
// 4. Add the maximum height to dropdown content and add the show-dropdown class.
|
||||
dropdownContainer.style.height = dropdownContainer.scrollHeight + 'px'
|
||||
item.classList.add('show-dropdown')
|
||||
}
|
||||
}
|
||||
|
||||
/*=============== DELETE DROPDOWN STYLES ===============*/
|
||||
const mediaQuery = matchMedia('(min-width: 1150px)'),
|
||||
dropdownContainer = document.querySelectorAll('.dropdown__container')
|
||||
|
||||
// Function to remove dropdown styles in mobile mode when browser resizes
|
||||
const removeStyle = () =>{
|
||||
// Validate if the media query reaches 1118px
|
||||
if(mediaQuery.matches){
|
||||
// Remove the dropdown container height style
|
||||
dropdownContainer.forEach((e) =>{
|
||||
e.removeAttribute('style')
|
||||
})
|
||||
|
||||
// Remove the show-dropdown class from dropdown item
|
||||
dropdownItems.forEach((e) =>{
|
||||
e.classList.remove('show-dropdown')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('resize', removeStyle)
|
||||
|
||||
/*=============== LOGIN ===============*/
|
||||
const loginButton = document.getElementById('login-button'),
|
||||
loginClose = document.getElementById('login-close'),
|
||||
loginContent = document.getElementById('login-content')
|
||||
|
||||
/* Login show */
|
||||
if(loginButton) {
|
||||
loginButton.addEventListener('click', () =>{
|
||||
loginContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Login hidden */
|
||||
if(loginClose) {
|
||||
loginClose.addEventListener('click', () =>{
|
||||
loginContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== PELLETEUSE BOOKING LOGIN ===============*/
|
||||
const pelleteuseBooking = document.getElementById('pelleteuse-booking'),
|
||||
pelleteuseBookingClose = document.getElementById('login-close'),
|
||||
pelleteuseBookingContent = document.getElementById('login-content')
|
||||
|
||||
/* Modal show */
|
||||
if(pelleteuseBooking) {
|
||||
pelleteuseBooking.addEventListener('click', () =>{
|
||||
pelleteuseBookingContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal hidden */
|
||||
if(pelleteuseBookingClose) {
|
||||
pelleteuseBookingClose.addEventListener('click', () =>{
|
||||
pelleteuseBookingContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== PELLETEUSE BOOKING BY PHONE ===============*/
|
||||
const pelleteuseBookingPhone = document.getElementById('pelleteuse-booking-phone'),
|
||||
pelleteuseBookingPhoneClose = document.getElementById('modal-close'),
|
||||
pelleteuseBookingPhoneContent = document.getElementById('modal-content')
|
||||
|
||||
/* Modal show */
|
||||
if(pelleteuseBookingPhone) {
|
||||
pelleteuseBookingPhone.addEventListener('click', () =>{
|
||||
pelleteuseBookingPhoneContent.classList.add('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal hidden */
|
||||
if(pelleteuseBookingPhoneClose) {
|
||||
pelleteuseBookingPhoneClose.addEventListener('click', () =>{
|
||||
pelleteuseBookingPhoneContent.classList.remove('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== MARTEAU PIQUEUR BOOKING LOGIN ===============*/
|
||||
const marteauPiqueurBooking = document.getElementById('marteau-piqueur-booking'),
|
||||
marteauPiqueurBookingClose = document.getElementById('login-close'),
|
||||
marteauPiqueurBookingContent = document.getElementById('login-content')
|
||||
|
||||
/* Login show */
|
||||
if(marteauPiqueurBooking) {
|
||||
marteauPiqueurBooking.addEventListener('click', () =>{
|
||||
marteauPiqueurBookingContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Login hidden */
|
||||
if(marteauPiqueurBookingClose) {
|
||||
marteauPiqueurBookingClose.addEventListener('click', () =>{
|
||||
marteauPiqueurBookingContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== MARTEAU PIQUEUR BOOKING BY PHONE ===============*/
|
||||
const marteauPiqueurBookingPhone = document.getElementById('marteau-piqueur-booking-phone'),
|
||||
marteauPiqueurBookingPhoneClose = document.getElementById('modal-close'),
|
||||
marteauPiqueurBookingPhoneContent = document.getElementById('modal-content')
|
||||
|
||||
/* Modal show */
|
||||
if(marteauPiqueurBookingPhone) {
|
||||
marteauPiqueurBookingPhone.addEventListener('click', () =>{
|
||||
pelleteuseBookingPhoneContent.classList.add('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal hidden */
|
||||
if(marteauPiqueurBookingPhoneClose) {
|
||||
pelleteuseBookingPhoneClose.addEventListener('click', () =>{
|
||||
pelleteuseBookingPhoneContent.classList.remove('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== BENNE A BETON BOOKING LOGIN ===============*/
|
||||
const benneBetonBooking = document.getElementById('benne-beton'),
|
||||
benneBetonBookingClose = document.getElementById('login-close'),
|
||||
benneBetonBookingContent = document.getElementById('login-content')
|
||||
|
||||
/* Login show */
|
||||
if(benneBetonBooking) {
|
||||
benneBetonBooking.addEventListener('click', () =>{
|
||||
benneBetonBookingContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Login hidden */
|
||||
if(benneBetonBookingClose) {
|
||||
benneBetonBookingClose.addEventListener('click', () =>{
|
||||
benneBetonBookingContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== BENNE A BETON BOOKING BY PHONE ===============*/
|
||||
const benneBetonBookingPhone = document.getElementById('benne-beton-phone'),
|
||||
benneBetonBookingPhoneClose = document.getElementById('modal-close'),
|
||||
benneBetonBookingPhoneContent = document.getElementById('modal-content')
|
||||
|
||||
/* Modal show */
|
||||
if(benneBetonBookingPhone) {
|
||||
benneBetonBookingPhone.addEventListener('click', () =>{
|
||||
benneBetonBookingPhoneContent.classList.add('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal hidden */
|
||||
if(benneBetonBookingPhoneClose) {
|
||||
benneBetonBookingPhoneClose.addEventListener('click', () =>{
|
||||
benneBetonBookingPhoneContent.classList.remove('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== GOULOTTE BOOKING LOGIN ===============*/
|
||||
const goulotteBooking = document.getElementById('goulotte'),
|
||||
goulotteBookingClose = document.getElementById('login-close'),
|
||||
goulotteBookingContent = document.getElementById('login-content')
|
||||
|
||||
/* Login show */
|
||||
if(goulotteBooking) {
|
||||
goulotteBooking.addEventListener('click', () =>{
|
||||
goulotteBookingContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Login hidden */
|
||||
if(goulotteBookingClose) {
|
||||
goulotteBookingClose.addEventListener('click', () =>{
|
||||
goulotteBookingContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== GOULOTTE BOOKING BY PHONE ===============*/
|
||||
const goulotteBookingPhone = document.getElementById('goulotte-phone'),
|
||||
goulotteBookingPhoneClose = document.getElementById('modal-close'),
|
||||
goulotteBookingPhoneContent = document.getElementById('modal-content')
|
||||
|
||||
/* Modal show */
|
||||
if(goulotteBookingPhone) {
|
||||
goulotteBookingPhone.addEventListener('click', () =>{
|
||||
goulotteBookingPhoneContent.classList.add('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal hidden */
|
||||
if(goulotteBookingPhoneClose) {
|
||||
goulotteBookingPhoneClose.addEventListener('click', () =>{
|
||||
goulotteBookingPhoneContent.classList.remove('show-modal')
|
||||
})
|
||||
}
|
||||
|
||||
/*=============== DISCOUNT LOGIN ===============*/
|
||||
const discountLogin = document.getElementById('discount-login'),
|
||||
discountLoginClose = document.getElementById('login-close'),
|
||||
discountLoginContent = document.getElementById('login-content')
|
||||
|
||||
/* Login show */
|
||||
if(discountLogin) {
|
||||
discountLogin.addEventListener('click', () =>{
|
||||
discountLoginContent.classList.add('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
/* Login hidden */
|
||||
if(discountLoginClose) {
|
||||
discountLoginClose.addEventListener('click', () =>{
|
||||
discountLoginContent.classList.remove('show-login')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*=============== REMOVE MENU MOBILE ===============*/
|
||||
const navLink = document.querySelectorAll('.nav__link')
|
||||
|
||||
const linkAction = () =>{
|
||||
const navMenu = document.getElementById('nav-menu')
|
||||
navMenu.classList.remove('show-menu')
|
||||
}
|
||||
navLink.forEach(n => n.addEventListener('click', linkAction))
|
||||
|
||||
/*=============== ADD SHADOW HEADER ===============*/
|
||||
/*const shadowHeader = ()=>{
|
||||
const header = document.getElementById('header')
|
||||
this.scrollY >= 50 ? header.classList.add('shadow-header')
|
||||
: header.classList.remove('shadow-header')
|
||||
}
|
||||
window.addEventListener('scroll', shadowHeader)*/
|
||||
|
||||
/*=============== SWIPER HOME ===============*/
|
||||
let swiperHome = new Swiper('.home__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: -24,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
1220: {
|
||||
spaceBetween: -32,
|
||||
slidesPerView: 3,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== FARMLAND SWIPER ===============*/
|
||||
let swiperFarmland = new Swiper('.farmland__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 4,
|
||||
centeredSlides: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== FARMLAND ATTECOUBÉ BOOKING BY PHONE ===============*/
|
||||
const farmlandAttecoubePhoneClose = document.getElementById('modal-close'),
|
||||
farmlandAttecoubePhoneContent = document.getElementById('modal-content')
|
||||
function farmlandAttecoubeByPhone() {
|
||||
farmlandAttecoubePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND ATTECOUBÉ BOOKING LOGIN ===============*/
|
||||
const farmlandAttecoubeClose = document.getElementById('login-close'),
|
||||
farmlandAttecoubeContent = document.getElementById('login-content')
|
||||
function farmlandAttecoube() {
|
||||
farmlandAttecoubeContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND TREICHVILLE BOOKING BY PHONE ===============*/
|
||||
const farmlandTreichvillePhoneClose = document.getElementById('modal-close'),
|
||||
farmlandTreichvillePhoneContent = document.getElementById('modal-content')
|
||||
function farmlandTreichvilleByPhone() {
|
||||
farmlandTreichvillePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND TREICHVILLE BOOKING LOGIN ===============*/
|
||||
const farmlandTreichvilleClose = document.getElementById('login-close'),
|
||||
farmlandTreichvilleContent = document.getElementById('login-content')
|
||||
function farmlandTreichville() {
|
||||
farmlandTreichvilleContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND MARCORY BOOKING BY PHONE ===============*/
|
||||
const farmlandMarcoryPhoneClose = document.getElementById('modal-close'),
|
||||
farmlandMarcoryPhoneContent = document.getElementById('modal-content')
|
||||
function farmlandMarcoryByPhone() {
|
||||
farmlandMarcoryPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND MARCORY BOOKING LOGIN ===============*/
|
||||
const farmlandMarcoryClose = document.getElementById('login-close'),
|
||||
farmlandMarcoryContent = document.getElementById('login-content')
|
||||
function farmlandMarcory() {
|
||||
farmlandMarcoryContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND BRACODI BOOKING BY PHONE ===============*/
|
||||
const farmlandBracodiPhoneClose = document.getElementById('modal-close'),
|
||||
farmlandBracodiPhoneContent = document.getElementById('modal-content')
|
||||
function farmlandBracodiByPhone() {
|
||||
farmlandBracodiPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND BRACODI BOOKING LOGIN ===============*/
|
||||
const farmlandBracodiClose = document.getElementById('login-close'),
|
||||
farmlandBracodiContent = document.getElementById('login-content')
|
||||
function farmlandBracodi() {
|
||||
farmlandBracodiContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND SIKASSO BOOKING BY PHONE ===============*/
|
||||
const farmlandSikassoPhoneClose = document.getElementById('modal-close'),
|
||||
farmlandSikassoPhoneContent = document.getElementById('modal-content')
|
||||
function farmlandSikassoByPhone() {
|
||||
farmlandSikassoPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== FARMLAND SIKASSO BOOKING LOGIN ===============*/
|
||||
const farmlandSikassoClose = document.getElementById('login-close'),
|
||||
farmlandSikassoContent = document.getElementById('login-content')
|
||||
function farmlandSikasso() {
|
||||
farmlandSikassoContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== BUILDING PELLETEUSE BOOKING BY PHONE ===============*/
|
||||
const buildingPelleteusePhoneClose = document.getElementById('modal-close'),
|
||||
buildingPelleteusePhoneContent = document.getElementById('modal-content')
|
||||
function buildingPelleteuseByPhone() {
|
||||
buildingPelleteusePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== BUILDING PELLETEUSE BOOKING LOGIN ===============*/
|
||||
const buildingPelleteuseClose = document.getElementById('login-close'),
|
||||
buildingPelleteuseContent = document.getElementById('login-content')
|
||||
function buildingPelleteuse() {
|
||||
buildingPelleteuseContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== BUILDING MARTEAU BOOKING BY PHONE ===============*/
|
||||
const buildingMarteauPhoneClose = document.getElementById('modal-close'),
|
||||
buildingMarteauPhoneContent = document.getElementById('modal-content')
|
||||
function buildingMarteauByPhone() {
|
||||
buildingMarteauPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== BUILDING MARTEAU BOOKING LOGIN ===============*/
|
||||
const buildingMarteauClose = document.getElementById('login-close'),
|
||||
buildingMarteauContent = document.getElementById('login-content')
|
||||
function buildingMarteau() {
|
||||
buildingMarteauContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== BUILDING BENNE BOOKING BY PHONE ===============*/
|
||||
const buildingBennePhoneClose = document.getElementById('modal-close'),
|
||||
buildingBennePhoneContent = document.getElementById('modal-content')
|
||||
function buildingBenneByPhone() {
|
||||
buildingBennePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== BUILDING BENNE BOOKING LOGIN ===============*/
|
||||
const buildingBenneClose = document.getElementById('login-close'),
|
||||
buildingBenneContent = document.getElementById('login-content')
|
||||
function buildingBenne() {
|
||||
buildingBenneContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== BUILDING GOULOTTE BOOKING BY PHONE ===============*/
|
||||
const buildingGoulottePhoneClose = document.getElementById('modal-close'),
|
||||
buildingGoulottePhoneContent = document.getElementById('modal-content')
|
||||
function buildingGoulotteByPhone() {
|
||||
buildingGoulottePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== BUILDING GOULOTTE BOOKING LOGIN ===============*/
|
||||
const buildingGoulotteClose = document.getElementById('login-close'),
|
||||
buildingGoulotteContent = document.getElementById('login-content')
|
||||
function buildingGoulotte() {
|
||||
buildingGoulotteContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== SONGON BY PHONE ===============*/
|
||||
const songonPhoneClose = document.getElementById('modal-close'),
|
||||
songonPhoneContent = document.getElementById('modal-content')
|
||||
function songonPhone() {
|
||||
songonPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
function explore() {
|
||||
setTimeout(function () {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function zoneSongon() {
|
||||
setTimeout(function () {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function deposerAnnonce() {
|
||||
setTimeout(function () {
|
||||
location.reload();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/*=============== DEPOSER ANNONCE LOGIN ===============*/
|
||||
const deposerAnnonceClose = document.getElementById('login-close'),
|
||||
deposerAnnonceContent = document.getElementById('login-content')
|
||||
function deposerAnnonceToLogin() {
|
||||
deposerAnnonceContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== INSCRIPTION ANNONCE ===============*/
|
||||
function inscriptionAnnonce() {
|
||||
setTimeout(function () {
|
||||
location.reload();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE A BY PHONE ===============*/
|
||||
const eventroomSalleAPhoneClose = document.getElementById('modal-close'),
|
||||
eventroomSalleAPhoneContent = document.getElementById('modal-content')
|
||||
function eventroomSalleAPhone() {
|
||||
eventroomSalleAPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE A LOGIN ===============*/
|
||||
const eventroomSalleAClose = document.getElementById('login-close'),
|
||||
eventroomSalleAContent = document.getElementById('login-content')
|
||||
function eventroomSalleA() {
|
||||
eventroomSalleAContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE B BY PHONE ===============*/
|
||||
const eventroomSalleBPhoneClose = document.getElementById('modal-close'),
|
||||
eventroomSalleBPhoneContent = document.getElementById('modal-content')
|
||||
function eventroomSalleBPhone() {
|
||||
eventroomSalleBPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE B LOGIN ===============*/
|
||||
const eventroomSalleBClose = document.getElementById('login-close'),
|
||||
eventroomSalleBContent = document.getElementById('login-content')
|
||||
function eventroomSalleB() {
|
||||
eventroomSalleBContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE C BY PHONE ===============*/
|
||||
const eventroomSalleCPhoneClose = document.getElementById('modal-close'),
|
||||
eventroomSalleCPhoneContent = document.getElementById('modal-content')
|
||||
function eventroomSalleCPhone() {
|
||||
eventroomSalleCPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE C LOGIN ===============*/
|
||||
const eventroomSalleCClose = document.getElementById('login-close'),
|
||||
eventroomSalleCContent = document.getElementById('login-content')
|
||||
function eventroomSalleC() {
|
||||
eventroomSalleCContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE D BY PHONE ===============*/
|
||||
const eventroomSalleDPhoneClose = document.getElementById('modal-close'),
|
||||
eventroomSalleDPhoneContent = document.getElementById('modal-content')
|
||||
function eventroomSalleDPhone() {
|
||||
eventroomSalleDPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== EVENTROOM SALLE D LOGIN ===============*/
|
||||
const eventroomSalleDClose = document.getElementById('login-close'),
|
||||
eventroomSalleDContent = document.getElementById('login-content')
|
||||
function eventroomSalleD() {
|
||||
eventroomSalleDContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE A BY PHONE ===============*/
|
||||
const tarpaulinBacheAPhoneClose = document.getElementById('modal-close'),
|
||||
tarpaulinBacheAPhoneContent = document.getElementById('modal-content')
|
||||
function tarpaulinBacheAPhone() {
|
||||
tarpaulinBacheAPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE A LOGIN ===============*/
|
||||
const tarpaulinBacheAClose = document.getElementById('login-close'),
|
||||
tarpaulinBacheAContent = document.getElementById('login-content')
|
||||
function tarpaulinBacheA() {
|
||||
tarpaulinBacheAContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE B BY PHONE ===============*/
|
||||
const tarpaulinBacheBPhoneClose = document.getElementById('modal-close'),
|
||||
tarpaulinBacheBPhoneContent = document.getElementById('modal-content')
|
||||
function tarpaulinBacheBPhone() {
|
||||
tarpaulinBacheBPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE B LOGIN ===============*/
|
||||
const tarpaulinBacheBClose = document.getElementById('login-close'),
|
||||
tarpaulinBacheBContent = document.getElementById('login-content')
|
||||
function tarpaulinBacheB() {
|
||||
tarpaulinBacheBContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE C BY PHONE ===============*/
|
||||
const tarpaulinBacheCPhoneClose = document.getElementById('modal-close'),
|
||||
tarpaulinBacheCPhoneContent = document.getElementById('modal-content')
|
||||
function tarpaulinBacheCPhone() {
|
||||
tarpaulinBacheCPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE C LOGIN ===============*/
|
||||
const tarpaulinBacheCClose = document.getElementById('login-close'),
|
||||
tarpaulinBacheCContent = document.getElementById('login-content')
|
||||
function tarpaulinBacheC() {
|
||||
tarpaulinBacheCContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE D BY PHONE ===============*/
|
||||
const tarpaulinBacheDPhoneClose = document.getElementById('modal-close'),
|
||||
tarpaulinBacheDPhoneContent = document.getElementById('modal-content')
|
||||
function tarpaulinBacheDPhone() {
|
||||
tarpaulinBacheDPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== TARPAULIN BACHE STRUCTURE D LOGIN ===============*/
|
||||
const tarpaulinBacheDClose = document.getElementById('login-close'),
|
||||
tarpaulinBacheDContent = document.getElementById('login-content')
|
||||
function tarpaulinBacheD() {
|
||||
tarpaulinBacheDContent.classList.add('show-login');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT CHAISE BY PHONE ===============*/
|
||||
const spotlightChaisePhoneClose = document.getElementById('modal-close'),
|
||||
spotlightChaisePhoneContent = document.getElementById('modal-content')
|
||||
function spotlightChaisePhone() {
|
||||
spotlightChaisePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT BATEAU BY PHONE ===============*/
|
||||
const spotlightBateauPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightBateauPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightBateauPhone() {
|
||||
spotlightBateauPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT VAISSELLE BY PHONE ===============*/
|
||||
const spotlightVaissellePhoneClose = document.getElementById('modal-close'),
|
||||
spotlightVaissellePhoneContent = document.getElementById('modal-content')
|
||||
function spotlightVaissellePhone() {
|
||||
spotlightVaissellePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT BACHE BY PHONE ===============*/
|
||||
const spotlightBachePhoneClose = document.getElementById('modal-close'),
|
||||
spotlightBachePhoneContent = document.getElementById('modal-content')
|
||||
function spotlightBachePhone() {
|
||||
spotlightBachePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT TERRAIN ATTECOUBE BY PHONE ===============*/
|
||||
const spotlightTerrainAttecoubePhoneClose = document.getElementById('modal-close'),
|
||||
spotlightTerrainAttecoubePhoneContent = document.getElementById('modal-content')
|
||||
function spotlightTerrainAttecoubePhone() {
|
||||
spotlightTerrainAttecoubePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT TERRAIN TREICHVILLE BY PHONE ===============*/
|
||||
const spotlightTerrainTreichvillePhoneClose = document.getElementById('modal-close'),
|
||||
spotlightTerrainTreichvillePhoneContent = document.getElementById('modal-content')
|
||||
function spotlightTerrainTreichvillePhone() {
|
||||
spotlightTerrainTreichvillePhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT TERRAIN MARCORY BY PHONE ===============*/
|
||||
const spotlightTerrainMarcoryPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightTerrainMarcoryPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightTerrainMarcoryPhone() {
|
||||
spotlightTerrainMarcoryPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT TERRAIN BRACODI BY PHONE ===============*/
|
||||
const spotlightTerrainBracodyPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightTerrainBracodiPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightTerrainBracodiPhone() {
|
||||
spotlightTerrainBracodiPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT RENAULT BY PHONE ===============*/
|
||||
const spotlightRenaultPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightRenaultPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightRenaultPhone() {
|
||||
spotlightRenaultPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT MAZDA BY PHONE ===============*/
|
||||
const spotlightMazdaPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightMazdaPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightMazdaPhone() {
|
||||
spotlightMazdaPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
/*=============== SPOTLIGHT AUDI BY PHONE ===============*/
|
||||
const spotlightAudiPhoneClose = document.getElementById('modal-close'),
|
||||
spotlightAudiPhoneContent = document.getElementById('modal-content')
|
||||
function spotlightAudiPhone() {
|
||||
spotlightAudiPhoneContent.classList.add('show-modal');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*=============== BUILDING SWIPER ===============*/
|
||||
let swiperBuilding = new Swiper('.building__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 4,
|
||||
centeredSlides: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== VEHICLE SWIPER ===============*/
|
||||
let swiperVehicle = new Swiper('.vehicle__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
slidesPerView: 'auto',
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 3,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== TESTIMONIAL SWIPER ===============*/
|
||||
let swiperTestimonial = new Swiper('.testimonial__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 3,
|
||||
centeredSlides: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== EVENTROOMS SWIPER ===============*/
|
||||
let swiperEventrooms = new Swiper('.eventrooms__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 4,
|
||||
centeredSlides: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/*=============== TARPAULIN SWIPER ===============*/
|
||||
let swiperTarpaulin = new Swiper('.tarpaulin__swiper', {
|
||||
loop: true,
|
||||
spaceBetween: 16,
|
||||
grabCursor: true,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: 'auto',
|
||||
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
breakpoints: {
|
||||
1150: {
|
||||
slidesPerView: 4,
|
||||
centeredSlides: false,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*=============== SHOW SCROLL UP ===============*/
|
||||
const scrollUp = () => {
|
||||
const scrollUp = document.getElementById('scroll-up')
|
||||
this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
|
||||
:scrollUp.classList.remove('show-scroll')
|
||||
}
|
||||
window.addEventListener('scroll', scrollUp)
|
||||
|
||||
/*=============== SCROLL REVEAL ANIMATION ===============*/
|
||||
const sr = ScrollReveal({
|
||||
origin: 'top',
|
||||
distance: '60px',
|
||||
duration: 2500,
|
||||
delay: 400,
|
||||
reset: true, // Repeat
|
||||
})
|
||||
|
||||
sr.reveal(`.home__data, .building__container, .vehicle__container,
|
||||
.join__data, .testimonial__container, .footer`)
|
||||
sr.reveal(`.home__images`, {delay: 600})
|
||||
sr.reveal(`.services__card`, {interval: 100})
|
||||
sr.reveal(`.discount__data`, {origin: 'left'})
|
||||
sr.reveal(`.discount__images`, {origin: 'right'})
|
||||
|
||||
Reference in New Issue
Block a user