diff --git a/app/assets/javascripts/discourse/templates/share.hbs b/app/assets/javascripts/discourse/templates/share.hbs
index 019da994781..cdc48cfb581 100644
--- a/app/assets/javascripts/discourse/templates/share.hbs
+++ b/app/assets/javascripts/discourse/templates/share.hbs
@@ -1,5 +1,6 @@
{{#if controller.link}}
{{view.title}}
+ {{i18n 'share.copied'}}
{{#if date}}
{{displayDate}}
diff --git a/app/assets/javascripts/discourse/views/share.js.es6 b/app/assets/javascripts/discourse/views/share.js.es6
index 8d9db1dc57a..ab052c2c5c2 100644
--- a/app/assets/javascripts/discourse/views/share.js.es6
+++ b/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(){
+ 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);
}
});
}
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 15ee61bcbe5..49f56f747e0 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/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;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e25a7b2b95a..04ebf7d7e3d 100644
--- a/config/locales/client.en.yml
+++ b/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+'