Merge pull request #74 from piotrzdziarski/dom

core refactoring
banthagroup · Apr 30, 2019 · 708300e · 708300e
2 parents dee136a + 108cd43
commit 708300e
Show file tree

Hide file tree

Showing 74 changed files with 1,094 additions and 1,001 deletions.
diff --git a/index.js b/index.js
diff --git a/src/FsLightbox.jsx b/src/FsLightbox.jsx
@@ -24,26 +24,7 @@ import { SourceComponentGetter } from "./core/sources/creating/SourceComponentGe
 import { SourceSizeAdjuster } from "./core/sizes/SourceSizeAdjuster";
 import { getScrollbarWidth } from "./core/scrollbar/getScrollbarWidth";
 import { runLightboxUnmountActions } from "./core/main-component/runLightboxUnmountActions";
-import { DocumentKeyDownEventController } from "./core/events-controllers/document/DocumentKeyDownEventController";
-import { WindowResizeEventController } from "./core/events-controllers/window/resize/WindowResizeEventController";
-import { SwipingEventsControllersFacade } from "./core/events-controllers/facades/SwipingEventsControllersFacade";
-import { FullscreenToggler } from "./core/fullscreen/FullscreenToggler";
-import { GlobalResizingController } from "./core/sizes/GlobalResizingController";
-import { KeyboardController } from "./core/keyboard/KeyboardController";
-import { LightboxCloser } from "./core/main-component/closing/LightboxCloser";
-import { LightboxInitializer } from "./core/main-component/LightboxInitializer";
-import { LightboxOpener } from "./core/main-component/opening/LightboxOpener";
-import { LightboxOpeningActions } from "./core/main-component/opening/LightboxOpeningActions";
-import { ScrollbarRecompensor } from "./core/scrollbar/ScrollbarRecompensor";
-import { SlideChanger } from "./core/slide/SlideChanger";
-import { SlideSwipingDown } from "./core/slide-swiping/events/SlideSwipingDown";
-import { SlideSwipingUp } from "./core/slide-swiping/events/SlideSwipingUp";
-import { SlideSwipingMove } from "./core/slide-swiping/events/SlideSwipingMove";
-import { SourceAnimator } from "./core/animations/SourceAnimator";
-import { SourceController } from "./core/sources/SourceController";
-import { SourcesFactory } from "./core/sources/creating/SourcesFactory";
-import { Stage } from "./core/stage/Stage";
-import { SourceHoldersTransformer } from "./core/transforms/SourceHoldersTransformer";
+import { Injector } from "./injection/Injector";
 
 class FsLightbox extends Component {
     constructor(props) {
@@ -131,36 +112,6 @@ class FsLightbox extends Component {
 
     setUpInjector() {
         this.injector = {
-            core: {
-                eventsControllers: {
-                    document: {
-                        getKeyDown: () => new DocumentKeyDownEventController(this),
-                    },
-                    window: {
-                        getResize: () => new WindowResizeEventController(this),
-                        getSwiping: () => new SwipingEventsControllersFacade(this),
-                    }
-                },
-                getFullscreenToggler: () => new FullscreenToggler(this),
-                getGlobalResizingController: () => new GlobalResizingController(this),
-                getKeyboardController: () => new KeyboardController(this),
-                getLightboxCloser: () => new LightboxCloser(this),
-                getLightboxInitializer: () => new LightboxInitializer(this),
-                getLightboxOpener: () => new LightboxOpener(this),
-                getLightboxOpeningActions: () => new LightboxOpeningActions(this),
-                getScrollbarRecompensor: () => new ScrollbarRecompensor(this),
-                getSlideChanger: () => new SlideChanger(this),
-                slideSwiping: {
-                    getDownForSwipingProps: (swipingProps) => new SlideSwipingDown(this, swipingProps),
-                    getMoveForSwipingProps: (swipingProps) => new SlideSwipingMove(this, swipingProps),
-                    getUpForSwipingProps: (swipingProps) => new SlideSwipingUp(this, swipingProps)
-                },
-                getSourceAnimator: () => new SourceAnimator(this),
-                getSourceController: () => new SourceController(this),
-                getSourceHoldersTransformer: () => new SourceHoldersTransformer(this),
-                getSourcesFactory: () => new SourcesFactory(this),
-                getStage: () => new Stage(this)
-            },
             dom: {
                 getXMLHttpRequest: () => new XMLHttpRequest()
             },
@@ -189,9 +140,9 @@ class FsLightbox extends Component {
             transforms: {
                 getSourceHolderTransformer: () => new SourceHolderTransformer(this),
                 getStageSourceHoldersByValueTransformer: () => new StageSourceHoldersByValueTransformer(this),
-                getInitialStageSourceHoldersByValueTransformer: () => ({ stageSourcesIndexes: {} })
             }
         };
+        this.testInjector = new Injector(this);
     }
 
     setUpCore() {

diff --git a/src/components/slide-swiping/SwipingInvisibleHover.jsx b/src/components/slide-swiping/SwipingInvisibleHover.jsx
@@ -14,9 +14,9 @@ const SwipingInvisibleHover = (
     const [hasMovedWhileSwiping, setHasMovedWhileSwiping] = useState(false);
     hasMovedWhileSwipingState.get = () => hasMovedWhileSwiping;
     hasMovedWhileSwipingState.set = setHasMovedWhileSwiping;
-    
+
     return (hasMovedWhileSwiping) ? (
-        <div className={ `fslightbox-swiping-invisible-hover fslightbox-full-dimension` }></div>
+        <div className="fslightbox-swiping-invisible-hover fslightbox-full-dimension"></div>
     ) : null;
 };
 

diff --git a/src/components/sources/proper-sources/Image.jsx b/src/components/sources/proper-sources/Image.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
  * @param { FsLightbox.data.urls } urls
  * @param { FsLightbox.elements.sources } sources
  * @param { FsLightbox.sourcesData.isSourceAlreadyInitializedArray } isSourceAlreadyInitializedArray
- * @param { FsLightbox.core.sourceController | SourceController } sourceController
+ * @param { FsLightbox.core.sourceController | SetUpSourceController } sourceController
  * @param { number } index
  */
 const Image = (

diff --git a/src/components/sources/proper-sources/Video.jsx b/src/components/sources/proper-sources/Video.jsx
@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
  * @param { FsLightbox.elements.sources } sources
  * @param { FsLightbox.sourcesData.isSourceAlreadyInitializedArray } isSourceAlreadyInitializedArray
  * @param { FsLightbox.sourcesData.videosPosters } videosPosters
- * @param { FsLightbox.core.sourceController | SourceController } sourceController
+ * @param { FsLightbox.core.sourceController | SetUpSourceController } sourceController
  * @param { number }index
  */
 const Video = (

diff --git a/src/components/sources/proper-sources/Youtube.jsx b/src/components/sources/proper-sources/Youtube.jsx
@@ -6,7 +6,7 @@ import { getYoutubeVideoIdFromUrl } from "../../../helpers/source/getYoutubeVide
  * @param { FsLightbox.data.urls } urls
  * @param { FsLightbox.elements.sources } sources
  * @param { FsLightbox.sourcesData.isSourceAlreadyInitializedArray } isSourceAlreadyInitializedArray
- * @param { FsLightbox.core.sourceController | SourceController } sourceController
+ * @param { FsLightbox.core.sourceController | SetUpSourceController } sourceController
  * @param { number } index
  */
 const Youtube = (

diff --git a/src/core/animations/SourceAnimator.js → src/core/animations/setUpSourceAnimator.js b/src/core/animations/SourceAnimator.js → src/core/animations/setUpSourceAnimator.js
@@ -5,60 +5,63 @@ import {
 } from "../../constants/cssConstants";
 import { getClassListOfElementInArrayByIndex } from "../../helpers/source/getClassListOfElementInArrayByIndex";
 
-/**
- * @constructor
- * @param { FsLightbox.elements.sources | Array } sources
- */
-export function SourceAnimator({ elements: { sources } }) {
+export function setUpSourceAnimator(
+    {
+        elements: { sources },
+        core: {
+            sourceAnimator: self
+        }
+    }
+) {
     /** @var { DOMTokenList } animatedSourceClassList */
     let animatedSourceClassList;
 
     /**
      * @param index
-     * @return { this }
+     * @return { self }
      */
-    this.animateSourceFromIndex = (index) => {
+    self.animateSourceFromIndex = (index) => {
         setClassListForSourceByIndex(index);
-        return this;
+        return self;
     };
 
     /**
      * @param slideNumber
-     * @return { this }
+     * @return { self }
      */
-    this.animateSourceFromSlide = (slideNumber) => {
+    self.animateSourceFromSlide = (slideNumber) => {
         setClassListForSourceByIndex(slideNumber - 1);
-        return this;
+        return self;
     };
 
     const setClassListForSourceByIndex = (index) => {
         animatedSourceClassList = getClassListOfElementInArrayByIndex(sources, index);
     };
 
-    this.fadeOut = () => {
+    self.fadeOut = () => {
         animatedSourceClassList.add(FADE_OUT_CLASS_NAME);
     };
 
-    this.fadeIn = () => {
+    self.fadeIn = () => {
         animatedSourceClassList.add(FADE_IN_CLASS_NAME);
     };
 
-    this.longFadeIn = () => {
+    self.longFadeIn = () => {
         animatedSourceClassList.add(LONG_FADE_IN_CLASS_NAME);
     };
 
-    this.removeFadeOut = () => {
+    self.removeFadeOut = () => {
         animatedSourceClassList.remove(FADE_OUT_CLASS_NAME);
     };
 
-    this.removeFadeIn = () => {
+    self.removeFadeIn = () => {
         if (animatedSourceClassList.contains(FADE_IN_CLASS_NAME))
             animatedSourceClassList.remove(FADE_IN_CLASS_NAME);
         if (animatedSourceClassList.contains(LONG_FADE_IN_CLASS_NAME))
             animatedSourceClassList.remove(LONG_FADE_IN_CLASS_NAME);
     };
 
-    this.removeFadeOutFromAllSources = () => {
+    self.removeFadeOutFromAllSources = () => {
         for (let i = 0; i < sources.length; i++) {
             const sourceClassList = getClassListOfElementInArrayByIndex(sources, i);
             if (sourceClassList.contains(FADE_OUT_CLASS_NAME)) {

diff --git a/src/core/events-controllers/document/DocumentKeyDownEventController.js b/src/core/events-controllers/document/DocumentKeyDownEventController.js
diff --git a/src/core/events-controllers/document/setUpDocumentKeyDownEventController.js b/src/core/events-controllers/document/setUpDocumentKeyDownEventController.js
@@ -0,0 +1,20 @@
+export function setUpDocumentKeyDownEventController(
+    {
+        core: {
+            eventsControllers: {
+                document: {
+                    keyDown: self
+                }
+            },
+            keyboardController
+        }
+    }
+) {
+    self.attachListener = () => {
+        document.addEventListener('keydown', keyboardController.handleKeyDown)
+    };
+
+    self.removeListener = () => {
+        document.removeEventListener('keydown', keyboardController.handleKeyDown)
+    };
+}
diff --git a/...facades/SwipingEventsControllersFacade.js → ...es/setUpSwipingEventsControllersFacade.js b/...facades/SwipingEventsControllersFacade.js → ...es/setUpSwipingEventsControllersFacade.js
@@ -1,15 +1,17 @@
-/**
- * @constructor
- * @param { FsLightbox.injector.eventsControllers.getWindowMoveEventController | function(): WindowMoveEventController} getWindowMoveEventController
- * @param { FsLightbox.injector.eventsControllers.getWindowUpEventController | function(): WindowUpEventController} getWindowUpEventController
- */
-export function SwipingEventsControllersFacade(
+export function setUpSwipingEventsControllersFacade(
     {
         injector: {
             eventsControllers: {
                 getWindowMoveEventController,
                 getWindowUpEventController
             }
+        },
+        core: {
+            eventsControllers: {
+                window: {
+                    swiping: self
+                }
+            }
         }
     }
 ) {
@@ -18,13 +20,13 @@ export function SwipingEventsControllersFacade(
         getWindowUpEventController(),
     ];
 
-    this.attachListeners = () => {
+    self.attachListeners = () => {
         for (let i = 0; i < swipingControllers.length; i++) {
             swipingControllers[i].attachListener();
         }
     };
 
-    this.removeListeners = () => {
+    self.removeListeners = () => {
         for (let i = 0; i < swipingControllers.length; i++) {
             swipingControllers[i].removeListener();
         }

diff --git a/src/core/events-controllers/window/resize/WindowResizeEventController.js b/src/core/events-controllers/window/resize/WindowResizeEventController.js
diff --git a/src/core/events-controllers/window/resize/setUpWindowResizeEventController.js b/src/core/events-controllers/window/resize/setUpWindowResizeEventController.js
@@ -0,0 +1,20 @@
+export function setUpWindowResizeEventController(
+    {
+        core: {
+            eventsControllers: {
+                window: {
+                    resize: self
+                }
+            },
+            globalResizingController
+        }
+    }
+) {
+    self.attachListener = () => {
+        window.addEventListener('resize', globalResizingController.runAllResizingActions);
+    };
+
+    self.removeListener = () => {
+        window.removeEventListener('resize', globalResizingController.runAllResizingActions);
+    };
+}
diff --git a/src/core/events-controllers/window/up/WindowUpEventController.js b/src/core/events-controllers/window/up/WindowUpEventController.js
@@ -1,6 +1,6 @@
 /**
  * @constructor
- * @param { FsLightbox.core.slideSwiping.up | SlideSwipingUp } slideSwipingUp
+ * @param { FsLightbox.core.slideSwiping.up | SetUpSlideSwipingUp } slideSwipingUp
  */
 export function WindowUpEventController({ core: { slideSwiping: { up: slideSwipingUp } } }) {
     this.attachListener = () => {

diff --git a/src/core/fullscreen/FullscreenToggler.js → ...core/fullscreen/setUpFullscreenToggler.js b/src/core/fullscreen/FullscreenToggler.js → ...core/fullscreen/setUpFullscreenToggler.js
@@ -1,15 +1,14 @@
-/**
- * @class
- * @param { FsLightbox.componentsStates.hasMovedWhileSwiping | { set: function(boolean), get: function(): boolean } } isFullscreenOpenState
- */
-export function FullscreenToggler(
+export function setUpFullscreenToggler(
     {
         componentsStates: {
             isFullscreenOpen: isFullscreenOpenState
+        },
+        core: {
+            fullscreenToggler: self
         }
     }
 ) {
-    this.turnOnFullscreen = () => {
+    self.turnOnFullscreen = () => {
         isFullscreenOpenState.set(true);
         const documentElement = document.documentElement;
         if (documentElement.requestFullscreen) {
@@ -23,7 +22,7 @@ export function FullscreenToggler(
         }
     };
 
-    this.turnOffFullscreen = () => {
+    self.turnOffFullscreen = () => {
         isFullscreenOpenState.set(false);
         if (document.exitFullscreen) {
             document.exitFullscreen();
@@ -35,4 +34,4 @@ export function FullscreenToggler(
             document.msExitFullscreen();
         }
     }
-}
+}
diff --git a/src/core/keyboard/KeyboardController.js → src/core/keyboard/setUpKeyboardController.js b/src/core/keyboard/KeyboardController.js → src/core/keyboard/setUpKeyboardController.js
@@ -1,18 +1,16 @@
 import { ESCAPE, LEFT_ARROW, RIGHT_ARROW } from "../../constants/keyboardConstants";
 
-/**
- * @constructor
- */
-export function KeyboardController(
+export function setUpKeyboardController(
     {
         core: {
             stage,
             slideChanger,
             lightboxCloser,
+            keyboardController: self
         }
     }
 ) {
-    this.handleKeyDown = ({ keyCode }) => {
+    self.handleKeyDown = ({ keyCode }) => {
         switch (keyCode) {
             case ESCAPE:
                 lightboxCloser.closeLightbox();

diff --git a/src/core/main-component/LightboxInitializer.js b/src/core/main-component/LightboxInitializer.js