Merge pull request #6 from TRMSC:copy-to-clipboard-fixes

Copy-to-clipboard-fixes
TRMSC · Nov 4, 2023 · f75c74a · f75c74a
2 parents 6a9daed + d5d3c08
commit f75c74a
Showing 1 changed file with 59 additions and 68 deletions.
diff --git 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,22 +318,73 @@ 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 {
+    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');
+  }
+
+};
+
+
 /**
  * Copy to clipboard
  * 
  * @function copyClipboard
+ * @param {string} target - Content to copy
  * @returns {void}
  *
  */
-copyClipboard = () => {
-
-  // Copy content
-  document.getElementById('imagescene-result').select();
-  document.execCommand('copy');
+copyClipboard = (target) => {
+
+  // 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)
+      .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);
+  }
 
 };
 
@@ -489,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);
-
       };
 
     };