PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: decouple format extras from main fichiers block, scope FilePond destroy to individual slots, fix FilePond integration for decoupled extras

Browse Source
This commit is contained in:
Pontoporeia
2026-05-10 20:28:24 +02:00
parent 1aff5ff46d
commit ecb559a18a
4 changed files with 105 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/public/assets/js/file-upload-filepond.js
View File

@@ -113,7 +113,7 @@
* Upgrade .tfe-file-picker inputs to FilePond instances.
* Called on page load and after HTMX swaps.
*/
function initFilePonds() {
window.XamxamInitFilePonds = function () {
document.querySelectorAll(".tfe-file-picker").forEach(function (input) {
// Skip already upgraded inputs
if (input.dataset.filepondUpgraded) return;
@@ -145,18 +145,20 @@
}
/**
* Destroy all FilePond instances and restore original inputs.
* Called before HTMX swaps that replace the file block.
* Destroy FilePond instances inside a given container element.
* Used before HTMX swaps to avoid leaks.
*/
function destroyFilePonds() {
Object.keys(_ponds).forEach(function (key) {
try {
_ponds[key].destroy();
} catch (_) { /* ignore */ }
delete _ponds[key];
});
// Also catch any stray instances (HTMX may have replaced DOM)
document.querySelectorAll(".tfe-file-picker[data-filepond-upgraded]").forEach(function (input) {
function destroyFilePondsIn(el) {
if (!el) return;
// Find FilePond-upgraded inputs inside this element
el.querySelectorAll(".tfe-file-picker[data-filepond-upgraded]").forEach(function (input) {
// Destroy the FilePond instance if it exists
var id = input.id;
var pond = id ? _ponds[id] : null;
if (pond) {
try { pond.destroy(); } catch (_) {}
delete _ponds[id];
}
delete input.dataset.filepondUpgraded;
});
}
@@ -164,17 +166,16 @@
// ── HTMX integration ─────────────────────────────────────────────────
/**
* Called before HTMX replaces the #format-fichiers-block.
* We must destroy FilePond instances on the soon-to-be-removed DOM nodes
* to avoid leaks and file-state conflicts.
* Before HTMX swaps a slot element that may contain FilePond instances,
* destroy them to avoid leaks and file-state conflicts.
*/
function onHtmxBeforeSwap(evt) {
// Only care about format-fichiers-block swaps
if (evt.detail.target && (
evt.detail.target.id === "format-fichiers-block" ||
evt.detail.target.closest && evt.detail.target.closest("#format-fichiers-block")
)) {
destroyFilePonds();
var target = evt.detail.target;
if (!target) return;
var id = target.id || "";
// Only care about slot elements that may contain FilePond file inputs
if (id === "slot-video" || id === "slot-audio" || id === "annexes-input-block" || id === "format-extras-block") {
destroyFilePondsIn(target);
}
}
@@ -183,26 +184,18 @@
// Hook into HTMX events if htmx is loaded
if (window.htmx) {
window.htmx.on("htmx:beforeSwap", onHtmxBeforeSwap);
window.htmx.on("htmx:afterSwap", function () {
window.XamxamInitFilePonds();
});
}
// Initialise on DOM ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
initFilePonds();
// Re-init handles HTMX after-swap
if (window.htmx) {
window.htmx.on("htmx:afterSwap", function () {
initFilePonds();
});
}
window.XamxamInitFilePonds();
});
} else {
initFilePonds();
if (window.htmx) {
window.htmx.on("htmx:afterSwap", function () {
initFilePonds();
});
}
window.XamxamInitFilePonds();
}
// ── Mark form dirty on FilePond changes (beforeunload guard) ─────────