swiperWrap.addEventListener("click", (e) => {
buttonsModal.forEach(btn => {
e.preventDefault();
const idPopup = e.target.getAttribute('data-id');
new PopupFrame(modalArr[idPopup].src, 'body').render();
document.querySelector('.modal').classList.add("is-visible");
document.documentElement.classList.add("lock");
document.querySelector('.video').classList.add('active');
})
});const buttonsModal = document.querySelectorAll('.open-modal');
const modalArr = [
{
"src": "https://www.youtube.com/embed/aqgyhk2TGfs?autoplay=1",
},
{
"src": "https://www.youtube.com/embed/X091vYnLRhE?autoplay=1",
},
{
"src": "https://www.youtube.com/embed/UFFgfE72tZQ?autoplay=1",
}
];
const element = document.createElement('section');
class PopupFrame {
constructor(src, parentSelector) {
this.src = src;
this.parent = document.querySelector(parentSelector);
}
render() {
element.classList.add('frame');
element.classList.add('frame-active');
element.innerHTML = `
<div class="modal" data-animation="slideInOutLeft">
<div class="modal-dialog">
<button class="close-modal _icon-close" ></button>
<section class="modal-container">
<div class="video">
<iframe src="${this.src}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</div>
</div>
`
this.parent.append(element);
const buttonClose = document.querySelector(".close-modal");
buttonClose.addEventListener("click", () => {
stopPopup();
})
}
}
buttonsModal.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const idPopup = e.target.getAttribute('data-id');
new PopupFrame(modalArr[idPopup].src, 'body').render();
document.querySelector('.modal').classList.add("is-visible");
document.documentElement.classList.add("lock");
document.querySelector('.video').classList.add('active');
})
})
function stopPopup() {
element.remove();
}
document.addEventListener("click", e => {
if (e.target === document.querySelector(".modal.is-visible")) {
stopPopup();
}
});
document.addEventListener("keyup", e => {
if (e.key === "Escape" && document.querySelector(".modal.is-visible")) {
stopPopup();
}
});let isCounted = false;
const scrollImations = (entries, observer) => {
entries.forEach((entry) => {
// анимируем, если элемент целиком попадает в отслеживаемую область
if (isCounted === false) {
if (entry.isIntersecting && entry.intersectionRatio == 1) {
const counters = document.querySelectorAll('.counter');
counters.forEach((counter) => {
counter.innerText = '1';
const updateCounter = () => {
isCounted = true;
const target = +counter.getAttribute('data-target');
const c = +counter.innerText;
const increment = target / 250;
if (c < target && !counter.classList.contains('ready-count')) {
counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 1);
} else {
counter.innerText = target;
}
};
updateCounter();
})
} else {
return
}
}
});
}
const options = {
threshold: 1.0,
};
const observer = new IntersectionObserver(scrollImations, options);
const vision = document.querySelectorAll('.counter');
vision.forEach((counter) => {
observer.observe(counter);
});const counters = document.querySelectorAll('.counter');
counters.forEach((counter) => {
counter.innerText = '1';
const updateCounter = () => {
const target = +counter.getAttribute('data-target');
const c = +counter.innerText;
const increment = target / 250;
if (c < target) {
counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 1);
} else {
counter.innerText = target;
}
};
updateCounter();
})