mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
refactor: unify FilePond edit previews + clean upload UI and shared fragments
* Move shared `fichiers-fragment.php` from `partage/` to `templates/partials/form/` and update all include/require references * `.gitignore`: exclude SQLite WAL/SHM journal files * FilePond UI: * change uploaded file block border state from yellow to green * restyle image previews to use site light-theme colors * Edit mode: * remove custom existing-file preview list implementation * preload existing files directly into FilePond pools * include `cover` and `note_intention` assets in FilePond-managed state * Remove obsolete upload progress bar UI and related JS includes * Remove deprecated `Écriture` + `Image` format types from upload flow/configuration
This commit is contained in:
Pontoporeia
@@ -1,266 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* fichiers-fragment.php (partage & admin)
|
||||
*
|
||||
* Returns the combined Format(s) + Fichiers block.
|
||||
*
|
||||
* All slots (Site web, Vidéo, Audio) are always visible — decorelated from
|
||||
* the format checkboxes. The checkboxes serve only as metadata selectors;
|
||||
* they no longer trigger HTMX swaps.
|
||||
*
|
||||
* Expected POST:
|
||||
* formats[] — array of selected format_type IDs
|
||||
* website_url — current value (repopulation)
|
||||
* website_label — current value (repopulation)
|
||||
* admin_mode — '1' for admin context (removes required attrs)
|
||||
*/
|
||||
|
||||
require_once APP_ROOT . '/src/PeerTubeService.php';
|
||||
|
||||
if (!function_exists('formatFileSize')) {
|
||||
function formatFileSize($bytes) {
|
||||
if ($bytes >= 1073741824) {
|
||||
return number_format($bytes / 1073741824, 2) . ' GB';
|
||||
} elseif ($bytes >= 1048576) {
|
||||
return number_format($bytes / 1048576, 2) . ' MB';
|
||||
} elseif ($bytes >= 1024) {
|
||||
return number_format($bytes / 1024, 2) . ' KB';
|
||||
} else {
|
||||
return $bytes . ' bytes';
|
||||
}
|
||||
}
|
||||
} // if (!function_exists('formatFileSize'))
|
||||
|
||||
$_ptDb = Database::getInstance();
|
||||
$peerTubeEnabled = PeerTubeService::isEnabled($_ptDb);
|
||||
$peerTubeSettings = PeerTubeService::getSettings($_ptDb);
|
||||
|
||||
$db = $_ptDb->getConnection();
|
||||
|
||||
$allFormats = $db->query('SELECT id, name FROM format_types ORDER BY sort_order, id')
|
||||
->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
$selectedFormats = isset($_POST['formats']) && is_array($_POST['formats'])
|
||||
? array_map('intval', $_POST['formats'])
|
||||
: [];
|
||||
|
||||
$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
|
||||
$editMode = ($_POST['edit_mode'] ?? '0') === '1';
|
||||
|
||||
$websiteUrl = htmlspecialchars($_POST['website_url'] ?? '');
|
||||
$websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
|
||||
?>
|
||||
<!-- ═══════════════════ Format(s) + Fichiers ═══════════════════ -->
|
||||
<div id="format-fichiers-block">
|
||||
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
|
||||
<input type="hidden" name="edit_mode" value="<?= $editMode ? '1' : '0' ?>">
|
||||
<?php if ($editMode && ($_POST['_cover'] ?? null)): ?>
|
||||
<input type="hidden" name="_cover" value="<?= htmlspecialchars($_POST['_cover']) ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ═══════════════════ Format(s) — sticky ═══════════════════ -->
|
||||
<fieldset id="fieldset-formats">
|
||||
<legend>Format(s)</legend>
|
||||
<div>
|
||||
<span class="admin-row-label">Format(s) du TFE :<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></span>
|
||||
<fieldset class="admin-checkbox-group"
|
||||
<?= !$adminMode ? 'required aria-required="true"' : '' ?> >
|
||||
<legend class="sr-only">Format(s) du TFE</legend>
|
||||
<ul>
|
||||
<?php foreach ($allFormats as $opt): ?>
|
||||
<li>
|
||||
<label class="admin-checkbox-label">
|
||||
<input type="checkbox"
|
||||
name="formats[]"
|
||||
value="<?= htmlspecialchars((string)$opt['id']) ?>"
|
||||
<?= in_array((int)$opt['id'], $selectedFormats, true) ? 'checked' : '' ?>>
|
||||
<?= htmlspecialchars($opt['name']) ?>
|
||||
</label>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- ═══════════════════ Fichiers ═══════════════════ -->
|
||||
<fieldset>
|
||||
<legend>Fichiers</legend>
|
||||
|
||||
<?php
|
||||
// Existing files + cover preview (edit mode only)
|
||||
$_efiles = $currentFiles ?? [];
|
||||
$_cover = $_POST['_cover'] ?? null;
|
||||
if ($editMode && (!empty($_efiles) || $_cover)):
|
||||
?>
|
||||
<div class="admin-form-group">
|
||||
<ul id="existing-files-sortable" class="admin-file-list" role="list">
|
||||
<?php if ($_cover): ?>
|
||||
<li class="admin-file-list-item">
|
||||
<figure class="admin-file-figure">
|
||||
<img src="/media?path=<?= urlencode($_cover) ?>"
|
||||
alt="Couverture actuelle" class="admin-file-thumb">
|
||||
<figcaption class="admin-file-caption">
|
||||
<span class="admin-file-name">Couverture</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<input type="hidden" name="remove_cover" value="0">
|
||||
<button type="button"
|
||||
class="admin-icon-btn admin-icon-btn--delete"
|
||||
title="Supprimer"
|
||||
onclick="this.previousElementSibling.value='1';this.closest('li').style.opacity='0.4';this.disabled=true;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
||||
</button>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
$_thesisFilesList = array_values(array_filter($_efiles, fn($f) => $f["file_type"] !== "cover"));
|
||||
foreach ($_thesisFilesList as $_f):
|
||||
$_fPath = $_f["file_path"] ?? "";
|
||||
$_fIsPeerTube = str_starts_with($_fPath, "peertube_ids:");
|
||||
$_fMime = $_f["mime_type"] ?? "";
|
||||
$_fExt = strtolower(pathinfo($_fPath, PATHINFO_EXTENSION));
|
||||
$_fType = $_f["file_type"] ?? "other";
|
||||
$_fLabel = $_f["display_label"] ?? "";
|
||||
$_fIsImage = str_starts_with($_fMime, "image/") || in_array($_fExt, ["jpg","jpeg","png","gif","webp"]);
|
||||
$_fIcon = match (true) {
|
||||
$_fIsPeerTube && $_fType === "video" => "🎬",
|
||||
$_fIsPeerTube && $_fType === "audio" => "🔊",
|
||||
$_fType === "cover" => "🖼️",
|
||||
$_fType === "note_intention" => "📝",
|
||||
$_fType === "main" || $_fMime === "application/pdf" || $_fExt === "pdf" => "📄",
|
||||
$_fType === "video" || str_starts_with($_fMime, "video/") || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
|
||||
$_fType === "audio" || str_starts_with($_fMime, "audio/") || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
|
||||
$_fIsImage => "🖼️",
|
||||
$_fType === "caption" || $_fExt === "vtt" => "💬",
|
||||
$_fType === "annex" => "📎",
|
||||
$_fType === "website" => "🌐",
|
||||
default => "📎",
|
||||
};
|
||||
$_fIsExternal = str_starts_with($_fPath, "http://") || str_starts_with($_fPath, "https://");
|
||||
$_fLinkHref = $_fIsPeerTube ? "#" : ($_fIsExternal ? htmlspecialchars($_fPath) : "/media?path=" . urlencode($_fPath));
|
||||
?>
|
||||
<li class="admin-file-list-item" data-file-id="<?= (int)$_f["id"] ?>">
|
||||
<input type="hidden" name="file_sort_order[]" value="<?= (int)$_f["id"] ?>">
|
||||
<figure class="admin-file-figure">
|
||||
<?php if ($_fIsImage && !$_fIsPeerTube): ?>
|
||||
<img src="/media?path=<?= urlencode($_fPath) ?>" alt="<?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>" class="admin-file-thumb" loading="lazy">
|
||||
<?php else: ?>
|
||||
<span class="admin-file-icon"><?= $_fIcon ?></span>
|
||||
<?php endif; ?>
|
||||
<figcaption class="admin-file-caption">
|
||||
<div class="admin-file-name-row">
|
||||
<a href="<?= $_fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
|
||||
<?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php if ($_fIsPeerTube): ?>
|
||||
<span class="admin-file-peertube-id">ID : <?= htmlspecialchars(substr($_fPath, strlen("peertube_ids:"))) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($_fLabel): ?>
|
||||
<span class="admin-file-label"><?= htmlspecialchars($_fLabel) ?></span>
|
||||
<?php endif; ?>
|
||||
<span class="admin-file-meta-row">
|
||||
<span class="admin-file-meta"><?= htmlspecialchars($_fType) ?></span>
|
||||
<?php if (!empty($_f["file_size"]) && $_f["file_size"] > 0): ?>
|
||||
<span class="admin-file-meta"><?= formatFileSize($_f["file_size"]) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($_f["uploaded_at"])): ?>
|
||||
<span class="admin-file-meta"><?= date('d/m/Y H:i', strtotime($_f["uploaded_at"])) ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<input type="hidden" name="delete_files[]" value="<?= (int)$_f["id"] ?>" disabled>
|
||||
<button type="button"
|
||||
class="admin-icon-btn admin-icon-btn--delete"
|
||||
title="Supprimer"
|
||||
onclick="this.previousElementSibling.disabled=false;this.closest('li').style.opacity='0.4';this.disabled=true;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
||||
</button>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ── 1. Couverture ── -->
|
||||
<?php
|
||||
$_cover = $_POST['_cover'] ?? null;
|
||||
if (!$editMode || !$_cover): ?>
|
||||
<div class="admin-form-group">
|
||||
<label for="couverture">Image de couverture (optionnel)</label>
|
||||
<div class="admin-file-input">
|
||||
<input type="file" id="couverture"
|
||||
name="couverture"
|
||||
class="tfe-file-picker tfe-file-picker--single"
|
||||
data-queue-type="cover">
|
||||
<small>JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; unset($_cover); ?>
|
||||
|
||||
<!-- ── 2. Note d'intention ── -->
|
||||
<div class="admin-form-group">
|
||||
<label for="note_intention">Note d'intention<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||
<div class="admin-file-input">
|
||||
<input type="file" id="note_intention"
|
||||
name="note_intention"
|
||||
class="tfe-file-picker tfe-file-picker--single"
|
||||
data-queue-type="note_intention"
|
||||
<?= !$adminMode ? 'required' : '' ?>>
|
||||
<small>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>.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 3. TFE (all files: PDF, images, video, audio, VTT, archives) ── -->
|
||||
<div class="admin-form-group admin-files-fieldgroup">
|
||||
<label for="tfe-files-input">TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||
<div class="admin-file-input">
|
||||
<input type="file" id="tfe-files-input"
|
||||
name="queue_file[tfe][]"
|
||||
multiple
|
||||
class="tfe-file-picker"
|
||||
data-queue-type="tfe"
|
||||
<?= !$adminMode ? 'required' : '' ?>
|
||||
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForTfe ?? []), ENT_QUOTES) ?>'>
|
||||
<small class="admin-file-hint">
|
||||
PDF (max 100 MB) · Images (max 500 MB) · Vidéo & Audio (max 2 GB) · VTT · Archives (max 500 MB).
|
||||
<br>Glissez pour réordonner.
|
||||
<?php if ($peerTubeEnabled): ?>
|
||||
<br>Vidéos et audio hébergés sur <a href="<?= htmlspecialchars($peerTubeSettings['instance_url']) ?>" target="_blank" rel="noopener">PeerTube</a>.
|
||||
<?php endif; ?>
|
||||
<br>PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 4. Annexes ── -->
|
||||
<div id="annexes-input-block">
|
||||
<input type="hidden" name="has_annexes" value="0">
|
||||
<div class="admin-form-group admin-files-fieldgroup">
|
||||
<label for="annexe-files-input">Annexes (optionnel)</label>
|
||||
<div class="admin-file-input">
|
||||
<input type="file" id="annexe-files-input"
|
||||
name="queue_file[annexe][]"
|
||||
multiple
|
||||
class="tfe-file-picker"
|
||||
data-queue-type="annexe">
|
||||
<small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 500 MB. Glissez pour réordonner.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 5. Site web url ── -->
|
||||
<div id="slot-siteweb" class="admin-form-group">
|
||||
<label for="website_url">URL du site (optionnel)</label>
|
||||
<div class="admin-file-input">
|
||||
<input type="url" id="website_url" name="website_url"
|
||||
value="<?= $websiteUrl ?>"
|
||||
placeholder="https://mon-tfe.erg.be">
|
||||
<small>Le TFE sera affiché comme un site embarqué sur sa page publique.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset><!-- /Fichiers -->
|
||||
</div><!-- #format-fichiers-block -->
|
||||
@@ -48,7 +48,7 @@ if ($slug === 'validate-file-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST')
|
||||
// Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
|
||||
if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
App::boot();
|
||||
require_once __DIR__ . '/fichiers-fragment.php';
|
||||
require_once APP_ROOT . '/templates/partials/form/fichiers-fragment.php';
|
||||
exit;
|
||||
}
|
||||
|
||||
@@ -411,7 +411,6 @@ function renderShareLinkForm(string $slug, array $link): void
|
||||
<script src="<?= App::assetV('/assets/js/vendor/filepond-plugin-image-exif-orientation.min.js') ?>" defer></script>
|
||||
<script src="<?= App::assetV('/assets/js/app/file-upload-filepond.js') ?>" defer></script>
|
||||
<script src="<?= App::assetV('/assets/js/app/beforeunload-guard.js') ?>" defer></script>
|
||||
<script src="<?= App::assetV('/assets/js/app/upload-progress.js') ?>" defer></script>
|
||||
<script src="<?= App::assetV('/assets/js/app/pill-search.js') ?>" defer></script>
|
||||
<script src="<?= App::assetV('/assets/js/vendor/htmx.min.js') ?>" defer></script>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user