fslightbox 3.3.3 → 3.4.0

package/c/sources/pointering/move/SourcesPointerMoveActioner.js

@@ -0,0 +1,34 @@
+import { CURSOR_GRABBING_CLASS_NAME } from "../../../../cn/classes-names";
+import { addToElementClassIfNotContains } from "../../../../h/elements/addToElementClassIfNotContains";
+
+export function SourcesPointerMoveActioner(
+    {
+        elements,
+        sourcePointerProps,
+        stageIndexes
+    }
+) {
+    this.runActionsForEvent = (e) => {
+        // we are showing InvisibleHover component in move event not in down event
+        // due to IE problems with videos sources controlling
+        if (!elements.container.contains(elements.slideSwipingHoverer)) {
+            elements.container.appendChild(elements.slideSwipingHoverer);
+        }
+
+        addToElementClassIfNotContains(elements.container, CURSOR_GRABBING_CLASS_NAME);
+
+        sourcePointerProps.swipedX = e.screenX - sourcePointerProps.downScreenX;
+
+	var pi=stageIndexes.previous,ni=stageIndexes.next;
+        t(stageIndexes.current, "z");
+        if (pi !== undefined && sourcePointerProps.swipedX > 0) {
+            t(pi, "ne");
+        } else if (ni !== undefined && sourcePointerProps.swipedX < 0) {
+            t(ni, "p");
+        }
+    };
+
+    function t(i, p) {
+	elements.smw[i].v(sourcePointerProps.swipedX)[p]()
+    }
+}

package/c/sources/pointering/up/SourcesPointerUp.js

@@ -0,0 +1,13 @@
+import { SourcesPointerUpActioner } from "./SourcesPointerUpActioner";
+
+export function SourcesPointerUp({ resolve, sourcePointerProps }) {
+    const sourcesPointerUpActioner = resolve(SourcesPointerUpActioner);
+
+    this.listener = () => {
+        if (sourcePointerProps.isPointering) {
+            (sourcePointerProps.swipedX) ?
+                sourcesPointerUpActioner.runActions() :
+                sourcesPointerUpActioner.runNoSwipeActions();
+        }
+    };
+}

package/c/sources/pointering/up/SourcesPointerUpActioner.js

@@ -0,0 +1,38 @@
+import { SourcesPointerUpActionerBucket } from "./SourcesPointerUpActionerBucket";
+import { CURSOR_GRABBING_CLASS_NAME } from "../../../../cn/classes-names";
+import { removeFromElementChildIfContains } from '../../../../h/elements/removeFromElementChildIfContains';
+
+export function SourcesPointerUpActioner(
+    {
+        core: { lightboxCloser },
+        elements,
+        resolve,
+        sourcePointerProps
+    }
+) {
+    const sourcesPointerUpActionsBucket = resolve(SourcesPointerUpActionerBucket);
+
+    this.runNoSwipeActions = () => {
+        removeFromElementChildIfContains(elements.container, elements.slideSwipingHoverer);
+
+        if (!sourcePointerProps.isSourceDownEventTarget) {
+            lightboxCloser.closeLightbox();
+        }
+
+        sourcePointerProps.isPointering = false;
+    };
+
+    this.runActions = () => {
+        if (sourcePointerProps.swipedX > 0) {
+            sourcesPointerUpActionsBucket.runPositiveSwipedXActions();
+        } else {
+            sourcesPointerUpActionsBucket.runNegativeSwipedXActions();
+        }
+
+        removeFromElementChildIfContains(elements.container, elements.slideSwipingHoverer);
+
+        elements.container.classList.remove(CURSOR_GRABBING_CLASS_NAME);
+
+        sourcePointerProps.isPointering = false;
+    };
+}

package/c/sources/pointering/up/SourcesPointerUpActionerBucket.js

