v1.0.0
This commit is contained in:
Valentin Silytuin
229
index.js
Normal file
229
index.js
Normal file
@@ -0,0 +1,229 @@
|
||||
/* globals GalleryYTPlayer, YT */
|
||||
|
||||
import getScrollbarWidth from '@advdominion/get-scrollbar-width';
|
||||
|
||||
const getYTPlayer = () => {
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://www.youtube.com/player_api';
|
||||
script.async = true;
|
||||
document.body.append(script);
|
||||
};
|
||||
|
||||
const playVideo = (slide) => {
|
||||
const youtube = slide.querySelector('.advdominion-lg__video_youtube');
|
||||
|
||||
if (youtube) {
|
||||
if (slide.YTPlayer) {
|
||||
slide.YTPlayer.playVideo();
|
||||
} else if (window.YT) {
|
||||
if (GalleryYTPlayer.state) {
|
||||
slide.YTPlayer = new YT.Player(youtube, {
|
||||
videoId: youtube.dataset.id,
|
||||
events: {
|
||||
onReady(event) {
|
||||
event.target.playVideo();
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
GalleryYTPlayer.addListener(() => {
|
||||
playVideo(slide);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
getYTPlayer();
|
||||
GalleryYTPlayer.addListener(() => {
|
||||
playVideo(slide);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const pauseVideo = (slide) => {
|
||||
const youtube = slide.querySelector('.advdominion-lg__video_youtube');
|
||||
|
||||
if (youtube && slide.YTPlayer) {
|
||||
slide.YTPlayer.pauseVideo();
|
||||
}
|
||||
};
|
||||
|
||||
const setVideoSize = (gallery) => {
|
||||
const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
|
||||
items[0].style = `
|
||||
width: '';
|
||||
`;
|
||||
let height = (items[0].getBoundingClientRect().width * 9) / 16;
|
||||
let width = '';
|
||||
if (height > items[0].getBoundingClientRect().height) {
|
||||
height = items[0].getBoundingClientRect().height;
|
||||
width = `${(height * 16) / 9}px`;
|
||||
}
|
||||
for (const item of items) {
|
||||
item.style = `
|
||||
height: ${height}px;
|
||||
width: ${width};
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
const hide = async (duration = 500, easing = 'linear') => {
|
||||
const gallery = document.body.querySelector('.advdominion-lg');
|
||||
|
||||
await gallery.animate([{opacity: 1}, {opacity: 0}], {
|
||||
duration,
|
||||
easing,
|
||||
}).finished;
|
||||
|
||||
gallery.remove();
|
||||
|
||||
document.body.style = `
|
||||
overflow: '';
|
||||
margin-right: '';
|
||||
`;
|
||||
};
|
||||
|
||||
const show = async (duration = 500, easing = 'linear') => {
|
||||
const gallery = document.body.querySelector('.advdominion-lg');
|
||||
|
||||
document.body.style = `
|
||||
overflow: hidden;
|
||||
margin-right: ${getScrollbarWidth()}px
|
||||
`;
|
||||
|
||||
await gallery.animate([{opacity: 0}, {opacity: 1}], {
|
||||
duration,
|
||||
easing,
|
||||
}).finished;
|
||||
};
|
||||
|
||||
const init = async (items = [], options = {}, index = 0) => {
|
||||
const {Swiper, Navigation, Pagination} = import('swiper');
|
||||
Swiper.use([Navigation, Pagination]);
|
||||
|
||||
let isVideoInGallery = false;
|
||||
items = items.map((item) => {
|
||||
if (/youtube\.com\/watch\?v=/.test(item)) {
|
||||
isVideoInGallery = true;
|
||||
return `
|
||||
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||
<div class="advdominion-lg__video-wrapper">
|
||||
<div
|
||||
class="advdominion-lg__video advdominion-lg__video_youtube"
|
||||
data-id="${/v=([\w-]+)/i.exec(item)[1]}">
|
||||
Загрузка YouTube-плеера...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return `
|
||||
<div class="advdominion-lg__item swiper-slide">
|
||||
<img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
if (isVideoInGallery && !window.GalleryYTPlayer) {
|
||||
window.GalleryYTPlayer = {
|
||||
state: false,
|
||||
get init() {
|
||||
return this.state;
|
||||
},
|
||||
set init(val) {
|
||||
this.state = val;
|
||||
this.callback.forEach((i) => {
|
||||
i(val);
|
||||
});
|
||||
},
|
||||
callback: [],
|
||||
addListener(callback) {
|
||||
this.callback.push(callback);
|
||||
},
|
||||
};
|
||||
|
||||
window.onYouTubeIframeAPIReady = () => {
|
||||
window.GalleryYTPlayer.init = true;
|
||||
};
|
||||
}
|
||||
|
||||
document.body.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
`
|
||||
<div class="advdominion-lg">
|
||||
<button class="advdominion-lg__close" type="button">
|
||||
<svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
|
||||
</button>
|
||||
<div class="advdominion-lg__container swiper-container">
|
||||
<div class="advdominion-lg__wrapper swiper-wrapper">
|
||||
${items.join('')}
|
||||
</div>
|
||||
${options.pagination ? options.pagination : ''}
|
||||
${options.navigation ? options.navigation : ''}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
const gallery = document.body.querySelector('.advdominion-lg');
|
||||
|
||||
await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
|
||||
|
||||
const swiper = new Swiper(
|
||||
gallery.querySelector('.advdominion-lg__container'),
|
||||
Object.assign({init: false, initialSlide: index}, options.swiper)
|
||||
);
|
||||
|
||||
swiper.on('init', function () {
|
||||
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||
playVideo(this.slides[this.activeIndex]);
|
||||
}
|
||||
|
||||
if (isVideoInGallery) {
|
||||
setVideoSize(gallery);
|
||||
}
|
||||
});
|
||||
|
||||
swiper.on('slideChange', function () {
|
||||
if (this.slides[this.previousIndex].classList.contains('advdominion-lg__item_video')) {
|
||||
pauseVideo(this.slides[this.previousIndex]);
|
||||
}
|
||||
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||
playVideo(this.slides[this.activeIndex]);
|
||||
}
|
||||
});
|
||||
|
||||
swiper.on('resize', function () {
|
||||
if (isVideoInGallery) {
|
||||
setVideoSize(gallery);
|
||||
}
|
||||
});
|
||||
|
||||
swiper.init();
|
||||
|
||||
gallery.querySelector('.advdominion-lg__close').addEventListener('click', () => {
|
||||
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,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default (container, options) => {
|
||||
const items = [];
|
||||
for (const [index, element] of [...container.children].entries()) {
|
||||
items.push(element.href);
|
||||
element.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
init(items, options, index);
|
||||
});
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user