Gallery and other stuff

2017-04-02 03:31:39 +02:00
parent d6c2e857d0
commit e02cce155b
10 changed files with 4611 additions and 815 deletions
--- a/web/components/Gallery.js
+++ b/web/components/Gallery.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default class Gallery extends React.Component {
+  onPrevClick (e) {
+    this.props.dispatch({type: 'PREV_IMAGE'});
+  }
+
+  onNextClick (e) {
+    this.props.dispatch({type: 'NEXT_IMAGE'});
+  }
+
+  onImageDotClick (index, e) {
+    this.props.dispatch({type: 'VIEW_IMAGE', action: {index}})
+  }
+
+  render() {
+    const {images, imageIndex} = this.props;
+    if (!images || images.length === 0) {
+      return null;
+    }
+
+    const showPrev = imageIndex > 0;
+    const showNext = imageIndex < images.length - 1;
+
+    return (
+      <div className="ld-image-container">
+        <img src={images[imageIndex]}></img>
+        {showPrev ?
+          <div
+            className='prev-button'
+            onClick={this.onPrevClick.bind(this)}>
+            <div>
+              <svg fill="white" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
+                <path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"></path>
+              </svg>
+            </div>
+
+
+          </div>
+          : null}
+          {showNext ?
+            <div
+              className='next-button'
+              onClick={this.onNextClick.bind(this)}>
+              <div>
+                <svg fill="white" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
+                  <path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"></path>
+                </svg>
+              </div>
+              </div>
+            : null}
+            <div className="image-dots">
+              {images.map((img, index) => {
+                let cls = 'image-dot'
+                if (index === imageIndex) {
+                  cls += ' selected'
+                }
+
+                return <div onClick={this.onImageDotClick.bind(this, index)} className={cls}></div>
+              })}
+            </div>
+      </div>)
+  }
+}