You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
449 lines
12 KiB
449 lines
12 KiB
'use strict';
|
|
|
|
const gymSwiper = new Swiper('.gym-swiper', {
|
|
direction: 'horizontal',
|
|
breakpoints: {
|
|
320:{
|
|
slidesPerView: 1.20,
|
|
spaceBetween: 24,
|
|
},
|
|
996: {
|
|
slidesPerView: 3
|
|
},
|
|
}
|
|
});
|
|
|
|
const reviewsSwiper = new Swiper('.reviews-swiper', {
|
|
spaceBetween: 24,
|
|
allowTouchMove: false,
|
|
// If we need pagination
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
|
|
// And if we need scrollbar
|
|
scrollbar: {
|
|
el: '.swiper-scrollbar',
|
|
},
|
|
runCallbacksOnInit: true,
|
|
// === new change
|
|
on: {
|
|
slideChange: function(){
|
|
let offer = document.querySelector('#numberReviews');
|
|
offer.innerHTML = (this.activeIndex + 1);
|
|
}
|
|
}
|
|
})
|
|
|
|
let swiperReviews = document.querySelectorAll('.swiper-reviews-img');
|
|
let reviewsSwiperImgs = {};
|
|
swiperReviews.forEach((review, index) => {
|
|
let newClass = `swiper-reviews-img-${index}`;
|
|
review.classList.add(newClass);
|
|
|
|
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return '<span class="' + className + '">' + "</span>";
|
|
},
|
|
},
|
|
});
|
|
})
|
|
|
|
|
|
|
|
const projectsSwiper = new Swiper('.projects-swiper', {
|
|
direction: 'horizontal',
|
|
breakpoints: {
|
|
320:{
|
|
slidesPerView: 1,
|
|
spaceBetween: 24,
|
|
},
|
|
996: {
|
|
slidesPerView: 10
|
|
},
|
|
},
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
runCallbacksOnInit: true,
|
|
// === new change
|
|
on: {
|
|
slideChange: function(){
|
|
let offer = document.querySelector('#numberProjects');
|
|
offer.innerHTML = (this.activeIndex + 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// how
|
|
let itemButtons = document.querySelectorAll('.how-control__item');
|
|
itemButtons.forEach((button) => {
|
|
let num = button.dataset.num;
|
|
|
|
button.onclick = function name(params, index) {
|
|
|
|
let activeContent = document.querySelector('.how-content__item-block.active'),
|
|
activeButton = document.querySelector('.how-control__item.active');
|
|
|
|
if (activeContent.dataset.num == button.dataset.num) return;
|
|
|
|
activeContent.style.height = `${activeContent.offsetHeight}px`;
|
|
|
|
setTimeout(() => {
|
|
activeContent.style.height = '0px';
|
|
activeContent.classList.remove('active');
|
|
activeButton.classList.remove('active');
|
|
|
|
let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
|
|
newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
|
|
|
|
|
|
setTimeout(() => {
|
|
let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
|
|
newActive.style.height = newHeight;
|
|
newActive.classList.add('active');
|
|
newButton.classList.add('active');
|
|
|
|
setTimeout(() => {
|
|
newActive.style.height = 'auto';
|
|
}, 300);
|
|
}, 300);
|
|
}, 0);
|
|
}
|
|
})
|
|
|
|
let screenWidth = window.screen.width;
|
|
if (screenWidth <= 992) {
|
|
howPhone();
|
|
}else{
|
|
howPc();
|
|
}
|
|
|
|
function howPc() {
|
|
if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
|
|
return;
|
|
}
|
|
|
|
let blocks = document.querySelectorAll('.how-content__item-block'),
|
|
content = document.querySelector('.how__content');
|
|
|
|
blocks.forEach(block => {
|
|
content.appendChild(block)
|
|
});
|
|
}
|
|
function howPhone() {
|
|
|
|
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
|
|
return;
|
|
}
|
|
|
|
let buttons = document.querySelectorAll('.how-control__item');
|
|
|
|
buttons.forEach(button => {
|
|
let num = button.dataset.num,
|
|
block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
|
|
|
|
button.after(block);
|
|
});
|
|
}
|
|
// how end
|
|
|
|
// phone menu
|
|
addClosePhoneMenu('.phone-menu__content');
|
|
addClosePhoneMenu('.phone-menu__sub');
|
|
|
|
let btnOpenMenu = document.querySelector('.button-menu__open');
|
|
btnOpenMenu.onclick = function () {
|
|
let block = document.querySelector('.phone-menu'),
|
|
content = document.querySelector('.phone-menu__content'),
|
|
contentHeight = content.offsetHeight + 'px';
|
|
|
|
block.style.height = contentHeight;
|
|
}
|
|
|
|
let closeMenu = document.querySelector('.phone-menu-content__close');
|
|
closeMenu.onclick = function () {
|
|
let block = document.querySelector('.phone-menu');
|
|
|
|
block.style.height = '0px';
|
|
}
|
|
|
|
let phoneList = document.querySelectorAll('.phone-menu__list');
|
|
phoneList.forEach(list => {
|
|
let elementList = list.querySelectorAll('li');
|
|
|
|
elementList.forEach(element => {
|
|
let nextList = element.querySelector('.phone-menu__sub');
|
|
|
|
if (nextList) {
|
|
let button = element.querySelector('a');
|
|
|
|
button.onclick = function () {
|
|
nextList.classList.add('open')
|
|
}
|
|
|
|
nextList.querySelector('.phone-menu-content__close').onclick = function () {
|
|
nextList.classList.remove('open')
|
|
}
|
|
|
|
}
|
|
})
|
|
})
|
|
|
|
function addClosePhoneMenu(classAdd) {
|
|
document.querySelectorAll(classAdd).forEach(element => {
|
|
let button = document.createElement('button');
|
|
button.className = "phone-menu-content__close";
|
|
|
|
let referenceElement = element.firstElementChild;
|
|
|
|
console.log(element.insertBefore(button, referenceElement));
|
|
})
|
|
|
|
}
|
|
// phone menu end
|
|
|
|
// search
|
|
let openBtnSearch = document.querySelector('.header-menu-search__open'),
|
|
blockSearchPc = document.querySelector('.header-menu__search');
|
|
|
|
openBtnSearch.onclick = function () {
|
|
blockSearchPc.classList.toggle('active');
|
|
}
|
|
|
|
let btnOpenSearchPhone = document.querySelector('.phone__open-search'),
|
|
searchPhone = document.querySelector('.phone-search');
|
|
|
|
btnOpenSearchPhone.onclick = function () {
|
|
if (!searchPhone.classList.contains('hidden')) {
|
|
setTimeout(() => {
|
|
searchPhone.classList.add('hidden');
|
|
}, 300);
|
|
}else{
|
|
searchPhone.classList.remove('hidden');
|
|
}
|
|
|
|
btnOpenSearchPhone.classList.toggle('active');
|
|
searchPhone.classList.toggle('active');
|
|
}
|
|
|
|
// pc
|
|
let inputSearchPc = document.querySelector('.header-menu-search__input'),
|
|
btnSearchPc = document.querySelector('.header-menu-search__btn');
|
|
|
|
btnSearchPc.onclick = function () {
|
|
let value = inputSearchPc.value,
|
|
newPost = {
|
|
value: value,
|
|
};
|
|
|
|
postSearch(newPost, 'pc');
|
|
}
|
|
|
|
// phone
|
|
let inputSearchPhone = document.querySelector('.phone-search__input');
|
|
|
|
inputSearchPhone.addEventListener('input', function(event) {
|
|
let value = event.target.value,
|
|
newPost = {
|
|
value: value,
|
|
};
|
|
|
|
postSearch(newPost, 'phone');
|
|
});
|
|
|
|
function postSearch(newPost, device) {
|
|
let contentPc = document.querySelector('.header-menu-search__found'),
|
|
contentPhone = document.querySelector('.phone-search__found');
|
|
|
|
fetch('http://jsonplaceholder.typicode.com/posts', {
|
|
method: 'POST',
|
|
// body: JSON.stringify(newPost),
|
|
headers: {
|
|
'Content-type': 'application/json; charset=UTF-8',
|
|
},
|
|
})
|
|
.then((data) => {
|
|
if (device == 'pc') {
|
|
contentPc.innerHTML = '';
|
|
|
|
contentPc.innerHTML = `<div class="header-menu-search__item">
|
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img">
|
|
|
|
<div class="header-menu-search-item__content">
|
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
|
|
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p>
|
|
</div>
|
|
</div>`;
|
|
|
|
contentPc.classList.add('active');
|
|
}else{
|
|
contentPhone.innerHTML = '';
|
|
|
|
contentPhone.innerHTML = `<div class="phone-search__item">
|
|
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img">
|
|
|
|
<div class="phone-search-item__content">
|
|
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p>
|
|
<p class="phone-search-item__art text-2">Артикул: STP1000C</p>
|
|
</div>
|
|
</div>`;
|
|
|
|
contentPhone.classList.add('active');
|
|
}
|
|
}).catch(
|
|
() => {
|
|
if (device == 'pc') {
|
|
postError(contentPc);
|
|
}else{
|
|
postError(contentPhone);
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
function postError(divContent) {
|
|
divContent.innerHTML = ''
|
|
|
|
let p = document.createElement("p");
|
|
p.textContent = "Произошла ошибка"
|
|
p.className = "header-menu-search__error text-2";
|
|
|
|
divContent.appendChild(p);
|
|
}
|
|
|
|
|
|
// search end
|
|
|
|
// open-modal
|
|
|
|
let openModals = document.querySelectorAll('.open-modal'),
|
|
modal = document.querySelector('.modal');
|
|
|
|
openModals.forEach(openModal => {
|
|
let modalName = openModal.dataset.modal;
|
|
|
|
openModal.onclick = function () {
|
|
let modalItem = document.querySelector(`.modal__item.${modalName}`);
|
|
|
|
modalItem.classList.add('active');
|
|
modal.classList.add('active');
|
|
}
|
|
})
|
|
|
|
modal.onclick = function (event) {
|
|
if (event.srcElement.classList.contains('modal')) {
|
|
document.querySelector(`.modal__item.active`).classList.remove('active');
|
|
modal.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
let itemModels = document.querySelectorAll('.modal__item');
|
|
|
|
itemModels.forEach(item => {
|
|
let btnClose = item.querySelector('.modal-item__close');
|
|
|
|
btnClose.onclick = function () {
|
|
item.classList.remove('active');
|
|
modal.classList.remove('active');
|
|
}
|
|
})
|
|
// open-modal end
|
|
|
|
// masks
|
|
|
|
let phoneInputs = document.querySelectorAll('.input__field[type=phone]');
|
|
|
|
phoneInputs.forEach(phoneInput => {
|
|
phoneInput.onfocus = function (event) {
|
|
let value = phoneInput.value;
|
|
|
|
if (value.length == 0) {
|
|
phoneInput.value = '+7 '
|
|
}
|
|
}
|
|
|
|
phoneInput.addEventListener('input', function(event) {
|
|
let value = phoneInput.value,
|
|
data = event.data,
|
|
length = value.length;
|
|
|
|
if (value.charAt(0) == '+' && length == 1) return;
|
|
|
|
if (isNaN(data)) {
|
|
phoneInput.value = value.slice(0, -1);
|
|
}
|
|
|
|
if (typeof data != 'object') {
|
|
if (length == 2 || length == 6 || length == 10) {
|
|
phoneInput.value = value + ' ';
|
|
}
|
|
if (length == 3 || length == 7 || length == 11) {
|
|
if (data != ' ') {
|
|
phoneInput.value = value.slice(0, -1) + ' ' + data;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (length <= 3) {
|
|
phoneInput.value = '+7 '
|
|
}
|
|
|
|
});
|
|
})
|
|
|
|
// masks end
|
|
|
|
// pc menu
|
|
|
|
let listMenu = document.querySelectorAll('.header-menu__list > li');
|
|
|
|
listMenu.forEach(li => {
|
|
if (li.querySelector('.header-menu-list__next')) {
|
|
let nextButton = li.querySelector('.header-menu-list__next'),
|
|
sub = li.querySelector('.header-menu-list__sub');
|
|
|
|
nextButton.addEventListener('mouseover', function (event) {
|
|
let openSubMenu = document.querySelector('.header-menu-list__sub.open');
|
|
|
|
if (openSubMenu) {
|
|
openSubMenu.classList.remove('open');
|
|
}
|
|
|
|
sub.classList.add('open');
|
|
})
|
|
|
|
sub.addEventListener('mouseout', function (event) {
|
|
if (event.relatedTarget.offsetParent.tagName != 'UL') {
|
|
sub.classList.remove('open');
|
|
}
|
|
})
|
|
};
|
|
})
|
|
|
|
// pc menu end
|
|
|
|
// resize
|
|
window.addEventListener('resize', () => {
|
|
let screenWidth = window.screen.width;
|
|
|
|
if (screenWidth <= 992) {
|
|
howPhone();
|
|
}else{
|
|
howPc();
|
|
}
|
|
});
|
|
|