init
This commit is contained in:
Константин Белан
250
assets/js/scripts.js
Normal file
250
assets/js/scripts.js
Normal file
@@ -0,0 +1,250 @@
|
||||
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()
|
||||
})
|
||||
}
|
||||
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
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user