Merge pull request #3605 from riking/patch-6

FEATURE: Automatically copy the share link if possible

app/assets/javascripts/discourse/templates/share.hbs

@@ -1,5 +1,6 @@
 {{#if controller.link}}
   <h3>{{view.title}}</h3>
+  <span class="copy-text {{if copied "success"}}">{{i18n 'share.copied'}}</span>
 
   {{#if date}}
     <span class="date">{{displayDate}}</span>

app/assets/javascripts/discourse/views/share.js.es6

@@ -18,13 +18,34 @@ export default Discourse.View.extend({
     return null;
   }.property('controller.link'),
 
+  copyLink($element) {
+    const element = $element[0];
+    try {
+      if (document.queryCommandSupported('copy')) {
+        let newRange = document.createRange();
+        newRange.selectNode(element);
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+        if (document.execCommand("copy")) {
+          this.set('controller.copied', true);
+        }
+      }
+    } catch (e) {
+      // Ignore
+    }
+  },
+
   linkChanged: function() {
-    var self=this;
+    const self = this;
+    this.set('controller.copied', false);
     if (this.present('controller.link')) {
       Em.run.next(function() {
         if (!self.capabilities.touch) {
           var $linkInput = $('#share-link input');
           $linkInput.val(self.get('controller.link'));
+          self.copyLink($linkInput);
 
           // Wait for the fade-in transition to finish before selecting the link:
           window.setTimeout(function() {
@@ -34,6 +55,7 @@ export default Discourse.View.extend({
           var $linkForTouch = $('#share-link .share-for-touch a');
           $linkForTouch.attr('href',self.get('controller.link'));
           $linkForTouch.html(self.get('controller.link'));
+          self.copyLink($linkForTouch);
         }
       });
     }

app/assets/stylesheets/common/base/share_link.scss

@@ -24,6 +24,18 @@
   h3 {
     font-size: 0.929em;
   }
+  .copy-text {
+    display: inline-block;
+    position: absolute;
+    margin: 5px 5px 5px 15px;
+    color: $success;
+    opacity: 1;
+    transition: opacity 0.25s;
+    font-size: 13px;
+    &:not(.success) {
+      opacity: 0;
+    }
+  }
   .social-link {
     margin-left: 2px;
     margin-right: 8px;

config/locales/client.en.yml

@@ -114,6 +114,7 @@ en:
       topic: 'share a link to this topic'
       post: 'post #%{postNumber}'
       close: 'close'
+      copied: 'copied to clipboard'
       twitter: 'share this link on Twitter'
       facebook: 'share this link on Facebook'
       google+: 'share this link on Google+'