npm - fslightbox - Versions diffs - 3.3.0 → 3.3.2-2 - Mend

fslightbox 3.3.0 → 3.3.2-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/FsLightbox.js +110 -0
package/README.md +38 -34
package/components/helpers/renderSvg.js +17 -0
package/components/nav/renderAndGetToolbarButton.js +11 -0
package/components/nav/renderCloseButton.js +10 -0
package/components/nav/renderFullscreenButton.js +42 -0
package/components/nav/renderNav.js +17 -0
package/components/nav/renderSlideNumber.js +33 -0
package/components/nav/renderToolbar.js +13 -0
package/components/renderSlideButton.js +11 -0
package/components/renderSlideButtonContainer.js +15 -0
package/components/renderSlideButtons.js +7 -0
package/components/renderSlideSwipingHoverer.js +6 -0
package/components/sources/proper-sources/renderCustom.js +15 -0
package/components/sources/proper-sources/renderImage.js +18 -0
package/components/sources/proper-sources/renderInvalid.js +19 -0
package/components/sources/proper-sources/renderVideo.js +31 -0
package/components/sources/proper-sources/renderYoutube.js +26 -0
package/components/sources/renderSourceAnimationWrapper.js +4 -0
package/components/sources/renderSourceMainWrapper.js +32 -0
package/components/sources/renderSourceWrappersContainer.js +22 -0
package/constants/classes-names.js +27 -0
package/constants/core-constants.js +6 -0
package/constants/css-constants.js +1 -0
package/constants/dom-constants.js +1 -0
package/constants/elements.js +3 -0
package/constants/local-storage-constants.js +2 -0
package/core/collections/fillSourcesOutersTransformersCollection.js +13 -0
package/core/elements/setUpClassFacade.js +9 -0
package/core/events/setUpEventsDispatcher.js +7 -0
package/core/events/setUpGlobalEventsController.js +34 -0
package/core/fullscreen/setUpFullscreenToggler.js +30 -0
package/core/keyboard/KeyboardController.js +20 -0
package/core/main-component/closing/LightboxCloseActioner.js +46 -0
package/core/main-component/closing/setUpLightboxCloser.js +11 -0
package/core/main-component/initializing/initializeLightbox.js +38 -0
package/core/main-component/opening/setUpLightboxOpener.js +47 -0
package/core/scrollbar/getInnerElementOfWidthGetter.js +5 -0
package/core/scrollbar/getOuterElementOfWidthGetter.js +9 -0
package/core/scrollbar/getScrollbarWidth.js +31 -0
package/core/scrollbar/setUpScrollbarRecompensor.js +20 -0
package/core/setUpCore.js +30 -0
package/core/sizes/setUpWindowResizeActioner.js +35 -0
package/core/slide/setUpSlideChangeFacade.js +23 -0
package/core/slide/setUpSlideIndexChanger.js +60 -0
package/core/sources/SourceLoadActioner.js +29 -0
package/core/sources/SourceLoadHandler.js +41 -0
package/core/sources/SourceSizer.js +36 -0
package/core/sources/creating/CreatingSourcesBucket.js +29 -0
package/core/sources/creating/CreatingSourcesLocalStorageManager.js +55 -0
package/core/sources/creating/createSources.js +28 -0
package/core/sources/pointering/down/setUpSourcesPointerDown.js +36 -0
package/core/sources/pointering/move/SourcesPointerMove.js +16 -0
package/core/sources/pointering/move/SourcesPointerMoveActioner.js +37 -0
package/core/sources/pointering/up/SourcesPointerUp.js +13 -0
package/core/sources/pointering/up/SourcesPointerUpActioner.js +38 -0
package/core/sources/pointering/up/SourcesPointerUpActionerBucket.js +35 -0
package/core/sources/setUpSourceDisplayFacade.js +26 -0
package/core/sources/types/AutomaticTypeDetector.js +70 -0
package/core/sources/types/DetectedTypeActioner.js +44 -0
package/core/sources/types/getAutomaticTypeDetectorBucket.js +14 -0
package/core/stage/setUpStageManager.js +60 -0
package/core/styles/createAndAppendStyles.js +9 -0
package/core/styles/injectStylesIfNotInDom.js +8 -0
package/core/styles/styles-injection/styles-injection.js +5 -0
package/core/timeouts/getQueuedAction.js +15 -0
package/core/transforms/SourceMainWrapperTransformer.js +27 -0
package/fslightbox.js +1 -0
package/helpers/elements/addToElementClassIfNotContains.js +6 -0
package/helpers/elements/removeFromElementChildIfContains.js +5 -0
package/helpers/elements/removeFromElementClassIfContains.js +6 -0
package/helpers/objects/assignToObject.js +10 -0
package/helpers/source/setUpSourceClassName.js +13 -0
package/helpers/source/setUpSourceCustomAttributes.js +5 -0
package/helpers/state/ifOnUpdateExistsHandleItForState.js +6 -0
package/i.js +86 -0
package/index.js +1 -1
package/package.json +4 -37
package/styles.js +1 -0
package/.env.example +0 -3

