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:
@@ -56,9 +56,7 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
||||||
max-width: 1100px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-inline: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-body main > h1,
|
.admin-body main > h1,
|
||||||
|
|||||||
@@ -23,8 +23,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 180px 1fr;
|
grid-template-columns: 180px 1fr;
|
||||||
gap: var(--space-2xl);
|
gap: var(--space-2xl);
|
||||||
max-width: 860px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -292,6 +292,12 @@ header {
|
|||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
main * {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
|
|||||||
@@ -416,10 +416,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.student-body main {
|
.student-body main {
|
||||||
max-width: 720px;
|
|
||||||
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-inline: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Share-link error page ──────────────────────────────────────────────── */
|
/* ── Share-link error page ──────────────────────────────────────────────── */
|
||||||
|
|||||||
@@ -17,7 +17,6 @@
|
|||||||
grid-template-columns: 1fr 1.4fr;
|
grid-template-columns: 1fr 1.4fr;
|
||||||
gap: var(--space-xl);
|
gap: var(--space-xl);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
/**
|
|
||||||
* Live file-input preview.
|
|
||||||
* For every <input type="file" data-preview="CONTAINER_ID"> found on the page,
|
|
||||||
* renders a list of selected files with thumbnails (images) or file-type icons
|
|
||||||
* (PDFs, videos, archives…) and the filename + size.
|
|
||||||
*/
|
|
||||||
(() => {
|
|
||||||
const ICON = {
|
|
||||||
pdf: '📄',
|
|
||||||
video: '🎬',
|
|
||||||
zip: '🗜️',
|
|
||||||
vtt: '💬',
|
|
||||||
image: '🖼️',
|
|
||||||
other: '📎',
|
|
||||||
};
|
|
||||||
|
|
||||||
function iconFor(file) {
|
|
||||||
const t = file.type;
|
|
||||||
if (t.startsWith('image/')) return ICON.image;
|
|
||||||
if (t === 'application/pdf') return ICON.pdf;
|
|
||||||
if (t.startsWith('video/')) return ICON.video;
|
|
||||||
if (t === 'application/zip' || t === 'application/x-zip-compressed') return ICON.zip;
|
|
||||||
if (file.name.endsWith('.vtt')) 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 renderPreview(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">' + escHtml(file.name) + '</span>' +
|
|
||||||
'<span class="fp-size">' + humanSize(file.size) + '</span>';
|
|
||||||
item.appendChild(meta);
|
|
||||||
|
|
||||||
container.appendChild(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function escHtml(str) {
|
|
||||||
return str
|
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>')
|
|
||||||
.replace(/"/g, '"');
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
document.querySelectorAll('input[type="file"][data-preview]').forEach((input) => {
|
|
||||||
const containerId = input.getAttribute('data-preview');
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
input.addEventListener('change', () => {
|
|
||||||
renderPreview(input, container);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
|
||||||
} else {
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
@@ -1,274 +1,148 @@
|
|||||||
/**
|
/**
|
||||||
* file-upload-queue.js
|
* 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)
|
* Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
|
||||||
* - Renders each selected file as a sortable row with icon, name, size
|
* after swap without a global event listener.
|
||||||
* 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.
|
|
||||||
*/
|
*/
|
||||||
(() => {
|
window.XamxamInitFileUploads = function () {
|
||||||
/* ── Helpers ──────────────────────────────────────────────────────────── */
|
console.log('[file-upload-queue] XamxamInitFileUploads called');
|
||||||
|
var ICON = {
|
||||||
const ICONS = {
|
pdf: '\uD83D\uDCC4', video: '\uD83C\uDFAC', audio: '\uD83D\uDD0A',
|
||||||
pdf: '📄',
|
zip: '\uD83D\uDDDC\uFE0F', vtt: '\uD83D\uDCAC', image: '\uD83D\uDDBC\uFE0F', other: '\uD83D\uDCCE'
|
||||||
video: '🎬',
|
|
||||||
audio: '🔊',
|
|
||||||
zip: '🗜️',
|
|
||||||
vtt: '💬',
|
|
||||||
image: '🖼️',
|
|
||||||
other: '📎',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function iconFor(file) {
|
function iconFor(file) {
|
||||||
const t = file.type || '';
|
var t = file.type || '', n = file.name.toLowerCase();
|
||||||
const n = file.name.toLowerCase();
|
if (/^image\//.test(t)) return ICON.image;
|
||||||
if (t.startsWith('image/')) return ICONS.image;
|
if (t === 'application/pdf' || /\.pdf$/.test(n)) return ICON.pdf;
|
||||||
if (t === 'application/pdf' || n.endsWith('.pdf')) return ICONS.pdf;
|
if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
|
||||||
if (t.startsWith('video/') || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICONS.video;
|
if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
|
||||||
if (t.startsWith('audio/') || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICONS.audio;
|
if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
|
||||||
if (t === 'application/zip' || /\.(zip|tar|gz|tgz)$/.test(n)) return ICONS.zip;
|
if (/\.vtt$/.test(n)) return ICON.vtt;
|
||||||
if (n.endsWith('.vtt')) return ICONS.vtt;
|
return ICON.other;
|
||||||
return ICONS.other;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function humanSize(bytes) {
|
function humanSize(b) {
|
||||||
if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(2)} GB`;
|
return b >= 1073741824 ? (b / 1073741824).toFixed(2) + ' GB'
|
||||||
if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(2)} MB`;
|
: b >= 1048576 ? (b / 1048576).toFixed(2) + ' MB'
|
||||||
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
: b >= 1024 ? (b / 1024).toFixed(1) + ' KB'
|
||||||
return `${bytes} B`;
|
: b + ' B';
|
||||||
}
|
}
|
||||||
|
|
||||||
function esc(str) {
|
function esc(s) { return s.replace(/[&<>"]/g, function(c){ return {'&':'&','<':'<','>':'>','"':'"'}[c]; }); }
|
||||||
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── DataTransfer-backed file list ────────────────────────────────────── */
|
// ── 1. TFE multi-file queue ────────────────────────────────────────────
|
||||||
// We keep a parallel array so we can freely re-order and remove files
|
var picker = document.getElementById('tfe-files-input');
|
||||||
// then reconstruct a proper FileList via DataTransfer when needed.
|
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') {
|
if (typeof Sortable !== 'undefined') {
|
||||||
_sortable = Sortable.create(queue, {
|
Sortable.create(queue, { animation: 150, handle: '.fq-drag-handle', ghostClass: 'fq-ghost',
|
||||||
animation: 150,
|
onEnd: function () {
|
||||||
handle: '.fq-drag-handle',
|
var items = queue.querySelectorAll('.fq-item');
|
||||||
ghostClass: 'fq-ghost',
|
var newArr = Array.prototype.map.call(items, function (li) { return fileArray[parseInt(li.getAttribute('data-idx'), 10)]; });
|
||||||
onEnd: () => reorderFiles(),
|
fileArray = newArr;
|
||||||
|
renderQueue();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
picker.addEventListener('change', () => {
|
picker.onchange = function () {
|
||||||
const newFiles = Array.from(picker.files);
|
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(newFiles);
|
fileArray = fileArray.concat(Array.from(picker.files));
|
||||||
renderQueue();
|
console.log('[file-upload-queue] fileArray after concat, length:', fileArray.length);
|
||||||
// Reset input so the same file can be selected again if needed
|
|
||||||
picker.value = '';
|
picker.value = '';
|
||||||
});
|
renderQueue();
|
||||||
|
};
|
||||||
|
|
||||||
function renderQueue() {
|
function renderQueue() {
|
||||||
queue.innerHTML = '';
|
queue.innerHTML = '';
|
||||||
|
if (!fileArray.length) { empty.style.display = ''; injectHiddenFields([]); return; }
|
||||||
if (fileArray.length === 0) {
|
|
||||||
empty.style.display = '';
|
|
||||||
syncInputFiles(picker, []);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
empty.style.display = 'none';
|
empty.style.display = 'none';
|
||||||
|
fileArray.forEach(function (file, idx) {
|
||||||
fileArray.forEach((file, idx) => {
|
var li = document.createElement('li');
|
||||||
const li = document.createElement('li');
|
|
||||||
li.className = 'fq-item';
|
li.className = 'fq-item';
|
||||||
li.setAttribute('data-idx', idx);
|
li.setAttribute('data-idx', idx);
|
||||||
|
|
||||||
li.innerHTML =
|
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-icon">' + iconFor(file) + '</span>' +
|
||||||
'<span class="fq-info">' +
|
'<span class="fq-info"><span class="fq-name">' + esc(file.name) + '</span>' +
|
||||||
'<span class="fq-name">' + esc(file.name) + '</span>' +
|
|
||||||
'<span class="fq-size">' + humanSize(file.size) + '</span>' +
|
'<span class="fq-size">' + humanSize(file.size) + '</span>' +
|
||||||
'<input type="text" class="fq-label admin-file-label-input" ' +
|
'<input type="text" class="fq-label admin-file-label-input" placeholder="L\u00e9gende / description (optionnel)"></span>' +
|
||||||
'placeholder="Légende / description (optionnel)">' +
|
'<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">✕</button>';
|
||||||
'</span>' +
|
li.querySelector('.fq-remove').onclick = (function (i) { return function () { fileArray.splice(i, 1); renderQueue(); }; })(idx);
|
||||||
'<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();
|
|
||||||
});
|
|
||||||
|
|
||||||
queue.appendChild(li);
|
queue.appendChild(li);
|
||||||
});
|
});
|
||||||
|
injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item')));
|
||||||
syncInputFiles(picker, fileArray);
|
|
||||||
injectHiddenFields();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function reorderFiles() {
|
function injectHiddenFields(items) {
|
||||||
// Re-sync fileArray to match current DOM order
|
var form = picker.closest('form');
|
||||||
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');
|
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
for (const el of form.querySelectorAll('.fq-hidden-label, .fq-hidden-order')) el.remove();
|
form.querySelectorAll('.fq-hidden-label, .fq-hidden-order').forEach(function (el) { el.remove(); });
|
||||||
|
items.forEach(function (li, sortedIdx) {
|
||||||
// Inject current labels and order indices
|
var label = li.querySelector('.fq-label');
|
||||||
// We use the queue DOM (post-sort) as the source of truth.
|
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);
|
||||||
const items = Array.from(queue.querySelectorAll('.fq-item'));
|
var oInp = document.createElement('input'); oInp.type = 'hidden'; oInp.name = 'file_orders[]'; oInp.value = sortedIdx + 1; oInp.className = 'fq-hidden-order'; form.appendChild(oInp);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Before form submit, inject hidden fields so labels are up-to-date
|
// On submit, refresh hidden fields from current queue state
|
||||||
const form = picker.closest('form');
|
var form = picker.closest('form');
|
||||||
if (form) {
|
if (form) form.addEventListener('submit', function () { injectHiddenFields(Array.from(queue.querySelectorAll('.fq-item'))); });
|
||||||
form.addEventListener('submit', () => {
|
|
||||||
syncInputFiles(picker, fileArray);
|
|
||||||
injectHiddenFields();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Existing-files sortable (edit form only) ─────────────────────────── */
|
// ── 2. Single-file previews (data-preview attribute) ────────────────────
|
||||||
|
document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
|
||||||
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);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 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;
|
if (input.id === 'tfe-files-input') return;
|
||||||
|
console.log('[file-upload-queue] binding preview for', input.id, 'multiple=', input.multiple);
|
||||||
const containerId = input.getAttribute('data-preview');
|
var container = document.getElementById(input.getAttribute('data-preview'));
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
input.onchange = function () {
|
||||||
input.addEventListener('change', () => {
|
|
||||||
renderLegacyPreview(input, container);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLegacyPreview(input, container) {
|
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
const files = Array.from(input.files);
|
Array.from(input.files).forEach(function (file) {
|
||||||
if (!files.length) return;
|
var item = document.createElement('div'); item.className = 'fp-item';
|
||||||
|
if (/^image\//.test(file.type)) {
|
||||||
files.forEach((file) => {
|
var img = document.createElement('img'); img.className = 'fp-thumb'; img.alt = file.name;
|
||||||
const item = document.createElement('div');
|
var reader = new FileReader();
|
||||||
item.className = 'fp-item';
|
reader.onload = function (e) { img.src = e.target.result; };
|
||||||
|
|
||||||
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);
|
reader.readAsDataURL(file);
|
||||||
item.appendChild(img);
|
item.appendChild(img);
|
||||||
} else {
|
} else {
|
||||||
const icon = document.createElement('span');
|
var ic = document.createElement('span'); ic.className = 'fp-icon'; ic.textContent = iconFor(file);
|
||||||
icon.className = 'fp-icon';
|
item.appendChild(ic);
|
||||||
icon.textContent = iconFor(file);
|
|
||||||
item.appendChild(icon);
|
|
||||||
}
|
}
|
||||||
|
var meta = document.createElement('span'); meta.className = 'fp-meta';
|
||||||
const meta = document.createElement('span');
|
meta.innerHTML = '<span class="fp-name">' + esc(file.name) + '</span><span class="fp-size">' + humanSize(file.size) + '</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);
|
item.appendChild(meta);
|
||||||
container.appendChild(item);
|
container.appendChild(item);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
});
|
||||||
|
|
||||||
/* ── Bootstrap ────────────────────────────────────────────────────────── */
|
// ── 3. Existing-files sortable (edit mode) ──────────────────────────────
|
||||||
|
var sortList = document.getElementById('existing-files-sortable');
|
||||||
function init() {
|
if (sortList && typeof Sortable !== 'undefined') {
|
||||||
initFileQueue();
|
Sortable.create(sortList, { animation: 150, handle: '.admin-file-drag-handle', ghostClass: 'fq-ghost',
|
||||||
initExistingFilesSortable();
|
onEnd: function () {
|
||||||
initLegacyPreviews();
|
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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
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();
|
||||||
|
|||||||
@@ -106,25 +106,31 @@ $hxPost = $adminMode ? '/admin/fichiers-fragment.php' : '/partage/fichiers-fragm
|
|||||||
<legend>Fichiers</legend>
|
<legend>Fichiers</legend>
|
||||||
|
|
||||||
<!-- ── 1. Couverture (always) ── -->
|
<!-- ── 1. Couverture (always) ── -->
|
||||||
|
<div>
|
||||||
<?php
|
<?php
|
||||||
$name = 'couverture';
|
$name = 'couverture';
|
||||||
$label = 'Image de couverture (optionnel) :';
|
$label = 'Image de couverture (optionnel) :';
|
||||||
$accept = 'image/jpeg,image/png,image/webp';
|
$accept = 'image/jpeg,image/png,image/webp';
|
||||||
$hint = 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
|
$hint = 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
|
||||||
$required = false;
|
$required = false;
|
||||||
|
$id = 'couverture';
|
||||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
include APP_ROOT . '/templates/partials/form/file-field.php';
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ── 2. Note d'intention (always) ── -->
|
<!-- ── 2. Note d'intention (always) ── -->
|
||||||
|
<div>
|
||||||
<?php
|
<?php
|
||||||
$name = 'note_intention';
|
$name = 'note_intention';
|
||||||
$label = 'Note d\'intention :';
|
$label = 'Note d\'intention :';
|
||||||
$accept = '.pdf';
|
$accept = '.pdf';
|
||||||
$hint = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
|
$hint = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
|
||||||
$hintRaw = true; // allow the <a> tag through
|
$hintRaw = true;
|
||||||
$required = !$adminMode;
|
$required = !$adminMode;
|
||||||
|
$id = 'note_intention';
|
||||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
include APP_ROOT . '/templates/partials/form/file-field.php';
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ── 3. TFE (always) ── -->
|
<!-- ── 3. TFE (always) ── -->
|
||||||
<div class="admin-form-group admin-files-fieldgroup">
|
<div class="admin-form-group admin-files-fieldgroup">
|
||||||
@@ -162,6 +168,7 @@ $hxPost = $adminMode ? '/admin/fichiers-fragment.php' : '/partage/fichiers-fragm
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<?php if ($hasAnnexesChecked): ?>
|
<?php if ($hasAnnexesChecked): ?>
|
||||||
|
<div>
|
||||||
<?php
|
<?php
|
||||||
$name = 'annexes';
|
$name = 'annexes';
|
||||||
$label = 'Annexes :';
|
$label = 'Annexes :';
|
||||||
@@ -171,6 +178,7 @@ $hxPost = $adminMode ? '/admin/fichiers-fragment.php' : '/partage/fichiers-fragm
|
|||||||
$multiple = true;
|
$multiple = true;
|
||||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
include APP_ROOT . '/templates/partials/form/file-field.php';
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- ── Format-specific extras ── -->
|
<!-- ── Format-specific extras ── -->
|
||||||
@@ -260,4 +268,5 @@ $hxPost = $adminMode ? '/admin/fichiers-fragment.php' : '/partage/fichiers-fragm
|
|||||||
|
|
||||||
</fieldset><!-- /Fichiers -->
|
</fieldset><!-- /Fichiers -->
|
||||||
|
|
||||||
|
<script>if(window.XamxamInitFileUploads)window.XamxamInitFileUploads()</script>
|
||||||
</div><!-- #format-fichiers-block -->
|
</div><!-- #format-fichiers-block -->
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<th scope="col">Lien</th>
|
<th scope="col">Lien</th>
|
||||||
<th scope="col">Objet</th>
|
<th scope="col">Objet</th>
|
||||||
|
<th scope="col">Année</th>
|
||||||
<th scope="col">Statut</th>
|
<th scope="col">Statut</th>
|
||||||
<th scope="col">Mot de passe</th>
|
<th scope="col">Mot de passe</th>
|
||||||
<th scope="col">Utilisations</th>
|
<th scope="col">Utilisations</th>
|
||||||
@@ -40,6 +41,9 @@
|
|||||||
$created = date('d/m/Y H:i', strtotime($link['created_at']));
|
$created = date('d/m/Y H:i', strtotime($link['created_at']));
|
||||||
$expires = $link['expires_at'] ? date('d/m/Y', strtotime($link['expires_at'])) : '-';
|
$expires = $link['expires_at'] ? date('d/m/Y', strtotime($link['expires_at'])) : '-';
|
||||||
$hasLinkPassword = !empty($link['password_hash']);
|
$hasLinkPassword = !empty($link['password_hash']);
|
||||||
|
$linkName = $link['name'] ?? '';
|
||||||
|
$linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
|
||||||
|
$linkLockedYear = $link['locked_year'] ?? null;
|
||||||
?>
|
?>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@@ -53,6 +57,13 @@
|
|||||||
<span style="color:var(--text-secondary);font-size:var(--step--2);">Tous</span>
|
<span style="color:var(--text-secondary);font-size:var(--step--2);">Tous</span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
<?php if ($link['locked_year']): ?>
|
||||||
|
<span class="status-badge" style="background:var(--accent-green-muted-bg, #e6f7ec);color:var(--accent-green, #1a7f4b);border:1px solid var(--accent-green, #1a7f4b);">🔒 <?= htmlspecialchars((string)$link['locked_year']) ?></span>
|
||||||
|
<?php else: ?>
|
||||||
|
<span style="color:var(--text-secondary);font-size:var(--step--2);">Libre</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<?php if ($isExpired): ?>
|
<?php if ($isExpired): ?>
|
||||||
<span class="status-badge status-pending"><?= $statusLabel ?></span>
|
<span class="status-badge status-pending"><?= $statusLabel ?></span>
|
||||||
@@ -86,6 +97,11 @@
|
|||||||
<?= $link['is_active'] ? '⏸' : '▶' ?>
|
<?= $link['is_active'] ? '⏸' : '▶' ?>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<button type="button" class="btn btn--sm btn--yellow admin-btn-edit"
|
||||||
|
onclick="openEditLinkDialog(<?= $link['id'] ?>, <?= htmlspecialchars(json_encode($linkName), ENT_QUOTES) ?>, <?= htmlspecialchars(json_encode($linkExpiresVal), ENT_QUOTES) ?>, <?= htmlspecialchars(json_encode($linkLockedYear), ENT_QUOTES) ?>)"
|
||||||
|
title="Modifier le lien">
|
||||||
|
✏️
|
||||||
|
</button>
|
||||||
<button type="button" class="btn btn--sm btn--yellow admin-btn-edit"
|
<button type="button" class="btn btn--sm btn--yellow admin-btn-edit"
|
||||||
onclick="openPasswordDialog(<?= $link['id'] ?>, <?= $hasLinkPassword ? 'true' : 'false' ?>)"
|
onclick="openPasswordDialog(<?= $link['id'] ?>, <?= $hasLinkPassword ? 'true' : 'false' ?>)"
|
||||||
title="Modifier le mot de passe">
|
title="Modifier le mot de passe">
|
||||||
@@ -324,6 +340,19 @@
|
|||||||
<input type="datetime-local" id="create-expires" name="expires_at">
|
<input type="datetime-local" id="create-expires" name="expires_at">
|
||||||
<small>Laissez vide pour qu'il n'expire jamais.</small>
|
<small>Laissez vide pour qu'il n'expire jamais.</small>
|
||||||
</div>
|
</div>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Année académique verrouillée</legend>
|
||||||
|
<div>
|
||||||
|
<label for="create-locked-year">Année (optionnel)</label>
|
||||||
|
<input type="number" id="create-locked-year" name="locked_year"
|
||||||
|
min="2000" max="<?= date('Y') + 3 ?>" placeholder="<?= date('Y') ?>">
|
||||||
|
<small style="max-width:42ch;">
|
||||||
|
Si renseignée, le formulaire masquera le champ Année et forcera cette valeur.
|
||||||
|
Ainsi les identifiants TFE (ex: <strong><?= date('Y') ?>-001</strong>) correspondront
|
||||||
|
à la bonne année. Laissez vide pour laisser l'étudiant·e choisir.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
<div class="admin-form-footer">
|
<div class="admin-form-footer">
|
||||||
<button type="submit" class="btn btn--primary">Créer le lien</button>
|
<button type="submit" class="btn btn--primary">Créer le lien</button>
|
||||||
<button type="button" class="btn btn--secondary"
|
<button type="button" class="btn btn--secondary"
|
||||||
|
|||||||
@@ -30,10 +30,28 @@ $promoteurUlbConditional = $promoteurUlbConditional ?? false;
|
|||||||
$adminMode = $adminMode ?? false;
|
$adminMode = $adminMode ?? false;
|
||||||
|
|
||||||
// Add-mode repopulation from flash data
|
// Add-mode repopulation from flash data
|
||||||
$addMode = ($juryPromoteur === null && $juryPromoteurUlb === null && empty($lecteursInternes) && empty($lecteursExternes) && $juryPresident === null);
|
$addMode = ($juryPromoteur === null && empty($juryPromoteurs) && $juryPromoteurUlb === null && empty($juryPromoteursUlb) && empty($lecteursInternes) && empty($lecteursExternes) && $juryPresident === null);
|
||||||
if ($addMode && function_exists('old')) {
|
if ($addMode && function_exists('old')) {
|
||||||
$juryPromoteur = old('jury_promoteur') ?: null;
|
// jury_promoteur may be array (new form) or scalar (legacy)
|
||||||
$juryPromoteurUlb = old('jury_promoteur_ulb_name') ?: null;
|
$promoteursOld = old('jury_promoteur');
|
||||||
|
if (is_array($promoteursOld)) {
|
||||||
|
foreach ($promoteursOld as $name) {
|
||||||
|
$name = trim($name ?? '');
|
||||||
|
if ($name !== '') $juryPromoteurs[] = ['name' => $name];
|
||||||
|
}
|
||||||
|
} elseif (is_string($promoteursOld) && trim($promoteursOld) !== '') {
|
||||||
|
$juryPromoteur = $promoteursOld;
|
||||||
|
}
|
||||||
|
// jury_promoteur_ulb_name may be array (new form) or scalar (legacy)
|
||||||
|
$promoteursUlbOld = old('jury_promoteur_ulb_name');
|
||||||
|
if (is_array($promoteursUlbOld)) {
|
||||||
|
foreach ($promoteursUlbOld as $name) {
|
||||||
|
$name = trim($name ?? '');
|
||||||
|
if ($name !== '') $juryPromoteursUlb[] = ['name' => $name];
|
||||||
|
}
|
||||||
|
} elseif (is_string($promoteursUlbOld) && trim($promoteursUlbOld) !== '') {
|
||||||
|
$juryPromoteurUlb = $promoteursUlbOld;
|
||||||
|
}
|
||||||
$juryPresident = old('jury_president') ?: null;
|
$juryPresident = old('jury_president') ?: null;
|
||||||
for ($i = 0; $i < 10; $i++) {
|
for ($i = 0; $i < 10; $i++) {
|
||||||
$n = old("jury_lecteur_interne:$i");
|
$n = old("jury_lecteur_interne:$i");
|
||||||
|
|||||||
Reference in New Issue
Block a user