fslightbox 3.4.0 → 3.4.1

package/cm/nav/renderNav.js

@@ -1,17 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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]);
-}

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

@@ -1,26 +0,0 @@
-import { PREFIX, SOURCE_CLASS_NAME } from "../../../cn/classes-names";
-import { setUpSourceClassName } from "../../../h/source/setUpSourceClassName";
-import { setUpSourceCustomAttributes } from "../../../h/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/cm/sources/renderSourceWrappersContainer.js

@@ -1,18 +0,0 @@
-import { smw } from "./smw";
-import { ABSOLUTED_CLASS_NAME, FULL_DIMENSION_CLASS_NAME } from "../../cn/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);
-
-    elements.sourceWrappersContainer = sourceWrappersContainer;
-
-    for (let i = 0; i < sources.length; i++) {
-        smw(fsLightbox, i);
-    }
-}

package/cm/sources/saw.js

@@ -1 +0,0 @@
-export function saw({elements:{smw,sourceAnimationWrappers}},i){var w=document.createElement("div");var l=document.createElement("div");l.className="fslightboxl";for(var j=0;j<3;j++){var lc=document.createElement("div");l.appendChild(lc)}w.appendChild(l);smw[i].appendChild(w);sourceAnimationWrappers[i]=w}

package/cm/sources/smw.js

@@ -1 +0,0 @@
-import{ABSOLUTED_CLASS_NAME,FLEX_CENTERED_CLASS_NAME,FULL_DIMENSION_CLASS_NAME,TRANSFORM_TRANSITION_CLASS_NAME}from"../../cn/classes-names";import{saw}from"./saw";export function smw(o,i){var{core:{stageManager},elements:{smw,sourceWrappersContainer},props}=o,t=0,w=document.createElement("div");w.className=`${ABSOLUTED_CLASS_NAME} ${FULL_DIMENSION_CLASS_NAME} ${FLEX_CENTERED_CLASS_NAME}`;w.s=function(){w.style.display="flex"};w.h=function(){w.style.display="none"};w.a=function(){w.classList.add(TRANSFORM_TRANSITION_CLASS_NAME)};w.d=function(){w.classList.remove(TRANSFORM_TRANSITION_CLASS_NAME)};w.n=function(){w.style.removeProperty("transform")};w.v=function(v){t=v;return w;};w.ne=function(){s(-dt())};w.z=function(){s(0)};w.p=function(){s(dt())};function s(v){w.style.transform=`translateX(${v+t}px)`;t=0}function dt(){return(1+props.slideDistance)*innerWidth}if(!stageManager.i(i)){w.h()}smw[i]=w;sourceWrappersContainer.appendChild(w);saw(o,i)}

package/cn/classes-names.js

@@ -1,27 +0,0 @@
-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/cn/core-constants.js

@@ -1,6 +0,0 @@
-// 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/cn/css-constants.js

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

package/cn/dom-constants.js

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

package/cn/elements.js

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

package/cn/local-storage-constants.js

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

package/h/elements/addToElementClassIfNotContains.js

@@ -1,6 +0,0 @@
-export function addToElementClassIfNotContains(element, className) {
-    const classList = element.classList;
-    if (!classList.contains(className)) {
-        classList.add(className);
-    }
-}

package/h/elements/removeFromElementChildIfContains.js

@@ -1,5 +0,0 @@
-export function removeFromElementChildIfContains(element, child) {
-    if (element.contains(child)) {
-        element.removeChild(child);
-    }
-}

package/h/elements/removeFromElementClassIfContains.js

@@ -1,6 +0,0 @@
-export function removeFromElementClassIfContains(element, className) {
-    const classList = element.classList;
-    if (classList.contains(className)) {
-        classList.remove(className);
-    }
-}

package/h/objects/assignToObject.js

@@ -1,10 +0,0 @@
-/**
- * This function assigns to object properties from second one
- * @param { Object } object
- * @param { Object } toAssign
- */
-export function assignToObject(object, toAssign) {
-    for (let toAssignPropertyName in toAssign) {
-        object[toAssignPropertyName] = toAssign[toAssignPropertyName];
-    }
-}

package/h/source/setUpSourceClassName.js

@@ -1,13 +0,0 @@
-/**
- * Set up source class with custom class if set
- */
-export function setUpSourceClassName(
-    {
-        elements: { sources },
-        props: { customClasses }
-    },
-    i, baseClassName
-) {
-    const customClassName = customClasses[i] ? customClasses[i] : '';
-    sources[i].className = baseClassName + ' ' + customClassName;
-}

package/h/source/setUpSourceCustomAttributes.js

@@ -1,5 +0,0 @@
-export function setUpSourceCustomAttributes({ elements: { sources }, props: { customAttributes } }, i) {
-    for (let name in customAttributes[i]) {
-        sources[i].setAttribute(name, customAttributes[i][name]);
-    }
-}

package/h/state/ifOnUpdateExistsHandleItForState.js

