added lightbox for images

4 files changed, 98 insertions, 3 deletions

diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 73cf483ef..487490ea5 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -6,6 +6,7 @@ import { ListField } from "../fields/ListField";
 import { FieldTextBox } from "../views/nodes/FieldTextBox";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
+import { ImageBox } from "../views/nodes/ImageBox";
 
 interface DocumentOptions {
     x?: number;
@@ -110,9 +111,9 @@ export namespace Documents {
             imageProto.SetField(KeyStore.Y, new NumberField(0));
             imageProto.SetField(KeyStore.Width, new NumberField(300));
             imageProto.SetField(KeyStore.Height, new NumberField(300));
-            imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
+            imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
+            imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return imageProto;
     }
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 634cd78be..34a95747b 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { ContextMenu } from "../ContextMenu";
 import { FieldTextBox } from "../nodes/FieldTextBox";
+import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
 import { cpus } from "os";
@@ -82,7 +83,7 @@ class DocumentContents extends React.Component<DocumentViewProps> {
             }
         }
         return <JsxParser
-            components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+            components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
             bindings={bindings}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/views/nodes/ImageBox.scss b/src/views/nodes/ImageBox.scss
new file mode 100644
index 000000000..136fda1d0
--- /dev/null
+++ b/src/views/nodes/ImageBox.scss
@@ -0,0 +1,11 @@
+
+.imageBox-cont {
+    padding: 0vw;
+}
+
+.imageBox-button {
+    padding : 0vw;
+    border: none;
+    width : 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
new file mode 100644
index 000000000..5c0db6cab
--- /dev/null
+++ b/src/views/nodes/ImageBox.tsx
@@ -0,0 +1,82 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { schema } from "prosemirror-schema-basic";
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Document } from "../../fields/Document";
+import { Opt } from "../../fields/Field";
+import { Key, KeyStore } from "../../fields/Key";
+import { TextField } from "../../fields/TextField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { DocumentView, DocumentFieldViewProps } from "./DocumentView";
+import "./ImageBox.scss";
+import React = require("react")
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+
+interface ImageBoxState {
+    photoIndex: number,
+    isOpen: boolean,
+};
+
+export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxState> {
+
+    public static LayoutString() { return "<ImageBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _wasSelected: boolean = false;
+
+    constructor(props: DocumentFieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this.state = {
+            photoIndex: 0,
+            isOpen: false,
+        };
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        const { containingDocumentView } = this.props;
+        this._wasSelected = SelectionManager.IsSelected(containingDocumentView);
+        let me = this;
+        if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) {
+            e.stopPropagation();
+        }
+    }
+
+    render() {
+        const images = [this.props.doc.GetTextField(this.props.fieldKey, ""),];
+        var lightbox = () => {
+            const { photoIndex } = this.state;
+            if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) {
+                return (<Lightbox
+                    mainSrc={images[photoIndex]}
+                    nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}
+                    prevSrc={photoIndex - 1 > 0 ? images[(photoIndex + images.length - 1) % images.length] : undefined}
+                    onCloseRequest={() => this.setState({ isOpen: false })}
+                    onMovePrevRequest={() =>
+                        this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, })
+                    }
+                    onMoveNextRequest={() =>
+                        this.setState({ photoIndex: (photoIndex + 1) % images.length, })
+                    }
+                />)
+            }
+        }
+        return (
+            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+                <button className="imageBox-button" type="button" onClick={() => this.setState({ isOpen: this._wasSelected })}>
+                    <img src={images[0]} width="100%" alt="Image not found" />
+                </button>
+                {lightbox()}
+            </div>)
+    }
+}
\ No newline at end of file