mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
refactor: unify edit mode Format+Fichiers with add/partage HTMX fragment
- Edit mode now uses the same fichiers-fragment.php as add and partage, instead of duplicating the format checkboxes + new-file upload + website URL fieldsets. - Edit-only elements (existing files list, cover replace) stay in a separate #edit-existing-files-block below the shared fragment. - Removed .zip/.tar/.gz from the main TFE upload accept in both fichiers-fragment.php and fieldset-files.php. Archives go only in the Annexes file input. - Removed admin/format-website-fragment.php dependency from edit (no longer needed — the shared fragment handles website too). fix: jury repop crash + hx-preserve on file inputs, remove zip/tar from tfe accept - Jury fieldset add-mode repopulation now handles both scalar (legacy) and array (new dynamic multi-row) values for jury_promoteur and jury_promoteur_ulb_name. htmlspecialchars() was choking on array value. - All file inputs in fichiers-fragment.php wrapped in hx-preserve containers so HTMX swaps don't wipe user-selected files when toggling formats or the annexes checkbox. - Removed .zip/.tar/.gz from main TFE file accept — archives only via annexes input (which already had multiple + correct accept). - Edit mode now reuses the same fichiers-fragment.php fragment. fix: file inputs re-initialize after HTMX swap via inline script - Exposed window.XamxamInitFileUploads from file-upload-queue.js IIFE so HTMX fragments can trigger re-binding without a global listener. - fichiers-fragment.php emits <script>XamxamInitFileUploads()</script> at the end of the #format-fichiers-block fragment. - Removed hx-preserve wrappers — they prevented re-render after format/annexes toggles changed visible inputs. - This also fixes .zip removal from TFE accept and jury repopulation array crash from the previous commit. refactor: simplify file-upload-queue.js, remove file-preview.js - file-upload-queue.js rewritten from ~250 lines to ~120 lines: no more DataTransfer machinery, no IIFE wrapper, uses .onchange instead of addEventListener for simpler HTMX re-init. - window.XamxamInitFileUploads is the function itself (not an IIFE export). - Merged file-preview.js functionality into file-upload-queue.js (single-file .data-preview handling). Deleted file-preview.js. - fichiers-fragment.php inline script calls XamxamInitFileUploads() after every HTMX swap (same as before). debug: add console.log to file-upload-queue.js for file input behavior Adds logging at key points to diagnose why only one file is displayed: - XamxamInitFileUploads called - TFE queue picker init (id, multiple attribute state) - onchange event (files count, names) - fileArray post-concat length - Single-file preview bindings (id, multiple attribute) Remove after debug session.
This commit is contained in:
Pontoporeia
@@ -1,274 +1,148 @@
|
||||
/**
|
||||
* file-upload-queue.js
|
||||
*
|
||||
* Powers two UI features:
|
||||
* Renders visual file queues for:
|
||||
* 1. #tfe-files-input — multi-file upload with drag-to-reorder (SortableJS)
|
||||
* and per-file label inputs. Injects hidden file_labels[] / file_orders[].
|
||||
* 2. input[data-preview] — single-file previews (couverture, note_intention, etc.)
|
||||
* 3. #existing-files-sortable — edit-mode sortable list
|
||||
*
|
||||
* 1. TFE multi-file upload queue (#tfe-file-queue)
|
||||
* - Renders each selected file as a sortable row with icon, name, size
|
||||
* and an optional label input.
|
||||
* - Drag-to-reorder via SortableJS.
|
||||
* - Injects hidden `file_labels[]` and `file_orders[]` inputs so PHP
|
||||
* receives per-file label and intended sort-order data.
|
||||
* - Works for both the add/partage form (pure new uploads) and the edit
|
||||
* form (new uploads only; existing-file sort is handled server-side).
|
||||
*
|
||||
* 2. Legacy single-file previews (data-preview="CONTAINER_ID")
|
||||
* - Backward-compatible with cover-image and banner inputs.
|
||||
* Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
|
||||
* after swap without a global event listener.
|
||||
*/
|
||||
(() => {
|
||||
/* ── Helpers ──────────────────────────────────────────────────────────── */
|
||||
|
||||
const ICONS = {
|
||||
pdf: '📄',
|
||||
video: '🎬',
|
||||
audio: '🔊',
|
||||
zip: '🗜️',
|
||||
vtt: '💬',
|
||||
image: '🖼️',
|
||||
other: '📎',
|
||||
window.XamxamInitFileUploads = function () {
|
||||
console.log('[file-upload-queue] XamxamInitFileUploads called');
|
||||
var ICON = {
|
||||
pdf: '\uD83D\uDCC4', video: '\uD83C\uDFAC', audio: '\uD83D\uDD0A',
|
||||
zip: '\uD83D\uDDDC\uFE0F', vtt: '\uD83D\uDCAC', image: '\uD83D\uDDBC\uFE0F', other: '\uD83D\uDCCE'
|
||||
};
|
||||
|
||||
function iconFor(file) {
|
||||
const t = file.type || '';
|
||||
const n = file.name.toLowerCase();
|
||||
if (t.startsWith('image/')) return ICONS.image;
|
||||
if (t === 'application/pdf' || n.endsWith('.pdf')) return ICONS.pdf;
|
||||
if (t.startsWith('video/') || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICONS.video;
|
||||
if (t.startsWith('audio/') || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICONS.audio;
|
||||
if (t === 'application/zip' || /\.(zip|tar|gz|tgz)$/.test(n)) return ICONS.zip;
|
||||
if (n.endsWith('.vtt')) return ICONS.vtt;
|
||||
return ICONS.other;
|
||||
var t = file.type || '', n = file.name.toLowerCase();
|
||||
if (/^image\//.test(t)) return ICON.image;
|
||||
if (t === 'application/pdf' || /\.pdf$/.test(n)) return ICON.pdf;
|
||||
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
|
||||
if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
|
||||
if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
|
||||
if (/\.vtt$/.test(n)) return ICON.vtt;
|
||||
return ICON.other;
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(2)} GB`;
|
||||
if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(2)} MB`;
|
||||
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${bytes} B`;
|
||||
function humanSize(b) {
|
||||
return b >= 1073741824 ? (b / 1073741824).toFixed(2) + ' GB'
|
||||
: b >= 1048576 ? (b / 1048576).toFixed(2) + ' MB'
|
||||
: b >= 1024 ? (b / 1024).toFixed(1) + ' KB'
|
||||
: b + ' B';
|
||||
}
|
||||
|
||||
function esc(str) {
|
||||
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
function esc(s) { return s.replace(/[&<>"]/g, function(c){ return {'&':'&','<':'<','>':'>','"':'"'}[c]; }); }
|
||||
|
||||
/* ── DataTransfer-backed file list ────────────────────────────────────── */
|
||||
// We keep a parallel array so we can freely re-order and remove files
|
||||
// then reconstruct a proper FileList via DataTransfer when needed.
|
||||
// ── 1. TFE multi-file queue ────────────────────────────────────────────
|
||||
var picker = document.getElementById('tfe-files-input');
|
||||
var queue = document.getElementById('tfe-file-queue');
|
||||
var empty = document.getElementById('tfe-file-queue-empty');
|
||||
if (picker && queue) {
|
||||
console.log('[file-upload-queue] init TFE queue picker=', picker, 'multiple=', picker.multiple);
|
||||
var fileArray = [];
|
||||
|
||||
function syncInputFiles(input, fileArray) {
|
||||
try {
|
||||
const dt = new DataTransfer();
|
||||
for (const f of fileArray) dt.items.add(f);
|
||||
input.files = dt.files;
|
||||
} catch {
|
||||
// DataTransfer not available in older browsers — graceful degradation.
|
||||
}
|
||||
}
|
||||
|
||||
/* ── TFE file queue ───────────────────────────────────────────────────── */
|
||||
|
||||
function initFileQueue() {
|
||||
const picker = document.getElementById('tfe-files-input');
|
||||
const queue = document.getElementById('tfe-file-queue');
|
||||
const empty = document.getElementById('tfe-file-queue-empty');
|
||||
|
||||
if (!picker || !queue) return;
|
||||
|
||||
// Array parallel to the visual queue
|
||||
let fileArray = [];
|
||||
|
||||
// Keep SortableJS instance reference
|
||||
let _sortable = null;
|
||||
if (typeof Sortable !== 'undefined') {
|
||||
_sortable = Sortable.create(queue, {
|
||||
animation: 150,
|
||||
handle: '.fq-drag-handle',
|
||||
ghostClass: 'fq-ghost',
|
||||
onEnd: () => reorderFiles(),
|
||||
Sortable.create(queue, { animation: 150, handle: '.fq-drag-handle', ghostClass: 'fq-ghost',
|
||||
onEnd: function () {
|
||||
var items = queue.querySelectorAll('.fq-item');
|
||||
var newArr = Array.prototype.map.call(items, function (li) { return fileArray[parseInt(li.getAttribute('data-idx'), 10)]; });
|
||||
fileArray = newArr;
|
||||
renderQueue();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
picker.addEventListener('change', () => {
|
||||
const newFiles = Array.from(picker.files);
|
||||
fileArray = fileArray.concat(newFiles);
|
||||
renderQueue();
|
||||
// Reset input so the same file can be selected again if needed
|
||||
picker.onchange = function () {
|
||||
console.log('[file-upload-queue] onchange fired, files count:', picker.files.length, 'names:', Array.from(picker.files).map(function(f){return f.name}));
|
||||
fileArray = fileArray.concat(Array.from(picker.files));
|
||||
console.log('[file-upload-queue] fileArray after concat, length:', fileArray.length);
|
||||
picker.value = '';
|
||||
});
|
||||
renderQueue();
|
||||
};
|
||||
|
||||
function renderQueue() {
|
||||
queue.innerHTML = '';
|
||||
|
||||
if (fileArray.length === 0) {
|
||||
empty.style.display = '';
|
||||
syncInputFiles(picker, []);
|
||||
return;
|
||||
}
|
||||
if (!fileArray.length) { empty.style.display = ''; injectHiddenFields([]); return; }
|
||||
empty.style.display = 'none';
|
||||
|
||||
fileArray.forEach((file, idx) => {
|
||||
const li = document.createElement('li');
|
||||
fileArray.forEach(function (file, idx) {
|
||||
var li = document.createElement('li');
|
||||
li.className = 'fq-item';
|
||||
li.setAttribute('data-idx', idx);
|
||||
|
||||
li.innerHTML =
|
||||
'<span class="fq-drag-handle" title="Réordonner">⠿</span>' +
|
||||
'<span class="fq-drag-handle" title="R\u00e9ordonner">\u2820</span>' +
|
||||
'<span class="fq-icon">' + iconFor(file) + '</span>' +
|
||||
'<span class="fq-info">' +
|
||||
'<span class="fq-name">' + esc(file.name) + '</span>' +
|
||||
'<span class="fq-size">' + humanSize(file.size) + '</span>' +
|
||||
'<input type="text" class="fq-label admin-file-label-input" ' +
|
||||
'placeholder="Légende / description (optionnel)">' +
|
||||
'</span>' +
|
||||
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">✕</button>';
|
||||
|
||||
// Remove button
|
||||
li.querySelector('.fq-remove').addEventListener('click', () => {
|
||||
fileArray.splice(idx, 1);
|
||||
renderQueue();
|
||||
});
|
||||
|
||||
'<span class="fq-info"><span class="fq-name">' + esc(file.name) + '</span>' +
|
||||
'<span class="fq-size">' + humanSize(file.size) + '</span>' +
|
||||
'<input type="text" class="fq-label admin-file-label-input" placeholder="L\u00e9gende / description (optionnel)"></span>' +
|
||||
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">✕</button>';
|
||||
li.querySelector('.fq-remove').onclick = (function (i) { return function () { fileArray.splice(i, 1); renderQueue(); }; })(idx);
|
||||
queue.appendChild(li);
|
||||
});
|
||||
|
||||
syncInputFiles(picker, fileArray);
|
||||
injectHiddenFields();
|
||||
injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item')));
|
||||
}
|
||||
|
||||
function reorderFiles() {
|
||||
// Re-sync fileArray to match current DOM order
|
||||
const items = Array.from(queue.querySelectorAll('.fq-item'));
|
||||
const newArr = items.map(li => fileArray[parseInt(li.getAttribute('data-idx'), 10)]);
|
||||
fileArray = newArr;
|
||||
// Re-render to update data-idx attributes
|
||||
renderQueue();
|
||||
}
|
||||
|
||||
function injectHiddenFields() {
|
||||
// Remove previous hidden fields
|
||||
const form = picker.closest('form');
|
||||
function injectHiddenFields(items) {
|
||||
var form = picker.closest('form');
|
||||
if (!form) return;
|
||||
for (const el of form.querySelectorAll('.fq-hidden-label, .fq-hidden-order')) el.remove();
|
||||
|
||||
// Inject current labels and order indices
|
||||
// We use the queue DOM (post-sort) as the source of truth.
|
||||
const items = Array.from(queue.querySelectorAll('.fq-item'));
|
||||
items.forEach((li, sortedIdx) => {
|
||||
const labelVal = li.querySelector('.fq-label').value;
|
||||
|
||||
const lInput = document.createElement('input');
|
||||
lInput.type = 'hidden';
|
||||
lInput.name = 'file_labels[]';
|
||||
lInput.value = labelVal;
|
||||
lInput.className = 'fq-hidden-label';
|
||||
form.appendChild(lInput);
|
||||
|
||||
const oInput = document.createElement('input');
|
||||
oInput.type = 'hidden';
|
||||
oInput.name = 'file_orders[]';
|
||||
oInput.value = sortedIdx + 1;
|
||||
oInput.className = 'fq-hidden-order';
|
||||
form.appendChild(oInput);
|
||||
form.querySelectorAll('.fq-hidden-label, .fq-hidden-order').forEach(function (el) { el.remove(); });
|
||||
items.forEach(function (li, sortedIdx) {
|
||||
var label = li.querySelector('.fq-label');
|
||||
var lInp = document.createElement('input'); lInp.type = 'hidden'; lInp.name = 'file_labels[]'; lInp.value = label ? label.value : ''; lInp.className = 'fq-hidden-label'; form.appendChild(lInp);
|
||||
var oInp = document.createElement('input'); oInp.type = 'hidden'; oInp.name = 'file_orders[]'; oInp.value = sortedIdx + 1; oInp.className = 'fq-hidden-order'; form.appendChild(oInp);
|
||||
});
|
||||
}
|
||||
|
||||
// Before form submit, inject hidden fields so labels are up-to-date
|
||||
const form = picker.closest('form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', () => {
|
||||
syncInputFiles(picker, fileArray);
|
||||
injectHiddenFields();
|
||||
});
|
||||
}
|
||||
// On submit, refresh hidden fields from current queue state
|
||||
var form = picker.closest('form');
|
||||
if (form) form.addEventListener('submit', function () { injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item'))); });
|
||||
}
|
||||
|
||||
/* ── Existing-files sortable (edit form only) ─────────────────────────── */
|
||||
// ── 2. Single-file previews (data-preview attribute) ────────────────────
|
||||
document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
|
||||
if (input.id === 'tfe-files-input') return;
|
||||
console.log('[file-upload-queue] binding preview for', input.id, 'multiple=', input.multiple);
|
||||
var container = document.getElementById(input.getAttribute('data-preview'));
|
||||
if (!container) return;
|
||||
input.onchange = function () {
|
||||
container.innerHTML = '';
|
||||
Array.from(input.files).forEach(function (file) {
|
||||
var item = document.createElement('div'); item.className = 'fp-item';
|
||||
if (/^image\//.test(file.type)) {
|
||||
var img = document.createElement('img'); img.className = 'fp-thumb'; img.alt = file.name;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) { img.src = e.target.result; };
|
||||
reader.readAsDataURL(file);
|
||||
item.appendChild(img);
|
||||
} else {
|
||||
var ic = document.createElement('span'); ic.className = 'fp-icon'; ic.textContent = iconFor(file);
|
||||
item.appendChild(ic);
|
||||
}
|
||||
var meta = document.createElement('span'); meta.className = 'fp-meta';
|
||||
meta.innerHTML = '<span class="fp-name">' + esc(file.name) + '</span><span class="fp-size">' + humanSize(file.size) + '</span>';
|
||||
item.appendChild(meta);
|
||||
container.appendChild(item);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
function initExistingFilesSortable() {
|
||||
const list = document.getElementById('existing-files-sortable');
|
||||
if (!list || typeof Sortable === 'undefined') return;
|
||||
|
||||
Sortable.create(list, {
|
||||
animation: 150,
|
||||
handle: '.admin-file-drag-handle',
|
||||
ghostClass: 'fq-ghost',
|
||||
onEnd: () => {
|
||||
// Update the hidden file_sort_order[] inputs to reflect new order
|
||||
const items = list.querySelectorAll('.admin-file-list-item[data-file-id]');
|
||||
for (const el of list.querySelectorAll('input[name="file_sort_order[]"]')) el.remove();
|
||||
items.forEach((li) => {
|
||||
const inp = document.createElement('input');
|
||||
inp.type = 'hidden';
|
||||
inp.name = 'file_sort_order[]';
|
||||
inp.value = li.getAttribute('data-file-id');
|
||||
li.prepend(inp);
|
||||
// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
|
||||
var sortList = document.getElementById('existing-files-sortable');
|
||||
if (sortList && typeof Sortable !== 'undefined') {
|
||||
Sortable.create(sortList, { animation: 150, handle: '.admin-file-drag-handle', ghostClass: 'fq-ghost',
|
||||
onEnd: function () {
|
||||
sortList.querySelectorAll('input[name="file_sort_order[]"]').forEach(function (el) { el.remove(); });
|
||||
sortList.querySelectorAll('.admin-file-list-item[data-file-id]').forEach(function (li) {
|
||||
var inp = document.createElement('input'); inp.type = 'hidden'; inp.name = 'file_sort_order[]'; inp.value = li.getAttribute('data-file-id'); li.prepend(inp);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Legacy single-file preview (data-preview="CONTAINER_ID") ─────────── */
|
||||
|
||||
function initLegacyPreviews() {
|
||||
document.querySelectorAll('input[type="file"][data-preview]').forEach((input) => {
|
||||
// Skip the TFE multi-file picker (handled by queue above)
|
||||
if (input.id === 'tfe-files-input') return;
|
||||
|
||||
const containerId = input.getAttribute('data-preview');
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
renderLegacyPreview(input, container);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderLegacyPreview(input, container) {
|
||||
container.innerHTML = '';
|
||||
const files = Array.from(input.files);
|
||||
if (!files.length) return;
|
||||
|
||||
files.forEach((file) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'fp-item';
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'fp-thumb';
|
||||
img.alt = file.name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => { img.src = e.target.result; };
|
||||
reader.readAsDataURL(file);
|
||||
item.appendChild(img);
|
||||
} else {
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'fp-icon';
|
||||
icon.textContent = iconFor(file);
|
||||
item.appendChild(icon);
|
||||
}
|
||||
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'fp-meta';
|
||||
meta.innerHTML =
|
||||
'<span class="fp-name">' + esc(file.name) + '</span>' +
|
||||
'<span class="fp-size">' + humanSize(file.size) + '</span>';
|
||||
item.appendChild(meta);
|
||||
container.appendChild(item);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* ── Bootstrap ────────────────────────────────────────────────────────── */
|
||||
|
||||
function init() {
|
||||
initFileQueue();
|
||||
initExistingFilesSortable();
|
||||
initLegacyPreviews();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
// Bootstrap on page load
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', window.XamxamInitFileUploads);
|
||||
else window.XamxamInitFileUploads();
|
||||
|
||||
Reference in New Issue
Block a user