Skip to content
Permalink
Browse files

1.1

  • Loading branch information...
piotrzdziarski committed Jun 5, 2019
1 parent b760ae5 commit c37bd5513de7f87b200bc841f93327a85c04ebf0
Showing with 1,455 additions and 858 deletions.
  1. +5 −2 .babelrc
  2. +0 −1 Readme.md
  3. +18 −9 demo/DemoComponent.jsx
  4. +2 −1 demo/demo.js
  5. +4 −1 index.html
  6. +1 −1 index.js
  7. +1 −47 package-lock.json
  8. +1 −4 package.json
  9. +11 −13 src/FsLightbox.jsx
  10. +7 −8 src/components/nav/toolbar/Toolbar.jsx
  11. +10 −12 src/components/nav/toolbar/toolbar-buttons/CloseButton.jsx
  12. +2 −8 src/components/nav/toolbar/toolbar-buttons/FullscreenButton.jsx
  13. +4 −4 src/components/slide-buttons/SlideButtonLeft.jsx
  14. +3 −3 src/components/slide-buttons/SlideButtonRight.jsx
  15. +4 −3 src/components/slide-swiping/DownEventDetector.jsx
  16. +1 −1 src/components/sources/SourceHolder.jsx
  17. +3 −3 src/components/sources/{SourcesHoldersWrapper.jsx → SourceHoldersWrapper.jsx}
  18. +2 −2 src/constants/cssConstants.js
  19. +1 −0 src/constants/dom-constants.js
  20. +2 −0 src/constants/localStorageConstants.js
  21. +12 −0 src/core/animations/getAnimationDebounce.js
  22. +1 −1 src/core/events-controllers/facades/setUpSwipingEventsControllersFacade.js
  23. +11 −5 src/core/events-controllers/window/move/WindowMoveEventController.js
  24. +1 −2 src/core/events-controllers/window/up/WindowUpEventController.js
  25. +6 −11 src/core/main-component/closing/LightboxClosingActions.js
  26. +15 −0 src/core/main-component/initializing/initializeLightbox.js
  27. +0 −20 src/core/main-component/initializing/setUpLightboxInitializer.js
  28. +20 −0 src/core/main-component/mounting/runLightboxMountedActions.js
  29. +1 −1 src/core/main-component/opening/setUpLightboxOpener.js
  30. +10 −9 src/core/main-component/opening/setUpLightboxOpeningActions.js
  31. +1 −4 src/core/main-component/unmounting/runLightboxUnmountActions.js
  32. +1 −1 src/core/main-component/updating/LightboxUpdatingActions.js
  33. +8 −11 src/core/main-component/updating/setUpLightboxUpdater.js
  34. +8 −2 src/core/scrollbar/getScrollbarWidth.js
  35. +14 −10 src/core/scrollbar/setUpScrollbarRecompensor.js
  36. +0 −23 src/core/setUpCore.js
  37. +2 −4 src/core/sizes/SourceSizeAdjuster.js
  38. +1 −1 src/core/sizes/SourceSizeAdjusterIterator.js
  39. +1 −1 src/core/sizes/setUpGlobalResizingController.js
  40. +17 −2 src/core/slide-swiping/actions/move/SlideSwipingMoveActions.js
  41. +0 −9 src/core/slide-swiping/events/setUpSlideSwipingDown.js
  42. +11 −9 src/core/slide-swiping/events/setUpSlideSwipingMove.js
  43. +1 −1 src/core/slide-swiping/events/setUpSlideSwipingUp.js
  44. +38 −0 src/core/sources/creating/CreatingSourcesActions.js
  45. +58 −0 src/core/sources/creating/CreatingSourcesLocalStorageManager.js
  46. +1 −1 src/core/sources/creating/SourceComponentGetter.js
  47. +40 −0 src/core/sources/creating/createSources.js
  48. +0 −50 src/core/sources/creating/setUpSourcesFactory.js
  49. +7 −7 src/core/sources/{creating → types}/SourceTypeGetter.js
  50. 0 src/core/sources/{creating → types}/SourceTypeGetterHelpers.js
  51. +9 −0 src/core/styles/createAndAppendStyles.js
  52. +8 −0 src/core/styles/injectStylesIfNotInDom.js
  53. +5 −0 src/core/styles/styles-injection.js
  54. +1 −0 src/core/styles/styles.js
  55. +0 −6 src/helpers/dom/document/addOpenClassToDocumentElement.js
  56. +0 −1 src/helpers/dom/document/documentElementClassList.js
  57. +3 −0 src/helpers/dom/document/getDocumentElementClassList.js
  58. +1 −1 src/scss/components/nav/ToolbarButtons.scss
  59. +8 −6 src/scss/components/slide-buttons/SlideButtons.scss
  60. +10 −27 tests/components/FsLightbox.test.jsx
  61. +1 −1 tests/components/FsLightboxEvents.test.jsx
  62. +3 −14 tests/components/__snapshots__/FsLightbox.test.jsx.snap
  63. +2 −2 tests/components/slide-buttons/__snapshots__/SlideButtonLeft.test.jsx.snap
  64. +2 −2 tests/components/slide-buttons/__snapshots__/SlideButtonRight.test.jsx.snap
  65. +5 −5 tests/components/sources/SourceHoldersWrapper.test.jsx
  66. +18 −0 tests/core/animations/getAnimationDebounce.test.js
  67. +13 −5 tests/core/main-component/closing/LightboxClosingActions.test.js
  68. +4 −4 tests/core/main-component/closing/setUpLightboxCloser.test.js
  69. +35 −0 tests/core/main-component/initializing/initializeLightbox.test.js
  70. +0 −42 tests/core/main-component/initializing/setUpLightboxInitializer.test.js
  71. +69 −0 tests/core/main-component/mounting/runLightboxMountedActions.test.js
  72. +1 −1 tests/core/main-component/opening/setUpLightboxOpener.test.js
  73. +20 −14 tests/core/main-component/opening/setUpLightboxOpeningActions.test.js
  74. +19 −18 tests/core/main-component/updating/setUpLightboxUpdater.test.js
  75. +2 −2 tests/core/scrollbar/getInnerElementOfWidthGetter.test.js
  76. +2 −2 tests/core/scrollbar/getOuterElementOfWidthGetter.test.js
  77. +32 −12 tests/core/scrollbar/getScrollbarWidth.test.js
  78. +33 −12 tests/core/scrollbar/setUpScrollbarRecompensor.test.js
  79. +33 −40 tests/core/setUpCore.test.js
  80. +17 −16 tests/core/sizes/SourceSizeAdjusterIterator.test.js
  81. +74 −9 tests/core/slide-swiping/actions/move/SlideSwipingMoveActions.test.js
  82. +0 −29 tests/core/slide-swiping/events/setUpSlideSwipingDown.test.js
  83. +41 −16 tests/core/slide-swiping/events/setUpSlideSwipingMove.test.js
  84. +9 −9 tests/core/slide-swiping/events/setUpSlideSwipingUp.test.js
  85. +93 −0 tests/core/sources/creating/CreatingSourcesActions.test.js
  86. +159 −0 tests/core/sources/creating/CreatingSourcesLocalStorageManager.test.js
  87. +235 −0 tests/core/sources/creating/createSources.test.js
  88. +0 −215 tests/core/sources/creating/setUpSourcesFactory.test.js
  89. +1 −1 tests/core/sources/{creating → types}/SourceTypeGetter.test.js
  90. +1 −1 tests/core/sources/{creating → types}/SourceTypeGetterHelpers.test.js
  91. +1 −2 tests/core/stage/setUpStage.test.js
  92. +19 −0 tests/core/styles/createAndAppendStyles.test.js
  93. +31 −0 tests/core/styles/injectStylesIfNotInDom.test.js
  94. +11 −0 tests/core/styles/styles-injection.test.js
  95. +12 −0 tests/core/styles/styles-injection/styles-injection-document-defined.test.js
  96. +12 −0 tests/core/styles/styles-injection/styles-injection-document-undefined.test.js
  97. +0 −12 tests/helpers/dom/document/addOpenClassToDocumentElement.test.js
  98. +0 −5 tests/helpers/dom/document/documentElementClassList.test.js
  99. +12 −0 tests/helpers/dom/document/getDocumentElementClassList.test.js
  100. +18 −16 webpack-prod.config.js
  101. +2 −2 webpack.config.js
