From e2735759a6f38607ae249d45bf43f13a9db72df9 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 11 Nov 2016 11:27:39 -0700
Subject: [PATCH] first pass at permalink box

---
 .../coral-embed-stream/src/CommentStream.js   |  8 ++
 .../PermalinkButton.js                        | 90 +++++++++++++++++++
 package.json                                  |  1 +
 3 files changed, 99 insertions(+)
 create mode 100644 client/coral-plugin-permalinks/PermalinkButton.js

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 28b70841f..32db3b5d6 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -14,6 +14,7 @@ import AuthorName from '../../coral-plugin-author-name/AuthorName';
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
 import Pym from 'pym.js';
 import FlagButton from '../../coral-plugin-flags/FlagButton';
+import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 
 const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -130,6 +131,9 @@ class CommentStream extends Component {
                   <ReplyButton
                     updateItem={this.props.updateItem}
                     id={commentId}/>
+                  <PermalinkButton
+                    comment_id={commentId}
+                    asset_id={comment.asset_id}/>
                 </div>
                   <ReplyBox
                     addNotification={this.props.addNotification}
@@ -160,6 +164,10 @@ class CommentStream extends Component {
                           <ReplyButton
                             updateItem={this.props.updateItem}
                             parent_id={reply.parent_id}/>
+                          <PermalinkButton
+                            comment_id={reply.comment_id}
+                            asset_id={reply.comment_id}
+                            />
                         </div>
                       </div>;
                     })
diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
new file mode 100644
index 000000000..85629452b
--- /dev/null
+++ b/client/coral-plugin-permalinks/PermalinkButton.js
@@ -0,0 +1,90 @@
+import React, {PropTypes} from 'react';
+import onClickOutside from 'react-onclickoutside';
+const name = 'coral-plugin-permalinks';
+
+class PermalinkButton extends React.Component {
+
+  static propTypes = {
+    asset_id: PropTypes.string.isRequired,
+    comment_id: PropTypes.string.isRequired
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {popoverOpen: false, copySuccessful: null, copyFailure: null};
+    this.toggle = this.toggle.bind(this);
+    this.copyPermalink = this.copyPermalink.bind(this);
+  }
+
+  toggle () {
+    this.setState({popoverOpen: !this.state.popoverOpen});
+  }
+
+  handleClickOutside () {
+    this.setState({popoverOpen: false});
+  }
+
+  copyPermalink () {
+    this.permalinkInput.select();
+    try {
+      document.execCommand('copy');
+      this.setState({copySuccessful: true});
+    } catch (err) {
+      this.setState({copyFailure: true});
+    }
+
+    setTimeout(() => {
+      this.setState({copyFailure: null, copySuccessful: null});
+    }, 4500);
+  }
+
+  render () {
+    const publisherUrl = 'http://nytimes.com/';
+
+    return (
+      <div className={`${name}-container`} style={styles}>
+        <button onClick={this.toggle} className={`${name}-button`}>
+          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+          Permalink
+        </button>
+        <div
+          style={styles.popover(this.state.popoverOpen)}
+          className={`${name}-popover`}>
+          <input
+            type='text'
+            ref={input => this.permalinkInput = input}
+            value={`${publisherUrl}${this.props.asset_id}#${this.props.comment_id}`}
+            onChange={() => {}} />
+          <button className={`${name}-copy-button`} onClick={this.copyPermalink}>Copy</button>
+          {
+            this.state.copySuccessful ? <p>copied to clipboard</p> : null
+          }
+          {
+            this.state.copyFailure
+            ? <p>copying to clipboard not supported in this browser. Use Cmd + C.</p>
+            : null
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default onClickOutside(PermalinkButton);
+
+const styles = {
+  position: 'relative',
+
+  popover: active => {
+    return {
+      display: active ? 'block' : 'none',
+      backgroundColor: 'white',
+      border: '1px solid black',
+      minWidth: 400,
+      position: 'absolute',
+      top: 30,
+      right: 0,
+      padding: 5
+    };
+  }
+};
diff --git a/package.json b/package.json
index 207724d61..cbdaad174 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-mdl": "^1.7.2",
+    "react-onclickoutside": "^5.7.1",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
     "redux": "^3.6.0",