package/FsLightbox.js ADDED Viewed

@@ -0,0 +1,110 @@
+import { setUpLightboxOpener } from "./core/main-component/opening/setUpLightboxOpener";
+window.FsLightbox = function () {
+    /**
+     * @property { Array } sources
+     *
+     * @property { Function } onOpen
+     * @property { Function } onClose
+     * @property { Function } onInit
+     * @property { Function } onShow
+     *
+     * @property { Boolean } disableLocalStorage
+     * @property { Array } types
+     * @property { String } type
+     *
+     * @property { Array } customAttributes
+     * @property { Array } customClasses
+     * @property { Object } maxYoutubeDimensions
+     * @property { Array } videosPosters // deprecated 3.2.0
+     *
+     * @property { Boolean } exitFullscreenOnClose
+     * @property { Boolean } loadOnlyCurrentSource
+     * @property { Number } slideDistance
+     */
+    this.props = {
+        sources: [],
+        customAttributes: [],
+        customClasses: [],
+        types: [],
+        videosPosters: [], // deprecated 3.2.0
+        slideDistance: 0.3
+    };
+    this.data = {
+        isInitialized: false,
+        isFullscreenOpen: false,
+        maxSourceWidth: 0,
+        maxSourceHeight: 0,
+        scrollbarWidth: 0
+    };
+    this.sourcePointerProps = {
+        downScreenX: null,
+        isPointering: false,
+        isSourceDownEventTarget: false,
+        swipedX: 0
+    };
+    /**
+     * @property { Number } previous
+     * @property { Number } current
+     * @property { Number } next
+     */
+    this.stageIndexes = {};
+    this.elements = {
+        // array of <a> tags lightbox was created from
+        a: [],
+        container: null,
+        slideSwipingHoverer: null,
+        sourceWrappersContainer: null,
+        sources: [],
+        sourceMainWrappers: [],
+        sourceAnimationWrappers: [],
+    };
+    this.componentsServices = {
+        enterFullscreen: null,
+        exitFullscreen: null,
+        hideSourceLoaderIfNotYetCollection: [],
+        // if there is one slide SlideNumber is not rendered so we need to prevent calling undefined function
+        setSlideNumber: () => {}
+    };
+    this.resolve = (dependency, params = []) => {
+        params.unshift(this);
+        return new dependency(...params);
+    };
+    this.collections = {
+        sourceMainWrappersTransformers: [],
+        sourceLoadHandlers: [],
+        sourcesRenderFunctions: [],
+        // after source load its size adjuster will be stored in this array so it may be later resized
+        sourceSizers: [],
+    };
+    this.core = {
+        classFacade: {},
+        eventsDispatcher: {},
+        fullscreenToggler: {},
+        globalEventsController: {},
+        lightboxCloser: {},
+        lightboxOpener: {},
+        lightboxUpdater: {},
+        scrollbarRecompensor: {},
+        slideChangeFacade: {},
+        slideIndexChanger: {},
+        sourcesPointerDown: {},
+        sourceDisplayFacade: {},
+        stageManager: {},
+        windowResizeActioner: {}
+    };
+    setUpLightboxOpener(this);
+    this.open = (i) => this.core.lightboxOpener.open(i);
+    this.close = () => this.core.lightboxCloser.closeLightbox();
+};

package/README.md CHANGED Viewed

@@ -1,54 +1,58 @@
-# Fullscreen Lightbox Basic
+# Vanilla JavaScript Fullscreen Lightbox Basic
 ## Description
