fix table with handling, icons implemented

2026-08-09 08:50:13 +02:00
parent 5e32be7d0c
commit 3ff0794cfc
43 changed files with 1027 additions and 95 deletions
@@ -0,0 +1,133 @@
+(() => {
+  function initImageEditor(editor) {
+    if (!editor || editor.dataset.imageEditorReady === '1') return;
+
+    const removeButton = editor.querySelector('[data-image-remove]');
+    const removeInput = editor.querySelector('[data-image-remove-input]');
+    let preview = editor.querySelector('[data-image-preview]');
+    let previewImage = preview?.querySelector('img');
+    const imageInput = editor.querySelector('input[type="file"][data-image-input]');
+    const libraryUpload = editor.querySelector('input[type="file"][data-image-library-upload]');
+    const libraryChoices = Array.from(editor.querySelectorAll('[data-image-library-choice]'));
+    const pending = editor.querySelector('[data-image-remove-pending]');
+
+    if (!removeInput) return;
+
+    const originalPreviewSrc = previewImage?.getAttribute('src') || '';
+    let objectUrl = null;
+
+    const releaseObjectUrl = () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+        objectUrl = null;
+      }
+    };
+
+    const ensurePreview = () => {
+      if (preview && previewImage) return;
+      preview = document.createElement('div');
+      preview.className = 'asset-edit-image-preview';
+      preview.dataset.imagePreview = '';
+      preview.hidden = true;
+      preview.style.display = 'none';
+
+      previewImage = document.createElement('img');
+      previewImage.className = 'asset-edit-preview-image';
+      previewImage.alt = '';
+      preview.appendChild(previewImage);
+
+      const firstControl = editor.querySelector('[data-image-remove-input]');
+      editor.insertBefore(preview, firstControl);
+    };
+
+    const showPreview = src => {
+      ensurePreview();
+      if (src) previewImage.src = src;
+      preview.hidden = false;
+      preview.style.display = '';
+      if (removeButton) {
+        removeButton.hidden = false;
+        removeButton.disabled = false;
+      }
+    };
+
+    const hidePreview = () => {
+      if (!preview) return;
+      preview.hidden = true;
+      preview.style.display = 'none';
+      if (removeButton) { removeButton.hidden = true; removeButton.disabled = true; }
+    };
+
+    const clearLibraryChoices = () => {
+      libraryChoices.forEach(choice => { choice.checked = false; });
+    };
+
+    const clearRemoveState = () => {
+      removeInput.value = '0';
+      if (pending) pending.hidden = true;
+      if (removeButton) {
+        removeButton.disabled = false;
+        removeButton.setAttribute('aria-pressed', 'false');
+      }
+    };
+
+    const setRemoveState = remove => {
+      removeInput.value = remove ? '1' : '0';
+      if (pending) pending.hidden = !remove;
+      if (removeButton) {
+        removeButton.disabled = remove;
+        removeButton.setAttribute('aria-pressed', remove ? 'true' : 'false');
+      }
+      if (remove) {
+        releaseObjectUrl();
+        if (imageInput) imageInput.value = '';
+        if (libraryUpload) libraryUpload.value = '';
+        clearLibraryChoices();
+        hidePreview();
+      }
+    };
+
+    removeButton?.addEventListener('click', event => {
+      event.preventDefault();
+      event.stopPropagation();
+      setRemoveState(true);
+    });
+
+    imageInput?.addEventListener('change', () => {
+      if (!imageInput.files || !imageInput.files.length) return;
+      releaseObjectUrl();
+      objectUrl = URL.createObjectURL(imageInput.files[0]);
+      if (libraryUpload) libraryUpload.value = '';
+      clearLibraryChoices();
+      clearRemoveState();
+      showPreview(objectUrl);
+    });
+
+    libraryUpload?.addEventListener('change', () => {
+      if (!libraryUpload.files || !libraryUpload.files.length) return;
+      releaseObjectUrl();
+      objectUrl = URL.createObjectURL(libraryUpload.files[0]);
+      if (imageInput) imageInput.value = '';
+      clearLibraryChoices();
+      clearRemoveState();
+      showPreview(objectUrl);
+    });
+
+    libraryChoices.forEach(choice => {
+      choice.addEventListener('change', () => {
+        if (!choice.checked) return;
+        releaseObjectUrl();
+        if (imageInput) imageInput.value = '';
+        if (libraryUpload) libraryUpload.value = '';
+        clearRemoveState();
+        showPreview(choice.dataset.imageSrc || choice.value);
+      });
+    });
+
+    window.addEventListener('beforeunload', releaseObjectUrl, { once: true });
+    editor.dataset.imageEditorReady = '1';
+    editor.dataset.originalImageSrc = originalPreviewSrc;
+  }
+
+  document.querySelectorAll('[data-image-editor]').forEach(initImageEditor);
+})();