59 |
60 | {enableDownload && (
61 |
62 |
81 | );
82 |
83 | export default Header;
84 |
--------------------------------------------------------------------------------
/src/Image.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | import { SpinnerIcon } from "./icons";
4 |
5 | export default class Image extends Component {
6 | state = {
7 | loading: true
8 | };
9 |
10 | handleOnLoad = () => {
11 | this.setState({ loading: false });
12 | };
13 |
14 | handleOnContextMenu = event => {
15 | !this.props.contextMenu && event.preventDefault();
16 | };
17 |
18 | render() {
19 | const { id, className, src, style, handleDoubleClick } = this.props;
20 |
21 | return (
22 |
23 | {this.state.loading && 
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/Lightbox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | import StyleInjector, { lightboxStyles } from "./styles";
4 |
5 | import Header from "./Header";
6 | import Image from "./Image";
7 |
8 | export default class Lightbox extends Component {
9 | state = {
10 | move: { x: 0, y: 0 },
11 | moveStart: undefined,
12 | zoomed: false,
13 | rotationDeg: 0
14 | };
15 |
16 | handleKeyDown = event => {
17 | // ESC or ENTER closes the modal
18 | if (event.keyCode === 27 || event.keyCode === 13) {
19 | this.props.onClose();
20 | }
21 | };
22 |
23 | componentDidMount() {
24 | document.addEventListener("keydown", this.handleKeyDown, false);
25 | }
26 |
27 | componentWillUnmount() {
28 | document.removeEventListener("keydown", this.handleKeyDown, false);
29 | }
30 |
31 | getCoordinatesIfOverImg = event => {
32 | const point = event.changedTouches ? event.changedTouches[0] : event;
33 |
34 | if (point.target.id !== "react-modal-image-img") {
35 | // the img was not a target of the coordinates
36 | return;
37 | }
38 |
39 | const dim = this.contentEl.getBoundingClientRect();
40 | const x = point.clientX - dim.left;
41 | const y = point.clientY - dim.top;
42 |
43 | return { x, y };
44 | };
45 |
46 | handleMouseDownOrTouchStart = event => {
47 | event.preventDefault();
48 |
49 | if (event.touches && event.touches.length > 1) {
50 | // more than one finger, ignored
51 | return;
52 | }
53 |
54 | const coords = this.getCoordinatesIfOverImg(event);
55 |
56 | if (!coords) {
57 | // click outside the img => close modal
58 | this.props.onClose();
59 | }
60 |
61 | if (!this.state.zoomed) {
62 | // do not allow drag'n'drop if zoom has not been applied
63 | return;
64 | }
65 |
66 | this.setState(prev => {
67 | return {
68 | moveStart: {
69 | x: coords.x - prev.move.x,
70 | y: coords.y - prev.move.y
71 | }
72 | };
73 | });
74 | };
75 |
76 | handleMouseMoveOrTouchMove = event => {
77 | event.preventDefault();
78 |
79 | if (!this.state.zoomed || !this.state.moveStart) {
80 | // do not allow drag'n'drop if zoom has not been applied
81 | // or if there has not been a click
82 | return;
83 | }
84 |
85 | if (event.touches && event.touches.length > 1) {
86 | // more than one finger, ignored
87 | return;
88 | }
89 |
90 | const coords = this.getCoordinatesIfOverImg(event);
91 |
92 | if (!coords) {
93 | return;
94 | }
95 |
96 | this.setState(prev => {
97 | return {
98 | move: {
99 | x: coords.x - prev.moveStart.x,
100 | y: coords.y - prev.moveStart.y
101 | }
102 | };
103 | });
104 | };
105 |
106 | handleMouseUpOrTouchEnd = event => {
107 | this.setState({
108 | moveStart: undefined
109 | });
110 | };
111 |
112 | toggleZoom = event => {
113 | event.preventDefault();
114 | this.setState(prev => ({
115 | zoomed: !prev.zoomed,
116 | // reset position if zoomed out
117 | move: prev.zoomed ? { x: 0, y: 0 } : prev.move
118 | }));
119 | };
120 |
121 | toggleRotate = event => {
122 | event.preventDefault();
123 |
124 | const { rotationDeg } = this.state;
125 |
126 | if (rotationDeg === 360) {
127 | this.setState({ rotationDeg: 90 });
128 | return;
129 | }
130 |
131 | this.setState(prevState => ({
132 | rotationDeg: (prevState.rotationDeg += 90)
133 | }));
134 | };
135 |
136 | render() {
137 | const {
138 | medium,
139 | large,
140 | alt,
141 | onClose,
142 | hideDownload,
143 | hideZoom,
144 | showRotate,
145 | imageBackgroundColor = "black"
146 | } = this.props;
147 | const { move, zoomed, rotationDeg } = this.state;
148 |
149 | return (
150 |
151 |
217 | );
218 | }
219 | }
220 |
--------------------------------------------------------------------------------
/src/icons.js:
--------------------------------------------------------------------------------
1 | /*
2 | Icons from https://material.io/icons/
3 | */
4 |
5 | import React from "react";
6 |
7 | export const ZoomInIcon = () => (
8 |
18 | );
19 |
20 | export const ZoomOutIcon = () => (
21 |
31 | );
32 |
33 | export const DownloadIcon = () => (
34 |
44 | );
45 |
46 | export const CloseIcon = () => (
47 |
57 | );
58 |
59 | export const SpinnerIcon = () => (
60 |
70 | );
71 |
72 | export const RotateIcon = () => (
73 |
84 | )
85 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | import Lightbox from "./Lightbox";
4 |
5 | export { default as Lightbox } from "./Lightbox";
6 |
7 | export default class extends Component {
8 | state = { modalOpen: false };
9 |
10 | toggleModal = () => {
11 | this.setState(prev => ({
12 | modalOpen: !prev.modalOpen
13 | }));
14 | };
15 |
16 | render() {
17 | const {
18 | className,
19 | small,
20 | smallSrcSet,
21 | medium,
22 | large,
23 | alt,
24 | hideDownload,
25 | hideZoom,
26 | showRotate,
27 | imageBackgroundColor
28 | } = this.props;
29 | const { modalOpen } = this.state;
30 |
31 | return (
32 |
157 |
216 | {
166 | this.contentEl = el;
167 | }}
168 | >
169 | {zoomed && (
170 |
203 |
204 |
33 | 
45 | {modalOpen && (
46 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/styles.js:
--------------------------------------------------------------------------------
1 | import { Component } from "react";
2 |
3 | function appendStyle(id, css) {
4 | if (!document.head.querySelector("#" + id)) {
5 | const node = document.createElement("style");
6 | node.textContent = css;
7 | node.type = "text/css";
8 | node.id = id;
9 |
10 | document.head.appendChild(node);
11 | }
12 | }
13 |
14 | export default class StyleInjector extends Component {
15 | componentDidMount() {
16 | appendStyle(this.props.name, this.props.css);
17 | }
18 |
19 | componentWillUnmount() {
20 | const node = document.getElementById(this.props.name);
21 | node.parentNode.removeChild(node);
22 | }
23 |
24 | render() {
25 | return null;
26 | }
27 | }
28 |
29 | export const lightboxStyles = ({ imageBackgroundColor }) => `
30 | body {
31 | overflow: hidden;
32 | }
33 |
34 | .__react_modal_image__modal_container {
35 | position: fixed;
36 | z-index: 5000;
37 | left: 0;
38 | top: 0;
39 | width: 100%;
40 | height: 100%;
41 | background-color: rgba(0, 0, 0, 0.8);
42 | touch-action: none;
43 | overflow: hidden;
44 | }
45 |
46 | .__react_modal_image__modal_content {
47 | position: relative;
48 | height: 100%;
49 | width: 100%;
50 | }
51 |
52 | .__react_modal_image__modal_content img,
53 | .__react_modal_image__modal_content svg {
54 | position: absolute;
55 | top: 50%;
56 | left: 50%;
57 | transform: translate3d(-50%, -50%, 0);
58 | -webkit-transform: translate3d(-50%, -50%, 0);
59 | -ms-transform: translate3d(-50%, -50%, 0);
60 | overflow: hidden;
61 | }
62 |
63 | .__react_modal_image__medium_img {
64 | max-width: 98%;
65 | max-height: 98%;
66 | background-color: ${imageBackgroundColor};
67 | }
68 |
69 | .__react_modal_image__large_img {
70 | cursor: move;
71 | background-color: ${imageBackgroundColor}
72 | }
73 |
74 | .__react_modal_image__icon_menu a {
75 | display: inline-block;
76 | font-size: 40px;
77 | cursor: pointer;
78 | line-height: 40px;
79 | box-sizing: border-box;
80 | border: none;
81 | padding: 0px 5px 0px 5px;
82 | margin-left: 10px;
83 | color: white;
84 | background-color: rgba(0, 0, 0, 0);
85 | }
86 |
87 | .__react_modal_image__icon_menu {
88 | display: inline-block;
89 | float: right;
90 | }
91 |
92 | .__react_modal_image__caption {
93 | display: inline-block;
94 | color: white;
95 | font-size: 120%;
96 | padding: 10px;
97 | margin: 0;
98 | }
99 |
100 | .__react_modal_image__header {
101 | position: absolute;
102 | top: 0;
103 | width: 100%;
104 | background-color: rgba(0, 0, 0, 0.7);
105 | overflow: hidden;
106 | }
107 | `;
108 |
--------------------------------------------------------------------------------