Merge pull request #62 from coralproject/permalinks-v2

first pass at permalink box

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;
@@ -131,6 +132,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}
@@ -162,6 +166,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>;
                     })

client/coral-plugin-permalinks/PermalinkButton.js

@@ -0,0 +1,94 @@
+import React, {PropTypes} from 'react';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from './translations';
+import onClickOutside from 'react-onclickoutside';
+const name = 'coral-plugin-permalinks';
+
+const lang = new I18n(translations);
+
+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 = `${location.protocol}//${location.host}/`;
+
+    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>
+          {lang.t('permalink.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
+    };
+  }
+};

client/coral-plugin-permalinks/translations.json

@@ -0,0 +1,12 @@
+{
+  "en": {
+    "permalink": {
+      "permalink": "Permalink"
+    }
+  },
+  "es": {
+    "permalink": {
+      "permalink": "Enlace permanente"
+    }
+  }
+}

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",