Table de tri multi-colonnes pour les frais de l’exposition
Créer un tableau triable à plusieurs colonnes pour un scénario de feuille de remboursement d’exposition : contenu réel, contrôles actionnables, retours d’état clairs et mise en page sur plusieurs tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table de tri multi-colonnes pour les frais de l’exposition</title>
<style>
:root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Optima,"Songti SC",serif; background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--secondary) 32%,transparent),transparent 42%),radial-gradient(ellipse at bottom right,color-mix(in srgb,var(--accent) 18%,transparent),transparent 45%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1100px,calc(100% - 34px));margin:auto;padding:68px 0}.mast{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;margin:0 4vw 36px}.mast h1{font-family:Optima,"Songti SC",serif;font-weight:700;font-size:clamp(40px,8vw,86px);letter-spacing:-.025em;margin:0;line-height:1.02}.eyebrow{display:block;margin-bottom:12px;color:var(--accent);font-size:12px;letter-spacing:.2em}.intro{max-width:60ch;line-height:1.9}.scenario{display:grid;width:108px;height:108px;place-items:center;padding:12px;border:1px solid var(--line);border-radius:50%;text-align:center}.demo{border-radius:72px 18px 72px 18px;box-shadow:0 28px 80px color-mix(in srgb,var(--ink) 14%,transparent);position:relative;min-height:430px;overflow:hidden;padding:clamp(28px,5vw,58px);background:color-mix(in srgb,var(--paper) 84%,transparent)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:24px 0}.mast{grid-template-columns:1fr;margin-inline:12px}.scenario{width:auto;height:auto;border-radius:999px}.demo{padding:18px}}
.panel{padding:22px;border:1px solid var(--line);background:color-mix(in srgb,#fff 58%,transparent)}.stack{display:grid;gap:15px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.action{min-height:44px;padding:10px 17px;border:1px solid var(--ink);border-radius:999px;background:transparent}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{opacity:.68}.status{min-height:24px;margin-top:15px;color:var(--accent);font-weight:800}.metric{font-size:clamp(30px,6vw,58px);font-weight:900}.meter{height:9px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent)}.meter>i{display:block;height:100%;background:var(--accent)}.chip{padding:6px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.table-panel{padding:0;overflow:hidden}.table-tools{display:flex;justify-content:space-between;gap:18px;align-items:end;padding:22px}.table-tools h2{margin:0}.table-tools select{min-height:40px;margin-left:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.column-tools{display:flex;gap:8px}.column-tools .action{font-size:12px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse}caption{padding:0 22px 14px;text-align:left;color:color-mix(in srgb,var(--ink) 66%,transparent)}th,td{padding:14px 18px;border-top:1px solid var(--line);text-align:left}th button{border:0;font-weight:900;background:transparent}tbody tr:hover{background:color-mix(in srgb,var(--secondary) 16%,transparent)}td[data-column="1"]{font:800 16px/1 ui-monospace,monospace}.mode-2 tbody td[data-column="1"]{background:linear-gradient(90deg,color-mix(in srgb,var(--secondary) 28%,transparent) var(--value),transparent var(--value))}.table-legend{display:flex;justify-content:flex-end;gap:16px;padding:12px 18px;border-top:1px solid var(--line);font-size:12px}.table-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;background:var(--secondary)}.mode-3 tbody tr:has(input:checked){background:color-mix(in srgb,var(--accent) 12%,transparent)}@media(max-width:520px){th,td{padding:12px 10px;font-size:13px}.table-tools{align-items:stretch;flex-direction:column}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}.similarity-shell{--similarity-density:100;display:grid;gap:18px;padding:clamp(18px,4vw,28px);border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:var(--shadow)}.similarity-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.similarity-head h2{margin:.2em 0}.similarity-head output{padding:10px 14px;border-left:4px solid var(--accent);font-weight:900}.similarity-layout{display:grid;grid-template-columns:minmax(220px,.58fr) minmax(0,1.42fr);gap:16px}.similarity-console{display:grid;align-content:start;gap:16px;padding:18px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--secondary) 10%,var(--paper))}.similarity-modes{display:grid;gap:8px;padding:0;border:0}.similarity-console label{display:grid;gap:8px}.similarity-console input[type="range"]{width:100%}.similarity-pin{display:flex;gap:10px;align-items:center}.similarity-checklist,.similarity-log{display:grid;gap:8px;padding-left:18px;margin:0}.similarity-checklist li.is-done{color:var(--accent);font-weight:900}.similarity-stage{display:grid;gap:14px;min-width:0}.similarity-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.similarity-deck article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.similarity-deck article[data-active="true"]{transform:translateY(-4px);box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 16%,transparent);background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.similarity-deck span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.similarity-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px dashed var(--line);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),transparent 80%)}.similarity-core-shell>*{display:block;width:calc(10000%/var(--similarity-density));max-width:none;transform:scale(calc(var(--similarity-density)/100));transform-origin:top center}.similarity-shell[data-review-state="compare"] .similarity-core-shell{border-style:solid;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.similarity-shell[data-review-state="compare"] .similarity-deck article{opacity:.72}.similarity-shell[data-review-state="compare"] .similarity-deck article[data-active="true"]{opacity:1}.similarity-shell[data-review-state="audit"] .similarity-console{color:var(--paper);background:var(--ink)}.similarity-shell[data-review-state="audit"] .similarity-console .action{color:var(--paper);border-color:var(--paper)}.similarity-shell[data-review-state="audit"] .similarity-log li{border-left:3px solid var(--secondary);padding-left:8px}.similarity-shell[data-pinned="true"] .similarity-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}@media(max-width:920px){.similarity-layout{grid-template-columns:1fr}.similarity-deck{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.similarity-head{align-items:stretch;flex-direction:column}.similarity-deck{grid-template-columns:1fr}.similarity-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="organic" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">organic / tableau triable à plusieurs colonnes / ADVANCED</span><h1>Table de tri multi-colonnes pour les frais de l’exposition</h1><p class="intro">Créer un tableau triable à plusieurs colonnes pour un scénario de feuille de remboursement d’exposition : contenu réel, contrôles actionnables, retours d’état clairs et mise en page sur plusieurs tailles d’écran.</p></div><span class="scenario">Fiche de remboursement des éléments d’exposition</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive du tableau de tri multi-colonnes pour les éléments de remboursement"><div id="similarityShell" class="similarity-shell" data-review-state="focus"><header class="similarity-head"><div><span class="eyebrow">Note de frais des expositions / REVIEW STUDIO</span><h2>Poste de révision de tableau triable multicolonnes</h2><p>Placez le cas principal dans une enveloppe de révision séparée et consignez en plus le mode d’observation, les points de contrôle et la conclusion actuelle.</p></div><output id="similarityState">Prêt à lancer la révision</output></header><div class="similarity-layout"><aside class="similarity-console"><fieldset class="similarity-modes"><legend>Vue de réexamen</legend><button class="action primary" type="button" data-review-view="focus">Mettre au point la vue principale</button><button class="action" type="button" data-review-view="compare">Liste de contrôle</button><button class="action" type="button" data-review-view="audit">Consigner la scène</button></fieldset><label>Observer la densité<input id="similarityDensity" type="range" min="84" max="124" value="100"><output id="similarityDensityValue">100%</output></label><label class="similarity-pin"><input id="similarityPin" type="checkbox"> Figer le point de contrôle actuel</label><ol id="similarityChecklist" class="similarity-checklist"><li>Registre des notes de dépenses des éléments d’exposition</li><li>Collaboration pour le bordereau de remboursement des éléments d’exposition</li><li>Progression du bon de remboursement de l’élément d’exposition</li><li>Rappel de note de frais des éléments d’exposition</li></ol><button id="similarityCapture" class="action primary" type="button">Point de contrôle enregistré</button><ol id="similarityLog" class="similarity-log"><li>En attente du premier enregistrement de contrôle</li></ol></aside><section class="similarity-stage"><div id="similarityDeck" class="similarity-deck"><article data-active="true"><span>01</span><strong>Registre des notes de dépenses des éléments d’exposition</strong><p>Vérifier si les changements d’état sont visibles</p></article><article><span>02</span><strong>Collaboration pour le bordereau de remboursement des éléments d’exposition</strong><p>Confirmer la cohérence entre l’entrée au clavier et le clic</p></article><article><span>03</span><strong>Progression du bon de remboursement de l’élément d’exposition</strong><p>Vérifiez si la disposition se replie sur les écrans étroits</p></article><article><span>04</span><strong>Rappel de note de frais des éléments d’exposition</strong><p>Enregistrer la conclusion de la révision en cours</p></article></div><div id="similarityCoreShell" class="similarity-core-shell"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Note de frais de l’élément d’exposition DISPATCH</span><h2>Poste de dispatch des notes de frais des expositions</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Vue filtrée des demandes de remboursement des éléments d’exposition</option><option>Vue comparative des notes de frais des éléments d’exposition</option><option>Vue récapitulative des notes de frais des pièces exposées</option></select></label><label>Nombre total d’enregistrements<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="18"><span>élément</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Vue d’application</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Vue filtrée des demandes de remboursement des éléments d’exposition</option><option value="2">Vue comparative des notes de frais des éléments d’exposition</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:tables-data-sortable-table --><div class="table-panel mode-0 panel"><header class="table-tools"><div><span class="eyebrow">Données structurées · MODE 1</span><h2>Tableau triable à colonnes multiples</h2></div><span class="chip">Cliquer sur l’en-tête du tableau pour trier</span></header><div class="table-scroll"><table><caption>Données du tableau triable multi-colonnes des notes de frais d’expo</caption><thead><tr><th data-sort-heading="0" aria-sort="none"><button type="button" data-sort="0">Projet ↕</button></th><th data-column="1" data-sort-heading="1" aria-sort="none"><button type="button" data-sort="1" data-core-bridge="tables-data-sortable-table">Valeurs ↕</button></th><th data-column="2" data-sort-heading="2" aria-sort="none"><button type="button" data-sort="2">Statut ↕</button></th></tr></thead><tbody id="dataRows"></tbody></table></div></div><!-- 11DZ_CORE_END --></section></div></div></section></div></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:tables-data-sortable-table */
const rowData = [["Registre des notes de dépenses des éléments d’exposition",24,"À traiter"],["Collaboration pour le bordereau de remboursement des éléments d’exposition",41,"En cours"],["Progression du bon de remboursement de l’élément d’exposition",58,"Terminé"],["Rappel de note de frais des éléments d’exposition",75,"À traiter"],["Favori de la note de frais de l’exposé",92,"En cours"],["Aperçu du formulaire de remboursement d’exposition",39,"Terminé"],["Plan de remboursement des éléments d’exposition",56,"À traiter"],["Inspiration pour la note de frais de l’exposition",73,"En cours"]]; let sortColumn = 0; let sortDirection = 1; const body = document.querySelector('#dataRows'); const tableFilter = document.querySelector('#tableFilter');
function renderRows(){ const filter = tableFilter?.value || ''; const visible = rowData.filter(row => !filter || row[2] === filter).sort((a,b) => String(a[sortColumn]).localeCompare(String(b[sortColumn]),'zh-CN',{numeric:true}) * sortDirection); body.innerHTML = visible.map((row,index) => '<tr><td>' + row[0] + '</td><td data-column="1" style="--value:' + row[1] + '%">' + row[1] + '</td><td data-column="2"><span class="chip">' + row[2] + '</span></td></tr>').join(''); announce('Afficher ' + visible.length + ' Données de ligne'); }
document.querySelectorAll('[data-sort]').forEach(button => button.addEventListener('click',() => { const next = Number(button.dataset.sort); sortDirection = next === sortColumn ? -sortDirection : 1; sortColumn = next; document.querySelectorAll('[data-sort-heading]').forEach(heading=>heading.setAttribute('aria-sort',Number(heading.dataset.sortHeading)===sortColumn?(sortDirection===1?'ascending':'descending'):'none')); renderRows(); })); tableFilter?.addEventListener('change',renderRows);
renderRows();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"tables-data-sortable-table","selector":"[data-core-bridge=\"tables-data-sortable-table\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Vue filtrée des demandes de remboursement des éléments d’exposition","amount":12,"priority":"normal","touches":0}],["2",{"label":"Vue comparative des notes de frais des éléments d’exposition","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' élément · '+bridge.summary;announce('Tâche actuelle du bordereau de remboursement des éléments d’exposition :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' élément · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
const similarityShell=document.querySelector('#similarityShell');const similarityState=document.querySelector('#similarityState');const similarityDensity=document.querySelector('#similarityDensity');const similarityDensityValue=document.querySelector('#similarityDensityValue');const similarityPin=document.querySelector('#similarityPin');const similarityChecklistItems=[...document.querySelectorAll('#similarityChecklist li')];const similarityDeckItems=[...document.querySelectorAll('#similarityDeck article')];const similarityLog=document.querySelector('#similarityLog');const similarityNotes=["Registre des notes de dépenses des éléments d’exposition","Collaboration pour le bordereau de remboursement des éléments d’exposition","Progression du bon de remboursement de l’élément d’exposition","Rappel de note de frais des éléments d’exposition"];const similarityCore=document.querySelector('#workflowCore');let similarityCaptures=0;function similaritySetActive(index){similarityDeckItems.forEach((item,itemIndex)=>{if(itemIndex===index)item.setAttribute('data-active','true');else item.removeAttribute('data-active');});}function similarityRender(reason){const version=similarityCore?.dataset.workflowVersion||'0';const density=Number(similarityDensity.value);similarityShell.style.setProperty('--similarity-density',String(density));similarityShell.dataset.pinned=String(similarityPin.checked);similarityDensityValue.textContent=density+'%';similarityChecklistItems.forEach((item,index)=>item.classList.toggle('is-done',index<similarityCaptures));similaritySetActive(Math.min(similarityDeckItems.length-1,similarityCaptures%similarityDeckItems.length));similarityState.textContent=reason+' · Version de base '+version+(similarityPin.checked?' · Épinglé':'');}document.querySelectorAll('[data-review-view]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-review-view]').forEach(item=>item.classList.toggle('primary',item===button));similarityShell.dataset.reviewState=button.dataset.reviewView;similarityRender('Basculé vers'+button.textContent);announce('Vue de vérification :'+button.textContent);}));similarityDensity.addEventListener('input',()=>{similarityRender('La densité d’observation a été mise à jour');announce('Observer la densité '+similarityDensity.value+'%');});similarityPin.addEventListener('change',()=>{similarityRender(similarityPin.checked?'Le point de contrôle actuel est figé':'Le point de contrôle actuel est déverrouillé');announce(similarityPin.checked?'Point de contrôle actuel épinglé':'Point de contrôle fixé annulé');});document.querySelector('#similarityCapture').addEventListener('click',()=>{const note=similarityNotes[similarityCaptures%similarityNotes.length];const version=similarityCore?.dataset.workflowVersion||'0';similarityCaptures+=1;const item=document.createElement('li');item.textContent='Point de contrôle '+similarityCaptures+' · '+note+' · Version de base '+version;const empty=similarityLog.querySelector('li')?.textContent==='En attente du premier enregistrement de contrôle';if(empty)similarityLog.replaceChildren(item);else similarityLog.prepend(item);while(similarityLog.children.length>6)similarityLog.lastElementChild.remove();similarityRender('Point de contrôle enregistré '+similarityCaptures);announce('Point de contrôle enregistré '+similarityCaptures+' · '+note);});similarityCore?.addEventListener('focusin',()=>similarityRender('Vue principale focalisée'));similarityCore?.addEventListener('click',()=>similarityRender('Interaction sur la vue principale'));similarityRender('Prêt à lancer la révision');
</script>
</body>
</html>