Skip to content
Permalink
Browse files

1.3.0 refactoring elements class managment

  • Loading branch information...
piotrzdziarski committed Jun 21, 2019
1 parent 49e5947 commit e3f873d5bd512e859cf4de3cdf0d16b7f3bad6c6
Showing with 1,309 additions and 1,012 deletions.
  1. +20 −7 demo/DemoComponent.jsx
  2. +1 −1 index.js
  3. +6 −3 src/FsLightbox.jsx
  4. +2 −3 src/components/slide-buttons/SlideButtonNext.jsx
  5. +2 −3 src/components/slide-buttons/SlideButtonPrevious.jsx
  6. +2 −7 src/components/sources/proper-sources/Invalid.jsx
  7. +1 −1 src/constants/classes-names.js
  8. +2 −4 src/constants/{coreConstants.js → core-constants.js}
  9. +0 −8 src/constants/css-constants.js
  10. +3 −0 src/constants/elements.js
  11. +11 −26 src/core/animations/setUpSourceAnimator.js
  12. +54 −0 src/core/elements/setUpClassListsManager.js
  13. +2 −2 src/core/events-controllers/document/setUpDocumentKeyDownEventController.js
  14. +5 −5 src/core/keyboard/setUpKeyboardController.js
  15. +1 −1 src/core/main-component/closing/LightboxClosingActions.js
  16. +1 −1 src/core/main-component/opening/setUpLightboxOpener.js
  17. +6 −3 src/core/main-component/opening/setUpLightboxOpeningActions.js
  18. +4 −8 src/core/main-component/updating/LightboxUpdatingActions.js
  19. +7 −4 src/core/main-component/updating/setUpLightboxUpdater.js
  20. +11 −4 src/core/setUpCore.js
  21. +9 −4 src/core/sizes/setUpGlobalResizingController.js
  22. +25 −41 src/core/slide-swiping/actions/move/SlideSwipingMoveActions.js
  23. +26 −71 src/core/slide-swiping/actions/up/SlideSwipingUpActions.js
  24. +10 −10 src/core/slide-swiping/actions/up/SwipingSlideChanger.js
  25. +19 −11 src/core/slide-swiping/actions/up/SwipingTransitioner.js
  26. +6 −2 src/core/slide-swiping/events/setUpSlideSwipingDown.js
  27. +14 −21 src/core/slide-swiping/events/setUpSlideSwipingMove.js
  28. +7 −12 src/core/slide-swiping/events/setUpSlideSwipingUp.js
  29. +4 −1 src/core/slide/{slide-changing/setUpSlideChanger.js → SlideChangingActions.js}
  30. +2 −2 src/core/slide/{slide-changing → }/getPreviousSourceNegativeTransformTimeoutQueue.js
  31. +2 −2 src/core/slide/{slide-changing → }/getRemoveFadeOutTimeoutQueue.js
  32. +55 −0 src/core/slide/setUpSlideIndexChanger.js
  33. +8 −11 src/core/sources/setUpSourceController.js
  34. +1 −1 src/core/sources/types/DetectedTypeActions.js
  35. +1 −1 src/core/sources/types/SourceTypeGetter.js
  36. +13 −6 src/core/stage/setUpStageManager.js
  37. +2 −2 src/core/timeouts/TimeoutQueue.js
  38. +4 −0 src/core/transforms/SourceHolderTransformer.js
  39. +69 −0 src/core/transforms/setUpSourcesHoldersTransformingFacade.js
  40. +0 −72 src/core/transforms/setUpStageSourcesHoldersTransformer.js
  41. +9 −0 src/helpers/events/getClientXFromEvent.js
  42. +2 −1 src/helpers/source/getClassListOfElementInArrayByIndex.js
  43. +2 −2 tests/__mocks__/helpers/createSourceForFsLightbox.js
  44. +1 −1 tests/components/FsLightboxEvents.test.jsx
  45. +1 −1 tests/components/__snapshots__/FsLightbox.test.jsx.snap
  46. +1 −1 tests/components/nav/__snapshots__/SlideNumber.test.jsx.snap
  47. +1 −1 tests/components/slide-buttons/__snapshots__/SlideButtonLeft.test.jsx.snap
  48. +1 −1 tests/components/slide-buttons/__snapshots__/SlideButtonRight.test.jsx.snap
  49. +12 −8 tests/components/sources/proper-sources/Invalid.test.jsx
  50. +113 −84 tests/core/animations/setUpSourceAnimator.test.js
  51. +192 −0 tests/core/elements/setUpClassListsManager.test.js
  52. +1 −1 tests/core/main-component/closing/LightboxClosingActions.test.js
  53. +3 −3 tests/core/main-component/mounting/runLightboxMountedActions.test.js
  54. +1 −1 tests/core/main-component/opening/setUpLightboxOpener.test.js
  55. +1 −1 tests/core/main-component/opening/setUpLightboxOpeningActions.test.js
  56. +24 −11 tests/core/setUpCore.test.js
  57. +200 −85 tests/core/slide-swiping/actions/move/SlideSwipingMoveActions.test.js
  58. +7 −10 tests/core/slide-swiping/actions/up/SlideSwipingUpActions.test.js
  59. +39 −104 tests/core/slide-swiping/actions/up/SwipingSlideChanger.test.js
  60. +19 −25 tests/core/slide-swiping/events/setUpSlideSwipingMove.test.js
  61. +24 −28 tests/core/slide-swiping/events/setUpSlideSwipingUp.test.js
  62. +3 −3 tests/core/slide/{slide-changing → }/getPreviousSourceNegativeTransformTimeoutQueue.test.js
  63. +3 −3 tests/core/slide/{slide-changing → }/getRemoveFadeOutTimeoutQueue.test.js
  64. +195 −0 tests/core/slide/setUpSlideIndexChanger.test.js
  65. +0 −260 tests/core/slide/slide-changing/setUpSlideChanger.test.js
  66. +1 −1 tests/core/sources/creating/DetectedTypeActions.test.js
  67. +1 −1 tests/core/sources/types/SourceTypeGetter.test.js
  68. +12 −14 tests/core/transforms/setUpStageSourcesHoldersTransformer.test.js
  69. +22 −0 tests/helpers/events/getClientXFromEvent.test.js
  70. 0 tests/helpers/stage/isStageIndexDefined.js
