|
|
@@ -0,0 +1,131 @@
|
|
|
+/**
|
|
|
+ * DIWO Vergleich - Clipboard Utilities
|
|
|
+ *
|
|
|
+ * Funktionen zum Kopieren von Werten in die Zwischenablage
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * Kopiert einen Wert in die Zwischenablage
|
|
|
+ * @param {HTMLElement} button - Der Kopier-Button
|
|
|
+ */
|
|
|
+function copyToClipboard(button) {
|
|
|
+ const value = button.getAttribute('data-copy-value');
|
|
|
+
|
|
|
+ if (!value) {
|
|
|
+ console.warn('Kein Wert zum Kopieren gefunden');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Verwende die moderne Clipboard API falls verfügbar
|
|
|
+ if (navigator.clipboard && window.isSecureContext) {
|
|
|
+ navigator.clipboard.writeText(value).then(() => {
|
|
|
+ showCopyFeedback(button, true);
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('Fehler beim Kopieren in die Zwischenablage:', err);
|
|
|
+ fallbackCopyToClipboard(value, button);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // Fallback für ältere Browser
|
|
|
+ fallbackCopyToClipboard(value, button);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Fallback-Methode zum Kopieren in die Zwischenablage
|
|
|
+ * @param {string} text - Der zu kopierende Text
|
|
|
+ * @param {HTMLElement} button - Der Kopier-Button
|
|
|
+ */
|
|
|
+function fallbackCopyToClipboard(text, button) {
|
|
|
+ // Erstelle temporäres Textarea-Element
|
|
|
+ const textArea = document.createElement('textarea');
|
|
|
+ textArea.value = text;
|
|
|
+
|
|
|
+ // Setze das Element außerhalb des sichtbaren Bereichs
|
|
|
+ textArea.style.position = 'fixed';
|
|
|
+ textArea.style.left = '-999999px';
|
|
|
+ textArea.style.top = '-999999px';
|
|
|
+
|
|
|
+ document.body.appendChild(textArea);
|
|
|
+ textArea.focus();
|
|
|
+ textArea.select();
|
|
|
+
|
|
|
+ try {
|
|
|
+ const successful = document.execCommand('copy');
|
|
|
+ showCopyFeedback(button, successful);
|
|
|
+
|
|
|
+ if (!successful) {
|
|
|
+ console.error('Fallback-Kopieren fehlgeschlagen');
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error('Fehler beim Fallback-Kopieren:', err);
|
|
|
+ showCopyFeedback(button, false);
|
|
|
+ } finally {
|
|
|
+ document.body.removeChild(textArea);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Zeigt visuelles Feedback nach dem Kopieren
|
|
|
+ * @param {HTMLElement} button - Der Kopier-Button
|
|
|
+ * @param {boolean} success - Ob das Kopieren erfolgreich war
|
|
|
+ */
|
|
|
+function showCopyFeedback(button, success) {
|
|
|
+ if (success) {
|
|
|
+ button.innerHTML = '<i class="fas fa-check"></i>';
|
|
|
+ button.title = 'Kopiert!';
|
|
|
+ button.classList.add('copy-success');
|
|
|
+ // Haken bleibt permanent - kein Timeout
|
|
|
+ } else {
|
|
|
+ button.innerHTML = '<i class="fas fa-times"></i>';
|
|
|
+ button.title = 'Kopieren fehlgeschlagen';
|
|
|
+ button.classList.add('copy-error');
|
|
|
+
|
|
|
+ // Nur bei Fehler nach 3 Sekunden zurücksetzen
|
|
|
+ setTimeout(() => {
|
|
|
+ button.innerHTML = '<i class="fas fa-copy"></i>';
|
|
|
+ button.title = 'Alten Wert in Zwischenablage kopieren';
|
|
|
+ button.classList.remove('copy-error');
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Behandelt Tastendruck-Ereignisse für Kopier-Buttons
|
|
|
+ * @param {KeyboardEvent} event - Das Tastatur-Event
|
|
|
+ * @param {HTMLElement} button - Der Kopier-Button
|
|
|
+ */
|
|
|
+function handleCopyKeyPress(event, button) {
|
|
|
+ // Enter oder Leertaste
|
|
|
+ if (event.key === 'Enter' || event.key === ' ') {
|
|
|
+ event.preventDefault();
|
|
|
+ copyToClipboard(button);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Initialisiert alle Kopier-Buttons auf der Seite
|
|
|
+ */
|
|
|
+function initializeCopyButtons() {
|
|
|
+ const copyButtons = document.querySelectorAll('.copy-btn');
|
|
|
+
|
|
|
+ copyButtons.forEach(button => {
|
|
|
+ // Stelle sicher, dass der Button focusierbar ist
|
|
|
+ if (!button.hasAttribute('tabindex')) {
|
|
|
+ button.setAttribute('tabindex', '0');
|
|
|
+ }
|
|
|
+
|
|
|
+ // Füge Accessibility-Attribute hinzu
|
|
|
+ button.setAttribute('role', 'button');
|
|
|
+ button.setAttribute('aria-label', 'Alten Wert in Zwischenablage kopieren');
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// Initialisiere Kopier-Buttons wenn das DOM geladen ist
|
|
|
+document.addEventListener('DOMContentLoaded', initializeCopyButtons);
|
|
|
+
|
|
|
+// Initialisiere auch bei dynamischen Inhalten (falls AJAX verwendet wird)
|
|
|
+document.addEventListener('DOMNodeInserted', function(event) {
|
|
|
+ if (event.target.classList && event.target.classList.contains('copy-btn')) {
|
|
|
+ initializeCopyButtons();
|
|
|
+ }
|
|
|
+});
|
Leonard Schulz