feat(dl): gestion des versions (latest + archive) sur la page downloads
This commit is contained in:
+172
-1
@@ -1,5 +1,88 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const cards = Array.from(document.querySelectorAll(".download-card"));
|
||||
const currentVersionLabel = document.querySelector("[data-current-version]");
|
||||
const archiveToggle = document.querySelector("[data-action-toggle-archive]");
|
||||
const versionsArchive = document.querySelector("[data-versions-archive]");
|
||||
const versionsListNode = document.querySelector("[data-versions-list]");
|
||||
const actionAdd = document.querySelector("[data-action-add]");
|
||||
const actionEdit = document.querySelector("[data-action-edit]");
|
||||
|
||||
const VERSIONS_KEY = "fws:versions";
|
||||
|
||||
const defaultVersions = [
|
||||
{ label: "1.0.2", url: "https://download.example.org/fws-1.0.2.iso", date: "2026-05-10" },
|
||||
{ label: "1.0.1", url: "https://download.example.org/fws-1.0.1.iso", date: "2026-03-22" },
|
||||
{ label: "0.9.8", url: "https://download.example.org/fws-0.9.8.iso", date: "2025-12-05" },
|
||||
];
|
||||
|
||||
function loadVersions() {
|
||||
try {
|
||||
const raw = localStorage.getItem(VERSIONS_KEY);
|
||||
if (!raw) return defaultVersions.slice();
|
||||
const parsed = JSON.parse(raw);
|
||||
if (!Array.isArray(parsed) || !parsed.length) return defaultVersions.slice();
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
return defaultVersions.slice();
|
||||
}
|
||||
}
|
||||
|
||||
function saveVersions(list) {
|
||||
localStorage.setItem(VERSIONS_KEY, JSON.stringify(list));
|
||||
}
|
||||
|
||||
let versions = loadVersions();
|
||||
let currentVersion = versions[0];
|
||||
|
||||
function renderVersionsBar() {
|
||||
if (currentVersionLabel) {
|
||||
currentVersionLabel.textContent = `${currentVersion.label} ${currentVersion.date ? '— ' + currentVersion.date : ''}`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
function renderArchive() {
|
||||
if (!versionsListNode) return;
|
||||
versionsListNode.innerHTML = "";
|
||||
versions.forEach((v, idx) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "version-item";
|
||||
li.innerHTML = `
|
||||
<strong>${v.label}</strong> <span class="version-meta">${v.date || ''}</span>
|
||||
<div class="version-actions">
|
||||
<a class="button" href="${v.url}" target="_blank">Télécharger</a>
|
||||
<button class="button button-secondary copy-version" data-idx="${idx}">Copier</button>
|
||||
<button class="button button-secondary make-latest" data-idx="${idx}">Faire dernière</button>
|
||||
<button class="button button-secondary edit-version" data-idx="${idx}">Modifier</button>
|
||||
</div>
|
||||
`;
|
||||
versionsListNode.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function setCurrentToIndex(idx) {
|
||||
const v = versions[idx];
|
||||
if (!v) return;
|
||||
versions.splice(idx, 1);
|
||||
versions.unshift(v);
|
||||
currentVersion = versions[0];
|
||||
saveVersions(versions);
|
||||
renderVersionsBar();
|
||||
renderArchive();
|
||||
applyLinksToCards();
|
||||
}
|
||||
|
||||
function applyLinksToCards() {
|
||||
cards.forEach((card) => {
|
||||
const key = `fws:download:${card.dataset.key}`;
|
||||
const btn = card.querySelector(".download-btn");
|
||||
const copyBtn = card.querySelector(".copy-btn");
|
||||
const stored = localStorage.getItem(key);
|
||||
const finalUrl = stored || (currentVersion && currentVersion.url) || "#";
|
||||
if (btn) btn.href = finalUrl;
|
||||
if (btn) btn.dataset.link = finalUrl;
|
||||
if (copyBtn) copyBtn.dataset.link = finalUrl;
|
||||
});
|
||||
}
|
||||
|
||||
function toast(message) {
|
||||
const t = document.createElement("div");
|
||||
@@ -37,10 +120,15 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const stored = localStorage.getItem(key);
|
||||
if (stored) {
|
||||
setLink(stored);
|
||||
} else {
|
||||
// apply global current version by default
|
||||
if (currentVersion && currentVersion.url) {
|
||||
setLink(currentVersion.url);
|
||||
}
|
||||
}
|
||||
|
||||
editBtn.addEventListener("click", () => {
|
||||
const current = localStorage.getItem(key) || "";
|
||||
const current = localStorage.getItem(key) || (currentVersion && currentVersion.url) || "";
|
||||
const value = window.prompt("Collez l'URL de téléchargement pour ce fichier:", current);
|
||||
if (value === null) return;
|
||||
const trimmed = value.trim();
|
||||
@@ -70,4 +158,87 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// render versions UI
|
||||
function toggleArchive() {
|
||||
const expanded = archiveToggle.getAttribute("aria-expanded") === "true";
|
||||
archiveToggle.setAttribute("aria-expanded", String(!expanded));
|
||||
if (versionsArchive) versionsArchive.hidden = expanded;
|
||||
}
|
||||
|
||||
if (archiveToggle) {
|
||||
archiveToggle.addEventListener("click", () => {
|
||||
toggleArchive();
|
||||
});
|
||||
}
|
||||
|
||||
if (actionAdd) {
|
||||
actionAdd.addEventListener("click", () => {
|
||||
const label = window.prompt("Nom de la version (ex: 1.0.3):", "");
|
||||
if (!label) return;
|
||||
const url = window.prompt("URL de téléchargement pour cette version:", "");
|
||||
if (!url) return;
|
||||
const date = new Date().toISOString().slice(0, 10);
|
||||
versions.unshift({ label: label.trim(), url: url.trim(), date });
|
||||
saveVersions(versions);
|
||||
currentVersion = versions[0];
|
||||
renderVersionsBar();
|
||||
renderArchive();
|
||||
applyLinksToCards();
|
||||
toast("Version ajoutée");
|
||||
});
|
||||
}
|
||||
|
||||
if (actionEdit) {
|
||||
actionEdit.addEventListener("click", () => {
|
||||
const url = window.prompt("Nouvelle URL pour la version actuelle:", currentVersion.url || "");
|
||||
if (url === null) return;
|
||||
currentVersion.url = url.trim();
|
||||
versions[0] = currentVersion;
|
||||
saveVersions(versions);
|
||||
renderVersionsBar();
|
||||
applyLinksToCards();
|
||||
toast("Version mise à jour");
|
||||
});
|
||||
}
|
||||
|
||||
// delegated events for archive list
|
||||
if (versionsListNode) {
|
||||
versionsListNode.addEventListener("click", (ev) => {
|
||||
const copyBtn = ev.target.closest(".copy-version");
|
||||
const makeBtn = ev.target.closest(".make-latest");
|
||||
const editBtn = ev.target.closest(".edit-version");
|
||||
if (copyBtn) {
|
||||
const idx = Number(copyBtn.dataset.idx);
|
||||
const v = versions[idx];
|
||||
if (v && v.url) {
|
||||
navigator.clipboard.writeText(v.url).then(() => toast("Lien copié"), () => window.prompt("Copiez le lien:", v.url));
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (makeBtn) {
|
||||
const idx = Number(makeBtn.dataset.idx);
|
||||
setCurrentToIndex(idx);
|
||||
toast("Version définie comme dernière");
|
||||
return;
|
||||
}
|
||||
if (editBtn) {
|
||||
const idx = Number(editBtn.dataset.idx);
|
||||
const v = versions[idx];
|
||||
if (!v) return;
|
||||
const newUrl = window.prompt(`Nouvelle URL pour ${v.label}:`, v.url || "");
|
||||
if (newUrl === null) return;
|
||||
v.url = newUrl.trim();
|
||||
versions[idx] = v;
|
||||
saveVersions(versions);
|
||||
renderArchive();
|
||||
applyLinksToCards();
|
||||
toast("Version modifiée");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderVersionsBar();
|
||||
renderArchive();
|
||||
applyLinksToCards();
|
||||
});
|
||||
|
||||
@@ -295,6 +295,35 @@ main[data-page-content] {
|
||||
.download-media { width: 140px; flex-basis: 140px; }
|
||||
}
|
||||
|
||||
/* Versions toolbar */
|
||||
.version-toolbar {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.version-current { color: var(--muted); }
|
||||
|
||||
.versions-archive {
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
background: rgba(255,255,255,0.01);
|
||||
border: 1px solid rgba(148,163,184,0.06);
|
||||
}
|
||||
|
||||
.versions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
|
||||
.version-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.6rem; border-radius: 0.45rem; }
|
||||
.version-meta { color: var(--muted); margin-left: 0.6rem; font-size: 0.92rem; }
|
||||
.version-actions { display: flex; gap: 0.4rem; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.version-toolbar { flex-direction: column; align-items: flex-start; }
|
||||
.version-actions { width: 100%; display: flex; gap: 0.5rem; }
|
||||
}
|
||||
|
||||
|
||||
.features .card {
|
||||
flex: 1 1 0;
|
||||
|
||||
@@ -85,30 +85,4 @@
|
||||
|
||||
<script src="../assets/js/downloads.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>DL</title>
|
||||
</head>
|
||||
<body>
|
||||
<main data-page-content>
|
||||
<section class="hero">
|
||||
<p class="eyebrow">Route DL</p>
|
||||
<h1>Le contenu de la section DL charge ici.</h1>
|
||||
<p class="lead">
|
||||
Cette page vit dans <span>p/dl/index.html</span> et son contenu est injecté dans le
|
||||
<span>main</span> quand l'URL pointe vers <span>/?p/dl/</span>.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="/" data-route="home">Retour à l'accueil</a>
|
||||
<a class="button button-secondary" href="/?p/dl/" data-route="dl">Recharger DL</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user