diff --git a/index.js b/index.js index bf22a51..b1e4c9d 100644 --- a/index.js +++ b/index.js @@ -93,6 +93,7 @@ const playVideo = (slide) => { clearInterval(checkInterval); } }, 100); + slide.checkInterval = checkInterval; } }; @@ -118,9 +119,7 @@ const pauseVideo = (slide) => { const setVideoSize = (gallery) => { const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper'); - items[0].style = ` - width: ''; - `; + items[0].style.cssText = ''; let height = (items[0].getBoundingClientRect().width * 9) / 16; let width = ''; if (height > items[0].getBoundingClientRect().height) { @@ -128,7 +127,7 @@ const setVideoSize = (gallery) => { width = `${(height * 16) / 9}px`; } for (const item of items) { - item.style = ` + item.style.cssText = ` height: ${height}px; width: ${width}; `; @@ -143,10 +142,17 @@ const hide = async (duration = 500, easing = 'linear') => { easing, }).finished; + // Очищаем интервалы проверки для видео + for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) { + if (slide.checkInterval) { + clearInterval(slide.checkInterval); + } + } + gallery.remove(); delete window.GalleryRTPlayer; - document.body.style = ` + document.body.style.cssText = ` overflow: ''; margin-right: ''; `; @@ -155,7 +161,7 @@ const hide = async (duration = 500, easing = 'linear') => { const show = async (duration = 500, easing = 'linear') => { const gallery = document.body.querySelector('.advdominion-lg'); - document.body.style = ` + document.body.style.cssText = ` overflow: hidden; margin-right: ${getScrollbarWidth()}px `; @@ -328,7 +334,7 @@ const init = async (items = [], options = {}, index = 0) => { const gallery = document.body.querySelector('.advdominion-lg'); - gallery.querySelector('.advdominion-lg__container').style = ` + gallery.querySelector('.advdominion-lg__container').style.cssText = ` visibility: hidden; `; @@ -340,7 +346,7 @@ const init = async (items = [], options = {}, index = 0) => { ); swiper.on('init', function () { - gallery.querySelector('.advdominion-lg__container').style = ` + gallery.querySelector('.advdominion-lg__container').style.cssText = ` visibility: ''; `; @@ -375,26 +381,25 @@ const init = async (items = [], options = {}, index = 0) => { swiper.init(); - gallery.querySelector('.advdominion-lg__close').addEventListener('click', () => { + const closeHandler = () => { hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing); - }); + }; - document.querySelector('body').addEventListener( - 'keydown', - (e) => { - if (e.key === 'Escape') { - hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing); - } - }, - { - once: true, - }, - ); + const keydownHandler = (e) => { + if (e.key === 'Escape') { + closeHandler(); + document.body.removeEventListener('keydown', keydownHandler); + } + }; + + gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler); + document.body.addEventListener('keydown', keydownHandler); }; export const gallery = (container, options) => { const items = []; if (options.single) { + const element = container.children[0]; items.push({ url: element.href, caption: document.querySelector(element.dataset.galleryCaption)?.textContent,