@@ -0,0 +1 @@
+export function SourcesPointerUpActionerBucket({core:{slideIndexChanger},elements:{smw},stageIndexes,sws}){this.runPositiveSwipedXActions=()=>{var i=stageIndexes.previous;if(i===undefined){t("z");}else{t("p");var usi=stageIndexes.next;slideIndexChanger.changeTo(i);var pi=stageIndexes.previous;sws.d(pi);sws.b(usi);t("z");s(pi,"ne");}};this.runNegativeSwipedXActions=()=>{var i=stageIndexes.next;if(i===undefined){t("z");}else{t("ne");var usi=stageIndexes.previous;slideIndexChanger.changeTo(i);var ni=stageIndexes.next;sws.d(ni);sws.b(usi);t("z");s(ni,"p");}};function t(p){var w=smw[stageIndexes.current];w.a();w[p]();}function s(i,p){if(i!==undefined){smw[i].s();smw[i][p]();}}}

package/c/sources/setUpSourceDisplayFacade.js

@@ -0,0 +1,26 @@
+export function setUpSourceDisplayFacade(
+    {
+        collections: { sourcesRenderFunctions },
+        core: { sourceDisplayFacade: self },
+        props,
+        stageIndexes
+    }
+) {
+    self.displaySourcesWhichShouldBeDisplayed = () => {
+        if (props.loadOnlyCurrentSource) {
+            runRenderActionsForSourceWithIndex(stageIndexes.current);
+            return;
+        }
+
+        for (let i in stageIndexes) {
+            runRenderActionsForSourceWithIndex(stageIndexes[i]);
+        }
+    };
+
+    function runRenderActionsForSourceWithIndex(i) {
+        if (sourcesRenderFunctions[i]) {
+            sourcesRenderFunctions[i]();
+            delete sourcesRenderFunctions[i];
+        }
+    }
+}

package/c/sources/types/AutomaticTypeDetector.js

@@ -0,0 +1,70 @@
+import {
+    IMAGE_TYPE,
+    INVALID_TYPE,
+    VIDEO_TYPE,
+    YOUTUBE_TYPE,
+} from "../../../cn/core-constants";
+import { getAutomaticTypeDetectorBucket } from "./getAutomaticTypeDetectorBucket";
+
+export function AutomaticTypeDetector() {
+    const automaticTypeDetectorBucket = getAutomaticTypeDetectorBucket();
+
+    let url;
+    let resolveSourceType;
+    let xhr;
+
+    this.setUrlToCheck = (urlToCheck) => {
+        url = urlToCheck;
+    };
+
+    /**
+     * Asynchronous method takes callback which will be called after source type is received with source type as param.
+     * @param {Function} callback
+     */
+    this.getSourceType = (callback) => {
+        if (automaticTypeDetectorBucket.isUrlYoutubeOne(url)) {
+            return callback(YOUTUBE_TYPE);
+        }
+        resolveSourceType = callback;
+        xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = onRequestStateChange;
+        xhr.open('GET', url, true);
+        xhr.send();
+    };
+
+    function onRequestStateChange() {
+        // If state 4 is executed without state 2 - request has failed (most likely by CORS) so need to resolve invalid type.
+        // No need to abort request because it is already finished.
+        if (xhr.readyState === 4) {
+            resolveSourceType(INVALID_TYPE);
+            return;
+        }
+
+        if (xhr.readyState !== 2) {
+            return;
+        }
+
+        const headerType = automaticTypeDetectorBucket.getTypeFromResponseContentType(
+            xhr.getResponseHeader('content-type')
+        );
+
+        let finalType;
+        switch (headerType) {
+            case 'image':
+                finalType = IMAGE_TYPE;
+                break;
+            case 'video':
+                finalType = VIDEO_TYPE;
+                break;
+            default:
+                finalType = INVALID_TYPE;
+        }
+
+        // Need to reset onreadystatechange because after xhr.abort() if request is sent (xhr.send())
+        // xhr will call onreadystatechange with readyState 4: https://xhr.spec.whatwg.org/#the-abort()-method
+        xhr.onreadystatechange = null;
+        xhr.abort();
+
+        resolveSourceType(finalType);
+    }
+}

package/c/sources/types/DetectedTypeActioner.js

