Change Content and Minor Errors (#246)

* Change Annotate to Transcribe * Remove Minor Rollbar Errors * Fix Timeline, Linter Errors, and Talk Subject URL * Remove finally Polyfill * Remove event listeners
zooniverse · Feb 1, 2018 · 675aaef · 675aaef
1 parent 35ce167
commit 675aaef
Show file tree

Hide file tree

Showing 18 changed files with 163 additions and 180 deletions.
diff --git a/src/components/AboutTheCollection.jsx b/src/components/AboutTheCollection.jsx
@@ -57,7 +57,7 @@ class AboutTheCollection extends React.Component {
               </div>
               <div>
                 While the abolitionists were united in their fight against the enslavement
-                of blacks, they were not always united when it came to the question
+                of Black people, they were not always united when it came to the question
                 of whether or not women should participate in the movement.
               </div>
               <div>

diff --git a/src/components/AlreadySeen.jsx b/src/components/AlreadySeen.jsx
@@ -6,7 +6,7 @@ const AlreadySeen = () => {
       <span>
         You have already seen this manuscript and submitted a classification.
         Don&apos;t worry, we are constantly adding new subjects to the site.
-        You can still annotate and view manuscripts you have already seen before.
+        You can still transcribe and view manuscripts you have already seen before.
       </span>
     </div>
   );

diff --git a/src/components/AnnotationReminder.jsx b/src/components/AnnotationReminder.jsx
@@ -34,7 +34,7 @@ class AnnotationReminder extends React.Component {
         </span>
 
         <span>
-          Please annotate and transcribe entire lines at a time. Words split
+          Please transcibe and transcribe entire lines at a time. Words split
           between two lines should be typed out in their entirety on the first line.
           If you&apos;re unsure of anything, please revisit the project tutorial.
         </span>

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -62,13 +62,13 @@ class Home extends React.Component {
           const newestSubjects = uniqueSubjects.slice(0, 4);
           apiClient.type('subjects').get(newestSubjects)
             .then((subjectsOfNote) => {
-              this.setState({ subjectsOfNote })
+              this.setState({ subjectsOfNote });
             });
         }
       })
       .catch((err) => {
         console.error('Home.fetchRecentSubjects() error: ', err);
-      })
+      });
   }
 
   toggleGoldStandard() {
@@ -81,7 +81,7 @@ class Home extends React.Component {
         <div key={`Subject_Set_${i}`}>
           <Link onClick={this.setSubjectSet.bind(this, set.id)} to="/classify">{set.title}</Link>
         </div>
-      )
+      );
     });
   }
 
