diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/chart/countriesByYear.chart.js | 2 | ||||
| -rw-r--r-- | client/index.js | 9 | ||||
| -rw-r--r-- | client/modalImage/index.js | 7 | ||||
| -rw-r--r-- | client/modalImage/modal.css | 69 | ||||
| -rw-r--r-- | client/modalImage/modalImage.container.js | 85 |
5 files changed, 171 insertions, 1 deletions
diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index 78ab4434..df7a4530 100644 --- a/client/chart/countriesByYear.chart.js +++ b/client/chart/countriesByYear.chart.js @@ -160,7 +160,7 @@ class CountriesByYearChart extends Component { } }} /> - <div className='caption'>{paper.name}{' dataset citations by country per year'}</div> + <div className='caption'>{paper.name}{' dataset citations per country per year. We verified ' + citations.length + ' papers that used the dataset.'}</div> </div> ) } diff --git a/client/index.js b/client/index.js index c09aece7..10ed8563 100644 --- a/client/index.js +++ b/client/index.js @@ -8,6 +8,7 @@ import { toArray } from './util' import Applet from './applet' import { store } from './store' import appendMap from './map' +import { ModalImage } from './modalImage' function appendReactApplet(el, payload) { ReactDOM.render( @@ -19,6 +20,13 @@ function appendReactApplet(el, payload) { ) } +function appendModalImage() { + const el = document.createElement('div') + document.body.appendChild(el) + ReactDOM.render(<ModalImage />, el) + console.log(el) +} + function fetchDataset(payload) { if (payload.command === 'face_analysis') return new Promise(resolve => resolve()) if (payload.dataset === 'info') return new Promise(resolve => resolve()) @@ -143,6 +151,7 @@ function main() { }) runApplets() buildWaypoints() + appendModalImage() } main() diff --git a/client/modalImage/index.js b/client/modalImage/index.js new file mode 100644 index 00000000..ebb3bb72 --- /dev/null +++ b/client/modalImage/index.js @@ -0,0 +1,7 @@ +import ModalImage from './modalImage.container.js' + +import './modal.css' + +export { + ModalImage +}
\ No newline at end of file diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css new file mode 100644 index 00000000..d9180125 --- /dev/null +++ b/client/modalImage/modal.css @@ -0,0 +1,69 @@ +.modal { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.8); + color: white; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + pointer-events: none; + z-index: -9999999; + transition: opacity 0.2s cubic-bezier(0,0,1,1); +} +.modal.visible { + opacity: 1; + pointer-events: auto; + z-index: 999999999; +} +.modal .inner { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.modal img { + max-width: 80vw; + max-height: 80vh; +} +.modal .caption { + display: block; + text-align: center; +} +.modal .prev { + position: absolute; + top: 0; left: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .next { + position: absolute; + top: 0; right: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .close { + position: absolute; + top: 0; right: 0; + width: 10vw; height: 10vw; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +}
\ No newline at end of file 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 ( + <div className={visible ? 'modal visible' : 'modal'}> + <div className='inner'> + <div className='centered'> + <img src={img.src} /> + {caption && <div class='caption'>{caption}</div>} + </div> + </div> + <div onClick={() => this.prev()}className='prev'>{'<'}</div> + <div onClick={() => this.next()} className='next'>{'>'}</div> + <div onClick={() => this.close()} className='close'>{'x'}</div> + </div> + ) + } +} +export default ModalImage |