@@ -9,10 +9,17 @@ class DemoComponent extends Component {
this.state = {
toggler: true,
toggler2: false,
updated: true
updated: true,
slide: 1,
};
this.toggleLightbox = this.toggleLightbox.bind(this);
this.toggleLightboxSecond = this.toggleLightboxSecond.bind(this);

setTimeout(() => {
// this.setState({
// slide: 5
// });
}, 5000);
}

toggleLightbox() {
@@ -42,14 +49,20 @@ class DemoComponent extends Component {
</div>
<FsLightbox
toggler={ this.state.toggler }
slide={ this.state.slide }
sources={ [
'../demo/images/5.jpg',
'https://escalante-mkt-imgs.s3-us-west-2.amazonaws.com/TimeSheets/screenshot1.png',
// "invalid",
TEST_YOUTUBE_URL,
TEST_VIDEO_URL,
"https://images.pexels.com/photos/2118563/pexels-photo-2118563.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"../demo/images/3.jpeg"
'../demo/images/4.jpeg',
// '../demo/images/1.jpeg',
// '../demo/images/2.jpg',
// '../demo/images/6.jpg',
// '../demo/images/7.jpg',
// 'https://escalante-mkt-imgs.s3-us-west-2.amazonaws.com/TimeSheets/screenshot1.png',
// // "invalid",
// // TEST_YOUTUBE_URL,
// TEST_VIDEO_URL,
// "https://images.pexels.com/photos/2118563/pexels-photo-2118563.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
// "../demo/images/3.jpeg"
] }
types={ [
'image',

Large diffs are not rendered by default.

@@ -15,6 +15,7 @@ import { EventsDispatcher } from "./core/main-component/EventsDispatcher";
import { runLightboxMountedActions } from "./core/main-component/mounting/runLightboxMountedActions";
import { getInitialCurrentIndex } from "./core/stage/getInitialCurrentIndex";
import { getSourcesHoldersTransformersCollection } from "./core/collections/getSourcesHoldersTransformersCollection";
import { FULL_DIMENSION_CLASS_NAME, LONG_FADE_IN_CLASS_NAME, PREFIX } from "./constants/classes-names";

class FsLightbox extends Component {
constructor(props) {
@@ -37,6 +38,7 @@ class FsLightbox extends Component {
sourcesCount: null,
lastSourceIndex: null,
isInitialized: false,
isSwipingSlides: false,
maxSourceWidth: 0,
maxSourceHeight: 0,
scrollbarWidth: 0,
@@ -122,6 +124,7 @@ class FsLightbox extends Component {

setUpCore() {
this.core = {
classListManager: {},
eventsControllers: {
document: {
keyDown: {},
@@ -139,7 +142,7 @@ class FsLightbox extends Component {
lightboxOpeningActions: {},
lightboxUpdater: {},
scrollbarRecompensor: {},
slideChanger: {},
slideIndexChanger: {},
slideNumberUpdater: {},
slideSwiping: {
down: {},
@@ -148,8 +151,8 @@ class FsLightbox extends Component {
},
sourceAnimator: {},
sourceController: {},
sourcesHoldersTransformingFacade: {},
stageManager: {},
stageSourcesHoldersTransformer: {}
};
setUpCore(this);
}
@@ -171,7 +174,7 @@ class FsLightbox extends Component {

return (
<div ref={ this.elements.container }
className="fslightbox-container fslightbox-full-dimension fslightbox-fade-in-long">
className={ `${ PREFIX }container ${ FULL_DIMENSION_CLASS_NAME } ${ LONG_FADE_IN_CLASS_NAME }` }>
<DownEventDetector fsLightbox={ this }/>
<SwipingInvisibleHover fsLightbox={ this }/>
<Nav fsLightbox={ this }/>
@@ -6,14 +6,13 @@ const SlideButtonNext = (
fsLightbox: {
stageIndexes,
core: {
slideChanger: { changeSlideTo }
slideIndexChanger: { changeToWithActions }
}
}
}
) => {
// TODO: update test
const goToNextSlide = () => {
changeSlideTo(stageIndexes.next + 1);
changeToWithActions(stageIndexes.next);
};

return (
@@ -6,14 +6,13 @@ const SlideButtonPrevious = (
fsLightbox: {
stageIndexes,
core: {
slideChanger: { changeSlideTo }
slideIndexChanger: { changeToWithActions }
}
}
}
) => {
// TODO: UPDATE TEST
const goToPreviousSlide = () => {
changeSlideTo(stageIndexes.previous + 1);
changeToWithActions(stageIndexes.previous);
};

return (
@@ -1,5 +1,4 @@
import React, { useEffect } from 'react';
import PropTypes from "prop-types";

const Invalid = (
{
@@ -11,7 +10,7 @@ const Invalid = (
}
) => {
useEffect(() => {
sourceAnimator.animateSourceFromSlide(index + 1).fadeIn();
sourceAnimator.animateSourceFromIndex(index).fadeIn();
});

return (
@@ -23,8 +22,4 @@ const Invalid = (
);
};

Invalid.propTypes = {
fsLightbox: PropTypes.object.isRequired,
index: PropTypes.number.isRequired
};
export default Invalid;
export default Invalid;
@@ -6,7 +6,7 @@ export const FADE_IN_CLASS_NAME = `${ PREFIX }fade-in`;
export const FADE_OUT_CLASS_NAME = `${ PREFIX }fade-out`;
export const FULL_DIMENSION_CLASS_NAME = `${ PREFIX }full-dimension`;
export const FLEX_CENTERED_CLASS_NAME = `${ PREFIX }flex-centered`;
export const FADE_IN_LONG_CLASS_NAME = `${ PREFIX }fade-in-long`;
export const LONG_FADE_IN_CLASS_NAME = `${ PREFIX }fade-in-long`;
export const LONG_FADE_OUT_CLASS_NAME = `${ PREFIX }fade-out-long`;
export const OPACITY_0_CLASS_NAME = `${ PREFIX }opacity-0`;
export const OPEN_CLASS_NAME = `${ PREFIX }open`;
@@ -4,7 +4,5 @@ export const VIDEO_TYPE = 'video';
export const YOUTUBE_TYPE = 'youtube';
export const INVALID_TYPE = 'invalid';

// stage sources order types
export const PREVIOUS_POSITION = -1;
export const CURRENT_POSITION = 0;
export const NEXT_POSITION = 1;
export const PREVIOUS_SLIDE_INDEX = 'previous';
export const NEXT_SLIDE_INDEX = 'next';
@@ -1,9 +1 @@
export const ANIMATION_TIME = 250;
export const FADE_IN_CLASS_NAME = 'fslightbox-fade-in';
export const FADE_OUT_CLASS_NAME = 'fslightbox-fade-out';
export const LONG_FADE_IN_CLASS_NAME = 'fslightbox-fade-in-long';
export const LONG_FADE_OUT_CLASS_NAME = 'fslightbox-fade-out-long';
export const OPEN_CLASS_NAME = 'fslightbox-open';
export const CURSOR_GRABBING_CLASS_NAME = 'fslightbox-cursor-grabbing';
export const TRANSFORM_TRANSITION_CLASS_NAME = 'fslightbox-transform-transition';
export const OPACITY_0_CLASS_NAME = 'fslightbox-opacity-0';
@@ -0,0 +1,3 @@
export const LIGHTBOX_CONTAINER = 'container';
export const SOURCES_HOLDERS = 'sourcesHolders';
export const SOURCES = 'sources';
@@ -1,14 +1,11 @@
import {
FADE_IN_CLASS_NAME,
LONG_FADE_IN_CLASS_NAME,
FADE_OUT_CLASS_NAME
} from "../../constants/css-constants";
import { getClassListOfElementInArrayByIndex } from "../../helpers/source/getClassListOfElementInArrayByIndex";
import { FADE_IN_CLASS_NAME, FADE_OUT_CLASS_NAME, LONG_FADE_IN_CLASS_NAME } from "../../constants/classes-names";


export function setUpSourceAnimator(
{
elements: { sources },
data: { sourcesCount },
core: {
classListGetter,
sourceAnimator: self
}
}
@@ -21,23 +18,10 @@ export function setUpSourceAnimator(
* @return { self }
*/
self.animateSourceFromIndex = (index) => {
setClassListForSourceByIndex(index);
animatedSourceClassList = classListGetter.getSourceClassListByIndex(index);
return self;
};

/**
* @param slideNumber
* @return { self }
*/
self.animateSourceFromSlide = (slideNumber) => {
setClassListForSourceByIndex(slideNumber - 1);
return self;
};

const setClassListForSourceByIndex = (index) => {
animatedSourceClassList = getClassListOfElementInArrayByIndex(sources, index);
};

self.fadeOut = () => {
animatedSourceClassList.add(FADE_OUT_CLASS_NAME);
};
@@ -62,11 +46,12 @@ export function setUpSourceAnimator(
};

self.removeFadeOutFromAllSources = () => {
for (let i = 0; i < sources.length; i++) {
const sourceClassList = getClassListOfElementInArrayByIndex(sources, i);
if (sourceClassList.contains(FADE_OUT_CLASS_NAME)) {
sourceClassList.remove(FADE_OUT_CLASS_NAME);
}
for (let i = 0; i < sourcesCount; i++) {
classListGetter.ifElementFromArrayAtIndexHasClassRemoveIt(
'sources',
i,
FADE_OUT_CLASS_NAME
);
}
};
}
@@ -0,0 +1,54 @@
export function setUpClassListsManager(
{
core: {
classListManager: self
},
elements
}
) {
self.addToElementClass = (elementName, className) => {
addToElementClass(elements[elementName], className);
};

self.removeFromElementClass = (elementName, className) => {
removeFromElementClass(elements[elementName], className);
};

self.addToElementInArrayAtIndexClass = (elementsArrayName, index, className) => {
addToElementClass(elements[elementsArrayName][index], className);
};

self.ifElementNotHasClassAddIt = (elementName, className) => {
if (!doesElementContainsClassList(elements[elementName], className)) {
addToElementClass(elements[elementName], className);
}
};

self.ifElementHasClassRemoveIt = (elementName, className) => {
if (doesElementContainsClassList(elements[elementName], className)) {
removeFromElementClass(elements[elementName], className);
}
};

self.ifElementFromArrayAtIndexHasClassRemoveIt = (elementsArrayName, index, className) => {
if (doesElementContainsClassList(elements[elementsArrayName][index], className)) {
removeFromElementClass(elements[elementsArrayName][index], className);
}
};

const addToElementClass = (element, className) => {
getClassListFromElement(element).add(className);
};

const removeFromElementClass = (element, className) => {
getClassListFromElement(element).remove(className);
};

const doesElementContainsClassList = (element, className) => {
return getClassListFromElement(element).contains(className);
};

const getClassListFromElement = (element) => {
return element.current.classList;
};
}
@@ -11,10 +11,10 @@ export function setUpDocumentKeyDownEventController(
}
) {
self.attachListener = () => {
document.addEventListener('keydown', keyboardController.handleKeyDown)
document.addEventListener('keydown', keyboardController.handleKeyDown);
};

self.removeListener = () => {
document.removeEventListener('keydown', keyboardController.handleKeyDown)
};
}
}
@@ -2,9 +2,9 @@ import { ESCAPE, LEFT_ARROW, RIGHT_ARROW } from "../../constants/keyboardConstan

export function setUpKeyboardController(
{
stageIndexes,
core: {
stage,
slideChanger,
slideIndexChanger,
lightboxCloser,
keyboardController: self
}
@@ -16,11 +16,11 @@ export function setUpKeyboardController(
lightboxCloser.closeLightbox();
break;
case LEFT_ARROW:
slideChanger.changeSlideTo(stage.getPreviousSlideNumber());
slideIndexChanger.changeToWithActions(stageIndexes.previous);
break;
case RIGHT_ARROW:
slideChanger.changeSlideTo(stage.getNextSlideNumber());
slideIndexChanger.changeToWithActions(stageIndexes.next);
break;
}
};
}
}
@@ -2,7 +2,7 @@ import {
OPEN_CLASS_NAME,
LONG_FADE_OUT_CLASS_NAME, ANIMATION_TIME
} from "../../../constants/css-constants";
import { CONTAINER_FADE_OUT_TIME } from "../../../constants/coreConstants";
import { CONTAINER_FADE_OUT_TIME } from "../../../constants/core-constants";
import { ON_CLOSE } from "../../../constants/eventsConstants";
import { getDocumentElementClassList } from "../../../helpers/dom/document/getDocumentElementClassList";

@@ -11,7 +11,7 @@ export function setUpLightboxOpener(
setState({
isOpen: true,
}, () => {
lightboxOpeningActions.runActions();
lightboxOpeningActions.runActionsForEvent();
});
};
}

0 comments on commit e3f873d

Please sign in to comment.
You can’t perform that action at this time.