From 8c0ae0c7b2682b332800ecf01e8a94a708e5439b Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Wed, 22 Sep 2021 10:51:27 +0100 Subject: [PATCH 1/7] Re-allow clipboard copy on non-https sites --- web_src/js/features/clipboard.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index 12486a208d5a..cc5eedc2e8ee 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -28,8 +28,24 @@ export default async function initClipboard() { if (!text) return; try { - await navigator.clipboard.writeText(text); - onSuccess(btn); + if(navigator.clipboard && window.isSecureContext){ + + await navigator.clipboard.writeText(text); + onSuccess(btn); + }else{ + if(btn.dataset.clipboardTarget) { + // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy + // it's also fine if we don't test it exists because of the try statement + document.querySelector(btn.dataset.clipboardTarget).select(); + if(document.execCommand('copy')){ + onSuccess(btn); + }else{ + onError(btn); + } + }else{ + onError(btn); + } + } } catch { onError(btn); } From a0b383799b0b1df8c9ea0f55620506786fde0f8f Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Wed, 22 Sep 2021 12:25:08 +0100 Subject: [PATCH 2/7] fallback clipboard functions --- web_src/js/features/clipboard.js | 44 +++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index cc5eedc2e8ee..9cdc4993928d 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -16,6 +16,38 @@ function onError(btn) { btn.dataset.content = btn.dataset.original; } +/** Use the document.execCommand to copy the value to clipboard */ +function fallbackCopyViaSelect(elem){ + elem.select(); + + // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard + // it's also fine if we don't test it exists because of the try statement + let success = document.execCommand('copy'); + + return success; +} +/** + * Fallback to use if navigator.clipboard doesn't exist. + * Achieved via creating a temporary textarea element, selecting the text, and using document.execCommand. + */ +function fallbackCopyToClipboard(text){ + let tempTextArea = document.createElement("textarea"); + tempTextArea.value = text; + + // avoid scrolling + tempTextArea.style.top = 0; + tempTextArea.style.left = 0; + tempTextArea.style.position = 'fixed'; + + document.body.appendChild(tempTextArea); + + let success = fallbackCopyViaSelect(tempTextArea); + + document.body.removeChild(tempTextArea); + + return success; +} + export default async function initClipboard() { for (const btn of document.querySelectorAll(selector) || []) { btn.addEventListener('click', async () => { @@ -33,15 +65,9 @@ export default async function initClipboard() { await navigator.clipboard.writeText(text); onSuccess(btn); }else{ - if(btn.dataset.clipboardTarget) { - // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy - // it's also fine if we don't test it exists because of the try statement - document.querySelector(btn.dataset.clipboardTarget).select(); - if(document.execCommand('copy')){ - onSuccess(btn); - }else{ - onError(btn); - } + let success = btn.dataset.clipboardTarget ? fallbackCopyViaSelect(document.querySelector(btn.dataset.clipboardTarget)) : fallbackCopyToClipboard(text); + if(success){ + onSuccess(btn); }else{ onError(btn); } From 5b127b1d7b68c0170d479afc3b6db1e7b1348d58 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Wed, 22 Sep 2021 12:49:41 +0100 Subject: [PATCH 3/7] fix lint errors --- web_src/js/features/clipboard.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index 9cdc4993928d..5ffbb854c45b 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -17,31 +17,29 @@ function onError(btn) { } /** Use the document.execCommand to copy the value to clipboard */ -function fallbackCopyViaSelect(elem){ +function fallbackCopyViaSelect(elem) { elem.select(); // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard // it's also fine if we don't test it exists because of the try statement - let success = document.execCommand('copy'); - - return success; + return document.execCommand('copy'); } /** * Fallback to use if navigator.clipboard doesn't exist. * Achieved via creating a temporary textarea element, selecting the text, and using document.execCommand. */ -function fallbackCopyToClipboard(text){ - let tempTextArea = document.createElement("textarea"); +function fallbackCopyToClipboard(text) { + const tempTextArea = document.createElement("textarea"); tempTextArea.value = text; // avoid scrolling tempTextArea.style.top = 0; tempTextArea.style.left = 0; - tempTextArea.style.position = 'fixed'; + tempTextArea.style.position = "fixed"; document.body.appendChild(tempTextArea); - let success = fallbackCopyViaSelect(tempTextArea); + const success = fallbackCopyViaSelect(tempTextArea); document.body.removeChild(tempTextArea); @@ -60,15 +58,15 @@ export default async function initClipboard() { if (!text) return; try { - if(navigator.clipboard && window.isSecureContext){ + if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); onSuccess(btn); - }else{ - let success = btn.dataset.clipboardTarget ? fallbackCopyViaSelect(document.querySelector(btn.dataset.clipboardTarget)) : fallbackCopyToClipboard(text); - if(success){ + } else { + const success = btn.dataset.clipboardTarget ? fallbackCopyViaSelect(document.querySelector(btn.dataset.clipboardTarget)) : fallbackCopyToClipboard(text); + if (success) { onSuccess(btn); - }else{ + } else { onError(btn); } } From 01b36b4751189b731485c20df66d05496e155048 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Wed, 22 Sep 2021 12:53:52 +0100 Subject: [PATCH 4/7] More lint error fixes --- web_src/js/features/clipboard.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index 5ffbb854c45b..fcb5417b865b 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -29,13 +29,13 @@ function fallbackCopyViaSelect(elem) { * Achieved via creating a temporary textarea element, selecting the text, and using document.execCommand. */ function fallbackCopyToClipboard(text) { - const tempTextArea = document.createElement("textarea"); + const tempTextArea = document.createElement('textarea'); tempTextArea.value = text; // avoid scrolling tempTextArea.style.top = 0; tempTextArea.style.left = 0; - tempTextArea.style.position = "fixed"; + tempTextArea.style.position = 'fixed'; document.body.appendChild(tempTextArea); @@ -59,7 +59,6 @@ export default async function initClipboard() { try { if (navigator.clipboard && window.isSecureContext) { - await navigator.clipboard.writeText(text); onSuccess(btn); } else { From e001004b4337b375a7dfade2325199049980d8a7 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Thu, 23 Sep 2021 11:20:00 +0100 Subject: [PATCH 5/7] simplified clipboard fallback process --- web_src/js/features/clipboard.js | 30 +++++++++++------------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index fcb5417b865b..cb74eba0b125 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -16,19 +16,13 @@ function onError(btn) { btn.dataset.content = btn.dataset.original; } -/** Use the document.execCommand to copy the value to clipboard */ -function fallbackCopyViaSelect(elem) { - elem.select(); - - // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard - // it's also fine if we don't test it exists because of the try statement - return document.execCommand('copy'); -} /** * Fallback to use if navigator.clipboard doesn't exist. * Achieved via creating a temporary textarea element, selecting the text, and using document.execCommand. */ function fallbackCopyToClipboard(text) { + if (!document.execCommand) return false; + const tempTextArea = document.createElement('textarea'); tempTextArea.value = text; @@ -39,7 +33,10 @@ function fallbackCopyToClipboard(text) { document.body.appendChild(tempTextArea); - const success = fallbackCopyViaSelect(tempTextArea); + elem.select(); + + // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard + const success = document.execCommand('copy'); document.body.removeChild(tempTextArea); @@ -58,19 +55,14 @@ export default async function initClipboard() { if (!text) return; try { - if (navigator.clipboard && window.isSecureContext) { - await navigator.clipboard.writeText(text); + await navigator.clipboard.writeText(text); + onSuccess(btn); + } catch { + if (fallbackCopyToClipboard(text)) { onSuccess(btn); } else { - const success = btn.dataset.clipboardTarget ? fallbackCopyViaSelect(document.querySelector(btn.dataset.clipboardTarget)) : fallbackCopyToClipboard(text); - if (success) { - onSuccess(btn); - } else { - onError(btn); - } + onError(btn); } - } catch { - onError(btn); } }); } From ca20ae277414b3c7adb92a17cd7271c78a4f4cd4 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Thu, 23 Sep 2021 11:50:19 +0100 Subject: [PATCH 6/7] fix undefined --- web_src/js/features/clipboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index cb74eba0b125..66646e0be270 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -33,7 +33,7 @@ function fallbackCopyToClipboard(text) { document.body.appendChild(tempTextArea); - elem.select(); + tempTextArea.select(); // if unsecure (not https), there is no navigator.clipboard, but we can still use document.execCommand to copy to clipboard const success = document.execCommand('copy'); From fe2b719b0c975c4d6a4dcd66261b1530f7708688 Mon Sep 17 00:00:00 2001 From: tech-meppem Date: Tue, 19 Oct 2021 10:47:40 +0100 Subject: [PATCH 7/7] resolve merge conflicts --- web_src/js/features/clipboard.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js index 61cd4c8a8ef1..2c7ad013bd90 100644 --- a/web_src/js/features/clipboard.js +++ b/web_src/js/features/clipboard.js @@ -54,21 +54,21 @@ export default function initGlobalCopyToClipboardListener() { } else if (target.dataset.clipboardTarget) { text = document.querySelector(target.dataset.clipboardTarget)?.value; } - - if (!text) { - target = target.parentElement; - } else { + if (text) { + e.preventDefault(); try { await navigator.clipboard.writeText(text); - onSuccess(btn); + onSuccess(target); } catch { if (fallbackCopyToClipboard(text)) { - onSuccess(btn); + onSuccess(target); } else { - onError(btn); + onError(target); } } + break; } + target = target.parentElement; } }); }