@tomasvn/glightbox 0.0.0-stage → 3.3.4

package/src/js/slides/iframe.js

@@ -0,0 +1,24 @@
+/**
+ * Set slide iframe content
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { createIframe } from '../utils/helpers.js';
+
+export default function slideIframe(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+    const iframe = createIframe({
+        url: data.href,
+        callback: callback
+    });
+
+    slideMedia.parentNode.style.maxWidth = data.width;
+    slideMedia.parentNode.style.height = data.height;
+    slideMedia.appendChild(iframe);
+
+    return;
+}

package/src/js/slides/image.js

@@ -0,0 +1,56 @@
+/**
+ * Set slide inline content
+ * we'll extend this to make http
+ * requests using the fetch api
+ * but for now we keep it simple
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { isNil, isFunction } from '../utils/helpers.js';
+
+export default function slideImage(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+
+    let img = new Image();
+    let titleID = 'gSlideTitle_' + index;
+    let textID = 'gSlideDesc_' + index;
+
+    // prettier-ignore
+    img.addEventListener('load', () => {
+        if (isFunction(callback)) {
+            callback();
+        }
+    }, false);
+
+    img.src = data.href;
+    if (data.sizes != '' && data.srcset != '') {
+        img.sizes = data.sizes;
+        img.srcset = data.srcset;
+    }
+    img.alt = ''; // https://davidwalsh.name/accessibility-tip-empty-alt-attributes
+    if (!isNil(data.alt) && data.alt !== '') {
+        img.alt = data.alt;
+    }
+
+    if (data.title !== '') {
+        img.setAttribute('aria-labelledby', titleID);
+    }
+    if (data.description !== '') {
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute#Example_2_A_Close_Button
+        img.setAttribute('aria-describedby', textID);
+    }
+
+    if (data.hasOwnProperty('_hasCustomWidth') && data._hasCustomWidth) {
+        img.style.width = data.width;
+    }
+    if (data.hasOwnProperty('_hasCustomHeight') && data._hasCustomHeight) {
+        img.style.height = data.height;
+    }
+
+    slideMedia.insertBefore(img, slideMedia.firstChild);
+    return;
+}

package/src/js/slides/inline.js

@@ -0,0 +1,71 @@
+/**
+ * Set slide inline content
+ * we'll extend this to make http
+ * requests using the fetch api
+ * but for now we keep it simple
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+
+import { has, addClass, addEvent, createHTML, isString, isNode, isFunction } from '../utils/helpers.js';
+
+export default function slideInline(slide, data, index, callback) {
+    const slideMedia = slide.querySelector('.gslide-media');
+    const hash = has(data, 'href') && data.href ? data.href.split('#').pop().trim() : false;
+    const content = has(data, 'content') && data.content ? data.content : false;
+    let innerContent;
+
+    if (content) {
+        if (isString(content)) {
+            innerContent = createHTML(`<div class="ginlined-content">${content}</div>`);
+        }
+        if (isNode(content)) {
+            if (content.style.display == 'none') {
+                content.style.display = 'block';
+            }
+
+            const container = document.createElement('div');
+            container.className = 'ginlined-content';
+            container.appendChild(content);
+            innerContent = container;
+        }
+    }
+
+    if (hash) {
+        let div = document.getElementById(hash);
+        if (!div) {
+            return false;
+        }
+        const cloned = div.cloneNode(true);
+
+        cloned.style.height = data.height;
+        cloned.style.maxWidth = data.width;
+        addClass(cloned, 'ginlined-content');
+        innerContent = cloned;
+    }
+
+    if (!innerContent) {
+        console.error('Unable to append inline slide content', data);
+        return false;
+    }
+
+    slideMedia.style.height = data.height;
+    slideMedia.style.width = data.width;
+    slideMedia.appendChild(innerContent);
+
+    this.events['inlineclose' + hash] = addEvent('click', {
+        onElement: slideMedia.querySelectorAll('.gtrigger-close'),
+        withCallback: (e) => {
+            e.preventDefault();
+            this.close();
+        }
+    });
+
+    if (isFunction(callback)) {
+        callback();
+    }
+    return;
+}

package/src/js/slides/video.js

@@ -0,0 +1,108 @@
+/**
+ * Set slide video
+ *
+ * @param {node} slide
+ * @param {object} data
+ * @param {int} index
+ * @param {function} callback
+ */
+import { has, closest, injectAssets, addClass, removeClass, createHTML, isFunction, waitUntil } from '../utils/helpers.js';
+
+export default function slideVideo(slide, data, index, callback) {
+    const slideContainer = slide.querySelector('.ginner-container');
+    const videoID = 'gvideo' + index;
+    const slideMedia = slide.querySelector('.gslide-media');
+    const videoPlayers = this.getAllPlayers();
+
+    addClass(slideContainer, 'gvideo-container');
+
+    slideMedia.insertBefore(createHTML('<div class="gvideo-wrapper"></div>'), slideMedia.firstChild);
+
+    const videoWrapper = slide.querySelector('.gvideo-wrapper');
+
+    injectAssets(this.settings.plyr.css, 'Plyr');
+
+    let url = data.href;
+    let provider = data?.videoProvider;
+    let customPlaceholder = false;
+
+    slideMedia.style.maxWidth = data.width;
+
+    injectAssets(this.settings.plyr.js, 'Plyr', () => {
+        // Set vimeo videos
+        if (!provider && url.match(/vimeo\.com\/([0-9]*)/)) {
+            provider = 'vimeo';
+        }
+
+        // Set youtube videos
+        if (
+            !provider &&
+            (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) ||
+                url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) ||
+                url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) ||
+                url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/))
+        ) {
+            provider = 'youtube';
+        }
+
+        // Set local videos
+        // if no provider, default to local
+        if (provider === 'local' || !provider) {
+            provider = 'local';
+            let html = '<video id="' + videoID + '" ';
+            html += `style="background:#000; max-width: ${data.width};" `;
+            html += 'preload="metadata" ';
+            html += 'x-webkit-airplay="allow" ';
+            html += 'playsinline ';
+            html += 'controls ';
+            html += 'class="gvideo-local">';
+            html += `<source src="${url}">`;
+            html += '</video>';
+            customPlaceholder = createHTML(html);
+        }
+
+        // prettier-ignore
+        const placeholder = customPlaceholder ? customPlaceholder : createHTML(`<div id="${videoID}" data-plyr-provider="${provider}" data-plyr-embed-id="${url}"></div>`);
+
+        addClass(videoWrapper, `${provider}-video gvideo`);
+        videoWrapper.appendChild(placeholder);
+        videoWrapper.setAttribute('data-id', videoID);
+        videoWrapper.setAttribute('data-index', index);
+
+        const playerConfig = has(this.settings.plyr, 'config') ? this.settings.plyr.config : {};
+        const player = new Plyr('#' + videoID, playerConfig);
+
+        player.on('ready', (event) => {
+            videoPlayers[videoID] = event.detail.plyr;
+            if (isFunction(callback)) {
+                callback();
+            }
+        });
+        waitUntil(
+            () => {
+                return slide.querySelector('iframe') && slide.querySelector('iframe').dataset.ready == 'true';
+            },
+            () => {
+                this.resize(slide);
+            }
+        );
+        player.on('enterfullscreen', handleMediaFullScreen);
+        player.on('exitfullscreen', handleMediaFullScreen);
+    });
+}
+
+/**
+ * Handle fullscreen
+ *
+ * @param {object} event
+ */
+function handleMediaFullScreen(event) {
+    const media = closest(event.target, '.gslide-media');
+
+    if (event.type === 'enterfullscreen') {
+        addClass(media, 'fullscreen');
+    }
+    if (event.type === 'exitfullscreen') {
+        removeClass(media, 'fullscreen');
+    }
+}