Skip to content

Instantly share code, notes, and snippets.

@ankedsgn
Created June 21, 2021 17:46
Show Gist options
  • Save ankedsgn/1995113f22ee717b045a4f95b7cd04be to your computer and use it in GitHub Desktop.
Save ankedsgn/1995113f22ee717b045a4f95b7cd04be to your computer and use it in GitHub Desktop.
Create a copyable link of an article in drupal
<div class="article__copy-link__container">
<div class="button--group-message article__copy-link js-copy-wrap">
<a class="button button--secondary button--icon button--icon-left button--has-message button--copy-link js-copy-link" href="#">
{{ 'Copy the link'|t }}
<svg class="icon icon--link">
<use xlink:href="#icon-link"/>
</svg>
</a>
<div class="button__message js-copy-message">
{{ 'Link copied to clipboard'|t }}
</div>
{# link is copied from this hidden textfield #}
<input class="sr-only" type="text" id="copyfield" value="{{ url('<current>') }}" readonly>
<label class="sr-only" for="copyfield">{{ 'link to share'|t }}</label>
</div>
</div>
(function ($, Drupal, drupalSettings) {
Drupal.behaviors.copyUrl = {
attach: function (context) {
$('body').on('click', '.js-copy-link', function(e){
e.preventDefault();
$input = $(this).parents('.js-copy-wrap').find('input');
$message = $(this).parents('.js-copy-wrap').find('.js-copy-message');
$input.select();
try {
result = document.execCommand('copy');
var msg = result ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
$message.show();
setTimeout( "$message.fadeOut();", 3000);
} catch (err) {
console.log('Oops, unable to copy');
}
});
}
};
})(jQuery, Drupal, drupalSettings);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment