Scroll to comment (#92)

* host pym locally

* host pym. fix some permalink styles

* get url from parent document

* reset copy dialog timeout

* use pym.parentUrl instead of depending on the parent document

* use a simpler method to find the url

* add some horrible setInterval code

* add some awesome polling

* merge master

* bail out of comment look up after 10 seconds

* re-update permalink attrs

* re-add my listeners to article.ejs

* allow for overriding the talk db name in an environment var

client/coral-plugin-permalinks/PermalinkButton.js

@@ -9,8 +9,8 @@ const lang = new I18n(translations);
 class PermalinkButton extends React.Component {
 
   static propTypes = {
-    asset_id: PropTypes.string.isRequired,
-    comment_id: PropTypes.string.isRequired
+    articleURL: PropTypes.string.isRequired,
+    commentId: PropTypes.string.isRequired
   }
 
   constructor (props) {
@@ -43,29 +43,27 @@ class PermalinkButton extends React.Component {
   }
 
   render () {
-    const publisherUrl = `${location.protocol}//${location.host}/`;
-
     return (
-      <div className={`${name}-container`} style={styles}>
+      <div className={`${name}-container`}>
         <button onClick={this.toggle} className={`${name}-button`}>
           <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
           {lang.t('permalink.permalink')}
         </button>
         <div
-          style={styles.popover(this.state.popoverOpen)}
-          className={`${name}-popover`}>
+          className={`${name}-popover ${this.state.popoverOpen ? 'active' : ''}`}>
           <input
+            className={`${name}-copy-field`}
             type='text'
             ref={input => this.permalinkInput = input}
-            value={`${publisherUrl}${this.props.asset_id}#${this.props.comment_id}`}
+            value={`${this.props.articleURL}#${this.props.commentId}`}
             onChange={() => {}} />
           <button className={`${name}-copy-button`} onClick={this.copyPermalink}>Copy</button>
           {
-            this.state.copySuccessful ? <p>copied to clipboard</p> : null
+            this.state.copySuccessful ? <p className={`${name}-copied-text`}>copied to clipboard</p> : null
           }
           {
             this.state.copyFailure
-            ? <p>copying to clipboard not supported in this browser. Use Cmd + C.</p>
+            ? <p className={`${name}-copied-error`}>copying to clipboard not supported in this browser. Use Cmd + C.</p>
             : null
           }
         </div>
@@ -75,20 +73,3 @@ class PermalinkButton extends React.Component {
 }
 
 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
-    };
-  }
-};