@@ -0,0 +1,44 @@
+import { CUSTOM_TYPE, IMAGE_TYPE, INVALID_TYPE, VIDEO_TYPE, YOUTUBE_TYPE } from "../../../cn/core-constants";
+import { SourceLoadHandler } from "../SourceLoadHandler";
+import { renderImage } from "../../../cm/sources/proper-sources/renderImage";
+import { renderVideo } from "../../../cm/sources/proper-sources/renderVideo";
+import { renderYoutube } from "../../../cm/sources/proper-sources/renderYoutube";
+import { renderCustom } from "../../../cm/sources/proper-sources/renderCustom";
+import { renderInvalid } from "../../../cm/sources/proper-sources/renderInvalid";
+
+export function DetectedTypeActioner(fsLightbox) {
+    const {
+        collections: { sourceLoadHandlers, sourcesRenderFunctions },
+        core: { sourceDisplayFacade },
+        resolve
+    } = fsLightbox;
+
+    this.runActionsForSourceTypeAndIndex = (type, i) => {
+        if (type !== INVALID_TYPE) {
+            sourceLoadHandlers[i] = resolve(SourceLoadHandler, [i]);
+        }
+
+        let renderFunction;
+
+        switch (type) {
+            case IMAGE_TYPE:
+                renderFunction = renderImage;
+                break;
+            case VIDEO_TYPE:
+                renderFunction = renderVideo;
+                break;
+            case YOUTUBE_TYPE:
+                renderFunction = renderYoutube;
+                break;
+            case CUSTOM_TYPE:
+                renderFunction = renderCustom;
+                break;
+            default:
+                renderFunction = renderInvalid;
+                break;
+        }
+
+        sourcesRenderFunctions[i] = () => renderFunction(fsLightbox, i);
+        sourceDisplayFacade.displaySourcesWhichShouldBeDisplayed();
+    };
+}

package/c/sources/types/getAutomaticTypeDetectorBucket.js

@@ -0,0 +1,14 @@
+export function getAutomaticTypeDetectorBucket() {
+    return {
+        isUrlYoutubeOne: (url) => {
+            const parser = document.createElement("a");
+            parser.href = url;
+            return parser.hostname === "www.youtube.com"
+		|| parser.hostname === "youtu.be";
+        },
+
+        getTypeFromResponseContentType: (responseContentType) => {
+            return responseContentType.slice(0, responseContentType.indexOf("/"));
+        }
+    };
+}

package/c/stage/setUpStageManager.js

@@ -0,0 +1,57 @@
+export function setUpStageManager(
+    {
+        stageIndexes,
+        core: { stageManager: self },
+        props: { sources }
+    }
+) {
+    const lastSourceIndex = sources.length - 1;
+
+    self.getPreviousSlideIndex = () => {
+        return (stageIndexes.current === 0) ?
+            lastSourceIndex :
+            stageIndexes.current - 1;
+    };
+
+    self.getNextSlideIndex = () => {
+        return (stageIndexes.current === lastSourceIndex) ?
+            0 :
+            stageIndexes.current + 1;
+    };
+
+    // set up updateStageIndexes
+    if (lastSourceIndex === 0) {
+        self.updateStageIndexes = () => {};
+    } else if (lastSourceIndex === 1) {
+        self.updateStageIndexes = () => {
+            if (stageIndexes.current === 0) {
+                stageIndexes.next = 1;
+                delete stageIndexes.previous;
+            } else {
+                stageIndexes.previous = 0;
+                delete stageIndexes.next;
+            }
+        };
+    } else {
+        self.updateStageIndexes = () => {
+            stageIndexes.previous = self.getPreviousSlideIndex();
+            stageIndexes.next = self.getNextSlideIndex();
+        };
+    }
+
+    (lastSourceIndex <= 2) ?
+        self.i = () => true :
+        self.i = (index) => {
+            const currentIndex = stageIndexes.current;
+
+            if ((currentIndex === 0 && index === lastSourceIndex)
+                || (currentIndex === lastSourceIndex && index === 0))
+                return true;
+
+            const difference = currentIndex - index;
+
+            return difference === -1 ||
+                difference === 0 ||
+                difference === 1;
+        };
+}

package/c/stage/ssws.js

