diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js index 2f2e75275..29df3753c 100644 --- a/client/coral-admin/src/index.js +++ b/client/coral-admin/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import {render} from 'react-dom'; import {ApolloProvider} from 'react-apollo'; +import smoothscroll from 'smoothscroll-polyfill'; import {getClient} from './services/client'; import store from './services/store'; @@ -13,6 +14,7 @@ import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/he loadPluginsTranslations(); injectPluginsReducers(); +smoothscroll.polyfill(); render( diff --git a/package.json b/package.json index 9d48f39cd..2834a3e3a 100644 --- a/package.json +++ b/package.json @@ -118,6 +118,7 @@ "resolve": "^1.3.2", "semver": "^5.3.0", "simplemde": "^1.11.2", + "smoothscroll-polyfill": "^0.3.5", "snake-case": "^2.1.0", "subscriptions-transport-ws": "^0.7.2", "timekeeper": "^1.0.0", diff --git a/plugins/talk-plugin-permalink/client/components/CopyButton.js b/plugins/talk-plugin-permalink/client/components/CopyButton.js new file mode 100644 index 000000000..405468a6e --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/CopyButton.js @@ -0,0 +1,16 @@ +import React from 'react'; +import {t} from 'plugin-api/beta/client/services'; +import {withCopyToClipboard} from 'plugin-api/beta/client/hocs'; +import {Button} from 'plugin-api/beta/client/components/ui'; + +class ButtonCopyToClipboard extends React.Component { + render () { + return ( + + ); + } +} + +export default withCopyToClipboard(ButtonCopyToClipboard); diff --git a/plugins/talk-plugin-permalink/client/components/Permalink.js b/plugins/talk-plugin-permalink/client/components/Permalink.js new file mode 100644 index 000000000..68406472e --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/Permalink.js @@ -0,0 +1,107 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './styles.css'; +import {t} from 'plugin-api/beta/client/services'; +import {ClickOutside} from 'plugin-api/beta/client/components'; +import {Icon, Button} from 'plugin-api/beta/client/components/ui'; + +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 + }); + } + + this.timeout = window.setTimeout(() => { + this.setState({ + copyFailure: null, + copySuccessful: null + }); + }, 3000); + } + + componentWillUnmount() { + window.clearTimeout(this.timeout); + } + + render () { + const {copySuccessful, copyFailure, popoverOpen} = this.state; + const {asset} = this.props; + return ( + +
+ + + +
this.popover = ref} + className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}> + + this.permalinkInput = input} + defaultValue={`${asset.url}#${this.props.commentId}`} + /> + + + +
+
+
+ ); + } +} diff --git a/yarn.lock b/yarn.lock index 6e8776e08..92edf11b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7602,6 +7602,10 @@ smart-buffer@^1.0.4: version "1.1.15" resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16" +smoothscroll-polyfill@^0.3.5: + version "0.3.5" + resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.5.tgz#466e6039b51cb525d70e1a5077ef81e064678eae" + smtp-connection@2.12.0: version "2.12.0" resolved "https://registry.yarnpkg.com/smtp-connection/-/smtp-connection-2.12.0.tgz#d76ef9127cb23c2259edb1e8349c2e8d5e2d74c1"