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.
 
 
 
template-for-verstka/assets/js/scripts.js

265 lines
8.1 KiB

document.addEventListener('DOMContentLoaded', function () {
const header = document.querySelector('header.header')
if (header) {
let sticky = header.offsetTop + 70
document.addEventListener('scroll', scrollMenu)
function scrollMenu() {
if (window.scrollY > sticky) {
header.classList.add('sticky')
} else {
header.classList.remove('sticky')
}
}
}
const reviewsWrapper = document.querySelector('.reviews__btns')
if (reviewsWrapper) {
const reviewsBtns = document.querySelectorAll('.reviews__btns button')
const reviewsTabs = document.querySelectorAll(
'.reviews__tabs .reviews__tab'
)
const reviewsNav = document.querySelectorAll('.reviews__nav button')
for (let i = 0; i < reviewsBtns.length; i++) {
const reviewsBtn = reviewsBtns[i]
reviewsBtn.addEventListener('click', e => {
const reviewsBtnActive = document.querySelector(
'.reviews__btns button.btn--blue'
)
const reviewsTabActive = document.querySelector(
'.reviews__tab.reviews__tab--visible'
)
if (reviewsTabs[i]) {
reviewsBtnActive.classList.remove('btn--blue')
reviewsBtnActive.classList.add('btn--white')
e.target.classList.remove('btn--white')
e.target.classList.add('btn--blue')
reviewsTabActive.classList.remove('reviews__tab--visible')
reviewsTabActive.classList.add('reviews__tab--hidden')
reviewsTabs[i].classList.remove('reviews__tab--hidden')
reviewsTabs[i].classList.add('reviews__tab--visible')
document
.querySelector('.reviews__swiper.swiper-initialized')
.swiper.destroy()
initSwiper(
reviewsTabs[i].querySelector('.reviews__swiper'),
reviewsTabs[i]
)
}
})
}
}
const faqContent = document.querySelector('.faq__content')
if (faqContent) {
const faqItems = faqContent.querySelectorAll('.faq__item')
for (const faqItem of faqItems) {
faqItem.addEventListener('click', function (e) {
const faqItemActive = faqContent.querySelector('.faq__item.active')
if (this.classList.contains('active')) {
this.classList.remove('active')
} else {
if (faqItemActive) {
faqItemActive.classList.remove('active')
}
this.classList.add('active')
}
})
}
}
const seoSection = document.querySelector('.information')
if (seoSection) {
const seoWrapper = document.querySelector('.information__content')
const seoWrapperHeight = seoWrapper.clientHeight
const seoBtn = seoSection.querySelector('#information__more')
if (seoWrapperHeight > '420') {
seoWrapper.classList.add('half')
seoBtn.classList.add('visible')
}
seoBtn.addEventListener('click', function () {
seoWrapper.classList.toggle('visible')
if (seoBtn.innerHTML == 'Читать полностью →') {
seoBtn.innerHTML = 'Скрыть описание ↑'
} else {
seoBtn.innerHTML = 'Читать полностью →'
}
})
}
const headerWrapper = document.querySelector('header.header')
if (headerWrapper) {
const headerBurger = headerWrapper.querySelector('.header__nav-burger')
const headerNavList = headerWrapper.querySelector('.header__nav-list')
const submenuList = headerWrapper.querySelector('.submenu__list')
const html = document.querySelector('html')
const body = document.querySelector('body')
submenuList.addEventListener('click', function (e) {
submenuList.classList.toggle('opened')
})
headerBurger.addEventListener('click', function (e) {
if (submenuList.classList.contains('opened')) {
submenuList.classList.remove('opened')
} else {
html.classList.toggle('fixed')
body.classList.toggle('fixed')
headerBurger.classList.toggle('opened')
headerNavList.classList.toggle('visible')
}
})
}
const modalWrapper = document.querySelector('.modal')
if (modalWrapper) {
const modalBg = document.querySelector('#modal__bg')
const modalBtns = document.querySelectorAll('.modal__open')
const modalBtnsClose = document.querySelectorAll('.modal__close')
const html = document.querySelector('html')
const body = document.querySelector('body')
function modalClose() {
modalBg.classList.remove('opened')
document.querySelector('.modal.opened').classList.remove('opened')
html.classList.remove('fixed')
body.classList.remove('fixed')
}
for (const modalBtn of modalBtns) {
modalBtn.addEventListener('click', function (e) {
const modalBtnData = this.dataset.modal
const modalID = document.querySelector(
'.modal[data-id=' + modalBtnData + ']'
)
html.classList.add('fixed')
body.classList.add('fixed')
modalBg.classList.add('opened')
modalID.classList.add('opened')
})
}
for (const modalBtnClose of modalBtnsClose) {
modalBtnClose.addEventListener('click', function (e) {
modalClose()
})
}
modalBg.addEventListener('click', function (e) {
modalClose()
})
}
const mapsWrapper = document.querySelector('.contacts__maps')
if (mapsWrapper) {
const mapsBtns = document.querySelectorAll('button.btn__maps')
for (const mapsBtn of mapsBtns) {
mapsBtn.addEventListener('click', function (e) {
const btnMapsData = mapsBtn.dataset.maps
const mapsIframe = document.querySelector('.contacts__maps iframe')
// mapsIframe.src = btnMapsData
mapsIframe.src =
'https://yandex.ru/map-widget/v1/?lang=ru_RU&scroll=true&source=constructor-api&um=constructor%' +
btnMapsData +
''
})
}
}
let scrollLinks = document.querySelectorAll('a[href*="#"]')
for (let scrollLink of scrollLinks) {
scrollLink.addEventListener('click', function (event) {
event.preventDefault()
let id = this.getAttribute('href').substr(1)
let getElement = document.getElementById(id)
if (getElement) {
getElement.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}
})
}
function initSwiper(element, classchild) {
let slidesPerView = 3
let slidesPerView2 = 3
let spaceBetween = 24
let nextEl = '.reviews__nav-next'
let prevEl = '.reviews__nav-prev'
let scrollbarel = element
const isDOM = obj => obj instanceof Node
if (isDOM(scrollbarel) == true) {
scrollbarel = scrollbarel.classList[0]
}
if (classchild) {
if (classchild.classList.contains('reviews__screenshot')) {
slidesPerView = 4
slidesPerView2 = 4
}
if (classchild.classList.contains('articles')) {
nextEl = '.articles__nav-next'
prevEl = '.articles__nav-prev'
}
if (classchild.classList.contains('team')) {
slidesPerView = 4
slidesPerView2 = 3
spaceBetween = 12
nextEl = '.team__nav-next'
prevEl = '.team__nav-prev'
}
if (classchild.classList.contains('single__gallery')) {
slidesPerView = 1
slidesPerView2 = 3
spaceBetween = 12
nextEl = '.single__slider-next'
prevEl = '.single__slider-prev'
}
}
var swiper = new Swiper(element, {
slidesPerView: slidesPerView,
spaceBetween: spaceBetween,
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
// mousewheel: true,
keyboard: true,
scrollbar: {
el: scrollbarel + ' .swiper-scrollbar',
draggable: true,
},
breakpoints: {
320: {
slidesPerView: slidesPerView2 - 2,
spaceBetween: spaceBetween,
},
640: {
slidesPerView: slidesPerView2 - 1,
spaceBetween: spaceBetween,
},
993: {
slidesPerView: slidesPerView - 1,
spaceBetween: spaceBetween,
},
1070: {
slidesPerView: slidesPerView,
},
},
observer: true,
observeParents: true,
observeSlideChildren: true,
})
}
initSwiper('.reviews__video .reviews__swiper', '')
initSwiper('.articles__slider', document.querySelector('.articles'))
initSwiper('.team__slider', document.querySelector('.team'))
let sliderSingle = document.querySelector('.single__carousel')
if (sliderSingle) {
initSwiper('.single__carousel', document.querySelector('.single__gallery'))
}
// let sliderOtherPosts = document.querySelector('.single__carousel')
// if (sliderOtherPosts) {
// initSwiper('.articles__items', document.querySelector('.articles'))
// }
})
Fancybox.bind('[data-fancybox]', {
//
})
if ('loading' in HTMLImageElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]')
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src
})
}