Adding plugin

.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

.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/*

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}

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"
+  ]
+}

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"] }]
+  }
+}

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'}

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: '';

plugins/coral-plugin-permalink/client/index.js

@@ -0,0 +1,7 @@
+import PermalinkButton from './components/PermalinkButton';
+
+export default {
+  slots: {
+    commentActions: [PermalinkButton]
+  }
+};

plugins/coral-plugin-permalink/index.js

@@ -0,0 +1 @@
+module.exports = {};

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"
+}