Add a right-click context menu on the clip image itself: Copy Image Text

mozilla-services · Jan 5, 2017 · 40a6657 · 40a6657
1 parent d017043
commit 40a6657
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/docs/METRICS.md b/docs/METRICS.md
@@ -178,6 +178,7 @@ These are events that an add-on user can encounter on a shot they own
   27. [x] Focus link field `web/share/focus-url` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/3i2s0T0h2t0W1J3p2j0c/Image%202016-09-07%20at%203.04.24%20PM.png?v=654e288b)
   28. [x] Cancel/close share `web/cancel-share` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/0Q1n3I1J3J3G3y2B0z19/Image%202016-09-07%20at%203.04.57%20PM.png?v=8de54ca8)
 29. [x] Visit Page Shot link from footer `web/goto-pageshot/footer` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/3g3p2i19131n1o3p053s/Image%202016-09-07%20at%203.05.56%20PM.png?v=8c92662c)
+30. [x] Click "Copy Image Text" on the context menu `web/copy-image-text/context-menu`
 30. ~~Visit GitHub link from footer `web/goto-github/footer`~~
 31. ~~Visit GitHub revision from footer `web/goto-github-revision/footer`~~
 32. [x] Click Feedback/mailto button `start-feedback/footer` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/3Q1R170u1m0A3r0o3v1K/Image%202016-09-07%20at%203.07.01%20PM.png?v=0117ce5f)

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -83,7 +83,10 @@ class Clip extends React.Component {
     }
     return <div ref="clipContainer" className="clip-container" onClick={this.onClickCloseBackground.bind(this)}>
       { closeButton }
-      <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) }>
+      <menu type="context" id="clip-image-context">
+        <menuitem label="Copy Image Text" onClick={this.copyImageText.bind(this)} ></menuitem>
+      </menu>
+      <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
         { node }
       </a>
     </div>;
@@ -93,6 +96,17 @@ class Clip extends React.Component {
     sendEvent("goto-clip", "content", {useBeacon: true});
     // Allow default action to continue
   }
+
+  copyImageText() {
+    sendEvent("copy-image-text", "context-menu");
+    let text = this.props.clip.image.text;
+    let el = document.createElement("textarea");
+    el.value = text;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+  }
 }