Démonstration des opérations du presse-papiers au terminal de consultation
Réalisez une démonstration d’opération sur le presse-papiers dans le décor du terminal de la clinique : contenu réel, contrôles interactifs, retour d’état clair et mise en page responsive.
Cette démonstration nécessite des autorisations de navigateur. Veuillez laisser « l’exécution isolée » désactivée et déclencher l’action en cliquant vous-même ; si l’autorisation est refusée ou non prise en charge, un état de repli sera affiché.
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>Démonstration des opérations du presse-papiers au terminal de consultation</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --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:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),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(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.panel{padding:24px;border-block:1px solid var(--ink);background:transparent}.stack{display:grid;gap:22px}.row{display:flex;flex-wrap:wrap;gap:16px}.action{padding:8px 0;border:0;border-bottom:1px solid currentColor;background:transparent;letter-spacing:.08em}.action.primary,.action.is-active{color:var(--accent);border-bottom-width:4px}.status{min-height:28px;margin-top:20px;font-style:italic}.metric{font-family:Didot,serif;font-size:clamp(38px,8vw,76px)}.muted{max-width:54ch;line-height:1.8}.meter{position:relative;height:3px;background:var(--line)}.meter>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}.chip{padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:13px}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.clipboard-desk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr);gap:16px;padding:clamp(20px,5vw,46px);border:1px solid var(--line);border-radius:30px 4px 30px 4px;background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--secondary) 18%,var(--paper)))}.clipboard-desk>header{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;align-items:end}.clipboard-desk h2{margin:.2em 0}.clipboard-editor{position:relative;display:grid;gap:8px}.clipboard-editor textarea{width:100%;min-height:180px;padding:18px;border:2px solid var(--ink);background:var(--paper);font:inherit;resize:vertical}.clipboard-editor span{position:absolute;right:12px;bottom:10px;padding:4px 7px;background:var(--paper);font-size:11px}.clipboard-actions{display:flex;grid-column:1;flex-wrap:wrap;gap:8px}.clipboard-desk>aside{grid-column:2;grid-row:2/4;padding:18px;color:var(--paper);background:var(--ink)}#clipboardLedger{display:grid;gap:8px;padding-left:18px}@media(max-width:680px){.clipboard-desk{grid-template-columns:1fr}.clipboard-desk>*{grid-column:auto!important;grid-row:auto!important}}.workflow-spatial{display:grid;gap:16px}.workflow-spatial>header{display:grid;grid-template-columns:1fr minmax(170px,.35fr) minmax(170px,.35fr);gap:18px;align-items:end;padding-bottom:16px;border-bottom:5px solid var(--ink)}.workflow-spatial h2{margin:.2em 0}.workflow-spatial header label{display:grid;grid-template-columns:1fr auto;gap:7px}.workflow-spatial header input{grid-column:1/-1;width:100%}.spatial-grid{display:grid;grid-template-columns:minmax(0,var(--spatial-width)) 20px minmax(180px,1fr);gap:0;align-items:stretch}.spatial-core{min-width:0;transform:scale(var(--spatial-zoom));transform-origin:top left;transition:transform .2s}.spatial-handle{display:grid;min-height:300px;place-items:center;border:0;border-inline:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);cursor:col-resize}.spatial-grid>aside{display:grid;align-content:center;gap:14px;padding:22px;background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.spatial-grid>aside strong{font-size:clamp(24px,4vw,42px)}@media(max-width:900px){.workflow-spatial>header{grid-template-columns:1fr}.spatial-grid{order:-1;grid-template-columns:1fr}.spatial-handle{min-height:44px;cursor:row-resize}.spatial-core{transform:none}}.clinic-clipboard-bench{--casework-scale:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 95%,transparent));box-shadow:var(--shadow)}.clinic-clipboard-bench__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.clinic-clipboard-bench__head h2{margin:.18em 0}.clinic-clipboard-bench__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.clinic-clipboard-bench__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.clinic-clipboard-bench__viewport{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.clinic-clipboard-bench__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.clinic-clipboard-bench__rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:24px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 90%,#08120f),color-mix(in srgb,var(--ink) 72%,#1b120e))}.clinic-clipboard-bench__rail label{display:grid;gap:8px}.clinic-clipboard-bench__rail input{width:100%}.clinic-clipboard-bench__notes{display:grid;gap:10px}.clinic-clipboard-bench__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.clinic-clipboard-bench__notes button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff1a;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.clinic-clipboard-bench__notes small{line-height:1.45;opacity:.78}.clinic-clipboard-bench__log{display:grid;gap:8px;margin:0;padding-left:18px}.clinic-clipboard-bench[data-casework-mode="inspect"] .clinic-clipboard-bench__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.clinic-clipboard-bench[data-casework-mode="handoff"] .clinic-clipboard-bench__rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:920px){.clinic-clipboard-bench__grid{grid-template-columns:1fr}}@media(max-width:560px){.clinic-clipboard-bench__head{align-items:stretch;flex-direction:column}.clinic-clipboard-bench__modes{justify-content:start}.clinic-clipboard-bench__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">monochrome / démonstration des opérations du presse-papiers / INTERMEDIATE</span><h1>Démonstration des opérations du presse-papiers au terminal de consultation</h1><p class="intro">Réalisez une démonstration d’opération sur le presse-papiers dans le décor du terminal de la clinique : contenu réel, contrôles interactifs, retour d’état clair et mise en page responsive.</p></div><span class="scenario">Terminal de consultation</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Démo des opérations du presse-papiers</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Zone interactive de démonstration des opérations du presse-papiers du terminal de consultation externe"><section id="clinicClipboardBench" class="clinic-clipboard-bench" data-casework-mode="queue"><header class="clinic-clipboard-bench__head"><div><span class="eyebrow">Service de consultation externe / CLINIC CLIPBOARD BENCH</span><h2>Démonstration des opérations du presse-papiers, copie du poste de contrôle</h2><p>Placez la démo du presse-papiers dans la console de validation des copies, puis utilisez des fiches d’enregistrement indépendantes, des rapports et un mode de transfert pour la séparer de l’enveloppe de preuve du pack d’outils audio.</p></div><div class="clinic-clipboard-bench__modes"><button class="action primary" type="button" data-casework-mode="queue">File d’attente</button><button class="action" type="button" data-casework-mode="inspect">Voir</button><button class="action" type="button" data-casework-mode="handoff">Transfert</button></div></header><div class="clinic-clipboard-bench__grid"><div class="clinic-clipboard-bench__viewport"><div id="workflowSpatial" class="workflow-spatial" style="--spatial-width:64%;--spatial-zoom:1"><header><div><span class="eyebrow">Terminal de consultation SPATIAL CANVAS</span><h2>Poste de réglage de la clinique</h2></div><label>Proportion des éléments détectés<input id="workflowSpatialWidth" type="range" min="38" max="82" value="64"><output id="workflowSpatialWidthValue">64%</output></label><label>Redimensionnement du contenu<input id="workflowSpatialZoom" type="range" min="80" max="120" value="100"><output id="workflowSpatialZoomValue">100%</output></label></header><div class="spatial-grid"><section id="workflowCore" class="workflow-core spatial-core"><!-- 11DZ_CORE_START:browser-media-device-clipboard-demo --><div class="clipboard-desk"><header><span class="eyebrow">CLIPBOARD DESK</span><h2>Atelier de copie du terminal de la clinique</h2><output id="clipboardPermission">Demander le presse-papiers uniquement après un clic</output></header><label class="clipboard-editor">Contenu à copier<textarea id="clipboardText" rows="6">Terminal de la clinique : veuillez confirmer les enregistrements des opérations, le responsable et l’étape suivante.</textarea><span id="clipboardCount">0 octets</span></label><div class="clipboard-actions"><button id="clipboardCopy" class="action primary" type="button">Copier le texte</button><button id="clipboardSelect" class="action" type="button" data-core-bridge="browser-media-device-clipboard-demo">Sélection manuelle</button><button id="clipboardClear" class="action" type="button">Effacer la zone d’édition</button></div><aside><h3>Copie des enregistrements de cette page</h3><ul id="clipboardLedger"><li>Copie pas encore exécutée</li></ul></aside></div><!-- 11DZ_CORE_END --></section><input id="workflowSpatialHandle" class="spatial-handle" type="button" value="↔" aria-label="Faire glisser pour ajuster la largeur de l’aperçu du cas principal"><aside><strong>Vérification des autorisations du terminal de consultation</strong><p>L’enregistrement local des capacités du terminal de clinique et le terminal de clinique local seront réorganisés selon la taille du canevas.</p><output id="workflowSpatialStatus">Largeur 64%, zoom 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="Capacité d’enregistrement"></aside></div></div></div><aside class="clinic-clipboard-bench__rail"><label>Multiplicateur de suivi<input id="clinicClipboardBenchScale" type="range" min="84" max="132" value="100"><output id="clinicClipboardBenchScaleValue">100%</output></label><div class="clinic-clipboard-bench__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>Alerte du terminal de consultation</strong><small>Vérifier les changements d’état</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>Favoris du terminal de consultation</strong><small>Confirmer l’entrée clavier</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Aperçu du terminal de consultation externe</strong><small>Observer le repli pour les petits écrans</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Plan du terminal ambulatoire</strong><small>Écrire le verdict actuel</small></button></div><button id="clinicClipboardBenchCapture" class="action primary" type="button">Exemple de copie d’enregistrement</button><ol id="clinicClipboardBenchLog" class="clinic-clipboard-bench__log"><li>En attente du premier enregistrement</li></ol></aside></div></section><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:browser-media-device-clipboard-demo */
const clipboardText=document.querySelector('#clipboardText');const clipboardLedger=[];function updateClipboardCount(){document.querySelector('#clipboardCount').textContent=clipboardText.value.length+' Caractère';}function recordClipboard(kind){clipboardLedger.unshift({kind,length:clipboardText.value.length,at:new Date()});clipboardLedger.splice(4);document.querySelector('#clipboardLedger').replaceChildren(...clipboardLedger.map(entry=>{const item=document.createElement('li');item.textContent=entry.kind+' · '+entry.length+' Caractère · '+entry.at.toLocaleTimeString();return item;}));}document.querySelector('#clipboardCopy').addEventListener('click',async()=>{if(!clipboardText.value){announce('Veuillez d’abord saisir le contenu à copier');return;}try{if(!navigator.clipboard?.writeText)throw new Error('unsupported');await navigator.clipboard.writeText(clipboardText.value);document.querySelector('#clipboardPermission').textContent='Écriture réussie';recordClipboard('Presse-papiers système');announce('Le texte a été copié dans le presse-papiers');}catch{clipboardText.focus();clipboardText.select();document.querySelector('#clipboardPermission').textContent='Le navigateur a refusé l’écriture, le contenu est sélectionné';recordClipboard('Retour manuel');announce('Impossible de copier automatiquement, le texte sélectionné est prêt à être copié manuellement');}});document.querySelector('#clipboardSelect').addEventListener('click',()=>{clipboardText.focus();clipboardText.select();recordClipboard('Contenu sélectionné');announce('Contenu de la zone d’édition sélectionné');});document.querySelector('#clipboardClear').addEventListener('click',()=>{clipboardText.value='';updateClipboardCount();clipboardText.focus();announce('La zone d’édition de copie a été vidée');});clipboardText.addEventListener('input',updateClipboardCount);updateClipboardCount();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"browser-media-device-clipboard-demo","selector":"[data-core-bridge=\"browser-media-device-clipboard-demo\"]","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 workflowSpatial=document.querySelector('#workflowSpatial');const workflowSpatialCore=document.querySelector('#workflowCore');const workflowSpatialWidth=document.querySelector('#workflowSpatialWidth');const workflowSpatialZoom=document.querySelector('#workflowSpatialZoom');const workflowSpatialHandle=document.querySelector('#workflowSpatialHandle');const workflowSpatialState={width:64,zoom:1,dragging:false};function workflowSpatialDrive(){workflowSpatial.style.setProperty('--spatial-width',workflowSpatialState.width+'%');workflowSpatial.style.setProperty('--spatial-zoom',String(workflowSpatialState.zoom));workflowSpatialWidth.value=String(workflowSpatialState.width);workflowSpatialZoom.value=String(Math.round(workflowSpatialState.zoom*100));document.querySelector('#workflowSpatialWidthValue').textContent=workflowSpatialState.width+'%';document.querySelector('#workflowSpatialZoomValue').textContent=Math.round(workflowSpatialState.zoom*100)+'%';document.querySelector('#workflowSpatialStatus').textContent='largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'%';announce('La toile du terminal ambulatoire a été réorganisée');}workflowSpatialWidth.addEventListener('input',()=>{workflowSpatialState.width=Number(workflowSpatialWidth.value);workflowSpatialDrive();});workflowSpatialZoom.addEventListener('input',()=>{workflowSpatialState.zoom=Number(workflowSpatialZoom.value)/100;workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerdown',event=>{workflowSpatialState.dragging=true;workflowSpatialHandle.setPointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('pointermove',event=>{if(!workflowSpatialState.dragging)return;const rect=workflowSpatial.getBoundingClientRect();workflowSpatialState.width=Math.max(38,Math.min(82,Math.round((event.clientX-rect.left)/rect.width*100)));workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerup',event=>{workflowSpatialState.dragging=false;workflowSpatialHandle.releasePointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('wheel',event=>{event.preventDefault();workflowSpatialState.zoom=Math.max(.8,Math.min(1.2,workflowSpatialState.zoom+(event.deltaY<0?.05:-.05)));workflowSpatialDrive();},{passive:false});workflowSpatialHandle.addEventListener('keydown',event=>{if(!['ArrowLeft','ArrowRight'].includes(event.key))return;event.preventDefault();workflowSpatialState.width=Math.max(38,Math.min(82,workflowSpatialState.width+(event.key==='ArrowRight'?2:-2)));workflowSpatialDrive();});document.querySelector('#workflowSpatialApply').addEventListener('click',()=>{const bridge=workflowBridgeActivate();document.querySelector('#workflowSpatialStatus').textContent='Capacité enregistrée · largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'% · '+bridge.summary;announce(document.querySelector('#workflowSpatialStatus').textContent);});workflowSpatialDrive();
workflowBridgeReset();
const caseworkShell=document.querySelector('#clinicClipboardBench');const caseworkScale=document.querySelector('#clinicClipboardBenchScale');const caseworkScaleValue=document.querySelector('#clinicClipboardBenchScaleValue');const caseworkLog=document.querySelector('#clinicClipboardBenchLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["Alerte du terminal de consultation","Favoris du terminal de consultation","Aperçu du terminal de consultation externe","Plan du terminal ambulatoire"];const caseworkCore=document.querySelector('#workflowCore');let caseworkCount=0;function caseworkActiveIndex(){return Math.max(0,caseworkNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));}function caseworkRender(reason){const version=caseworkCore?.dataset.workflowVersion||'0';const scale=Number(caseworkScale.value);caseworkShell.style.setProperty('--casework-scale',String(scale));caseworkScaleValue.textContent=scale+'%';caseworkNotes.forEach((button,index)=>button.setAttribute('aria-pressed',String(index===caseworkActiveIndex())));announce(reason+' · Version de base '+version);}caseworkModeButtons.forEach(button=>button.addEventListener('click',()=>{caseworkModeButtons.forEach(item=>item.classList.toggle('primary',item===button));caseworkShell.dataset.caseworkMode=button.dataset.caseworkMode;caseworkRender('Basculé vers'+button.textContent);}));caseworkNotes.forEach((button,index)=>button.addEventListener('click',()=>{caseworkNotes.forEach(item=>item.setAttribute('aria-pressed','false'));button.setAttribute('aria-pressed','true');caseworkRender('Carte d’enregistrement basculée');announce('Carte de suivi :'+caseworkLabels[index]);}));caseworkScale.addEventListener('input',()=>caseworkRender('L’échelle d’observation a été mise à jour'));document.querySelector('#clinicClipboardBenchCapture').addEventListener('click',()=>{const index=caseworkActiveIndex();const version=caseworkCore?.dataset.workflowVersion||'0';caseworkCount+=1;const item=document.createElement('li');item.textContent='Enregistrement '+caseworkCount+' · '+(caseworkLabels[index]||caseworkLabels[0]||'Exemple sans nom')+' · Version de base '+version;const empty=caseworkLog.querySelector('li')?.textContent==='En attente du premier enregistrement';if(empty)caseworkLog.replaceChildren(item);else caseworkLog.prepend(item);while(caseworkLog.children.length>6)caseworkLog.lastElementChild.remove();caseworkRender('Enregistrement ajouté '+caseworkCount);});caseworkCore?.addEventListener('focusin',()=>caseworkRender('L’élément principal a le focus'));caseworkCore?.addEventListener('click',()=>caseworkRender('Interaction de l’exemple principal'));caseworkRender('Prêt à créer l’enregistrement');
</script>
</body>
</html>