From c6432b61a8ab14adede04586849be88d6a19bb15 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sat, 4 Nov 2023 12:47:04 +0100 Subject: [PATCH 1/5] include navigaor.clipboard and a fallback message --- docs/src/script.js | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 1417e47..3290976 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -383,13 +383,34 @@ scrollResult = () => { */ copyClipboard = () => { - // Copy content - document.getElementById('imagescene-result').select(); - document.execCommand('copy'); + let textToCopy = document.getElementById('imagescene-result').value; + + if ('clipboard' in navigator) { + navigator.clipboard.writeText(textToCopy) + .then(() => { + // Success + let content = 'In die Zwischenablage kopiert ✔'; + showInfo(content); + }) + .catch(err => { + // Error + console.error('copy to clipboard error: ', err); + let content = 'Fehler beim Kopieren in die Zwischenablage ✖️'; + showInfo(content); + }); + } else { + // Fallback for older browsers + const textArea = document.createElement('textarea'); + textArea.value = textToCopy; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand('copy'); + document.body.removeChild(textArea); - // Call infobox - let content = 'In die Zwischenablage kopiert ✔'; - showInfo(content); + // Call infobox + let content = 'In die Zwischenablage kopiert ✔'; + showInfo(content); + } }; From 7e93aa9493b3846798ce69f001ca4fffe3ec486d Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sat, 4 Nov 2023 12:54:18 +0100 Subject: [PATCH 2/5] move sharing parts --- docs/src/script.js | 112 ++++++++++++++++++++++----------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 3290976..f7c2f1a 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -128,62 +128,6 @@ listenEvents = () => { }; -/** - * Share page by using the share api - * - * @async - * @function sharePage - * @throws {error} When the share api isn't available or the share fails - * - */ -sharePage = async () => { - - if (navigator.share) { - try { - await navigator.share(shareData); - console.log('Shared successfully'); - } catch (err) { - console.log(`Error: ${err}`); - } - } else { - copyUrl(); - } - -}; - - -/** - * Copy URL to clipboard - * - * @function copyUrl - * @returns {void} - * - */ -copyUrl = () => { - - // Handle URL - const textArea = document.createElement('textarea'); - textArea.value = shareData.url; - document.body.appendChild(textArea); - textArea.select(); - - // Copy or throw an error - try { - document.execCommand('copy'); - alert( - 'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' + - 'Die URL der Projektseite wurde daher zum Teilen in die Zwischenablage kopiert. ✔️' - ); - } catch (err) { - console.error('Fehler beim Kopieren in die Zwischenablage: ', err); - } - - // Entfernen Sie das Textfeld aus dem Dokument - document.body.removeChild(textArea); - -}; - - /** * Get images values * @@ -374,6 +318,62 @@ scrollResult = () => { }; +/** + * Share page by using the share api + * + * @async + * @function sharePage + * @throws {error} When the share api isn't available or the share fails + * + */ +sharePage = async () => { + + if (navigator.share) { + try { + await navigator.share(shareData); + console.log('Shared successfully'); + } catch (err) { + console.log(`Error: ${err}`); + } + } else { + copyUrl(); + } + +}; + + +/** + * Copy URL to clipboard + * + * @function copyUrl + * @returns {void} + * + */ +copyUrl = () => { + + // Handle URL + const textArea = document.createElement('textarea'); + textArea.value = shareData.url; + document.body.appendChild(textArea); + textArea.select(); + + // Copy or throw an error + try { + document.execCommand('copy'); + alert( + 'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' + + 'Die URL der Projektseite wurde daher zum Teilen in die Zwischenablage kopiert. ✔️' + ); + } catch (err) { + console.error('Fehler beim Kopieren in die Zwischenablage: ', err); + } + + // Entfernen Sie das Textfeld aus dem Dokument + document.body.removeChild(textArea); + +}; + + /** * Copy to clipboard * From a7f35babd1234a5b48386b4cfe06ea26061bfc3b Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sat, 4 Nov 2023 13:17:56 +0100 Subject: [PATCH 3/5] use copy function also for sharing fallback --- docs/src/script.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index f7c2f1a..d6f877c 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -336,7 +336,11 @@ sharePage = async () => { console.log(`Error: ${err}`); } } else { - copyUrl(); + alert( + 'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' + + 'Die URL der Projektseite wird daher zum Teilen in die Zwischenablage kopiert. ✔️' + ); + copyClipboard('share'); } }; @@ -378,12 +382,14 @@ copyUrl = () => { * Copy to clipboard * * @function copyClipboard + * @param {string} target - Content to copy * @returns {void} * */ -copyClipboard = () => { +copyClipboard = (target) => { - let textToCopy = document.getElementById('imagescene-result').value; + // Check if the url for sharing or the result should be copied to clipboard + let textToCopy = target === 'share' ? shareData.url : document.getElementById('imagescene-result').value; if ('clipboard' in navigator) { navigator.clipboard.writeText(textToCopy) From 43ec8c1c57767ab42fedf0a3bfa697ec959123ee Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sat, 4 Nov 2023 13:18:54 +0100 Subject: [PATCH 4/5] remove function for copying url --- docs/src/script.js | 32 -------------------------------- 1 file changed, 32 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index d6f877c..359364f 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -346,38 +346,6 @@ sharePage = async () => { }; -/** - * Copy URL to clipboard - * - * @function copyUrl - * @returns {void} - * - */ -copyUrl = () => { - - // Handle URL - const textArea = document.createElement('textarea'); - textArea.value = shareData.url; - document.body.appendChild(textArea); - textArea.select(); - - // Copy or throw an error - try { - document.execCommand('copy'); - alert( - 'Das Teilen über die Share-API wird in diesem Browser aktuell noch nicht unterstützt. ✖️\n' + - 'Die URL der Projektseite wurde daher zum Teilen in die Zwischenablage kopiert. ✔️' - ); - } catch (err) { - console.error('Fehler beim Kopieren in die Zwischenablage: ', err); - } - - // Entfernen Sie das Textfeld aus dem Dokument - document.body.removeChild(textArea); - -}; - - /** * Copy to clipboard * From d5d3c086a728b384c2511818686666cc84637c45 Mon Sep 17 00:00:00 2001 From: TRMSC Date: Sat, 4 Nov 2023 13:19:44 +0100 Subject: [PATCH 5/5] remove console.logs --- docs/src/script.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/src/script.js b/docs/src/script.js index 359364f..71c746b 100644 --- a/docs/src/script.js +++ b/docs/src/script.js @@ -484,10 +484,6 @@ handleFileSelect = (file) => { let textarea = document.getElementById('imagescene-url'); textarea.value = dataUri; - console.log('Breite: ' + originalWidth + 'px'); - console.log('Höhe: ' + originalHeight + 'px'); - console.log('Data URI des ausgewählten Bildes:', dataUri); - }; };