fslightbox 3.3.0 → 3.3.2

package/core/events/setUpGlobalEventsController.js

@@ -0,0 +1,34 @@
+import { KeyboardController } from "../keyboard/KeyboardController";
+import { SourcesPointerMove } from "../sources/pointering/move/SourcesPointerMove";
+import { SourcesPointerUp } from "../sources/pointering/up/SourcesPointerUp";
+
+export function setUpGlobalEventsController(
+    {
+        core: { globalEventsController: self, windowResizeActioner, },
+        resolve
+    }
+) {
+    const keyboardController = resolve(KeyboardController);
+    const sourcesPointerMove = resolve(SourcesPointerMove);
+    const sourcesPointerUp = resolve(SourcesPointerUp);
+
+    self.attachListeners = () => {
+        document.addEventListener('pointermove', sourcesPointerMove.listener);
+
+        document.addEventListener('pointerup', sourcesPointerUp.listener);
+
+        addEventListener('resize', windowResizeActioner.runActions);
+
+        document.addEventListener('keydown', keyboardController.listener);
+    };
+
+    self.removeListeners = () => {
+        document.removeEventListener('pointermove', sourcesPointerMove.listener);
+
+        document.removeEventListener('pointerup', sourcesPointerUp.listener);
+
+        removeEventListener('resize', windowResizeActioner.runActions);
+
+        document.removeEventListener('keydown', keyboardController.listener);
+    };
+}

package/core/fullscreen/setUpFullscreenToggler.js

