diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index ab6deb4a4..b967ca087 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -325,29 +325,7 @@ BlazeComponent.extendComponent({ }, 'click .js-copy-link'(event) { event.preventDefault(); - const StringToCopyElement = document.getElementById('cardURL_copy'); - StringToCopyElement.value = - window.location.origin + window.location.pathname; - StringToCopyElement.select(); - if (document.execCommand('copy')) { - StringToCopyElement.blur(); - } else { - document.getElementById('cardURL_copy').selectionStart = 0; - document.getElementById('cardURL_copy').selectionEnd = 999; - document.execCommand('copy'); - if (window.getSelection) { - if (window.getSelection().empty) { - // Chrome - window.getSelection().empty(); - } else if (window.getSelection().removeAllRanges) { - // Firefox - window.getSelection().removeAllRanges(); - } - } else if (document.selection) { - // IE? - document.selection.empty(); - } - } + Utils.copyTextToClipboard(event.target.href); }, 'click .js-open-card-details-menu': Popup.open('cardDetailsActions'), 'submit .js-card-description'(event) { @@ -1089,30 +1067,8 @@ BlazeComponent.extendComponent({ events() { return [ { - 'click .js-copy-card-link-to-clipboard'() { - // Clipboard code from: - // https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser - const StringToCopyElement = document.getElementById('cardURL'); - StringToCopyElement.select(); - if (document.execCommand('copy')) { - StringToCopyElement.blur(); - } else { - document.getElementById('cardURL').selectionStart = 0; - document.getElementById('cardURL').selectionEnd = 999; - document.execCommand('copy'); - if (window.getSelection) { - if (window.getSelection().empty) { - // Chrome - window.getSelection().empty(); - } else if (window.getSelection().removeAllRanges) { - // Firefox - window.getSelection().removeAllRanges(); - } - } else if (document.selection) { - // IE? - document.selection.empty(); - } - } + 'click .js-copy-card-link-to-clipboard'(event) { + Utils.copyTextToClipboard(location.origin + document.getElementById('cardURL').value); }, 'click .js-delete': Popup.afterConfirm('cardDelete', function () { Popup.close(); diff --git a/client/lib/utils.js b/client/lib/utils.js index fba13c74d..ebc76f22f 100644 --- a/client/lib/utils.js +++ b/client/lib/utils.js @@ -465,6 +465,41 @@ Utils = { } return finalString; }, + + fallbackCopyTextToClipboard(text) { + var textArea = document.createElement("textarea"); + textArea.value = text; + + // Avoid scrolling to bottom + textArea.style.top = "0"; + textArea.style.left = "0"; + textArea.style.position = "fixed"; + + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + document.execCommand('copy'); + } finally { + document.body.removeChild(textArea); + } + }, + + /** copy the text to the clipboard + * @see https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322#30810322 + * @param string copy this text to the clipboard + */ + copyTextToClipboard(text) { + if (navigator.clipboard) { + navigator.clipboard.writeText(text).then(function() { + }, function(err) { + console.error('Async: Could not copy text: ', err); + }); + } else { + fallbackCopyTextToClipboard(text); + } + }, }; // A simple tracker dependency that we invalidate every time the window is