From f58d41731fc07d94d594d5582aef203564f990ec Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:35:50 +0200 Subject: modal image gallery --- client/modalImage/modalImage.container.js | 85 +++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 client/modalImage/modalImage.container.js (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js new file mode 100644 index 00000000..a637deb6 --- /dev/null +++ b/client/modalImage/modalImage.container.js @@ -0,0 +1,85 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { ReactTabulator } from 'react-tabulator' + +import { toArray, toTuples, domainFromUrl } from '../util' +import { Loader } from '../common' + +import csv from 'parse-csv' + +class ModalImage extends Component { + state = { + visible: true, + images: [], + index: 0, + } + + componentDidMount() { + const images = toArray(document.querySelectorAll('.image img')) + // console.log(images) + images.forEach((img, i) => { + img.addEventListener('click', () => this.loadImage(i)) + }) + this.setState({ images }) + document.body.addEventListener('keydown', e => { + if (document.activeElement && document.activeElement !== document.body) { + return null + } + // console.log(e.keyCode) + switch (e.keyCode) { + case 37: // left + this.prev() + break + case 39: // right + this.next() + break + default: + break + } + }) + } + + loadImage(index) { + this.setState({ visible: true, index }) + } + + prev() { + const { index, images } = this.state + this.setState({ index: (images.length + index - 1) % images.length }) + } + + next() { + const { index, images } = this.state + this.setState({ index: (index + 1) % images.length }) + } + + close() { + this.setState({ visible: false }) + } + + render() { + const { images, index, visible } = this.state + if (!images.length) return null + const img = images[index] + let caption = null + const sib = img.nextSibling + if (sib && sib.classList.contains('caption')) { + caption = sib.innerText + } + return ( +
+
+
+ + {caption &&
{caption}
} +
+
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'x'}
+
+ ) + } +} +export default ModalImage -- cgit v1.2.3-70-g09d2 From c6413f0ddba312ec7efbc41359f844eba55095ff Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:41:08 +0200 Subject: modal... --- client/modalImage/modal.css | 4 ++-- client/modalImage/modalImage.container.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index d9180125..fb3c7ab5 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -25,8 +25,8 @@ align-items: center; } .modal img { - max-width: 80vw; - max-height: 80vh; + max-width: 90vw; + max-height: 90vh; } .modal .caption { display: block; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index a637deb6..55904c40 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -10,7 +10,7 @@ import csv from 'parse-csv' class ModalImage extends Component { state = { - visible: true, + visible: false, images: [], index: 0, } @@ -26,8 +26,11 @@ class ModalImage extends Component { if (document.activeElement && document.activeElement !== document.body) { return null } - // console.log(e.keyCode) + console.log(e.keyCode) switch (e.keyCode) { + case 27: // esc + this.close() + break case 37: // left this.prev() break @@ -41,16 +44,21 @@ class ModalImage extends Component { } loadImage(index) { + const { index, images } = this.state + if (!images.length) return + if (index < 0 || index >= this.images.length) return this.setState({ visible: true, index }) } prev() { const { index, images } = this.state + if (!images.length) return this.setState({ index: (images.length + index - 1) % images.length }) } next() { const { index, images } = this.state + if (!images.length) return this.setState({ index: (index + 1) % images.length }) } -- cgit v1.2.3-70-g09d2 From c0f42b7ec12c1731accfef5835d2c4df6a304791 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:44:05 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 55904c40..20547de3 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -44,7 +44,7 @@ class ModalImage extends Component { } loadImage(index) { - const { index, images } = this.state + const { images } = this.state if (!images.length) return if (index < 0 || index >= this.images.length) return this.setState({ visible: true, index }) -- cgit v1.2.3-70-g09d2 From e52b66449c8b56abab70db03468f2f9ae7f24ec8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:34:00 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 20547de3..7ff03a3b 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -46,7 +46,7 @@ class ModalImage extends Component { loadImage(index) { const { images } = this.state if (!images.length) return - if (index < 0 || index >= this.images.length) return + if (index < 0 || index >= images.length) return this.setState({ visible: true, index }) } -- cgit v1.2.3-70-g09d2 From dffdbe1f0f1466229adb78ecd8b3bce3b2aa7445 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:46:04 +0200 Subject: modal hand --- client/modalImage/modal.css | 21 +++++++++++++++++++++ client/modalImage/modalImage.container.js | 6 +++--- 2 files changed, 24 insertions(+), 3 deletions(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index fb3c7ab5..9589b8f4 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -32,6 +32,27 @@ display: block; text-align: center; } +.modal .prev span, +.modal .next span, +.modal .close span { + background: #222; + border-radius: 50%; + width: 40px; + height: 40px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 1px 2px rgba(255,255,255,0.4); + transition: all 0.2s cubic-bezier(0,0,1,1); + user-select: none; +} +.desktop .modal .prev:hover span, +.desktop .modal .prev:hover span, +.desktop .modal .prev:hover span { + background: #000; + box-shadow: 0 1px 2px rgba(255,255,255,0.6); +} .modal .prev { position: absolute; top: 0; left: 0; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 7ff03a3b..5479ca5f 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -83,9 +83,9 @@ class ModalImage extends Component { {caption &&
{caption}
} -
this.prev()}className='prev'>{'<'}
-
this.next()} className='next'>{'>'}
-
this.close()} className='close'>{'x'}
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'×'}
) } -- cgit v1.2.3-70-g09d2