@@ -1,3 +1,6 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
@@ -1,5 +1,4 @@
# React Fullscreen Lightbox Basic
## Version - 1.0.0
## Description

Fullscreen Lightbox is plugin for displaying images and videos in clean overlaying box.
@@ -7,23 +7,34 @@ class DemoComponent extends Component {
constructor(props) {
super(props);
this.state = {
toggler: false,
toggler: true,
toggler2: false,
updated: true
};
this.toggleLightbox = this.toggleLightbox.bind(this);
this.toggleLightboxSecond = this.toggleLightboxSecond.bind(this);
}

toggleLightbox() {
this.setState({
toggler: !this.state.toggler
});
}
toggleLightboxSecond() {
this.setState({
toggler2: !this.state.toggler2
});
}

render() {
return (
<>
<button onClick={ this.toggleLightbox }>
Toggle Lightbox
</button>
<button onClick={ this.toggleLightboxSecond }>
Toggle Lightbox
</button>
<div className="images">
<img className="image" src="../demo/images/1.jpeg" alt=""/>
<img className="image" src="../demo/images/2.jpg" alt=""/>
@@ -32,30 +43,28 @@ class DemoComponent extends Component {
<FsLightbox
toggler={ this.state.toggler }
urls={ [
'../demo/images/5.jpg',
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
// "invalid",
TEST_YOUTUBE_URL,
// testVideoURL,
"https://images.pexels.com/photos/2118563/pexels-photo-2118563.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"../demo/images/2.jpg",
"../demo/images/3.jpeg",
// "../demo/images/4.jpeg",
// "../demo/images/5.jpg",
// "../demo/images/6.jpg",
// "../demo/images/7.jpg",
// "../demo/images/6.jpg"
"file:///",
"../demo/images/3.jpeg"
] }
videosPosters={ [
// "../demo/images/1.jpeg"
] }
disableLocalStorage={ false }
// onClose={ () => console.log('onClose') }
// onInit={ () => console.log('onInit') }
// onOpen={ () => console.log('onOpen') }
// onShow={ () => console.log('onShow') }
/>
<FsLightbox toggler={ this.state.toggler2 } urls={ ["../demo/images/5.jpg"] }/>
</>
);
}
}
export default DemoComponent;
export default DemoComponent;
@@ -1,5 +1,6 @@
import ReactDOM from "react-dom";
import ReactDOMServer from 'react-dom/server';
import React from 'react';
import DemoComponent from "./DemoComponent.jsx";

ReactDOM.render(<DemoComponent/>, document.getElementById('app'));
ReactDOM.render(<DemoComponent/>, document.getElementById('app'));
@@ -4,8 +4,11 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Fullscreen Lightbox Basic</title>
<style>
</style>
</head>
<body>
<div id=app></div>
</body>
</html>
</html>

Large diffs are not rendered by default.

Some generated files are not rendered by default. Learn more.

@@ -1,6 +1,6 @@
{
"name": "fslightbox-react",
"version": "1.0.0",
"version": "1.1.0",
"description": "React version of Fullscreen Lightbox.",
"main": "index.js",
"scripts": {
@@ -60,16 +60,13 @@
"enzyme-to-json": "^3.3.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"isomorphic-fetch": "^2.2.1",
"jest": "^24.7.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"prop-types": "^15.6.2",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.2",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
@@ -1,18 +1,18 @@
import "./core/styles/styles-injection";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import "./scss/FsLightbox.scss";
import Nav from "./components/nav/Nav.jsx";
import SlideButtonLeft from "./components/slide-buttons/SlideButtonLeft.jsx";
import SlideButtonRight from "./components/slide-buttons/SlideButtonRight.jsx";
import SourcesHoldersWrapper from "./components/sources/SourcesHoldersWrapper.jsx";
import SourceHoldersWrapper from "./components/sources/SourceHoldersWrapper.jsx";
import { createRefsArrayForGivenNumber } from "./helpers/arrays/createRefsArrayForGivenNumber";
import { setUpCore } from "./core/setUpCore";
import DownEventDetector from "./components/slide-swiping/DownEventDetector.jsx";
import SwipingInvisibleHover from "./components/slide-swiping/SwipingInvisibleHover.jsx";
import { getScrollbarWidth } from "./core/scrollbar/getScrollbarWidth";
import { runLightboxUnmountActions } from "./core/main-component/unmounting/runLightboxUnmountActions";
import { Injector } from "./injection/Injector";
import { EventsDispatcher } from "./core/main-component/EventsDispatcher";
import { runLightboxMountedActions } from "./core/main-component/mounting/runLightboxMountedActions";

class FsLightbox extends Component {
constructor(props) {
@@ -35,7 +35,7 @@ class FsLightbox extends Component {
totalSlides: this.props.urls.length,
slideOnLightboxOpen: (this.props.slide) ? this.props.slide : 1,
isInitialized: false,
scrollbarWidth: getScrollbarWidth(),
scrollbarWidth: 0,
isSwipingSlides: false,
};
}
@@ -70,10 +70,11 @@ class FsLightbox extends Component {
}

setUpGetters() {
this.getProps = () => this.props;
this.getState = () => this.state;
this.getters = {
getIsOpen: () => this.state.isOpen,
props: {
getToggler: () => this.props.toggler,
getSlide: () => this.props.slide
},
};
@@ -91,7 +92,7 @@ class FsLightbox extends Component {
sourcesHoldersWrapper: React.createRef(),
sources: createRefsArrayForGivenNumber(this.data.totalSlides),
sourceHolders: createRefsArrayForGivenNumber(this.data.totalSlides),
sourcesComponents: [],
sourcesComponents: {},
};
}

@@ -127,7 +128,6 @@ class FsLightbox extends Component {
globalResizingController: {},
keyboardController: {},
lightboxCloser: {},
lightboxInitializer: {},
lightboxOpener: {},
lightboxOpeningActions: {},
lightboxUpdater: {},
@@ -141,7 +141,6 @@ class FsLightbox extends Component {
sourceAnimator: {},
sourceController: {},
sourceHoldersTransformer: {},
sourcesFactory: {},
stage: {}
};
setUpCore(this);
@@ -152,9 +151,7 @@ class FsLightbox extends Component {
}

componentDidMount() {
if (this.state.isOpen) {
this.core.lightboxOpeningActions.runActions(this);
}
runLightboxMountedActions(this);
}

componentWillUnmount() {
@@ -176,7 +173,7 @@ class FsLightbox extends Component {
<SlideButtonRight fsLightbox={ this }/>
</> : null
}
<SourcesHoldersWrapper fsLightbox={ this }/>
<SourceHoldersWrapper fsLightbox={ this }/>
</div>
);
}
@@ -190,8 +187,9 @@ FsLightbox.propTypes = {
onClose: PropTypes.func,
onInit: PropTypes.func,
onShow: PropTypes.func,
disableLocalStorage: PropTypes.bool,
videosPosters: PropTypes.array,
slideDistance: PropTypes.number,
};
export default FsLightbox;
export default FsLightbox;
@@ -3,16 +3,15 @@ import PropTypes from "prop-types";
import FullscreenButton from "./toolbar-buttons/FullscreenButton.jsx";
import CloseButton from "./toolbar-buttons/CloseButton.jsx";

const Toolbar = ({ fsLightbox }) =>
(
<div className="fslightbox-toolbar">
<FullscreenButton fsLightbox={ fsLightbox }/>
<CloseButton fsLightbox={ fsLightbox }/>
</div>
);
const Toolbar = ({ fsLightbox }) => (
<div className="fslightbox-toolbar">
<FullscreenButton fsLightbox={ fsLightbox }/>
<CloseButton fsLightbox={ fsLightbox }/>
</div>
);

Toolbar.propTypes = {
fsLightbox: PropTypes.object.isRequired,
};

export default Toolbar;
export default Toolbar;
@@ -2,20 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types';
import ToolbarButton from "../ToolbarButton.jsx";

const CloseButton = ({ fsLightbox: { core: { lightboxCloser: { closeLightbox } } } }) => {
return (
<ToolbarButton
onClick={ closeLightbox }
viewBox="0 0 24 24"
size="20px"
d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"
title="Close"
/>
);
};
const CloseButton = ({ fsLightbox: { core: { lightboxCloser: { closeLightbox } } } }) => (
<ToolbarButton
onClick={ closeLightbox }
viewBox="0 0 24 24"
size="20px"
d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"
title="Close"
/>
);

CloseButton.propTypes = {
fsLightbox: PropTypes.object.isRequired
};

export default CloseButton;
export default CloseButton;

0 comments on commit c37bd55

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