From 5e1450ffb0c131e82da72e952605eda380221d21 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Jun 2017 15:46:53 -0300
Subject: [PATCH] Renaming to talk

---
 .eslintignore                                 |   2 +-
 .gitignore                                    |   2 +-
 plugins/talk-plugin-permalink/client/.babelrc |  14 +++
 .../client/.eslintrc.json                     |  23 ++++
 .../client/components/PermalinkButton.js      | 101 ++++++++++++++++++
 .../client/components/styles.css              |  66 ++++++++++++
 plugins/talk-plugin-permalink/client/index.js |   7 ++
 plugins/talk-plugin-permalink/index.js        |   1 +
 plugins/talk-plugin-permalink/package.json    |  11 ++
 9 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 plugins/talk-plugin-permalink/client/.babelrc
 create mode 100644 plugins/talk-plugin-permalink/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-permalink/client/components/PermalinkButton.js
 create mode 100644 plugins/talk-plugin-permalink/client/components/styles.css
 create mode 100644 plugins/talk-plugin-permalink/client/index.js
 create mode 100644 plugins/talk-plugin-permalink/index.js
 create mode 100644 plugins/talk-plugin-permalink/package.json

diff --git a/.eslintignore b/.eslintignore
index 48c4f4844..3a259c106 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,5 +12,5 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
-!plugins/coral-plugin-permalink
+!plugins/talk-plugin-permalink
 node_modules
diff --git a/.gitignore b/.gitignore
index 0709912e5..0be1266c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,6 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
-!plugins/coral-plugin-permalink
+!plugins/talk-plugin-permalink
 
 **/node_modules/*
diff --git a/plugins/talk-plugin-permalink/client/.babelrc b/plugins/talk-plugin-permalink/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/talk-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/talk-plugin-permalink/client/.eslintrc.json b/plugins/talk-plugin-permalink/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-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/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
new file mode 100644
index 000000000..b4dd190d8
--- /dev/null
+++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import styles from './styles.css';
+import t from 'coral-framework/services/i18n';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import cn from 'classnames';
+
+const name = 'talk-plugin-permalink';
+
+export default class PermalinkButton extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      popoverOpen: false,
+      copySuccessful: null,
+      copyFailure: null
+    };
+
+  }
+
+  toggle = () => {
+    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
+
+    this.setState({
+      popoverOpen: !this.state.popoverOpen
+    });
+  }
+
+  handleClickOutside = () => {
+    this.setState({
+      popoverOpen: false
+    });
+  }
+
+  copyPermalink = () => {
+    this.permalinkInput.select();
+    try {
+      document.execCommand('copy');
+      this.setState({
+        copySuccessful: true,
+        copyFailure: null
+      });
+    } catch (err) {
+      this.setState({
+        copyFailure: true,
+        copySuccessful: null
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({
+        copyFailure: null,
+        copySuccessful: null
+      });
+    }, 3000);
+  }
+
+  render () {
+    const {copySuccessful, copyFailure, popoverOpen} = this.state;
+    const {asset} = this.props;
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={`${name}-container`}>
+          <button
+            ref={(ref) => this.linkButton = ref}
+            onClick={this.toggle}
+            className={`${name}-button`}>
+            {t('permalink')}
+            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+          </button>
+          <div
+            ref={(ref) => this.popover = ref}
+            className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}>
+
+            <input
+              className={cn(styles.input, `${name}-copy-field`)}
+              type='text'
+              ref={(input) => this.permalinkInput = input}
+              value={`${asset.url}#${this.props.commentId}`}
+            />
+
+            <Button
+              onClick={this.copyPermalink}
+              className={cn([
+                styles.button,
+                `${name}-copy-button`, {
+                  [styles.success]:copySuccessful,
+                  [styles.failure]: copyFailure
+                }])}>
+              {!copyFailure && !copySuccessful && 'Copy'}
+              {copySuccessful && 'Copied'}
+              {copyFailure && 'Not supported'}
+            </Button>
+            
+          </div>
+        </div>
+      </ClickOutside>
+    );
+  }
+}
diff --git a/plugins/talk-plugin-permalink/client/components/styles.css b/plugins/talk-plugin-permalink/client/components/styles.css
new file mode 100644
index 000000000..df417dd23
--- /dev/null
+++ b/plugins/talk-plugin-permalink/client/components/styles.css
@@ -0,0 +1,66 @@
+.container {
+  border-radius: 3px;
+  padding: 15px 10px;
+  box-sizing: border-box;
+  border: solid 1px rgba(153, 153, 153, 0.33);
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+.container::before {
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 7em;
+  bottom: -20px;
+  z-index: 2;
+}
+
+.container::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: rgba(153, 153, 153, 0.33);
+  position: absolute;
+  right: 7em;
+  bottom: -21px;
+  z-index: 1;
+}
+
+.input {
+  display: inline-block;
+  width: calc(100% - 78px);
+  padding: 8px;
+  border-radius: 3px;
+  border: solid 1px #e0e0e0;
+  height: 32px;
+  box-sizing: border-box;
+  font-size: 1em;
+}
+
+.button {
+  display: inline-block;
+  float: right;
+  box-sizing: border-box;
+  margin: 0;
+  background-color: #e0e0e0;
+  font-size: 1em;
+  width: auto;
+  height: auto;
+  padding: 2px;
+  transition: background-color 0.4s ease;
+}
+
+.button:hover{
+  color: black;
+}
+
+.button.success {
+  background-color: #00897B;
+  color: white;
+}
+
+.button.failure {
+  background-color: #FF5252;
+  color: white;
+}
diff --git a/plugins/talk-plugin-permalink/client/index.js b/plugins/talk-plugin-permalink/client/index.js
new file mode 100644
index 000000000..d413da870
--- /dev/null
+++ b/plugins/talk-plugin-permalink/client/index.js
@@ -0,0 +1,7 @@
+import PermalinkButton from './components/PermalinkButton';
+
+export default {
+  slots: {
+    commentActions: [PermalinkButton]
+  }
+};
diff --git a/plugins/talk-plugin-permalink/index.js b/plugins/talk-plugin-permalink/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-permalink/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-permalink/package.json b/plugins/talk-plugin-permalink/package.json
new file mode 100644
index 000000000..0d1f1e6ba
--- /dev/null
+++ b/plugins/talk-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"
+}