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} /> } + +
-
-
- - - { 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 (
@@ -60,15 +71,18 @@ export default class PermalinkButton extends React.Component {
this.popover = ref} - className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}> + className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}> this.permalinkInput = input} - value={`${this.props.articleURL}#${this.props.commentId}`} - onChange={() => {}} /> -