From e2735759a6f38607ae249d45bf43f13a9db72df9 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 11 Nov 2016 11:27:39 -0700 Subject: [PATCH 1/3] 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 { + + ; }) 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 ( +
+ +
+ this.permalinkInput = input} + value={`${publisherUrl}${this.props.asset_id}#${this.props.comment_id}`} + onChange={() => {}} /> + + { + this.state.copySuccessful ?

copied to clipboard

: null + } + { + this.state.copyFailure + ?

copying to clipboard not supported in this browser. Use Cmd + C.

+ : null + } +
+
+ ); + } +} + +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", From 4b6bf58d43d9eea8148e0b96210e9134d1ee2614 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Fri, 11 Nov 2016 13:17:18 -0700 Subject: [PATCH 2/3] now with translations and page hostname --- client/coral-plugin-permalinks/PermalinkButton.js | 8 ++++++-- client/coral-plugin-permalinks/translations.js | 12 ++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 client/coral-plugin-permalinks/translations.js diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js index 85629452b..978a6dd03 100644 --- a/client/coral-plugin-permalinks/PermalinkButton.js +++ b/client/coral-plugin-permalinks/PermalinkButton.js @@ -1,7 +1,11 @@ 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 = { @@ -39,13 +43,13 @@ class PermalinkButton extends React.Component { } render () { - const publisherUrl = 'http://nytimes.com/'; + const publisherUrl = `${location.protocol}//${location.host}/`; return (
Date: Fri, 11 Nov 2016 13:25:46 -0700 Subject: [PATCH 3/3] rename translations file to json --- client/coral-plugin-permalinks/translations.js | 12 ------------ client/coral-plugin-permalinks/translations.json | 12 ++++++++++++ 2 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 client/coral-plugin-permalinks/translations.js create mode 100644 client/coral-plugin-permalinks/translations.json diff --git a/client/coral-plugin-permalinks/translations.js b/client/coral-plugin-permalinks/translations.js deleted file mode 100644 index 1ded7deee..000000000 --- a/client/coral-plugin-permalinks/translations.js +++ /dev/null @@ -1,12 +0,0 @@ -export default { - en: { - permalink: { - permalink: 'Permalink' - } - }, - es: { - permalink: { - permalink: 'Enlace permanente' - } - } -}; diff --git a/client/coral-plugin-permalinks/translations.json b/client/coral-plugin-permalinks/translations.json new file mode 100644 index 000000000..af5c19b0a --- /dev/null +++ b/client/coral-plugin-permalinks/translations.json @@ -0,0 +1,12 @@ +{ + "en": { + "permalink": { + "permalink": "Permalink" + } + }, + "es": { + "permalink": { + "permalink": "Enlace permanente" + } + } +}