@@ -1,6 +0,0 @@
-export const ifOnUpdateExistsHandleItForState = (state) => {
-    if(state.onUpdate) {
-        state.onUpdate();
-        delete state.onUpdate;
-    }
-};

package/s.js

@@ -1 +0,0 @@
-export const styles = ".fslightbox-absoluted{position:absolute;top:0;left:0}.fslightbox-fade-in{animation:fslightbox-fade-in .3s cubic-bezier(0,0,.7,1)}.fslightbox-fade-out{animation:fslightbox-fade-out .3s ease}.fslightbox-fade-in-strong{animation:fslightbox-fade-in-strong .3s cubic-bezier(0,0,.7,1)}.fslightbox-fade-out-strong{animation:fslightbox-fade-out-strong .3s ease}@keyframes fslightbox-fade-in{from{opacity:.65}to{opacity:1}}@keyframes fslightbox-fade-out{from{opacity:.35}to{opacity:0}}@keyframes fslightbox-fade-in-strong{from{opacity:.3}to{opacity:1}}@keyframes fslightbox-fade-out-strong{from{opacity:1}to{opacity:0}}.fslightbox-cursor-grabbing{cursor:grabbing}.fslightbox-full-dimension{width:100%;height:100%}.fslightbox-open{overflow:hidden;height:100%}.fslightbox-flex-centered{display:flex;justify-content:center;align-items:center}.fslightbox-opacity-0{opacity:0!important}.fslightbox-opacity-1{opacity:1!important}.fslightbox-scrollbarfix{padding-right:17px}.fslightbox-transform-transition{transition:transform .3s}.fslightbox-container{font-family:Arial,sans-serif;position:fixed;top:0;left:0;background:linear-gradient(rgba(30,30,30,.9),#000 1810%);touch-action:pinch-zoom;z-index:1000000000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fslightbox-container *{box-sizing:border-box}.fslightbox-svg-path{transition:fill .15s ease;fill:#ddd}.fslightbox-nav{height:45px;width:100%;position:absolute;top:0;left:0}.fslightbox-slide-number-container{display:flex;justify-content:center;align-items:center;position:relative;height:100%;font-size:15px;color:#d7d7d7;z-index:0;max-width:55px;text-align:left}.fslightbox-slide-number-container .fslightbox-flex-centered{height:100%}.fslightbox-slash{display:block;margin:0 5px;width:1px;height:12px;transform:rotate(15deg);background:#fff}.fslightbox-toolbar{position:absolute;z-index:3;right:0;top:0;height:100%;display:flex;background:rgba(35,35,35,.65)}.fslightbox-toolbar-button{height:100%;width:45px;cursor:pointer}.fslightbox-toolbar-button:hover .fslightbox-svg-path{fill:#fff}.fslightbox-slide-btn-container{display:flex;align-items:center;padding:12px 12px 12px 6px;position:absolute;top:50%;cursor:pointer;z-index:3;transform:translateY(-50%)}@media (min-width:476px){.fslightbox-slide-btn-container{padding:22px 22px 22px 6px}}@media (min-width:768px){.fslightbox-slide-btn-container{padding:30px 30px 30px 6px}}.fslightbox-slide-btn-container:hover .fslightbox-svg-path{fill:#f1f1f1}.fslightbox-slide-btn{padding:9px;font-size:26px;background:rgba(35,35,35,.65)}@media (min-width:768px){.fslightbox-slide-btn{padding:10px}}@media (min-width:1600px){.fslightbox-slide-btn{padding:11px}}.fslightbox-slide-btn-container-previous{left:0}@media (max-width:475.99px){.fslightbox-slide-btn-container-previous{padding-left:3px}}.fslightbox-slide-btn-container-next{right:0;padding-left:12px;padding-right:3px}@media (min-width:476px){.fslightbox-slide-btn-container-next{padding-left:22px}}@media (min-width:768px){.fslightbox-slide-btn-container-next{padding-left:30px}}@media (min-width:476px){.fslightbox-slide-btn-container-next{padding-right:6px}}.fslightbox-down-event-detector{position:absolute;z-index:1}.fslightbox-slide-swiping-hoverer{z-index:4}.fslightbox-invalid-file-wrapper{font-size:22px;color:#eaebeb;margin:auto}.fslightbox-video{object-fit:cover}.fslightbox-youtube-iframe{border:0}.fslightboxl{display:block;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:67px;height:67px}.fslightboxl div{box-sizing:border-box;display:block;position:absolute;width:54px;height:54px;margin:6px;border:5px solid;border-color:#999 transparent transparent transparent;border-radius:50%;animation:fslightboxl 1.2s cubic-bezier(.5,0,.5,1) infinite}.fslightboxl div:nth-child(1){animation-delay:-.45s}.fslightboxl div:nth-child(2){animation-delay:-.3s}.fslightboxl div:nth-child(3){animation-delay:-.15s}@keyframes fslightboxl{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.fslightbox-source{position:relative;z-index:2;opacity:0}";