-Modern and easy plugin for displaying images and videos in clean overlaying box.
-Display single source or create beautiful gallery with powerful lightbox.
+A vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
+The project's website: https://fslightbox.com.
-Website: https://fslightbox.com
-### No jQuery and other dependencies.
-## Basic usage
-### Installation
+## Installation
+### Through an archive downloaded from the website.
+Just before the end of the &lt;body&gt; tag:
+```html
+<script src="fslightbox.js"></script>
 ```
-npm install --save-dev fslightbox
-```
-### Example
+### Or, through a package manager.
+```
+npm install fslightbox
-In your application .js file:
-```javascript
-require('fslightbox');
+```
+And import it in your project's JavaScript file, for example through the Node.js "require" function:
+```
+require("fslightbox")
 ```
-In HTML file
+## Basic usage
 ```html
 <a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">
-    Open first slide (image)
+	Open the first slide (an image)
 </a>
-<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=xshEZzpS4CQ">
-    Open second slide (YouTube)
+<a
+	data-fslightbox="gallery"
+	href="https://www.youtube.com/watch?v=xshEZzpS4CQ"
+>
+	Open the second slide (a YouTube video)
 </a>
-<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
-    Open third slide (HTML video)
+<a
+	data-fslightbox="gallery"
+	href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+>
+	Open the third slide (an HTML video)
 </a>
 <a data-fslightbox="gallery" href="#vimeo">
-    Open fourth slide (custom source)
+	Open the fourth slide (a Vimeo video—a custom source)
 </a>
-<iframe id="vimeo" src="https://player.vimeo.com/video/22439234" width="1920px" height="1080px"
-    frameBorder="0" allow="autoplay; fullscreen" allowFullScreen />
-<script src="fslightbox.js"></script>
+<iframe
+	id="vimeo"
+	src="https://player.vimeo.com/video/22439234"
+	width="1920px"
+	height="1080px"
+	frameBorder="0"
+	allow="autoplay; fullscreen"
+	allowFullScreen
+></iframe>
 ```
-## Demo
-Available at: https://fslightbox.com/javascript
 ## Documentation
-Available at: https://fslightbox.com/javascript/documentation
+Available at: https://fslightbox.com/javascript/documentation.
 ## Browser Compatibility

