feat: ajouter classes sémantiques pour la page d'ajout de liens avec page-add-link, page-add-actions, page-add-bulk-toggle, batch-add-card, batch-private-wrap/checkbox/label pour meilleur ciblage CSS et suppression des styles inline

2026-02-18 15:52:33 -05:00
parent 65dde10291
commit 6b1f4b3e28
4 changed files with 295 additions and 1864 deletions
@@ -1411,7 +1411,115 @@ document.addEventListener('DOMContentLoaded', () => {
        });
    }

+    function initBatchCreationFlow() {
+        const batchToggleBtn = document.querySelector('.button-batch-addform');
+        const batchForm = document.querySelector('form.batch-addform');
+
+        if (batchToggleBtn && batchForm) {
+            batchToggleBtn.addEventListener('click', () => {
+                const isHidden = batchForm.classList.contains('hidden');
+                batchForm.classList.toggle('hidden');
+                batchToggleBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
+
+                if (isHidden) {
+                    const urlsField = batchForm.querySelector('#urls');
+                    urlsField?.focus();
+                }
+            });
+        }
+
+        const batchPage = document.querySelector('.page-edit-link-batch');
+        if (!batchPage) return;
+
+        const progressOverlay = document.getElementById('progress-overlay');
+        const progressCurrentEl = batchPage.querySelector('.progress-current');
+        const progressTotalEl = batchPage.querySelector('.progress-total');
+        const progressActualEl = batchPage.querySelector('.progress-actual');
+        const saveAllButtons = batchPage.querySelectorAll('button[name="save_edit_batch"]');
+
+        const getActiveBatchForms = () => Array.from(
+            batchPage.querySelectorAll('.bookmark-editor-form[data-batch-mode="1"]')
+        );
+
+        const updateProgress = (current, total) => {
+            if (progressCurrentEl) {
+                progressCurrentEl.textContent = String(current);
+            }
+            if (progressTotalEl) {
+                progressTotalEl.textContent = String(total);
+            }
+            if (progressActualEl) {
+                const percentage = total > 0 ? (current * 100) / total : 0;
+                progressActualEl.style.width = `${percentage}%`;
+            }
+        };
+
+        const initializeProgressTotal = () => {
+            const total = getActiveBatchForms().length;
+            updateProgress(0, total);
+        };
+
+        initializeProgressTotal();
+
+        batchPage.addEventListener('click', (event) => {
+            const cancelBtn = event.target.closest('button[name="cancel-batch-link"]');
+            if (!cancelBtn) return;
+
+            event.preventDefault();
+            const editForm = cancelBtn.closest('.editlinkform');
+            editForm?.remove();
+            initializeProgressTotal();
+        });
+
+        async function saveFormsSequentially(forms) {
+            const total = forms.length;
+            let current = 0;
+
+            updateProgress(0, total);
+            progressOverlay?.classList.remove('hidden');
+
+            for (const form of forms) {
+                const formData = new FormData(form);
+
+                try {
+                    const response = await fetch(form.action || `${shaarli.basePath}/admin/shaare`, {
+                        method: 'POST',
+                        body: formData,
+                        credentials: 'same-origin',
+                    });
+
+                    if (!response.ok) {
+                        console.error('Batch save failed with status', response.status);
+                    }
+                } catch (error) {
+                    console.error('Batch save request failed', error);
+                }
+
+                current += 1;
+                updateProgress(current, total);
+            }
+
+            window.location.href = `${shaarli.basePath}/`;
+        }
+
+        saveAllButtons.forEach((button) => {
+            button.addEventListener('click', async (event) => {
+                event.preventDefault();
+
+                const forms = getActiveBatchForms();
+                if (!forms.length) return;
+
+                saveAllButtons.forEach((btn) => {
+                    btn.disabled = true;
+                });
+
+                await saveFormsSequentially(forms);
+            });
+        });
+    }
+
    initBookmarkEditorForms();
+    initBatchCreationFlow();

    // ===== Persistent Media Player (Popup via Blob URL) =====
    // Audio plays in a separate popup window that survives page navigation.