@@ -0,0 +1,2 @@
+import{DISPLAY_NONE_CLASS_NAME,FADE_IN_CLASS_NAME,FADE_IN_STRONG_CLASS_NAME,FADE_OUT_CLASS_NAME}from"../../cn/classes-names";import{removeFromElementClassIfContains}from"../../h/elements/removeFromElementClassIfContains";export function ssws({core:{stageManager},elements:{smw,sourceAnimationWrappers},isl,stageIndexes,sws:self}){self.a=function(){for(var k in stageIndexes){smw[stageIndexes[k]].s()}};self.b=function(i){if(i!==undefined&&!stageManager.i(i)){smw[i].h();smw[i].n();}};self.c=function(){for(var k in stageIndexes){self.d(stageIndexes[k]);}};self.d=function(i){if(!isl[i]){return;}var saw=sourceAnimationWrappers[i];removeFromElementClassIfContains(saw,FADE_IN_STRONG_CLASS_NAME);removeFromElementClassIfContains(saw,FADE_IN_CLASS_NAME);removeFromElementClassIfContains(saw,FADE_OUT_CLASS_NAME)}}
+// In the "b" method, it's checked whether the index is not undefined because it may be when there are only two sources.

package/c/styles/createAndAppendStyles.js

@@ -0,0 +1,9 @@
+import { styles } from "../../s";
+import { FSLIGHTBOX_STYLES } from "../../cn/classes-names";
+
+export function createAndAppendStyles() {
+    const style = document.createElement('style');
+    style.className = FSLIGHTBOX_STYLES;
+    style.appendChild(document.createTextNode(styles));
+    document.head.appendChild(style);
+}

package/c/styles/injectStylesIfNotInDom.js

@@ -0,0 +1,8 @@
+import { createAndAppendStyles } from "./createAndAppendStyles";
+import { FSLIGHTBOX_STYLES } from "../../cn/classes-names";
+
+export function injectStylesIfNotInDom() {
+    if (!document.getElementsByClassName(FSLIGHTBOX_STYLES).length) {
+        createAndAppendStyles();
+    }
+}

package/c/styles/styles-injection/styles-injection.js

@@ -0,0 +1,5 @@
+import { createAndAppendStyles } from "../createAndAppendStyles";
+
+if (typeof document === "object") {
+    createAndAppendStyles();
+}

package/c/timeouts/getQueuedAction.js

@@ -0,0 +1,15 @@
+export function getQueuedAction(action, time) {
+    const queue = [];
+
+    return () => {
+        queue.push(true);
+
+        setTimeout(() => {
+            queue.pop();
+
+            if (!queue.length) {
+                action();
+            }
+        }, time);
+    };
+}

package/cm/h/renderSvg.js

@@ -0,0 +1,17 @@
+import { PREFIX } from "../../cn/classes-names";
+
+export function renderAndGetSvg(parent, size, viewBox, d) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttributeNS(null, 'width', size);
+    svg.setAttributeNS(null, 'height', size);
+    svg.setAttributeNS(null, 'viewBox', viewBox);
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttributeNS(null, 'class', `${PREFIX}svg-path`);
+    path.setAttributeNS(null, 'd', d);
+
+    svg.appendChild(path);
+    parent.appendChild(svg);
+
+    return svg;
+}

package/cm/nav/renderAndGetToolbarButton.js

