485 lines
13 KiB
JavaScript
485 lines
13 KiB
JavaScript
$(document).ready(function(){
|
|
|
|
// Variables
|
|
const headerContainer = document.querySelector('.header-wrapper');
|
|
const submenu = document.querySelector('.header-submenu');
|
|
const openSubMenu = document.querySelector('.header-navmenu__item .fa-bars');
|
|
const sub = document.querySelectorAll('.header-submenu')[1];
|
|
|
|
const aboutJoki = document.querySelector('.about-joki');
|
|
const aboutHeaders = document.querySelectorAll('.about-joki__header h3');
|
|
const aboutContent = document.querySelectorAll('.about-joki__body-item');
|
|
const containers = document.querySelectorAll('.about-joki__body-item')
|
|
|
|
const orderModal = document.querySelector('.order-modal');
|
|
const orderModalOverlay = document.querySelector('.order-modal__overlay');
|
|
const orderForm = document.querySelector('.order__form');
|
|
const orderPhone = document.getElementById('orderTel');
|
|
const orderName = document.getElementById('orderName');
|
|
const orderEmail = document.getElementById('orderEmail');
|
|
const orderOthers = document.getElementById('orderOthers');
|
|
|
|
const callBackBtn = document.querySelector('.header_order-call');
|
|
const callBackForm = document.querySelector('.callback-modal form');
|
|
const callBackModal = document.querySelector('.callback-modal');
|
|
const callBackLayout = document.querySelector('.callback-modal__layout');
|
|
const callBackClose = document.querySelector('.callback-modal__close');
|
|
const callbackName = document.getElementById('callback-name');
|
|
const callbackPhone = document.getElementById('callback-phone');
|
|
|
|
const discountModal = document.querySelector('.discount-modal');
|
|
const discountClose = document.querySelector('.discount-modal-close');
|
|
const discountOpen = document.querySelectorAll('.discount-item__content button');
|
|
const discountSlider = document.querySelector('.discount-slider')
|
|
const discountModalSlider = document.querySelector('.discount-modal-slider');
|
|
|
|
const mainSlider = document.querySelector('.main-slider');
|
|
const entSlider = document.querySelector('.quests-slider');
|
|
const placesSlider = document.querySelector('.places-slider');
|
|
const principalsSlider = document.querySelector('.principals-slider');
|
|
|
|
const places = document.querySelectorAll('.places .owl-item');
|
|
|
|
let scrollPos = 0;
|
|
|
|
// Add styles
|
|
$('#datapicker').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'});
|
|
$('#datapicker2').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'});
|
|
$(callbackPhone).mask('+7 (900) 000-00-00');
|
|
$(orderPhone).mask('+7 (900) 000-00-00');
|
|
$('[data-toggle="popover"]').popover();
|
|
|
|
// Init sliders
|
|
$(mainSlider).owlCarousel({
|
|
responsive: {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 0,
|
|
dots: true,
|
|
loop: true,
|
|
center: true,
|
|
normal: false,
|
|
lazyLoad: true,
|
|
lazyLoadEager: 1
|
|
// autoWidth: true
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
items: 6,
|
|
margin: 0
|
|
},
|
|
768 : {
|
|
smartSpeed: 400,
|
|
items: 1,
|
|
margin: 30,
|
|
loop: true,
|
|
autoWidth: true,
|
|
center: true,
|
|
dots: true,
|
|
dotsEach: true,
|
|
// autoplay: true,
|
|
autoplayTimeout: 3000,
|
|
autoplaySpeed: 1000,
|
|
autoplayHoverPause: true
|
|
// nav: true,
|
|
// navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
|
|
}
|
|
}
|
|
});
|
|
$(entSlider).owlCarousel({
|
|
responsive: {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 80,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
autoWidth: false,
|
|
loop:true
|
|
},
|
|
360 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true,
|
|
autoWidth: false
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
margin: 20,
|
|
loop: true,
|
|
dots: false,
|
|
autoWidth: false
|
|
},
|
|
768 : {
|
|
smartSpeed: 400,
|
|
margin: 50,
|
|
items: 3,
|
|
// stagePadding: 30,
|
|
}
|
|
}
|
|
});
|
|
$(placesSlider).owlCarousel({
|
|
responsive : {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true,
|
|
autoWidth: false
|
|
},
|
|
360 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true,
|
|
autoWidth: false
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true,
|
|
autoWidth: false
|
|
},
|
|
768: {
|
|
smartSpeed: 400,
|
|
margin: 150,
|
|
item: 1,
|
|
autoWidth: true,
|
|
nav: true,
|
|
dots: false,
|
|
loop: true,
|
|
}
|
|
}
|
|
|
|
});
|
|
$(discountSlider).owlCarousel({
|
|
responsive : {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 80,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true
|
|
},
|
|
360 : {
|
|
smartSpeed: 400,
|
|
margin: 35,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
dots: false,
|
|
loop:true
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
items: 1,
|
|
stagePadding: 60,
|
|
margin: 20,
|
|
loop: true,
|
|
dots: false,
|
|
autoWidth: false
|
|
},
|
|
1200: {
|
|
margin: 10,
|
|
smartSpeed: 400,
|
|
item: 3,
|
|
// autoWidth: true,
|
|
nav: true,
|
|
navText: ['<div class="discount-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="discount-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
|
|
dots: false,
|
|
loop: true,
|
|
}
|
|
}
|
|
|
|
});
|
|
$(discountModalSlider).owlCarousel({
|
|
responsive: {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 10,
|
|
items: 1,
|
|
stagePadding: 0,
|
|
dots: false,
|
|
loop: true,
|
|
center: true,
|
|
normal: false,
|
|
// lazyLoad: true,
|
|
// lazyLoadEager: 1
|
|
// autoWidth: true
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
items: 6,
|
|
margin: 0
|
|
},
|
|
768 : {
|
|
smartSpeed: 400,
|
|
items: 1,
|
|
margin: 30,
|
|
nav: false,
|
|
dots: false,
|
|
loop: true
|
|
// loop: true,
|
|
// autoWidth: true,
|
|
// center: true,
|
|
// dots: true,
|
|
// dotsEach: true,
|
|
// autoplay: true,
|
|
// autoplayTimeout: 3000,
|
|
// autoplaySpeed: 1000,
|
|
// autoplayHoverPause: true
|
|
// nav: true,
|
|
// navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
|
|
}
|
|
}
|
|
});
|
|
$(principalsSlider).owlCarousel({
|
|
responsive: {
|
|
0 : {
|
|
smartSpeed: 400,
|
|
margin: 30,
|
|
items: 1,
|
|
stagePadding: 40,
|
|
dots: false,
|
|
loop: true,
|
|
// center: true,
|
|
autoWidth: true,
|
|
// normal: false
|
|
},
|
|
480 : {
|
|
smartSpeed: 400,
|
|
items: 2,
|
|
stagePadding: 10,
|
|
margin: 30,
|
|
loop: true,
|
|
dots: false,
|
|
autoWidth: false
|
|
},
|
|
1200 : {
|
|
smartSpeed: 400,
|
|
dots: false,
|
|
items: 6,
|
|
margin: 30,
|
|
loop: true,
|
|
autoWidth: false,
|
|
nav: true,
|
|
navText: ['<div class="principals-slider__prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>','<div class="principals-slider__next"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>'],
|
|
}
|
|
|
|
}
|
|
});
|
|
$(discountModalSlider).owlCarousel();
|
|
|
|
|
|
// Add listeners
|
|
if(discountClose){
|
|
discountOpen.forEach((item, index) => {
|
|
item.addEventListener('click', () => {
|
|
$(discountModal).show();
|
|
owl.trigger("to.owl.carousel", index, 100);
|
|
});
|
|
});
|
|
|
|
discountModal.addEventListener('click', (e) => {
|
|
let target = e.target;
|
|
if(target.classList.contains('discount-modal-layout')){
|
|
$(discountModal).hide();
|
|
}
|
|
})
|
|
|
|
discountClose.addEventListener('click', $(discountModal).hide)
|
|
|
|
$(".discount-modal-slider-nav-next").click(function() {
|
|
owl.trigger("next.owl.carousel");
|
|
});
|
|
|
|
$(".discount-modal-slider-nav-prev").click(function() {
|
|
owl.trigger("prev.owl.carousel");
|
|
});
|
|
}
|
|
|
|
if (places) {
|
|
const placesItems = Array.from(places).filter(item => !item.classList.contains('cloned'));
|
|
|
|
placesItems.forEach((currentItem, index) => {
|
|
const placesSpans = currentItem.querySelectorAll('.places-img span');
|
|
|
|
placesSpans[0].textContent = index + 1;
|
|
placesSpans[1].textContent = placesItems.length;
|
|
});
|
|
}
|
|
|
|
$(orderForm).on('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
var formData = {
|
|
orderName: orderName.value,
|
|
orderTel: orderPhone.value,
|
|
orderEmail: orderEmail.value,
|
|
orderOthers: orderOthers.value,
|
|
}
|
|
|
|
$.ajax({
|
|
url: $(orderForm).attr('action'),
|
|
type: 'POST',
|
|
data: formData,
|
|
success: function () {
|
|
$(orderModal).show();
|
|
$("body").css("overflow","hidden");
|
|
},
|
|
error: function(request, txtstatus, errorThrown){
|
|
console.log(request);
|
|
console.log(txtstatus);
|
|
console.log(errorThrown);
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
orderModal && orderModal.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.container')){
|
|
$(orderModal).hide();
|
|
$("body").css("overflow","auto");
|
|
}
|
|
})
|
|
|
|
$('.packages-item a').on( 'click', function(){
|
|
var el = $(this);
|
|
var dest = el.attr('href'); // получаем направление
|
|
if(dest !== undefined && dest !== '') { // проверяем существование
|
|
$('html').animate({
|
|
scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу
|
|
}, 500 // скорость прокрутки
|
|
);
|
|
}
|
|
return false;
|
|
});
|
|
|
|
callBackBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
callBackModal.style.display = 'block'
|
|
$(document.body).css("overflow","hidden");
|
|
})
|
|
|
|
callBackLayout.addEventListener('click', () => {
|
|
callBackModal.style.display = 'none';
|
|
$(document.body).css("overflow","auto");
|
|
})
|
|
|
|
callBackClose.addEventListener('click', () => {
|
|
callBackModal.style.display = 'none'
|
|
$(document.body).css("overflow","auto");
|
|
})
|
|
|
|
callBackForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = {
|
|
name: callbackName.value,
|
|
phone: callbackPhone.value,
|
|
}
|
|
const action = $(callBackForm).attr('action');
|
|
|
|
$.ajax({
|
|
url: action,
|
|
type: 'POST',
|
|
data: formData,
|
|
success: function () {
|
|
callBackModal.style.display = 'none'
|
|
|
|
$(orderModal).show();
|
|
callbackName.value = ''
|
|
callbackPhone.value = ''
|
|
},
|
|
error: function(request, txtstatus, errorThrown){
|
|
console.error(request);
|
|
console.error(txtstatus);
|
|
console.error(errorThrown);
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
orderModalOverlay && orderModalOverlay.addEventListener('click', $(orderModal).hide);
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (!headerContainer) return
|
|
|
|
let st = $(this).scrollTop();
|
|
if (!st || st < 199) return;
|
|
|
|
if (st > scrollPos) headerContainer && headerContainer.classList.add('header-menu__hide');
|
|
else headerContainer && headerContainer.classList.remove('header-menu__hide');
|
|
|
|
scrollPos = st;
|
|
})
|
|
|
|
if (aboutJoki) {
|
|
let content = 'about';
|
|
|
|
aboutHeaders.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
aboutHeaders.forEach(header => header.classList.remove('active'))
|
|
|
|
item.classList.add('active');
|
|
content = item.dataset.content;
|
|
|
|
aboutContent.forEach(currentItem => {
|
|
if (currentItem.dataset.content === content) {
|
|
$(currentItem).show();
|
|
} else{
|
|
$(currentItem).hide();
|
|
}
|
|
});
|
|
})
|
|
});
|
|
}
|
|
|
|
if (document.documentElement.clientWidth <= '425') {
|
|
const closeSubmenu = document.createElement('a');
|
|
|
|
closeSubmenu.classList.add('header-submenu-close-sub');
|
|
closeSubmenu.innerHTML = `<li class="header-submenu__item header-submenu__item-close"><i class="fa fa-times" aria-hidden="true"></i></li>`
|
|
|
|
submenu.insertAdjacentElement('afterbegin', closeSubmenu);
|
|
|
|
closeSubmenu.addEventListener('click', $(submenu).show)
|
|
|
|
openSubMenu.closest('li').addEventListener('click', () => {
|
|
if (sub.style.display === 'block') {
|
|
$(sub).hide();
|
|
openSubMenu.closest('li').style.background = '#fff';
|
|
} else {
|
|
$(sub).show();
|
|
openSubMenu.closest('li').style.background = '#f2f2f2';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (window.location.hash === '#feedback') {
|
|
aboutHeaders.forEach(header => header.classList.remove('active'))
|
|
|
|
document.querySelector(`.about-joki__header [data-content='feedback']`).classList.add('active')
|
|
|
|
containers.forEach(cont => cont.style.display = 'none')
|
|
|
|
document.querySelector(`.about-joki__body-item[data-content='feedback']`).style.display = 'block'
|
|
}
|
|
|
|
});
|