@@ -0,0 +1,30 @@
+export function setUpFullscreenToggler({ componentsServices, core: { fullscreenToggler: self } }) {
+    self.enterFullscreen = () => {
+        componentsServices.enterFullscreen();
+
+        const documentElement = document.documentElement;
+        if (documentElement.requestFullscreen) {
+            documentElement.requestFullscreen();
+        } else if (documentElement.mozRequestFullScreen) {
+            documentElement.mozRequestFullScreen();
+        } else if (documentElement.webkitRequestFullscreen) {
+            documentElement.webkitRequestFullscreen();
+        } else if (documentElement.msRequestFullscreen) {
+            documentElement.msRequestFullscreen();
+        }
+    };
+
+    self.exitFullscreen = () => {
+        componentsServices.exitFullscreen();
+
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+}

package/core/keyboard/KeyboardController.js

@@ -0,0 +1,20 @@
+export function KeyboardController({ core: { lightboxCloser, fullscreenToggler, slideChangeFacade } }) {
+    this.listener = (e) => {
+        switch (e.key) {
+            case 'Escape':
+                lightboxCloser.closeLightbox();
+                break;
+            case 'ArrowLeft':
+                slideChangeFacade.changeToPrevious();
+                break;
+            case 'ArrowRight':
+                slideChangeFacade.changeToNext();
+                break;
+            case 'F11':
+                e.preventDefault();
+                // browsers does not trigger 'keydown' event when browser is already in fullscreen
+                fullscreenToggler.enterFullscreen();
+                break;
+        }
+    };
+}

package/core/main-component/closing/LightboxCloseActioner.js

@@ -0,0 +1,46 @@
+import { FADE_OUT_STRONG_CLASS_NAME, OPEN_CLASS_NAME } from "../../../constants/classes-names";
+import { ANIMATION_TIME } from "../../../constants/css-constants";
+
+export function LightboxCloseActioner(
+    {
+        core: {
+            eventsDispatcher,
+            fullscreenToggler,
+            globalEventsController,
+            scrollbarRecompensor
+        },
+        data,
+        elements,
+        props,
+        sourcePointerProps
+    }
+) {
+    this.isLightboxFadingOut = false;
+
+    this.runActions = () => {
+        this.isLightboxFadingOut = true;
+
+        elements.container.classList.add(FADE_OUT_STRONG_CLASS_NAME);
+
+        globalEventsController.removeListeners();
+
+        if (props.exitFullscreenOnClose && data.isFullscreenOpen) {
+            fullscreenToggler.exitFullscreen();
+        }
+
+        setTimeout(() => {
+            this.isLightboxFadingOut = false;
+
+            sourcePointerProps.isPointering = false;
+
+            elements.container.classList.remove(FADE_OUT_STRONG_CLASS_NAME);
+            document.documentElement.classList.remove(OPEN_CLASS_NAME);
+
+            scrollbarRecompensor.removeRecompense();
+
+            document.body.removeChild(elements.container);
+
+            eventsDispatcher.dispatch('onClose');
+        }, ANIMATION_TIME - 30);
+    };
+}

package/core/main-component/closing/setUpLightboxCloser.js

@@ -0,0 +1,11 @@
+import { LightboxCloseActioner } from "./LightboxCloseActioner";
+
+export function setUpLightboxCloser({ core: { lightboxCloser: self }, resolve }) {
+    const lightboxCloseActioner = resolve(LightboxCloseActioner);
+
+    self.closeLightbox = () => {
+        if (!lightboxCloseActioner.isLightboxFadingOut) {
+            lightboxCloseActioner.runActions();
+        }
+    };
+}

package/core/main-component/initializing/initializeLightbox.js

@@ -0,0 +1,38 @@
+import {
+    FADE_IN_STRONG_CLASS_NAME,
+    FULL_DIMENSION_CLASS_NAME,
+    PREFIX
+} from "../../../constants/classes-names";
+import { createSources } from "../../sources/creating/createSources";
+import { renderSourceWrappersContainer } from "../../../components/sources/renderSourceWrappersContainer";
+import { renderNav } from "../../../components/nav/renderNav";
+import { fillSourcesOutersTransformersCollection } from "../../collections/fillSourcesOutersTransformersCollection";
+import { renderSlideButtons } from "../../../components/renderSlideButtons";
+import { renderSlideSwipingHoverer } from "../../../components/renderSlideSwipingHoverer";
+import { setUpCore } from "../../setUpCore";
+import { getScrollbarWidth } from "../../scrollbar/getScrollbarWidth";
+
+export function initializeLightbox(fsLightbox) {
+    const { core: { eventsDispatcher }, data, elements, props: { sources } } = fsLightbox;
+
+    data.isInitialized = true;
+    data.scrollbarWidth = getScrollbarWidth(fsLightbox);
+
+    fillSourcesOutersTransformersCollection(fsLightbox);
+
+    setUpCore(fsLightbox);
+
+    elements.container = document.createElement('div');
+    elements.container.className = `${PREFIX}container ${FULL_DIMENSION_CLASS_NAME} ${FADE_IN_STRONG_CLASS_NAME}`;
+
+    renderSlideSwipingHoverer(fsLightbox);
+    renderNav(fsLightbox);
+    renderSourceWrappersContainer(fsLightbox);
+    if (sources.length > 1) {
+        renderSlideButtons(fsLightbox);
+    }
+
+    createSources(fsLightbox);
+
+    eventsDispatcher.dispatch('onInit');
+}

package/core/main-component/opening/setUpLightboxOpener.js

@@ -0,0 +1,47 @@
+import { OPEN_CLASS_NAME } from "../../../constants/classes-names";
+import { initializeLightbox } from "../initializing/initializeLightbox";
+
+export function setUpLightboxOpener(fsLightbox) {
+    const {
+        collections: { sourceMainWrappersTransformers },
+        componentsServices,
+        core: {
+            eventsDispatcher,
+            lightboxOpener: self,
+            globalEventsController,
+            scrollbarRecompensor,
+            sourceDisplayFacade,
+            stageManager,
+            windowResizeActioner
+        },
+        data,
+        elements,
+        stageIndexes
+    } = fsLightbox;
+
+    self.open = (index = 0) => {
+        stageIndexes.current = index;
+
+        (data.isInitialized) ?
+            eventsDispatcher.dispatch('onShow') :
+            initializeLightbox(fsLightbox);
+
+        stageManager.updateStageIndexes();
+
+        sourceDisplayFacade.displaySourcesWhichShouldBeDisplayed();
+
+        componentsServices.setSlideNumber(index + 1);
+
+        document.body.appendChild(elements.container);
+        document.documentElement.classList.add(OPEN_CLASS_NAME);
+
+        scrollbarRecompensor.addRecompense();
+
+        globalEventsController.attachListeners();
+
+        windowResizeActioner.runActions();
+        sourceMainWrappersTransformers[stageIndexes.current].zero();
+
+        eventsDispatcher.dispatch('onOpen');
+    };
+}

package/core/scrollbar/getInnerElementOfWidthGetter.js

@@ -0,0 +1,5 @@
+export function getInnerElementOfWidthGetter() {
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    return inner;
+}

package/core/scrollbar/getOuterElementOfWidthGetter.js

@@ -0,0 +1,9 @@
+export function getOuterElementOfWidthGetter() {
+    const outer = document.createElement('div');
+    const outerStyle = outer.style;
+    outerStyle.visibility = "hidden";
+    outerStyle.width = "100px";
+    outerStyle.msOverflowStyle = "scrollbar";
+    outerStyle.overflow = "scroll";
+    return outer;
+}

package/core/scrollbar/getScrollbarWidth.js

@@ -0,0 +1,31 @@
+import { getOuterElementOfWidthGetter } from "./getOuterElementOfWidthGetter";
+import { getInnerElementOfWidthGetter } from "./getInnerElementOfWidthGetter";
+import { SCROLLBAR_WIDTH_KEY } from "../../constants/local-storage-constants";
+
+export function getScrollbarWidth({ props: { disableLocalStorage } }) {
+    if (!disableLocalStorage) {
+        const localStorageScrollbarWidth = localStorage.getItem(SCROLLBAR_WIDTH_KEY);
+        if (localStorageScrollbarWidth) {
+            return localStorageScrollbarWidth;
+        }
+    }
+
+    const outer = getOuterElementOfWidthGetter();
+    const inner = getInnerElementOfWidthGetter();
+
+    document.body.appendChild(outer);
+    const widthNoScroll = outer.offsetWidth;
+
+    outer.appendChild(inner);
+    const widthWithScroll = inner.offsetWidth;
+
+    document.body.removeChild(outer);
+
+    const scrollbarWidth = widthNoScroll - widthWithScroll;
+
+    if (!disableLocalStorage) {
+        localStorage.setItem(SCROLLBAR_WIDTH_KEY, scrollbarWidth.toString());
+    }
+
+    return scrollbarWidth;
+}

package/core/scrollbar/setUpScrollbarRecompensor.js

@@ -0,0 +1,20 @@
+export function setUpScrollbarRecompensor({ data, core: { scrollbarRecompensor: self } }) {
+    self.addRecompense = () => {
+        (document.readyState === "complete") ?
+            ifBodyIsHigherThanWindowAddRecompenseToScrollbar() :
+            addEventListener('load', () => {
+                ifBodyIsHigherThanWindowAddRecompenseToScrollbar();
+                self.addRecompense = ifBodyIsHigherThanWindowAddRecompenseToScrollbar;
+            });
+    };
+
+    function ifBodyIsHigherThanWindowAddRecompenseToScrollbar() {
+        if (document.body.offsetHeight > innerHeight) {
+            document.body.style.marginRight = data.scrollbarWidth + 'px';
+        }
+    }
+
+    self.removeRecompense = () => {
+        document.body.style.removeProperty('margin-right');
+    };
+}

package/core/setUpCore.js

@@ -0,0 +1,30 @@
+import { setUpLightboxOpener } from "./main-component/opening/setUpLightboxOpener";
+import { setUpClassFacade } from "./elements/setUpClassFacade";
+import { setUpEventsDispatcher } from "./events/setUpEventsDispatcher";
+import { setUpFullscreenToggler } from "./fullscreen/setUpFullscreenToggler";
+import { setUpLightboxCloser } from "./main-component/closing/setUpLightboxCloser";
+import { setUpWindowResizeActioner } from "./sizes/setUpWindowResizeActioner";
+import { setUpScrollbarRecompensor } from "./scrollbar/setUpScrollbarRecompensor";
+import { setUpSlideIndexChanger } from "./slide/setUpSlideIndexChanger";
+import { setUpGlobalEventsController } from "./events/setUpGlobalEventsController";
+import { setUpSlideChangeFacade } from "./slide/setUpSlideChangeFacade";
+import { setUpSourceDisplayFacade } from "./sources/setUpSourceDisplayFacade";
+import { setUpStageManager } from "./stage/setUpStageManager";
+import { setUpSourcesPointerDown } from "./sources/pointering/down/setUpSourcesPointerDown";
+
+export function setUpCore(fsLightbox) {
+    setUpClassFacade(fsLightbox);
+    setUpEventsDispatcher(fsLightbox);
+    setUpFullscreenToggler(fsLightbox);
+    setUpGlobalEventsController(fsLightbox);
+    setUpLightboxCloser(fsLightbox);
+    setUpLightboxOpener(fsLightbox);
+    setUpScrollbarRecompensor(fsLightbox);
+    setUpSlideChangeFacade(fsLightbox);
+    setUpSlideIndexChanger(fsLightbox);
+    setUpSourcesPointerDown(fsLightbox);
+    setUpSourceDisplayFacade(fsLightbox);
+    setUpStageManager(fsLightbox);
+    setUpWindowResizeActioner(fsLightbox);
+}
+

package/core/sizes/setUpWindowResizeActioner.js

@@ -0,0 +1,35 @@
+import { removeFromElementClassIfContains } from "../../helpers/elements/removeFromElementClassIfContains";
+import { TRANSFORM_TRANSITION_CLASS_NAME } from "../../constants/classes-names";
+
+export function setUpWindowResizeActioner(
+    {
+        collections: { sourceMainWrappersTransformers, sourceSizers },
+        core: { windowResizeActioner: self },
+        data,
+        elements: { sourceMainWrappers },
+        props,
+        stageIndexes
+    }
+) {
+    self.runActions = () => {
+        // decreasing max source dimensions for better UX
+        (innerWidth < 992) ?
+            data.maxSourceWidth = innerWidth :
+            data.maxSourceWidth = 0.9 * innerWidth;
+        data.maxSourceHeight = 0.9 * innerHeight;
+
+        for (let i = 0; i < props.sources.length; i++) {
+            removeFromElementClassIfContains(sourceMainWrappers[i], TRANSFORM_TRANSITION_CLASS_NAME);
+
+            if (i !== stageIndexes.current) {
+                sourceMainWrappersTransformers[i].negative();
+            }
+
+            // if source is Invalid or if lightbox is initialized there are no sourceSizers
+            // so we need to check if it exists
+            if (sourceSizers[i]) {
+                sourceSizers[i].adjustSize();
+            }
+        }
+    };
+}

package/core/slide/setUpSlideChangeFacade.js

@@ -0,0 +1,23 @@
+export function setUpSlideChangeFacade(
+    {
+        core: {
+            slideChangeFacade: self,
+            slideIndexChanger,
+            stageManager
+        },
+        props: { sources }
+    }
+) {
+    if (sources.length > 1) {
+        self.changeToPrevious = () => {
+            slideIndexChanger.jumpTo(stageManager.getPreviousSlideIndex());
+        };
+
+        self.changeToNext = () => {
+            slideIndexChanger.jumpTo(stageManager.getNextSlideIndex());
+        };
+    } else {
+        self.changeToPrevious = () => {};
+        self.changeToNext = () => {};
+    }
+}

package/core/slide/setUpSlideIndexChanger.js

@@ -0,0 +1,60 @@
+import { ANIMATION_TIME } from "../../constants/css-constants";
+import { SOURCE_ANIMATION_WRAPPERS, SOURCE_MAIN_WRAPPERS } from "../../constants/elements";
+import {
+    FADE_IN_CLASS_NAME, FADE_IN_STRONG_CLASS_NAME,
+    FADE_OUT_CLASS_NAME,
+    TRANSFORM_TRANSITION_CLASS_NAME,
+} from "../../constants/classes-names";
+import { removeFromElementClassIfContains } from "../../helpers/elements/removeFromElementClassIfContains";
+import { getQueuedAction } from "../timeouts/getQueuedAction";
+
+export function setUpSlideIndexChanger(
+    {
+        collections: { sourceMainWrappersTransformers },
+        componentsServices,
+        core: { classFacade, slideIndexChanger: self, sourceDisplayFacade, stageManager },
+        elements: { sourceAnimationWrappers },
+        stageIndexes
+    }
+) {
+    const runQueuedRemoveFadeOut = getQueuedAction(() => {
+        classFacade.removeFromEachElementClassIfContains(SOURCE_ANIMATION_WRAPPERS, FADE_OUT_CLASS_NAME);
+    }, ANIMATION_TIME);
+
+    self.changeTo = (i) => {
+        stageIndexes.current = i;
+
+        stageManager.updateStageIndexes();
+
+        componentsServices.setSlideNumber(i + 1);
+
+        sourceDisplayFacade.displaySourcesWhichShouldBeDisplayed();
+    };
+
+    self.jumpTo = (i) => {
+        let previousI = stageIndexes.current;
+        self.changeTo(i);
+
+        classFacade.removeFromEachElementClassIfContains(SOURCE_MAIN_WRAPPERS, TRANSFORM_TRANSITION_CLASS_NAME);
+
+        removeFromElementClassIfContains(sourceAnimationWrappers[previousI], FADE_IN_STRONG_CLASS_NAME);
+        removeFromElementClassIfContains(sourceAnimationWrappers[previousI], FADE_IN_CLASS_NAME);
+        sourceAnimationWrappers[previousI].classList.add(FADE_OUT_CLASS_NAME);
+
+        removeFromElementClassIfContains(sourceAnimationWrappers[i], FADE_IN_STRONG_CLASS_NAME);
+        removeFromElementClassIfContains(sourceAnimationWrappers[i], FADE_OUT_CLASS_NAME);
+        sourceAnimationWrappers[i].classList.add(FADE_IN_CLASS_NAME);
+
+        // we need to remove fade out from all sources because if someone used slide swiping during animation timeout
+        // we cannot detect what slide will be
+        runQueuedRemoveFadeOut();
+
+        sourceMainWrappersTransformers[i].zero();
+
+        setTimeout(() => {
+            if (previousI !== stageIndexes.current) {
+                sourceMainWrappersTransformers[previousI].negative();
+            }
+        }, ANIMATION_TIME - 30);
+    };
+}

package/core/sources/SourceLoadActioner.js

@@ -0,0 +1,29 @@
+import { SourceSizer } from "./SourceSizer";
+import { FADE_IN_STRONG_CLASS_NAME, OPACITY_1_CLASS_NAME } from "../../constants/classes-names";
+
+export function SourceLoadActioner(
+    {
+        collections: { sourceSizers },
+        elements: { sourceAnimationWrappers, sourceMainWrappers, sources },
+        resolve
+    }, i
+) {
+    this.runActions = (defaultWidth, defaultHeight) => {
+        sources[i].classList.add(OPACITY_1_CLASS_NAME);
+        sourceAnimationWrappers[i].classList.add(FADE_IN_STRONG_CLASS_NAME);
+        sourceMainWrappers[i].removeChild(sourceMainWrappers[i].firstChild);
+
+        runNormalLoadActions(defaultWidth, defaultHeight);
+        this.runActions = runNormalLoadActions;
+    };
+
+    /**
+     * Next loads after initial occur only while using 'srcset' so need to recreate SourceSizer.
+     *
+     * Note: Reopening lightbox does not trigger image load.
+     */
+    function runNormalLoadActions(defaultWidth, defaultHeight) {
+        sourceSizers[i] = resolve(SourceSizer, [i, defaultWidth, defaultHeight]);
+        sourceSizers[i].adjustSize();
+    }
+}

package/core/sources/SourceLoadHandler.js

@@ -0,0 +1,41 @@
+import { SourceLoadActioner } from "./SourceLoadActioner";
+
+export function SourceLoadHandler({ elements: { sources }, props, resolve, }, i) {
+    const sourceLoadActioner = resolve(SourceLoadActioner, [i]);
+
+    let wasVideoLoadCalled;
+
+    this.handleImageLoad = ({ target: { naturalWidth, naturalHeight } }) => {
+        sourceLoadActioner.runActions(naturalWidth, naturalHeight);
+    };
+
+    this.handleVideoLoad = ({ target: { videoWidth, videoHeight } }) => {
+        wasVideoLoadCalled = true;
+        sourceLoadActioner.runActions(videoWidth, videoHeight);
+    };
+
+    this.handleNotMetaDatedVideoLoad = () => {
+        if (!wasVideoLoadCalled) {
+            this.handleYoutubeLoad();
+        }
+    };
+
+    this.handleYoutubeLoad = () => {
+        let width = 1920;
+        let height = 1080;
+
+        if (props.maxYoutubeDimensions) {
+            width = props.maxYoutubeDimensions.width;
+            height = props.maxYoutubeDimensions.height;
+        }
+
+        sourceLoadActioner.runActions(width, height);
+    };
+
+    this.handleCustomLoad = () => {
+        setTimeout(() => {
+            const source = sources[i];
+            sourceLoadActioner.runActions(source.offsetWidth, source.offsetHeight);
+        });
+    };
+}

package/core/sources/SourceSizer.js

@@ -0,0 +1,36 @@
+export function SourceSizer({ data, elements: { sources } }, i, defaultWidth, defaultHeight) {
+    const ratio = defaultWidth / defaultHeight;
+    let newHeight = 0;
+
+    /**
+     * This method takes care of setting sources dimensions.
+     * Unfortunately wa cannot only set max width and max height and allow the sources to scale themselves,
+     * due tu Youtube source which dimensions needs to be set in advance.
+     * In this case we are calculating dimensions mathematically.
+     */
+    this.adjustSize = () => {
+        newHeight = data.maxSourceWidth / ratio;
+
+        // wider than higher
+        if (newHeight < data.maxSourceHeight) {
+            if (defaultWidth < data.maxSourceWidth) {
+                newHeight = defaultHeight;
+            }
+            return updateDimensions();
+        }
+
+        // higher than wider
+        if (defaultHeight > data.maxSourceHeight) {
+            newHeight = data.maxSourceHeight;
+        } else {
+            newHeight = defaultHeight;
+        }
+
+        updateDimensions();
+    };
+
+    const updateDimensions = () => {
+        sources[i].style.width = newHeight * ratio + 'px';
+        sources[i].style.height = newHeight + 'px';
+    }
+}

package/core/sources/creating/CreatingSourcesBucket.js

@@ -0,0 +1,29 @@
+import { AutomaticTypeDetector } from "../types/AutomaticTypeDetector";
+
+export function CreatingSourcesBucket(
+    {
+        props: { types, type, sources }, resolve,
+    }, localStorageManager, detectedTypeActioner
+) {
+    this.getTypeSetByClientForIndex = (i) => {
+        let typeSetManuallyByClient;
+
+        if (types && types[i]) {
+            typeSetManuallyByClient = types[i];
+        } else if (type) {
+            typeSetManuallyByClient = type;
+        }
+
+        return typeSetManuallyByClient;
+    };
+
+    this.retrieveTypeWithXhrForIndex = (i) => {
+        // we need to copy index because xhr will for sure come later than next loop iteration
+        const automaticTypeDetector = resolve(AutomaticTypeDetector);
+        automaticTypeDetector.setUrlToCheck(sources[i]);
+        automaticTypeDetector.getSourceType((sourceType) => {
+            localStorageManager.handleReceivedSourceTypeForUrl(sourceType, sources[i]);
+            detectedTypeActioner.runActionsForSourceTypeAndIndex(sourceType, i)
+        });
+    };
+}

package/core/sources/creating/CreatingSourcesLocalStorageManager.js

@@ -0,0 +1,55 @@
+import { SOURCES_TYPES_KEY } from "../../../constants/local-storage-constants";
+import { assignToObject } from "../../../helpers/objects/assignToObject";
+
+export function CreatingSourcesLocalStorageManager({ props }) {
+    const NEW_TYPE_SHOULD_BE_ADDED_HERE = false;
+    let decodedSourceTypes;
+    let newSourceTypesToDetect = 0;
+    const newTypes = {};
+
+    this.getSourceTypeFromLocalStorageByUrl = (url) => {
+        if (!decodedSourceTypes[url]) {
+            return addNewUrlToDetect(url);
+        }
+        return decodedSourceTypes[url];
+    };
+
+    this.handleReceivedSourceTypeForUrl = (sourceType, url) => {
+        if (newTypes[url] === NEW_TYPE_SHOULD_BE_ADDED_HERE) {
+            newSourceTypesToDetect--;
+
+            // not storing invalid types
+            if (sourceType !== 'invalid') {
+                newTypes[url] = sourceType;
+            } else {
+                delete newTypes[url];
+            }
+
+            if (newSourceTypesToDetect === 0) {
+                assignToObject(decodedSourceTypes, newTypes);
+                localStorage.setItem(SOURCES_TYPES_KEY, JSON.stringify(decodedSourceTypes));
+            }
+        }
+    };
+
+    const addNewUrlToDetect = (url) => {
+        newSourceTypesToDetect++;
+        newTypes[url] = NEW_TYPE_SHOULD_BE_ADDED_HERE;
+    };
+
+    if (!props.disableLocalStorage) {
+        decodedSourceTypes = JSON.parse(localStorage.getItem(SOURCES_TYPES_KEY));
+        // we are checking if detected source types contains at certain key source type
+        // when localStorage will be empty we can overwrite this method because we are sure
+        // that at every index will be no source type
+        if (!decodedSourceTypes) {
+            // in ifAllNewTypesAreDetectedStoreAllTypesToLocalStorage we are assigning to
+            // decodedSourceTypes new Types so we need to make it an object to avoid errors
+            decodedSourceTypes = {};
+            this.getSourceTypeFromLocalStorageByUrl = addNewUrlToDetect;
+        }
+    } else {
+        this.getSourceTypeFromLocalStorageByUrl = function () {};
+        this.handleReceivedSourceTypeForUrl = function () {};
+    }
+}