From fedca113d2d218c6a2bcba7bdfdd66f78ce268ec Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Jun 2017 11:50:51 -0300
Subject: [PATCH] Adding plugin

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../src/components/Comment.js                 | 10 ++-
 .../coral-plugin-permalink/client/.babelrc    | 14 ++++
 .../client/.eslintrc.json                     | 23 ++++++
 .../client/components}/PermalinkButton.js     | 72 +++++++++++--------
 .../client/components}/styles.css             |  2 +-
 .../coral-plugin-permalink/client/index.js    |  7 ++
 plugins/coral-plugin-permalink/index.js       |  1 +
 plugins/coral-plugin-permalink/package.json   | 11 +++
 10 files changed, 106 insertions(+), 36 deletions(-)
 create mode 100644 plugins/coral-plugin-permalink/client/.babelrc
 create mode 100644 plugins/coral-plugin-permalink/client/.eslintrc.json
 rename {client/coral-plugin-permalinks => plugins/coral-plugin-permalink/client/components}/PermalinkButton.js (53%)
 rename {client/coral-plugin-permalinks => plugins/coral-plugin-permalink/client/components}/styles.css (95%)
 create mode 100644 plugins/coral-plugin-permalink/client/index.js
 create mode 100644 plugins/coral-plugin-permalink/index.js
 create mode 100644 plugins/coral-plugin-permalink/package.json

diff --git a/.eslintignore b/.eslintignore
index 8a8c3a213..48c4f4844 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,4 +12,5 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
+!plugins/coral-plugin-permalink
 node_modules
diff --git a/.gitignore b/.gitignore
index b3e0eaa73..0709912e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,5 +25,6 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
+!plugins/coral-plugin-permalink
 
 **/node_modules/*
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 754f44558..4fa7d234b 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
 
-import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
 import PubDate from 'coral-plugin-pubdate/PubDate';
@@ -509,19 +508,18 @@ export default class Comment extends React.Component {
                   currentUserId={currentUser && currentUser.id}
                 />
               </ActionButton>}
+          </div>
+          <div className="commentActionsRight comment__action-container">
             <Slot
               fill="commentActions"
+              wrapperComponent={ActionButton}
               data={this.props.data}
               root={this.props.root}
+              asset={asset}
               comment={comment}
               commentId={comment.id}
               inline
             />
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <ActionButton>
-              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-            </ActionButton>
             <ActionButton>
               <FlagComment
                 flaggedByCurrentUser={!!myFlag}
diff --git a/plugins/coral-plugin-permalink/client/.babelrc b/plugins/coral-plugin-permalink/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/coral-plugin-permalink/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-permalink/client/.eslintrc.json b/plugins/coral-plugin-permalink/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/coral-plugin-permalink/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/plugins/coral-plugin-permalink/client/components/PermalinkButton.js
similarity index 53%
rename from client/coral-plugin-permalinks/PermalinkButton.js
rename to plugins/coral-plugin-permalink/client/components/PermalinkButton.js
index 3d6df996f..41c0cae6d 100644
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ b/plugins/coral-plugin-permalink/client/components/PermalinkButton.js
@@ -1,53 +1,64 @@
-import React, {PropTypes} from 'react';
-const name = 'coral-plugin-permalinks';
+import React from 'react';
 import {Button} from 'coral-ui';
 import styles from './styles.css';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-
 import t from 'coral-framework/services/i18n';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import cn from 'classnames';
+
+const name = 'coral-plugin-permalinks';
 
 export default class PermalinkButton extends React.Component {
-
-  static propTypes = {
-    articleURL: PropTypes.string.isRequired,
-    commentId: 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);
+
+    this.state = {
+      popoverOpen: false,
+      copySuccessful: null,
+      copyFailure: null
+    };
+
   }
 
-  toggle () {
-
-    // I wish I could position this with a stylesheet, but top-level comments with
-    // nested replies throws everything off, as well as very long comments
+  toggle = () => {
     this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
-    this.setState({popoverOpen: !this.state.popoverOpen});
+
+    this.setState({
+      popoverOpen: !this.state.popoverOpen
+    });
   }
 
   handleClickOutside = () => {
-    this.setState({popoverOpen: false});
+    this.setState({
+      popoverOpen: false
+    });
   }
 
-  copyPermalink () {
+  copyPermalink = () => {
     this.permalinkInput.select();
     try {
       document.execCommand('copy');
-      this.setState({copySuccessful: true, copyFailure: null});
+      this.setState({
+        copySuccessful: true,
+        copyFailure: null
+      });
     } catch (err) {
-      this.setState({copyFailure: true, copySuccessful: null});
+      this.setState({
+        copyFailure: true,
+        copySuccessful: null
+      });
     }
 
     setTimeout(() => {
-      this.setState({copyFailure: null, copySuccessful: null});
+      this.setState({
+        copyFailure: null,
+        copySuccessful: null
+      });
     }, 3000);
   }
 
   render () {
-    const {copySuccessful, copyFailure} = this.state;
+    const {copySuccessful, copyFailure, popoverOpen} = this.state;
+    const {asset} = this.props;
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className={`${name}-container`}>
@@ -60,15 +71,18 @@ export default class PermalinkButton extends React.Component {
           </button>
           <div
             ref={(ref) => this.popover = ref}
-            className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+            className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}>
             <input
               className={`${name}-copy-field`}
               type='text'
               ref={(input) => this.permalinkInput = input}
-              value={`${this.props.articleURL}#${this.props.commentId}`}
-              onChange={() => {}} />
-            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-                    onClick={this.copyPermalink} >
+              value={`${asset.url}#${this.props.commentId}`}
+            />
+
+            <Button
+              onClick={this.copyPermalink}
+              className={cn([`${name}-copy-button`, {[style.success]:copySuccessful, [styles.failure]: copyFailure}])}
+            >
               {!copyFailure && !copySuccessful && 'Copy'}
               {copySuccessful && 'Copied'}
               {copyFailure && 'Not supported'}
diff --git a/client/coral-plugin-permalinks/styles.css b/plugins/coral-plugin-permalink/client/components/styles.css
similarity index 95%
rename from client/coral-plugin-permalinks/styles.css
rename to plugins/coral-plugin-permalink/client/components/styles.css
index a4671c685..ba263fe0c 100644
--- a/client/coral-plugin-permalinks/styles.css
+++ b/plugins/coral-plugin-permalink/client/components/styles.css
@@ -2,10 +2,10 @@
   border-radius: 3px;
   padding: 15px 10px;
   box-sizing: border-box;
-  /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
   border: solid 1px rgba(153, 153, 153, 0.33);
   left: 0;
   width: 100%;
+  z-index: 10;
 
   &::before {
     content: '';
diff --git a/plugins/coral-plugin-permalink/client/index.js b/plugins/coral-plugin-permalink/client/index.js
new file mode 100644
index 000000000..d413da870
--- /dev/null
+++ b/plugins/coral-plugin-permalink/client/index.js
@@ -0,0 +1,7 @@
+import PermalinkButton from './components/PermalinkButton';
+
+export default {
+  slots: {
+    commentActions: [PermalinkButton]
+  }
+};
diff --git a/plugins/coral-plugin-permalink/index.js b/plugins/coral-plugin-permalink/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/coral-plugin-permalink/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/coral-plugin-permalink/package.json b/plugins/coral-plugin-permalink/package.json
new file mode 100644
index 000000000..0d1f1e6ba
--- /dev/null
+++ b/plugins/coral-plugin-permalink/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "coral-plugin-permalink",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}