package/components/helpers/renderSvg.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { PREFIX } from "../../constants/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/components/nav/renderAndGetToolbarButton.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../constants/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/components/nav/renderCloseButton.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { renderAndGetToolbarButton } from "./renderAndGetToolbarButton";
+import { renderAndGetSvg } from "../helpers/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/components/nav/renderFullscreenButton.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { renderAndGetSvg } from "../helpers/renderSvg";
+import { renderAndGetToolbarButton } from "./renderAndGetToolbarButton";
+export function renderFullscreenButton({ componentsServices, core: { fullscreenToggler }, data }, 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.enterFullscreen = () => {
+        data.isFullscreenOpen = 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.exitFullscreen = () => {
+        data.isFullscreenOpen = 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 = () => {
+        if (data.isFullscreenOpen) {
+            fullscreenToggler.exitFullscreen();
+        } else {
+            fullscreenToggler.enterFullscreen();
+        }
+    };
+}

package/components/nav/renderNav.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { renderToolbar } from "./renderToolbar";
+import { renderSlideNumber } from "./renderSlideNumber";
+import { PREFIX } from "../../constants/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/components/nav/renderSlideNumber.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../constants/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;
+    if (process.env.NODE_ENV === 'development') {
+        currentNumber.setAttribute('data-test-id', 'slide-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/components/nav/renderToolbar.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { PREFIX } from "../../constants/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/components/renderSlideButton.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { FLEX_CENTERED_CLASS_NAME, SLIDE_BTN } from "../constants/classes-names";
+import { renderAndGetSvg } from "./helpers/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/components/renderSlideButtonContainer.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { SLIDE_BTN_CONTAINER } from "../constants/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/components/renderSlideButtons.js ADDED Viewed

@@ -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/components/renderSlideSwipingHoverer.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { ABSOLUTED_CLASS_NAME, FULL_DIMENSION_CLASS_NAME, PREFIX } from "../constants/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/components/sources/proper-sources/renderCustom.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { SOURCE_CLASS_NAME } from "../../../constants/classes-names";
+import { setUpSourceClassName } from "../../../helpers/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/components/sources/proper-sources/renderImage.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { SOURCE_CLASS_NAME } from "../../../constants/classes-names";
+import { setUpSourceClassName } from "../../../helpers/source/setUpSourceClassName";
+import { setUpSourceCustomAttributes } from "../../../helpers/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/components/sources/proper-sources/renderInvalid.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { FADE_IN_STRONG_CLASS_NAME, FLEX_CENTERED_CLASS_NAME, PREFIX } from "../../../constants/classes-names";
+export function renderInvalid(
+    {
+        elements: { sources: sourcesElements, sourceAnimationWrappers, sourceMainWrappers },
+        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].appendChild(sourcesElements[i]);
+    // remove loader
+    sourceMainWrappers[i].removeChild(sourceMainWrappers[i].firstChild);
+}

package/components/sources/proper-sources/renderVideo.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { SOURCE_CLASS_NAME } from "../../../constants/classes-names";
+import { setUpSourceClassName } from "../../../helpers/source/setUpSourceClassName";
+import { setUpSourceCustomAttributes } from "../../../helpers/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]);
+}

package/components/sources/proper-sources/renderYoutube.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { PREFIX, SOURCE_CLASS_NAME } from "../../../constants/classes-names";
+import { setUpSourceClassName } from "../../../helpers/source/setUpSourceClassName";
+import { setUpSourceCustomAttributes } from "../../../helpers/source/setUpSourceCustomAttributes";
+export function renderYoutube(fsLightbox, i) {
+    const {
+        collections: { sourceLoadHandlers },
+        elements: { sources: sourcesElements, sourceAnimationWrappers },
+        props: { sources }
+    } = fsLightbox;
+    sourcesElements[i] = document.createElement("iframe");
+    setUpSourceClassName(fsLightbox, i, `${SOURCE_CLASS_NAME} ${PREFIX}youtube-iframe`);
+    var url = sources[i];
+    var p = url.split("?")[1];
+    sourcesElements[i].src = `https://www.youtube.com/embed/${getYoutubeVideoIdFromUrl()}?${p ? p : ""}`;
+    sourcesElements[i].allowFullscreen = true;
+    setUpSourceCustomAttributes(fsLightbox, i);
+    sourceAnimationWrappers[i].appendChild(sourcesElements[i]);
+    sourceLoadHandlers[i].handleYoutubeLoad();
+    function getYoutubeVideoIdFromUrl() {
+        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+        return url.match(regExp)[2];
+    }
+}

package/components/sources/renderSourceAnimationWrapper.js ADDED Viewed

@@ -0,0 +1,4 @@
+export function renderSourceAnimationWrapper({ elements: { sourceMainWrappers, sourceAnimationWrappers } }, i) {
+    sourceAnimationWrappers[i] = document.createElement('div');
+    sourceMainWrappers[i].appendChild(sourceAnimationWrappers[i]);
+}

package/components/sources/renderSourceMainWrapper.js ADDED Viewed

@@ -0,0 +1,32 @@
+import {
+    ABSOLUTED_CLASS_NAME,
+    FLEX_CENTERED_CLASS_NAME,
+    FULL_DIMENSION_CLASS_NAME,
+} from "../../constants/classes-names";
+import { renderSourceAnimationWrapper } from "./renderSourceAnimationWrapper";
+export function renderSourceMainWrapper(fsLightbox, i) {
+    const {
+        componentsServices: { hideSourceLoaderIfNotYetCollection },
+        elements: { sourceWrappersContainer, sourceMainWrappers }
+    } = fsLightbox;
+    sourceMainWrappers[i] = document.createElement('div');
+    sourceMainWrappers[i].className = `${ABSOLUTED_CLASS_NAME} ${FULL_DIMENSION_CLASS_NAME} ${FLEX_CENTERED_CLASS_NAME}`;
+    sourceMainWrappers[i].innerHTML = '<div class="fslightbox-loader"><div></div><div></div><div></div><div></div></div>';
+    const loader = sourceMainWrappers[i].firstChild;
+    hideSourceLoaderIfNotYetCollection[i] = () => {
+        if (sourceMainWrappers[i].contains(loader)) {
+            sourceMainWrappers[i].removeChild(loader);
+        }
+    };
+    if (process.env.NODE_ENV === 'development') {
+        sourceMainWrappers[i].setAttribute('data-test-class', 'source-main-wrapper');
+    }
+    sourceWrappersContainer.appendChild(sourceMainWrappers[i]);
+    renderSourceAnimationWrapper(fsLightbox, i);
+}

package/components/sources/renderSourceWrappersContainer.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { renderSourceMainWrapper } from "./renderSourceMainWrapper";
+import { ABSOLUTED_CLASS_NAME, FULL_DIMENSION_CLASS_NAME } from "../../constants/classes-names";
+export function renderSourceWrappersContainer(fsLightbox) {
+    const { core: { sourcesPointerDown }, elements, props: { sources } } = fsLightbox;
+    const sourceWrappersContainer = document.createElement('div');
+    sourceWrappersContainer.className = `${ABSOLUTED_CLASS_NAME} ${FULL_DIMENSION_CLASS_NAME}`;
+    elements.container.appendChild(sourceWrappersContainer);
+    sourceWrappersContainer.addEventListener('pointerdown', sourcesPointerDown.listener);
+    if (process.env.NODE_ENV === 'development') {
+        sourceWrappersContainer.setAttribute('data-test-id', 'source-wrappers-container');
+    }
+    elements.sourceWrappersContainer = sourceWrappersContainer;
+    for (let i = 0; i < sources.length; i++) {
+        renderSourceMainWrapper(fsLightbox, i);
+    }
+}

package/constants/classes-names.js ADDED Viewed

@@ -0,0 +1,27 @@
+export const PREFIX = 'fslightbox-';
+// single classes names
+export const FSLIGHTBOX_STYLES = `${PREFIX}styles`;
+export const CURSOR_GRABBING_CLASS_NAME = `${PREFIX}cursor-grabbing`;
+export const FULL_DIMENSION_CLASS_NAME = `${PREFIX}full-dimension`;
+export const FLEX_CENTERED_CLASS_NAME = `${PREFIX}flex-centered`;
+export const OPEN_CLASS_NAME = `${PREFIX}open`;
+export const TRANSFORM_TRANSITION_CLASS_NAME = `${PREFIX}transform-transition`;
+export const ABSOLUTED_CLASS_NAME = `${PREFIX}absoluted`;
+// slide buttons
+export const SLIDE_BTN = `${PREFIX}slide-btn`;
+export const SLIDE_BTN_CONTAINER = `${SLIDE_BTN}-container`;
+// animations
+export const FADE_IN_CLASS_NAME = `${PREFIX}fade-in`;
+export const FADE_OUT_CLASS_NAME = `${PREFIX}fade-out`;
+export const FADE_IN_STRONG_CLASS_NAME = FADE_IN_CLASS_NAME + '-strong';
+export const FADE_OUT_STRONG_CLASS_NAME = FADE_OUT_CLASS_NAME + '-strong';
+// opacity
+const opacityBaseClassName = `${PREFIX}opacity-`;
+export const OPACITY_1_CLASS_NAME = `${opacityBaseClassName}1`;
+// sources
+export const SOURCE_CLASS_NAME = `${PREFIX}source`;

package/constants/core-constants.js ADDED Viewed

@@ -0,0 +1,6 @@
+// sources types
+export const IMAGE_TYPE = 'image';
+export const VIDEO_TYPE = 'video';
+export const YOUTUBE_TYPE = 'youtube';
+export const CUSTOM_TYPE = 'custom';
+export const INVALID_TYPE = 'invalid';

package/constants/css-constants.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const ANIMATION_TIME = 300;

package/constants/dom-constants.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const FSLIGHTBOX_STYLES_ID = 'fslightbox-styles';

package/constants/elements.js ADDED Viewed

@@ -0,0 +1,3 @@
+const sourcesBaseName = 'source';
+export const SOURCE_MAIN_WRAPPERS = sourcesBaseName + 'MainWrappers';
+export const SOURCE_ANIMATION_WRAPPERS = sourcesBaseName + 'AnimationWrappers';

package/constants/local-storage-constants.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const SOURCES_TYPES_KEY = 'fslightbox-types';
2	+ export const SCROLLBAR_WIDTH_KEY = 'fslightbox-scrollbar-width';

package/core/collections/fillSourcesOutersTransformersCollection.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { SourceMainWrapperTransformer } from "../transforms/SourceMainWrapperTransformer";
+export function fillSourcesOutersTransformersCollection(
+    {
+        collections: { sourceMainWrappersTransformers },
+        props: { sources },
+        resolve
+    }
+) {
+    for (let i = 0; i < sources.length; i++) {
+        sourceMainWrappersTransformers[i] = resolve(SourceMainWrapperTransformer, [i]);
+    }
+}