@@ -101,7 +101,8 @@ class Home extends React.Component {
           <img role="presentation" className="divider" src={Divider} />
           <div className="home-page__body-text">
             <b className="body-copy-first-word">Welcome.</b>{' '}
-            {this.props.project && this.props.project.description}
+            {this.props.project && this.props.project.description}<br />
+            <span><b>Note:</b> This project is not currently supported on mobile and tablet devices.</span>
           </div>
 
           <Link to="/classify">Start Transcribing</Link>

diff --git a/src/components/KeyboardShortcuts.jsx b/src/components/KeyboardShortcuts.jsx
@@ -5,28 +5,30 @@ const KeyboardShortcuts = () => {
     <div className="keyboard-shortcuts">
       <h2>Keyboard Shortcuts</h2>
       <table>
-        <tr>
-          <th>When Annotating</th>
-        </tr>
-        <tr>
-          <td>m</td>
-          <td>Toggle Previous Marks</td>
-        </tr>
-        <tr>
-          <td>a</td>
-          <td>Toggle Navigate and Annotate</td>
-        </tr>
-        <tr>
-          <th>When Transcribing</th>
-        </tr>
-        <tr>
-          <td>ctrl + enter</td>
-          <td>Submit Classifications</td>
-        </tr>
-        <tr>
-          <td>esc</td>
-          <td>Close and Cancel Transcription Box</td>
-        </tr>
+        <tbody>
+          <tr>
+            <th>When Annotating</th>
+          </tr>
+          <tr>
+            <td>m</td>
+            <td>Toggle Previous Marks</td>
+          </tr>
+          <tr>
+            <td>a</td>
+            <td>Toggle Navigate and Transcribe</td>
+          </tr>
+          <tr>
+            <th>When Transcribing</th>
+          </tr>
+          <tr>
+            <td>ctrl + enter</td>
+            <td>Submit Classifications</td>
+          </tr>
+          <tr>
+            <td>esc</td>
+            <td>Close and Cancel Transcription Box</td>
+          </tr>
+        </tbody>
       </table>
     </div>
 

diff --git a/src/components/SaveClip.jsx b/src/components/SaveClip.jsx
@@ -14,24 +14,6 @@ class SaveClip extends React.Component {
     this.saveClip = this.saveClip.bind(this);
   }
 
-  componentDidMount() {
-    this.inputText.addEventListener('mousedown', () => {
-      this.dialog.className = DISABLE_DRAG;
-    });
-    this.inputText.addEventListener('mouseup', () => {
-      this.dialog.className = ENABLE_DRAG;
-    });
-  }
-
-  componentWillUnmount() {
-    this.inputText.removeEventListener('mousedown', () => {
-      this.dialog.className = DISABLE_DRAG;
-    });
-    this.inputText.removeEventListener('mouseup', () => {
-      this.dialog.className = ENABLE_DRAG;
-    });
-  }
-
   cropUrl() {
     if (!this.props.points) return null;
     const { width, height, x, y } = this.props.points;
@@ -76,7 +58,13 @@ class SaveClip extends React.Component {
         <div className="save-snippet__image">
           <img role="presentation" src={this.cropUrl()} />
         </div>
-        <input type="text" ref={(c) => { this.inputText = c; }} placeholder="Snippet Name" />
+        <input
+          type="text"
+          ref={(c) => { this.inputText = c; }}
+          onMouseDown={() => { this.dialog.className = DISABLE_DRAG; }}
+          onMouseUp={() => { this.dialog.className = ENABLE_DRAG; }}
+          placeholder="Snippet Name"
+        />
 
         <div className="save-snippet__buttons">
           <button onClick={this.props.onClose}>Cancel</button>

diff --git a/src/components/SelectedAnnotation.jsx b/src/components/SelectedAnnotation.jsx
@@ -10,8 +10,8 @@ const PANE_WIDTH = 800;
 const PANE_HEIGHT = 350;
 const BUFFER = 10;
 
-const ENABLE_DRAG = "handle selected-annotation";
-const DISABLE_DRAG = "selected-annotation";
+const ENABLE_DRAG = 'handle selected-annotation';
+const DISABLE_DRAG = 'selected-annotation';
 
 class SelectedAnnotation extends React.Component {
   constructor(props) {
@@ -41,30 +41,18 @@ class SelectedAnnotation extends React.Component {
     }
     document.addEventListener('keyup', this.handleKeyUp);
     this.setState({ annotationText: text });
-    this.inputText.addEventListener('mousedown', () => {
-      this.dialog.className = DISABLE_DRAG;
-    });
-    this.inputText.addEventListener('mouseup', () => {
-      this.dialog.className = ENABLE_DRAG;
-    });
     this.inputText.focus();
   }
 
   componentWillUnmount() {
     document.removeEventListener('keyup', this.handleKeyUp);
-    this.inputText.removeEventListener('mousedown', () => {
-      this.dialog.className = DISABLE_DRAG;
-    });
-    this.inputText.removeEventListener('mouseup', () => {
-      this.dialog.className = ENABLE_DRAG;
-    });
   }
 
   toggleShowAnnotations() {
     if (this.context.googleLogger) {
       this.context.googleLogger.logEvent({
         type: 'click-dropdown',
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       });
     }
 
@@ -189,7 +177,7 @@ class SelectedAnnotation extends React.Component {
     inputY = inputY * this.props.scaling + (this.props.translationY * this.props.scaling);
     inputY = inputY + this.props.viewerSize.height / 2;
 
-    const inputClass = this.props.annotation.previousAnnotation ? "selected-annotation__previous" : "selected-annotation__user";
+    const inputClass = this.props.annotation.previousAnnotation ? 'selected-annotation__previous' : 'selected-annotation__user';
 
     const boundPos = this.checkPaneBounds(inputX, inputY);
 
@@ -229,7 +217,15 @@ class SelectedAnnotation extends React.Component {
           </div>
 
           <p>
-            <input className={inputClass} type="text" ref={(c) => { this.inputText = c; }} onChange={this.onTextUpdate} value={this.state.annotationText} />
+            <input
+              className={inputClass}
+              type="text"
+              ref={(c) => { this.inputText = c; }}
+              onChange={this.onTextUpdate}
+              onMouseDown={() => { this.dialog.className = DISABLE_DRAG; }}
+              onMouseUp={() => { this.dialog.className = ENABLE_DRAG; }}
+              value={this.state.annotationText}
+            />
 
             {this.props.annotation.previousAnnotation && (
               <button onClick={this.toggleShowAnnotations}>
@@ -265,7 +261,7 @@ class SelectedAnnotation extends React.Component {
     if (initialAnnotationText.trim().length === 0) {
       this.deleteAnnotation();  //Cancel this action and delete this newly created Annotation.
     } else {
-      if (this.props.onClose) { this.props.onClose() };  //Cancel this action and make no updates to the existing (and valid) Annotation.
+      if (this.props.onClose) { this.props.onClose(); }  //Cancel this action and make no updates to the existing (and valid) Annotation.
     }
 
     if (this.context.googleLogger) {
@@ -303,7 +299,6 @@ class SelectedAnnotation extends React.Component {
       } else {
         this.deleteAnnotation();
       }
-
     }
 
     if (this.context.googleLogger) {
@@ -347,6 +342,7 @@ class SelectedAnnotation extends React.Component {
 }
 
 SelectedAnnotation.defaultProps = {
+  annotation: {},
   annotationPanePosition: {
     x: 0,
     y: 0,
@@ -363,6 +359,9 @@ SelectedAnnotation.defaultProps = {
 };
 
 SelectedAnnotation.propTypes = {
+  annotation: PropTypes.shape({
+    details: React.PropTypes.array,
+  }),
   annotationPanePosition: PropTypes.shape({
     x: PropTypes.number,
     y: PropTypes.number,

diff --git a/src/components/ShowMetadata.jsx b/src/components/ShowMetadata.jsx
@@ -7,22 +7,24 @@ const ShowMetadata = ({ metadata }) => {
     <div className="handle show-metadata">
       <img role="presentation" className="divider" src={Divider} />
       <table width="100%">
-        {Object.keys(metadata).map((key, i) => {
-          const isHidden = /^\s*#|(\/\/)|!/g.test(key);
-          if (metadata[key] && !isHidden) {
-            const isUrl = metadata[key].substring(0, 4) === 'http';
-            let info = metadata[key];
-            if (isUrl) {
-              info = <a target="_blank" rel="noopener noreferrer" href={metadata[key]}>{metadata[key]}</a>;
+        <tbody>
+          {Object.keys(metadata).map((key, i) => {
+            const isHidden = /^\s*#|(\/\/)|!/g.test(key);
+            if (metadata[key] && !isHidden) {
+              const isUrl = metadata[key].substring(0, 4) === 'http';
+              let info = metadata[key];
+              if (isUrl) {
+                info = <a target="_blank" rel="noopener noreferrer" href={metadata[key]}>{metadata[key]}</a>;
+              }
+              return (
+                <tr key={i}>
+                  <td><b>{key}</b></td>
+                  <td>{info}</td>
+                </tr>
+              );
             }
-            return (
-              <tr key={i}>
-                <td><b>{key}</b></td>
-                <td>{info}</td>
-              </tr>
-            );
-          }
-        })}
+          })}
+        </tbody>
       </table>
     </div>
   );

diff --git a/src/components/SocialSection.jsx b/src/components/SocialSection.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Divider from '../images/img_divider.png';
+import { config } from '../config';
 import { getSubjectLocation, getThumbnailSource } from '../lib/get-subject-location';
 
 const SocialSection = ({ project, subjectsOfNote }) =>
@@ -14,12 +15,15 @@ const SocialSection = ({ project, subjectsOfNote }) =>
 
           {subjectsOfNote.map((subject, i) => {
             const location = getSubjectLocation(subject);
+            const url = `${config.zooniverseLinks.host}projects/${project.slug}/talk/subjects/${subject.id}`;
             const thumbnail = (location && location.src) ? getThumbnailSource(location.src) : undefined;
             return (
               <div key={i}>
-                <img src={thumbnail} />
+                <a href={url} rel="noopener noreferrer" target="_blank">
+                  <img role="presentation" src={thumbnail} />
+                </a>
               </div>
-            )
+            );
           })}
 
         </div>
@@ -84,26 +88,26 @@ const SocialSection = ({ project, subjectsOfNote }) =>
         </div>
         <div className="social-bar">
           <div>
-            <a href="https://twitter.com/BPLBoston" target="_blank">
-              <i className="fa fa-twitter fa-2x"/>
+            <a href="https://twitter.com/BPLBoston" rel="noopener noreferrer" target="_blank">
+              <i className="fa fa-twitter fa-2x" />
               <div>
                 <span>Twitter</span>
                 <span>@BPLBoston</span>
               </div>
             </a>
           </div>
           <div>
-            <a href="https://www.facebook.com/bostonpubliclibrary/" target="_blank">
-              <i className="fa fa-facebook fa-2x"/>
+            <a href="https://www.facebook.com/bostonpubliclibrary/" rel="noopener noreferrer" target="_blank">
+              <i className="fa fa-facebook fa-2x" />
               <div>
                 <span>Facebook</span>
                 <span>@bostonpubliclibrary</span>
               </div>
             </a>
           </div>
           <div>
-            <a href="https://www.instagram.com/bplboston" target="_blank">
-              <i className="fa fa-instagram fa-2x"/>
+            <a href="https://www.instagram.com/bplboston" rel="noopener noreferrer" target="_blank">
+              <i className="fa fa-instagram fa-2x" />
               <div>
                 <span>Instagram</span>
                 <span>@bplboston</span>
@@ -116,19 +120,17 @@ const SocialSection = ({ project, subjectsOfNote }) =>
   </div>;
 
 SocialSection.defaultProps = {
-  percentComplete: 0,
   project: {
     classifiers_count: 0,
     completeness: 0,
     researcher_quote: '',
     retired_subjects_count: 0,
-    subjects_count: 0
+    subjects_count: 0,
   },
   subjectsOfNote: [],
 };
 
 SocialSection.propTypes = {
-  percentComplete: PropTypes.number,
   project: PropTypes.shape({
     classifiers_count: PropTypes.number,
     completeness: PropTypes.number,