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.
595 lines
20 KiB
595 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,
|
|
effect: 'fade',
|
|
fadeEffect: {
|
|
crossFade: true // enables slides to cross fade into each other
|
|
},
|
|
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 мс
|
|
});
|
|
});
|
|
|
|
// Находим все элементы с классом 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';
|
|
}
|
|
});
|
|
});
|
|
|