fslightbox 3.4.0-2 → 3.4.0

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

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

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

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

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

@@ -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/cn/core-constants.js

@@ -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/cn/css-constants.js

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

package/cn/dom-constants.js

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

package/cn/elements.js

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

package/cn/local-storage-constants.js

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

package/h/elements/addToElementClassIfNotContains.js

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

package/h/elements/removeFromElementChildIfContains.js

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

package/h/elements/removeFromElementClassIfContains.js

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

package/h/objects/assignToObject.js

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fslightbox",
-  "version": "3.4.0-2",
+  "version": "3.4.0",
   "description": "An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.",
   "author": "Bantha Apps Piotr Zdziarski",
   "license": "MIT",

package/s.js

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