@@ -0,0 +1,11 @@
+import { FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../cn/classes-names";
+
+export function renderAndGetToolbarButton(parent, title) {
+    const toolbarButton = document.createElement('div');
+    toolbarButton.className = `${PREFIX}toolbar-button ${FLEX_CENTERED_CLASS_NAME}`;
+    toolbarButton.title = title;
+
+    parent.appendChild(toolbarButton);
+
+    return toolbarButton;
+}

package/cm/nav/renderCloseButton.js

@@ -0,0 +1,10 @@
+import { renderAndGetToolbarButton } from "./renderAndGetToolbarButton";
+import { renderAndGetSvg } from "../h/renderSvg";
+
+export function renderCloseButton(fsLightbox, parent) {
+    const closeButton = renderAndGetToolbarButton(parent, 'Close');
+
+    closeButton.onclick = fsLightbox.core.lightboxCloser.closeLightbox;
+
+    renderAndGetSvg(closeButton, '20px', '0 0 24 24', 'M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z');
+}

package/cm/nav/renderFullscreenButton.js

@@ -0,0 +1,43 @@
+import { renderAndGetSvg } from "../h/renderSvg";
+import { renderAndGetToolbarButton } from "./renderAndGetToolbarButton";
+
+export function renderFullscreenButton(
+	{
+		componentsServices,
+		data,
+		fs
+	},
+	parent
+) {
+    const enterSize = '20px';
+    const enterViewBox = '0 0 18 18';
+    const enterD = 'M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z';
+
+    const exitSize = '24px';
+    const exitViewBox = '0 0 950 1024';
+    const exitD = 'M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z';
+
+    const fullscreenButton = renderAndGetToolbarButton(parent);
+    fullscreenButton.title = 'Enter fullscreen';
+    const svg = renderAndGetSvg(fullscreenButton, enterSize, enterViewBox, enterD);
+
+    componentsServices.ofs = () => {
+        data.ifs = true;
+        fullscreenButton.title = 'Exit fullscreen';
+        svg.setAttributeNS(null, 'width', exitSize);
+        svg.setAttributeNS(null, 'height', exitSize);
+        svg.setAttributeNS(null, 'viewBox', exitViewBox);
+        svg.firstChild.setAttributeNS(null, 'd', exitD);
+    };
+
+    componentsServices.xfs = () => {
+        data.ifs = false;
+        fullscreenButton.title = 'Enter fullscreen';
+        svg.setAttributeNS(null, 'width', enterSize);
+        svg.setAttributeNS(null, 'height', enterSize);
+        svg.setAttributeNS(null, 'viewBox', enterViewBox);
+        svg.firstChild.setAttributeNS(null, 'd', enterD);
+    };
+
+    fullscreenButton.onclick = fs.t;
+}

package/cm/nav/renderNav.js

@@ -0,0 +1,17 @@
+import { renderToolbar } from "./renderToolbar";
+import { renderSlideNumber } from "./renderSlideNumber";
+import { PREFIX } from "../../cn/classes-names";
+
+export function renderNav(fsLightbox) {
+    const { props: { sources }, elements: { container } } = fsLightbox;
+
+    const nav = document.createElement('div');
+    nav.className = `${PREFIX}nav`;
+    container.appendChild(nav);
+
+    renderToolbar(fsLightbox, nav);
+
+    if (sources.length > 1) {
+        renderSlideNumber(fsLightbox, nav);
+    }
+}

package/cm/nav/renderSlideNumber.js

@@ -0,0 +1,29 @@
+import { FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../cn/classes-names";
+
+export function renderSlideNumber({ componentsServices, props: { sources }, stageIndexes }, parent) {
+    const slideNumberOuter = document.createElement('div');
+    slideNumberOuter.className = `${PREFIX}slide-number-container`;
+
+    const slideNumberInner = document.createElement('div');
+    slideNumberInner.className = FLEX_CENTERED_CLASS_NAME;
+
+    const currentNumber = document.createElement('span');
+    componentsServices.setSlideNumber = (number) => currentNumber.innerHTML = number;
+    const slash = document.createElement('span');
+    slash.className = `${PREFIX}slash`;
+
+    const totalNumber = document.createElement('div');
+    totalNumber.innerHTML = sources.length;
+
+    slideNumberOuter.appendChild(slideNumberInner);
+    slideNumberInner.appendChild(currentNumber);
+    slideNumberInner.appendChild(slash);
+    slideNumberInner.appendChild(totalNumber);
+    parent.appendChild(slideNumberOuter);
+
+    setTimeout(() => {
+        if (slideNumberInner.offsetWidth > 55) {
+            slideNumberOuter.style.justifyContent = 'flex-start';
+        }
+    });
+}

package/cm/nav/renderToolbar.js

@@ -0,0 +1,13 @@
+import { PREFIX } from "../../cn/classes-names";
+import { renderFullscreenButton } from "./renderFullscreenButton";
+import { renderCloseButton } from "./renderCloseButton";
+
+export function renderToolbar(fsLightbox, parent) {
+    const toolbar = document.createElement('div');
+    toolbar.className = `${PREFIX}toolbar`;
+
+    parent.appendChild(toolbar);
+
+    renderFullscreenButton(fsLightbox, toolbar);
+    renderCloseButton(fsLightbox, toolbar);
+}

package/cm/renderSlideButton.js

@@ -0,0 +1,11 @@
+import { FLEX_CENTERED_CLASS_NAME, SLIDE_BTN } from "../cn/classes-names";
+import { renderAndGetSvg } from "./h/renderSvg";
+
+export function renderSlideButton(parent, d) {
+    const button = document.createElement('div');
+    button.className = `${SLIDE_BTN} ${FLEX_CENTERED_CLASS_NAME}`;
+
+    renderAndGetSvg(button, '20px', '0 0 20 20', d);
+
+    parent.appendChild(button);
+}

package/cm/renderSlideButtonContainer.js

@@ -0,0 +1,15 @@
+import { SLIDE_BTN_CONTAINER } from "../cn/classes-names";
+import { renderSlideButton } from "./renderSlideButton";
+
+export function renderSlideButtonContainer({ elements: { container } }, onClick, name, d) {
+    const titleName = name.charAt(0).toUpperCase() + name.slice(1);
+
+    const slideBtnContainer = document.createElement('div');
+    slideBtnContainer.className = `${ SLIDE_BTN_CONTAINER } ${ SLIDE_BTN_CONTAINER }-${ name }`;
+    slideBtnContainer.title = `${ titleName } slide`;
+    slideBtnContainer.onclick = onClick;
+
+    renderSlideButton(slideBtnContainer, d);
+
+    container.appendChild(slideBtnContainer);
+}

package/cm/renderSlideButtons.js

@@ -0,0 +1,7 @@
+import { renderSlideButtonContainer } from "./renderSlideButtonContainer";
+
+export function renderSlideButtons(fsLightbox) {
+    const { core: { slideChangeFacade } } = fsLightbox;
+    renderSlideButtonContainer(fsLightbox, slideChangeFacade.changeToPrevious, 'previous', 'M18.271,9.212H3.615l4.184-4.184c0.306-0.306,0.306-0.801,0-1.107c-0.306-0.306-0.801-0.306-1.107,0L1.21,9.403C1.194,9.417,1.174,9.421,1.158,9.437c-0.181,0.181-0.242,0.425-0.209,0.66c0.005,0.038,0.012,0.071,0.022,0.109c0.028,0.098,0.075,0.188,0.142,0.271c0.021,0.026,0.021,0.061,0.045,0.085c0.015,0.016,0.034,0.02,0.05,0.033l5.484,5.483c0.306,0.307,0.801,0.307,1.107,0c0.306-0.305,0.306-0.801,0-1.105l-4.184-4.185h14.656c0.436,0,0.788-0.353,0.788-0.788S18.707,9.212,18.271,9.212z');
+    renderSlideButtonContainer(fsLightbox, slideChangeFacade.changeToNext, 'next', 'M1.729,9.212h14.656l-4.184-4.184c-0.307-0.306-0.307-0.801,0-1.107c0.305-0.306,0.801-0.306,1.106,0l5.481,5.482c0.018,0.014,0.037,0.019,0.053,0.034c0.181,0.181,0.242,0.425,0.209,0.66c-0.004,0.038-0.012,0.071-0.021,0.109c-0.028,0.098-0.075,0.188-0.143,0.271c-0.021,0.026-0.021,0.061-0.045,0.085c-0.015,0.016-0.034,0.02-0.051,0.033l-5.483,5.483c-0.306,0.307-0.802,0.307-1.106,0c-0.307-0.305-0.307-0.801,0-1.105l4.184-4.185H1.729c-0.436,0-0.788-0.353-0.788-0.788S1.293,9.212,1.729,9.212z');
+}

package/cm/renderSlideSwipingHoverer.js

@@ -0,0 +1,6 @@
+import { ABSOLUTED_CLASS_NAME, FULL_DIMENSION_CLASS_NAME, PREFIX } from "../cn/classes-names";
+
+export function renderSlideSwipingHoverer({ elements }) {
+    elements.slideSwipingHoverer = document.createElement('div');
+    elements.slideSwipingHoverer.className = `${PREFIX}slide-swiping-hoverer ${FULL_DIMENSION_CLASS_NAME} ${ABSOLUTED_CLASS_NAME}`;
+}

package/cm/sources/proper-sources/renderCustom.js

@@ -0,0 +1,15 @@
+import { SOURCE_CLASS_NAME } from "../../../cn/classes-names";
+import { setUpSourceClassName } from "../../../h/source/setUpSourceClassName";
+
+export function renderCustom(fsLightbox, i) {
+    const {
+        collections: { sourceLoadHandlers },
+        elements: { sources: sourcesElements, sourceAnimationWrappers },
+        props: { sources }
+    } = fsLightbox;
+
+    sourcesElements[i] = sources[i];
+    setUpSourceClassName(fsLightbox, i, `${sourcesElements[i].className} ${SOURCE_CLASS_NAME}`);
+    sourceAnimationWrappers[i].appendChild(sourcesElements[i]);
+    sourceLoadHandlers[i].handleCustomLoad();
+}

package/cm/sources/proper-sources/renderImage.js

@@ -0,0 +1,18 @@
+import { SOURCE_CLASS_NAME } from "../../../cn/classes-names";
+import { setUpSourceClassName } from "../../../h/source/setUpSourceClassName";
+import { setUpSourceCustomAttributes } from "../../../h/source/setUpSourceCustomAttributes";
+
+export function renderImage(fsLightbox, i) {
+    const {
+        collections: { sourceLoadHandlers },
+        elements: { sources: sourcesElements, sourceAnimationWrappers },
+        props: { sources }
+    } = fsLightbox;
+
+    sourcesElements[i] = document.createElement('img');
+    setUpSourceClassName(fsLightbox, i, SOURCE_CLASS_NAME);
+    sourcesElements[i].src = sources[i];
+    sourcesElements[i].onload = sourceLoadHandlers[i].handleImageLoad;
+    setUpSourceCustomAttributes(fsLightbox, i);
+    sourceAnimationWrappers[i].appendChild(sourcesElements[i]);
+}

package/cm/sources/proper-sources/renderInvalid.js

@@ -0,0 +1,18 @@
+import { FADE_IN_STRONG_CLASS_NAME, FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../../cn/classes-names";
+
+export function renderInvalid(
+    {
+        elements: { sources: sourcesElements, sourceAnimationWrappers },
+        props: { sources }
+    }, i
+) {
+    sourcesElements[i] = document.createElement('div');
+    sourcesElements[i].className = `${PREFIX}invalid-file-wrapper ${FLEX_CENTERED_CLASS_NAME}`;
+    sourcesElements[i].innerHTML = 'Invalid source';
+
+    sourceAnimationWrappers[i].classList.add(FADE_IN_STRONG_CLASS_NAME);
+
+    sourceAnimationWrappers[i].removeChild(sourceAnimationWrappers[i].firstChild);
+
+    sourceAnimationWrappers[i].appendChild(sourcesElements[i]);
+}

package/cm/sources/proper-sources/renderVideo.js

@@ -0,0 +1,31 @@
+import { SOURCE_CLASS_NAME } from "../../../cn/classes-names";
+import { setUpSourceClassName } from "../../../h/source/setUpSourceClassName";
+import { setUpSourceCustomAttributes } from "../../../h/source/setUpSourceCustomAttributes";
+
+export function renderVideo(fsLightbox, i) {
+    const {
+        collections: { sourceLoadHandlers },
+        elements: { sources: sourcesElements, sourceAnimationWrappers },
+        props: { sources, videosPosters }
+    } = fsLightbox;
+
+    sourcesElements[i] = document.createElement('video');
+    setUpSourceClassName(fsLightbox, i, SOURCE_CLASS_NAME)
+    sourcesElements[i].src = sources[i];
+    sourcesElements[i].onloadedmetadata = (e) => {
+        sourceLoadHandlers[i].handleVideoLoad(e);
+    };
+    sourcesElements[i].controls = true;
+    setUpSourceCustomAttributes(fsLightbox, i);
+    if (videosPosters[i]) {
+        sourcesElements[i].poster = videosPosters[i];
+    }
+
+    const source = document.createElement('source');
+    source.src = sources[i];
+    sourcesElements[i].appendChild(source);
+
+    setTimeout(sourceLoadHandlers[i].handleNotMetaDatedVideoLoad, 3000);
+
+    sourceAnimationWrappers[i].appendChild(sourcesElements[i]);
+}