sgVimeoLightbox.js

'use strict';

import LightboxManager from 'lightboxManager';

export default class SgVimeoLightbox {

	/**
	 * Initializes the LightboxManager with the necessary parameters.
	 */
	constructor() {
		const vimeoItems = document.querySelectorAll('.sg-vimeo-item');
		const isMobile = window.matchMedia('(max-width: 679px)').matches;

		vimeoItems.forEach((item) => {
			if (item.dataset.disableLightboxMobile === '1' && isMobile || item.dataset.disableLightbox === '1' && !isMobile) {
				item.classList.remove('sg-vimeo-item');
				item.addEventListener('click', this.disableLightbox.bind(this));
			}
		});

		LightboxManager.init({type: 'video', glightbox: {selector: '.sg-vimeo-item'}});
	}

	disableLightbox(event) {
		event.preventDefault();
		const item = event.currentTarget;
		item.classList.add('no-lightbox');

		const videoId = this.getVideoIdFromUrl(item.href);
		const videoImage = item.querySelector('.sg-video__image');
		const height = videoImage.offsetHeight;
		const width = videoImage.offsetWidth;

		const iframe = document.createElement('iframe');
		iframe.width = width;
		iframe.height = height;
		iframe.style.border = 'none';
		iframe.src = `https://player.vimeo.com/video/${videoId}?dnt=1`;
		iframe.allowFullscreen = true;

		item.replaceChild(iframe, videoImage);
	}

	getVideoIdFromUrl(url) {
		const splitUrl = url.split('/');
		return splitUrl[splitUrl.length - 1];
	}
}