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.
 
 
 
 
cosmopet-architecture/wp-content/themes/cosmopet/static/front-page/js/main.js

594 lines
20 KiB

// Scroll for <a href="#{targer_id}"> by class "scroll_link"
const smoothLinks = document.querySelectorAll('.scroll_link');
for (let smoothLink of smoothLinks) {
smoothLink.addEventListener('click', function (e) {
e.preventDefault();
const id = smoothLink.getAttribute('href');
document.querySelector(id).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
};
// Header menu
document.addEventListener('DOMContentLoaded', function () {
let body = document.querySelector('body');
let header = document.querySelector('.header');
jQuery('.header-lang').on('click', function(){
jQuery(this).find('ul').toggle()
})
/* Здесь было открытие/закрытие моб.меню */
// let headerBars = document.querySelector('.header_bars');
// let headerClose = document.querySelector('.header_close');
// jQuery(".header_bars").on('click', function(){jQuery('.header_navs').toggleClass('active')})
// headerBars.addEventListener('click', function () {
// header.classList.add('mobile-open');
// body.classList.add('no-scroll');
// });
// function removeActiveClass() {
// header.classList.remove('mobile-open');
// body.classList.remove('no-scroll');
// }
// headerClose.addEventListener('click', removeActiveClass);
jQuery(".header_bars").on('click', function(){jQuery('.header_navs').toggleClass('active')})
/* start: aboutSlider */
// var slider = carousel_init();
// function carousel_init() {
// var carousel = document.querySelectorAll('.carousel');
// if (window.innerWidth > 421) {
// var options = {
// numVisible: 5,
// // indicators: true,
// }
// } else if (window.innerWidth < 421) {
// var options = {
// numVisible: 3,
// // indicators: true,
// }
// }
// var instances = M.Carousel.init(carousel, options);
// document.querySelectorAll('.about_slider_nav').forEach(btn => {
// btn.addEventListener('click', function (e) {
// // window.t = e.target.closest('button')
// // console.log(t)
// if (e.target.closest('button').classList.contains('next')) {
// instances[0].next();
// }else{
// instances[0].prev();
// }
// });
// });
// return instances;
// }
/* GP | Start: Анимация в блоке "Отзывы ветеринаров" */
// const reviewsItems = jQuery('.reviews_item')
// setInterval(() => {
// if (jQuery(reviewsItems[0]).is(':visible')) {
// jQuery(reviewsItems[0]).hide()
// jQuery(reviewsItems[1]).show()
// } else {
// jQuery(reviewsItems[0]).show()
// jQuery(reviewsItems[1]).hide()
// }
// setTimeout(() => {
// if (jQuery(reviewsItems[2]).is(':visible')) {
// jQuery(reviewsItems[2]).hide()
// jQuery(reviewsItems[3]).show()
// } else {
// jQuery(reviewsItems[2]).show()
// jQuery(reviewsItems[3]).hide()
// }
// }, 3000);
// setTimeout(() => {
// if (jQuery(reviewsItems[4]).is(':visible')) {
// jQuery(reviewsItems[4]).hide()
// jQuery(reviewsItems[5]).show()
// } else {
// jQuery(reviewsItems[4]).show()
// jQuery(reviewsItems[5]).hide()
// }
// }, 6000);
// }, 9000);
/* GP | End: Анимация в блоке "Отзывы ветеринаров" */
/* GP | Start: blogosphere__swiper */
// function carousel_init_new() {
// const carousel = document.querySelector('.blogosphere__swiper');
// let options = {}; // Переменная для хранения текущих параметров
// // Функция для обновления настроек в зависимости от размера экрана
// function setOptions() {
// if (window.innerWidth > 421) {
// options = {
// numVisible: 5,
// onCycleTo: (el) => {
// const slides = carousel.querySelectorAll('.carousel-item');
// slides.forEach((slide) => {
// const video = slide.querySelector('video');
// if (video) {
// video.pause();
// }
// });
// }
// };
// } else {
// options = {
// numVisible: 3,
// };
// }
// }
// // Инициализация карусели с текущими параметрами
// function initCarousel() {
// setOptions(); // Устанавливаем параметры при инициализации
// M.Carousel.init(carousel, options); // Инициализация карусели с новыми параметрами
// }
// // Инициализация карусели при загрузке страницы
// initCarousel();
// // Обновляем карусель при изменении размера окна
// window.addEventListener('resize', function () {
// // Уничтожаем старую карусель и создаем новую с обновленными параметрами
// if (carousel) {
// carousel.M_Carousel.destroy();
// }
// initCarousel();
// });
// // Прямое добавление обработчиков на кнопки
// const nextBtn = document.querySelector('.blogosphere__btn.next');
// const prevBtn = document.querySelector('.blogosphere__btn.prev');
// if (nextBtn && prevBtn) {
// nextBtn.addEventListener('click', (e) => {
// e.preventDefault();
// e.stopPropagation();
// if (carousel) {
// carousel.M_Carousel.next();
// }
// });
// prevBtn.addEventListener('click', (e) => {
// e.preventDefault();
// e.stopPropagation();
// if (carousel) {
// carousel.M_Carousel.prev();
// }
// });
// }
// }
// // Инициализация карусели
// carousel_init_new();
/* GP | End: */
let home = new Swiper(".home__swiper ", {
slidesPerView: 1,
spaceBetween: 1000,
loop:true,
autoplay: {
delay: 5000,
},
pagination: {
el: ".home__pagination",
clickable: true
},
});
let market = new Swiper(".marketplace__swiper ", {
slidesPerView: 'auto',
spaceBetween: 13,
});
// sellerSlider
let sellerSlider = new Swiper(".sellerSlider", {
slidesPerView: 5,
spaceBetween: 24,
centeredSlides: true,
initialSlide: 1,
loop:true,
navigation: {
nextEl: '.sellerSlider-next',
prevEl: '.sellerSlider-prev'
},
breakpoints: {
250: {
slidesPerView: 1,
spaceBetween: 22,
},
576: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 2.5,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 20,
},
1400: {
slidesPerView: 5,
spaceBetween: 24,
},
}
});
// blogSlider
let blogSlider = new Swiper(".blogSlider", {
slidesPerView: 2.5,
spaceBetween: 43,
navigation: {
nextEl: '.blogSlider-next',
prevEl: '.blogSlider-prev'
},
breakpoints: {
300: {
slidesPerView: 1.3,
spaceBetween: 20,
},
776: {
slidesPerView: 1.3,
spaceBetween: 53,
},
991: {
slidesPerView: 2.4,
spaceBetween: '5%',
},
1400: {
slidesPerView: 2.4,
spaceBetween: '5%',
},
}
});
let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", {
slidesPerView: 2.5,
spaceBetween: 43,
navigation: {
nextEl: '.cosmopet-next',
prevEl: '.cosmopet-prev'
},
breakpoints: {
300: {
slidesPerView: 1,
spaceBetween: 200,
},
776: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2.4,
spaceBetween: '5%',
},
1400: {
slidesPerView: 3,
spaceBetween: 37,
},
}
});
let smigSlider = new Swiper(".smiSlider", {
slidesPerView: 3.3,
spaceBetween: 40,
navigation: {
nextEl: '.smiSlider-next',
prevEl: '.smiSlider-prev'
},
breakpoints: {
300: {
slidesPerView: 1.3,
spaceBetween: 20,
},
776: {
slidesPerView: 1.3,
spaceBetween: 40,
},
991: {
slidesPerView: 2.4,
spaceBetween: 40,
},
1400: {
slidesPerView: 2.8,
spaceBetween: 40,
},
}
});
let petsSlider = new Swiper(".discount_cosmodog__slider", {
slidesPerView: 1,
spaceBetween: 0,
effect: "fade",
autoplay: {
delay: 5000,
},
});
});
// Quiz
document.addEventListener('DOMContentLoaded', function () {
const truthContents = document.querySelectorAll('.truth_content');
let currentIndex = 0;
let correctAnswers = 0;
truthContents.forEach(content => {
const successBtn = content.querySelector('.success_btn');
const errorBtn = content.querySelector('.error_btn');
const nextBtn = content.querySelectorAll(".next_btn");
const truthSuccess = content.querySelector('.truth_success');
const truthError = content.querySelector('.truth_error');
const truthDefault = content.querySelector('.truth_default');
if (successBtn) {
successBtn.addEventListener('click', function () {
truthDefault.style.display = 'none';
truthSuccess.classList.add('show');
correctAnswers++;
});
}
if (errorBtn) {
errorBtn.addEventListener('click', function () {
truthDefault.style.display = 'none';
truthError.classList.add('show');
});
}
if (nextBtn) {
nextBtn.forEach(btn => {
btn.addEventListener('click', function () {
truthSuccess.classList.contains('show') ? truthSuccess.classList.remove('show') : truthError.classList.remove('show');
content.classList.remove('active');
currentIndex++;
if (currentIndex < truthContents.length) {
truthContents[currentIndex].classList.add('active');
}
if (truthContents.length - currentIndex == 1) {
truthContents[currentIndex].querySelector(".truth_points-corrects").innerHTML = correctAnswers;
truthContents[currentIndex].querySelector(".truth_points-all").innerHTML = currentIndex ;
}
})
});
}
// Initial visibility
if (truthDefault) {
truthDefault.style.display = 'block';
}
});
});
// discount cosmodog img
document.addEventListener('DOMContentLoaded', function () {
const cosmodogContainer = document.querySelector('.discount_cosmodog');
if (cosmodogContainer){
const images = cosmodogContainer.querySelectorAll('.discount_cosmodog-img');
let currentIndex = 0;
cosmodogContainer.addEventListener('click', function () {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
});
}
});
document.addEventListener('DOMContentLoaded', function () {
jQuery('.truth-form').on('submit', function(e){
e.preventDefault();
var form = new FormData(this);
var action = jQuery(this).attr('action')
jQuery.ajax({
url: action,
data: form,
processData: false,
contentType: false,
type: 'POST',
success: function (response) {
response = JSON.parse(response)
if (response.status == 'Success'){
jQuery('.truth_end-text--before').hide()
jQuery('.truth_end-text--sent').show()
}
}
});
})
jQuery('body').on('click', '[data-copy]', async function(){
try {
const textToCopy = jQuery(this).data('copy');
await navigator.clipboard.writeText(textToCopy);
jQuery(this).addClass('active')
setTimeout(function(){
jQuery(this).removeClass('active')
}, 2000)
} catch (err) {
}
})
});
document.addEventListener('DOMContentLoaded', function () {
const sliders = document.querySelectorAll('.reviews_item-swiper');
sliders.forEach((slider, index) => {
new Swiper(slider, {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
autoplay: {
delay: 3000, // Интервал переключения слайдов (3 секунды)
disableOnInteraction: false,
pauseOnMouseEnter: false,
// Задержка перед началом автопрокрутки для каждого слайдера
delayBeforeStart: index *
1000, // 0 сек для первого, 1 сек для второго, 2 сек для третьего
},
});
});
// Swiper не поддерживает delayBeforeStart нативно, поэтому добавим кастомную задержку
sliders.forEach((slider, index) => {
const swiperInstance = slider.swiper;
setTimeout(() => {
swiperInstance.autoplay.start();
}, index * 1000); // Задержка перед стартом: 0, 1000, 2000 мс
});
});
<<<<<<< HEAD
// Находим все элементы с классом login-open
document.addEventListener('DOMContentLoaded', function() {
const loginButtons = document.querySelectorAll('.login-open');
// Добавляем обработчик события для каждой кнопки
loginButtons.forEach(button => {
button.addEventListener('click', function(event) {
event.preventDefault(); // Предотвращаем стандартное действие (если это ссылка)
// Находим элементы модального окна
const modal = document.querySelector('.modal');
const modalAside = document.querySelector('.modal__aside');
const modalLogin = document.querySelector('.modal__login');
// Добавляем классы active
modal.classList.add('active');
modalLogin.classList.add('active');
// Устанавливаем ширину для modal__aside
modalAside.style.width = '412px';
});
});
// Опционально: добавляем функцию закрытия модального окна
// Например, при клике на фон или кнопку закрытия
const closeButtons = document.querySelectorAll('.modal-close');
const modal = document.querySelector('.modal');
// Закрытие по клику на кнопку закрытия
closeButtons.forEach(button => {
button.addEventListener('click', closeModal);
});
// Закрытие по клику на фон (если клик не на модальное окно)
modal.addEventListener('click', function(event) {
if (event.target === modal) {
closeModal();
}
});
function closeModal() {
const modal = document.querySelector('.modal');
const modalAside = document.querySelector('.modal__aside');
const modalLogin = document.querySelector('.modal__login');
// Удаляем классы active
modal.classList.remove('active');
modalLogin.classList.remove('active');
// Сбрасываем ширину
modalAside.style.width = '';
}
});
=======
document.addEventListener('DOMContentLoaded', function() {
// Initialize Swiper
const reviewsSwiper = new Swiper('.reviews-slider', {
slidesPerView: 1,
spaceBetween: 50,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-prev',
prevEl: '.swiper-button-next',
},
breakpoints: {
320: {
slidesPerView: 1.3,
spaceBetween: 20,
},
1024: {
slidesPerView: 2,
},
1200: {
slidesPerView: 2,
}
}
});
// Show more functionality
const showMoreButtons = document.querySelectorAll('.show-more-btn');
const reviewPopup = document.querySelector('.review-popup');
const popupContent = document.querySelector('.popup-review-content');
const closePopup = document.querySelector('.close-popup');
showMoreButtons.forEach(button => {
button.addEventListener('click', function() {
const reviewCard = this.closest('.review-card');
const reviewHeader = reviewCard.querySelector('.review-header').cloneNode(true);
const reviewText = reviewCard.querySelector('.review-text').cloneNode(true);
// Show the hidden content in the review text
const moreContent = reviewText.querySelector('.review-more-content');
if (moreContent) {
moreContent.style.display = 'block';
}
// Populate popup
popupContent.innerHTML = '';
popupContent.appendChild(reviewHeader);
popupContent.appendChild(reviewText);
// Show popup
reviewPopup.style.display = 'flex';
});
});
// Close popup
closePopup.addEventListener('click', function() {
reviewPopup.style.display = 'none';
});
// Close popup when clicking outside
reviewPopup.addEventListener('click', function(e) {
if (e.target === reviewPopup) {
reviewPopup.style.display = 'none';
}
});
});
>>>>>>> ec84500a88f048324cf2940bad3ba7528694953e