mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
feat: add file display to forms and recap pages
- Live file preview on all file inputs (file-field partial, edit template): thumbnails for images, emoji icons for PDF/video/zip/vtt, filename + size - New file-preview.js wired via $extraJs in add.php / edit.php and direct <script> in partage/index.php; $extraJs support added to head.php - admin/recapitulatif.php: replace plain table with rich file list — image thumbnails linked to media.php, type badges, human-readable size, date - partage/recapitulatif.php: full rewrite — shows thesis metadata + files list with same rich display (no media links for student privacy) - form.css: new sections for .file-preview-list (live preview) and .recap-file-list / .recap-dl / .partage-recap (recap pages)
This commit is contained in:
Pontoporeia
@@ -540,6 +540,190 @@ label:has(+ div > input:required)::after {
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
/* ── Live file-input preview (.file-preview-list) ──────────────────────── */
|
||||
.file-preview-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-2xs);
|
||||
}
|
||||
|
||||
.file-preview-list:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fp-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
min-width: 0;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.fp-thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fp-icon {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fp-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fp-name {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fp-size {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
|
||||
.recap-file-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.recap-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.recap-file-thumb-link {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recap-file-thumb {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.recap-file-icon {
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recap-file-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2xs) var(--space-s);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.recap-file-name {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a.recap-file-name {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
a.recap-file-name:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.recap-file-type-badge {
|
||||
font-size: var(--step--2);
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recap-file-size,
|
||||
.recap-file-date {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Partage recap page ─────────────────────────────────────────────────── */
|
||||
.partage-recap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-l);
|
||||
}
|
||||
|
||||
.recap-section {
|
||||
border-top: 1px solid var(--border-primary);
|
||||
padding-top: var(--space-m);
|
||||
}
|
||||
|
||||
.recap-section h2 {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--space-s);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.recap-dl {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: var(--space-2xs) var(--space-s);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recap-dl dt {
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.recap-dl dd {
|
||||
font-size: var(--step--1);
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Thanks page ────────────────────────────────────────────────────────── */
|
||||
.thanks-student-page {
|
||||
display: flex;
|
||||
|
||||
96
app/public/assets/js/file-preview.js
Normal file
96
app/public/assets/js/file-preview.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
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(function (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 = function (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(function (input) {
|
||||
var containerId = input.getAttribute('data-preview');
|
||||
var container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
input.addEventListener('change', function () {
|
||||
renderPreview(input, container);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user