ui: propose modal 2-steps + clean local urls
This commit is contained in:
s-FunIA
@@ -1,41 +1,88 @@
|
||||
<dialog id="propose-modal" aria-label="Qualifier la proposition">
|
||||
<dialog id="propose-modal" aria-label="Qualifier la proposition" data-step="1">
|
||||
<form method="dialog" class="box">
|
||||
<header class="hd">
|
||||
<h2>Qualifier la proposition</h2>
|
||||
<button value="cancel" class="x" aria-label="Fermer">✕</button>
|
||||
</header>
|
||||
|
||||
<p class="sub">
|
||||
Optionnel : choisis une intention (pour tri & traitement éditorial). Sinon, continue sans préciser.
|
||||
</p>
|
||||
<!-- STEP 1 -->
|
||||
<section class="step step-1" aria-label="Choisir le type">
|
||||
<p class="sub">
|
||||
D’abord : quel type de ticket veux-tu ouvrir ?
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<button type="button" data-category="cat/style">Style / lisibilité</button>
|
||||
<button type="button" data-category="cat/lexique">Lexique / terminologie</button>
|
||||
<button type="button" data-category="cat/argument">Argument / structure</button>
|
||||
<button type="button" data-category="cat/redondance">Redondance</button>
|
||||
<button type="button" data-category="cat/source">Source / vérification</button>
|
||||
<button type="button" data-category="">Continuer sans préciser</button>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<button type="button" data-kind="correction">✍️ Correction (rédaction / clarté)</button>
|
||||
<button type="button" data-kind="fact">🔎 Vérification factuelle / sources</button>
|
||||
</div>
|
||||
|
||||
<footer class="ft">
|
||||
<small>Astuce : touche <kbd>Esc</kbd> pour fermer.</small>
|
||||
</footer>
|
||||
<footer class="ft">
|
||||
<small>Étape 1/2 — <kbd>Esc</kbd> pour fermer.</small>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<!-- STEP 2 -->
|
||||
<section class="step step-2" aria-label="Choisir la catégorie">
|
||||
<p class="sub">
|
||||
Optionnel : choisis une intention (pour tri & traitement éditorial). Sinon, continue sans préciser.
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<button type="button" data-category="cat/style">Style / lisibilité</button>
|
||||
<button type="button" data-category="cat/lexique">Lexique / terminologie</button>
|
||||
<button type="button" data-category="cat/argument">Argument / structure</button>
|
||||
<button type="button" data-category="cat/redondance">Redondance</button>
|
||||
<button type="button" data-category="cat/source">Source / vérification</button>
|
||||
<button type="button" data-category="">Continuer sans préciser</button>
|
||||
</div>
|
||||
|
||||
<footer class="ft row">
|
||||
<button type="button" class="back" data-back="1">← Retour</button>
|
||||
<small>Étape 2/2 — <kbd>Esc</kbd> pour fermer.</small>
|
||||
</footer>
|
||||
</section>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog { border: none; padding: 0; border-radius: 16px; width: min(720px, calc(100vw - 2rem)); }
|
||||
dialog { border: none; padding: 0; border-radius: 18px; width: min(760px, calc(100vw - 2rem)); }
|
||||
dialog::backdrop { background: rgba(0,0,0,.55); }
|
||||
.box { padding: 1rem 1rem 0.75rem; }
|
||||
|
||||
.box { padding: 1rem 1rem .85rem; }
|
||||
.hd { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
|
||||
.hd h2 { margin:0; font-size:1.1rem; }
|
||||
.x { border:0; background:transparent; font-size:1.1rem; cursor:pointer; }
|
||||
.sub { margin:.5rem 0 1rem; opacity:.9; }
|
||||
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.5rem; }
|
||||
.grid button { padding: .75rem .8rem; border-radius: 12px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.96); color: #111; cursor: pointer; text-align: left; }
|
||||
|
||||
.sub { margin:.55rem 0 1rem; opacity:.92; line-height: 1.35; }
|
||||
|
||||
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:.55rem; }
|
||||
.grid button {
|
||||
padding: .8rem .9rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(0,0,0,.18);
|
||||
background: rgba(255,255,255,.96);
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.grid button:hover { background: #fff; }
|
||||
|
||||
.ft { margin-top:.85rem; opacity:.88; }
|
||||
.ft.row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
|
||||
.back {
|
||||
border: 1px solid rgba(0,0,0,.18);
|
||||
background: rgba(255,255,255,.96);
|
||||
color:#111;
|
||||
border-radius: 12px;
|
||||
padding: .55rem .7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
kbd { padding:0 .35rem; border:1px solid rgba(0,0,0,.2); border-radius:6px; }
|
||||
|
||||
.step { display:none; }
|
||||
dialog[data-step="1"] .step-1 { display:block; }
|
||||
dialog[data-step="2"] .step-2 { display:block; }
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
@@ -45,48 +92,88 @@
|
||||
|
||||
/** @type {URL|null} */
|
||||
let pending = null;
|
||||
/** @type {"correction"|"fact"|""} */
|
||||
let kind = "";
|
||||
|
||||
const upsertLine = (text, key, value) => {
|
||||
const re = new RegExp(`^${key}:\\s*.*$`, "mi");
|
||||
// Si "continuer sans préciser" : on ne touche pas au body
|
||||
if (!value) return text;
|
||||
const re = new RegExp(`^\\s*${key}\\s*:\\s*.*$`, "mi");
|
||||
if (re.test(text)) return text.replace(re, `${key}: ${value}`);
|
||||
const sep = text && !text.endsWith("\n") ? "\n" : "";
|
||||
return text + sep + `${key}: ${value}\n`;
|
||||
};
|
||||
|
||||
const openModalFor = (url) => {
|
||||
const setTitlePrefix = (u, prefix) => {
|
||||
const t = u.searchParams.get("title") || "";
|
||||
const cleaned = t.replace(/^\[[^\]]+\]\s*/,"");
|
||||
u.searchParams.set("title", `[${prefix}] ${cleaned}`.trim());
|
||||
};
|
||||
|
||||
const openWith = (url) => {
|
||||
pending = url;
|
||||
kind = "";
|
||||
dlg.dataset.step = "1";
|
||||
if (typeof dlg.showModal === "function") dlg.showModal();
|
||||
else window.open(url.toString(), "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
// Interception des clics sur "Proposer"
|
||||
// Intercepte UNIQUEMENT les liens marqués data-propose
|
||||
document.addEventListener("click", (e) => {
|
||||
const a = e.target?.closest?.("a[data-propose]");
|
||||
if (!a) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// URL réelle stockée par EditionLayout (propose.dataset.url)
|
||||
// L'URL réelle est dans data-url (préparée côté EditionLayout)
|
||||
const rawUrl = a.dataset.url || a.getAttribute("href") || "";
|
||||
if (!rawUrl || rawUrl === "#") return;
|
||||
|
||||
try {
|
||||
openModalFor(new URL(rawUrl, window.location.origin));
|
||||
openWith(new URL(rawUrl));
|
||||
} catch {
|
||||
window.open(rawUrl, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
});
|
||||
|
||||
// Choix d’une catégorie -> injection "Category:" + ouverture Gitea
|
||||
// Step 1: type
|
||||
dlg.addEventListener("click", (e) => {
|
||||
const btn = e.target?.closest?.("button[data-kind]");
|
||||
if (!btn || !pending) return;
|
||||
|
||||
kind = btn.getAttribute("data-kind") || "";
|
||||
|
||||
let body = pending.searchParams.get("body") || "";
|
||||
|
||||
if (kind === "fact") {
|
||||
body = upsertLine(body, "Type", "type/fact-check");
|
||||
body = upsertLine(body, "State", "state/a-sourcer");
|
||||
setTitlePrefix(pending, "Fact-check");
|
||||
} else {
|
||||
body = upsertLine(body, "Type", "type/correction");
|
||||
body = upsertLine(body, "State", "state/recevable");
|
||||
setTitlePrefix(pending, "Correction");
|
||||
}
|
||||
|
||||
pending.searchParams.set("body", body);
|
||||
dlg.dataset.step = "2";
|
||||
});
|
||||
|
||||
// Back
|
||||
dlg.addEventListener("click", (e) => {
|
||||
const back = e.target?.closest?.("button[data-back]");
|
||||
if (!back) return;
|
||||
dlg.dataset.step = "1";
|
||||
});
|
||||
|
||||
// Step 2: category + open
|
||||
dlg.addEventListener("click", (e) => {
|
||||
const btn = e.target?.closest?.("button[data-category]");
|
||||
if (!btn || !pending) return;
|
||||
|
||||
const cat = btn.getAttribute("data-category") || "";
|
||||
const body = pending.searchParams.get("body") || "";
|
||||
pending.searchParams.set("body", upsertLine(body, "Category", cat));
|
||||
let body = pending.searchParams.get("body") || "";
|
||||
if (cat) body = upsertLine(body, "Category", cat);
|
||||
|
||||
pending.searchParams.set("body", body);
|
||||
|
||||
dlg.close();
|
||||
window.open(pending.toString(), "_blank", "noopener,noreferrer");
|
||||
|
||||
Reference in New Issue
Block a user