5 files changed, 135 insertions, 0 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9770e5cdc..2ea3cdfdb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -11,6 +11,7 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
 import { FieldView } from "../views/nodes/FieldView";
 import { HtmlField } from "../../fields/HtmlField";
 import { WebView } from "../views/nodes/WebView";
+import { PresentationView } from "../views/PresentationView";
 
 export interface DocumentOptions {
     x?: number;
@@ -190,4 +191,13 @@ export namespace Documents {
     export function DockDocument(config: string, options: DocumentOptions, id?: string) {
         return CollectionDocument(config, CollectionViewType.Docking, options, id)
     }
+
+    /*
+    export function PresentationDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+        let doc = GetCollectionPrototype().MakeDelegate(id);
+        setupOptions(doc, options);
+        doc.SetData(KeyStore.Data, documents, ListField);
+        doc.SetNumber(KeyStore.ViewType, CollectionViewType);
+        return doc;
+    }*/
 }
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 7ef4b6132..2c84a5901 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -17,6 +17,7 @@ import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { UndoManager } from '../util/UndoManager';
 import { setupDrag } from '../util/DragManager';
+import { PresentationView } from './PresentationView';
 
 
 configure({
@@ -108,6 +109,7 @@ Documents.initProtos(() => {
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
                 <ContextMenu />
+                <PresentationView Document={} />
                 <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
                     <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
                 <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
new file mode 100644
index 000000000..d9d9715fc
--- /dev/null
+++ b/src/client/views/PresentationView.tsx
@@ -0,0 +1,120 @@
+import { observer } from "mobx-react";
+import { Document } from "../../fields/Document";
+import { KeyStore } from "../../fields/KeyStore";
+import { ListField } from "../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../fields/TextField";
+import { observable, action } from "mobx";
+import { Field } from "../../fields/Field";
+import { Documents } from '../documents/Documents';
+
+export interface PresViewProps {
+    Document: Document;
+}
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class PresentationViewItem extends React.Component<PresViewProps> {
+
+
+    /**
+     * Renders a single child document. It will just append a list element.
+     * @param document The document to render.
+     */
+    renderChild(document: Document) {
+        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={document.Id}></div>;
+        }
+        // finally, if it's a normal document, then render it as such.
+        else {
+            return <li key={document.Id}>{title.Data}</li>;
+        }
+    }
+
+    render() {
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        if (children && children !== "<Waiting>") {
+            return (<div>
+                {children.Data.map(value => this.renderChild(value))}
+            </div>)
+        } else {
+            return <div></div>;
+        }
+    }
+}
+
+
+@observer
+export class PresentationView extends React.Component<PresViewProps>  {
+    public static Instance: PresentationView;
+
+    //observable means render is re-called every time variable is changed
+    @observable
+    collapsed: boolean = false;
+
+    /**
+     * Adds a document to the presentation view
+     **/
+    @action
+    public PinDoc(doc: Document) {
+        //add this new doc to props.Document
+        if (this.props.Document.Get(KeyStore.Data) instanceof Field) {
+            const value = this.props.Document.GetData(KeyStore.Data, ListField, new Array<Document>())
+            value.push(doc);
+        } else {
+            this.props.Document.SetData(KeyStore.Data, [doc], ListField);
+        }
+
+        //TODO: open presentation view if not already open
+        this.collapsed = false;
+    }
+
+    /**
+     * Removes a document from the presentation view
+     **/
+    @action
+    public RemoveDoc(doc: Document) {
+        const value = this.props.Document.GetData(KeyStore.Data, ListField, new Array<Document>())
+        let index = -1;
+        for (let i = 0; i < value.length; i++) {
+            if (value[i].Id == doc.Id) {
+                index = i;
+                break;
+            }
+        }
+        if (index !== -1) {
+            value.splice(index, 1)
+
+            //TODO: do i need below lines??
+            // SelectionManager.DeselectAll()
+            // ContextMenu.Instance.clearItems()
+            return true;
+        }
+        return false
+    }
+
+    render() {
+        let titleStr = "Title";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== "<Waiting>") {
+            titleStr = title.Data;
+        }
+        let width = this.collapsed ? 0 : 100;
+        return (
+            <div background-color="lightblue" max-width={width}>
+                <h3>{titleStr}</h3>
+                <ul className="no-indent">
+                    <PresentationViewItem
+                        Document={this.props.Document}
+                    />
+                </ul>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 55c804337..c0d6bd4f7 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -21,6 +21,7 @@ export interface TreeViewProps {
  */
 class TreeView extends React.Component<TreeViewProps> {
 
+    //observable means render is re-called every time variable is changed
     @observable
     collapsed: boolean = false;
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index feecde921..2158ff4f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -18,6 +18,7 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./DocumentView.scss";
 import React = require("react");
+import { PresentationView } from "../PresentationView";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
@@ -187,6 +188,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             e.stopPropagation();
         }
 
+        ContextMenu.Instance.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         SelectionManager.SelectDoc(this, e.ctrlKey);