Flux d’activité en temps réel du conseil de révision des logements
Dans un scénario de tableau de révision des affaires de logement, réaliser un flux d’activité en temps réel : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptable à différentes tailles.
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>Flux d’activité en temps réel du conseil de révision des logements</title>
<style>
:root { --ink:#24213a; --paper:#f6f1e8; --accent:#e6a23c; --secondary:#a8a1d8; --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:"Kaiti SC",STKaiti,"Songti SC",serif; background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--accent) 12%,transparent) 0 1px,transparent 2px),var(--paper);background-size:19px 19px; }
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(980px,calc(100% - 32px));margin:auto;padding:72px 0 92px}.mast{display:grid;grid-template-columns:1fr auto;transform:rotate(-.25deg);gap:32px;align-items:center;margin-bottom:46px}.mast h1{font-family:"Kaiti SC",STKaiti,serif;font-weight:700;font-size:clamp(40px,8vw,84px);letter-spacing:.02em;margin:0;line-height:1.12}.intro{max-width:650px;margin-top:18px;line-height:2}.scenario{padding:12px;border:2px solid var(--accent);color:var(--accent);transform:rotate(3deg)}.eyebrow{display:block;margin-bottom:9px;color:var(--accent);letter-spacing:.18em}.demo{border-radius:2px;transform:rotate(.12deg);box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 18%,transparent);position:relative;min-height:430px;overflow:hidden;padding:clamp(28px,6vw,66px);background:color-mix(in srgb,var(--paper) 92%,#fff)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:28px 0}.mast{grid-template-columns:1fr}.scenario{justify-self:start}.demo{padding:20px}}
.panel{padding:18px;border:2px solid var(--line);border-radius:26px;box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 35%,transparent)}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.action{padding:12px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--ink);font-weight:800}.action:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{text-align:center;min-height:26px;margin-top:18px}.metric{text-align:center;font-size:clamp(34px,8vw,70px);font-weight:900}.muted{text-align:center;opacity:.7}.meter{height:14px;padding:2px;border:2px solid var(--ink);border-radius:999px}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--secondary)}.chip{padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.activity-feed-studio{display:grid;gap:16px;max-width:900px;margin:auto}.activity-feed-studio header{display:flex;justify-content:space-between;gap:18px;align-items:end}.activity-feed-studio h2{margin:.3em 0}.activity-feed-studio select{padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.activity-columns{display:grid;grid-template-columns:minmax(0,1.25fr) 220px;gap:14px}#activityFeed{display:grid;max-height:400px;overflow:auto;padding:0;margin:0;list-style:none;border:1px solid var(--line);border-radius:18px;background:var(--paper)}#activityFeed li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:start;padding:14px;border-top:1px solid var(--line)}#activityFeed li:first-child{border-top:0}#activityFeed i{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:var(--secondary);font-style:normal}#activityFeed p{margin:.35em 0}#activityFeed time{font-size:12px;opacity:.65}.activity-columns aside{display:grid;align-content:start;gap:12px;padding:18px;border-left:5px solid var(--accent);background:color-mix(in srgb,var(--secondary) 10%,transparent)}@media(max-width:680px){.activity-feed-studio header{align-items:stretch;flex-direction:column}.activity-columns{grid-template-columns:1fr}}.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}}.housing-feed-casework{--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)}.housing-feed-casework__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.housing-feed-casework__head h2{margin:.18em 0}.housing-feed-casework__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.housing-feed-casework__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.housing-feed-casework__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)}.housing-feed-casework__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.housing-feed-casework__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))}.housing-feed-casework__rail label{display:grid;gap:8px}.housing-feed-casework__rail input{width:100%}.housing-feed-casework__notes{display:grid;gap:10px}.housing-feed-casework__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.housing-feed-casework__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)}.housing-feed-casework__notes small{line-height:1.45;opacity:.78}.housing-feed-casework__log{display:grid;gap:8px;margin:0;padding-left:18px}.housing-feed-casework[data-casework-mode="inspect"] .housing-feed-casework__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.housing-feed-casework[data-casework-mode="handoff"] .housing-feed-casework__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){.housing-feed-casework__grid{grid-template-columns:1fr}}@media(max-width:560px){.housing-feed-casework__head{align-items:stretch;flex-direction:column}.housing-feed-casework__modes{justify-content:start}.housing-feed-casework__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="paper" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">paper / flux d’activité en temps réel / INTERMEDIATE</span><h1>Flux d’activité en temps réel du conseil de révision des logements</h1><p class="intro">Dans un scénario de tableau de révision des affaires de logement, réaliser un flux d’activité en temps réel : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptable à différentes tailles.</p></div><span class="scenario">Tableau de supervision des affaires résidentielles</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone interactive du flux d’activité en temps réel du tableau d’examen administratif du logement"><section id="housingFeedCasework" class="housing-feed-casework" data-casework-mode="queue"><header class="housing-feed-casework__head"><div><span class="eyebrow">Tableau de révision des affaires / HOUSING FEED CASEWORK</span><h2>Flux d’activités en temps réel et tableau de révision</h2><p>Placez le panneau de flux d’activité dans le poste de relecture, en le séparant de la même structure de coque que le poste de surveillance class avec des cartes d’enregistrement dédiées, des multiplicateurs et un mode de passation.</p></div><div class="housing-feed-casework__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="housing-feed-casework__grid"><div class="housing-feed-casework__viewport"><div id="workflowSpatial" class="workflow-spatial" style="--spatial-width:64%;--spatial-zoom:1"><header><div><span class="eyebrow">Table de révision du logement SPATIAL CANVAS</span><h2>Pupitre de révision du tableau de contrôle du logement</h2></div><label>Pourcentage du seuil d’alerte<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:dashboards-admin-activity-feed --><div class="activity-feed-studio"><header><div><span class="eyebrow">LIVE ACTIVITY</span><h2>Flux d’activité du tableau de révision des tâches de logement</h2></div><label>Type <select id="feedFilter"><option value="">tout</option><option value="system">Système</option><option value="person">Membre</option></select></label></header><div class="activity-columns"><ol id="activityFeed"><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Plan du comité d’examen du logement</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>1 minutes auparavant</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Inspiration du tableau d’évaluation du service logement</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>2 il y a quelques minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Notes du tableau de contrôle d’examen des logements</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>Il y a 3 minutes</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Collaboration du panneau d’examen du logement</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>il y a 4 minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Progression du tableau de révision du logement</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>5 minutes plus tôt</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Rappel du tableau de révision des services de logement</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>il y a 6 minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Favoris du tableau de révision des logements</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>il y a 7 minutes</time></li></ol><aside><strong id="activityVisible">Afficher 7 éléments</strong><p id="activitySummary">Affichage actuel par tous les types.</p><button id="prependActivity" class="action" type="button" data-core-bridge="dashboards-admin-activity-feed">Simuler les nouvelles activités</button></aside></div></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>Vue de surveillance du tableau d’examen des affaires de logement</strong><p>La vue d’intervention et la vue de récapitulation du tableau de révision des logements sont réorganisées en fonction de la taille du canevas.</p><output id="workflowSpatialStatus">Largeur 64%, zoom 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="Panneau d’application"></aside></div></div></div><aside class="housing-feed-casework__rail"><label>Multiplicateur de suivi<input id="housingFeedCaseworkScale" type="range" min="84" max="132" value="100"><output id="housingFeedCaseworkScaleValue">100%</output></label><div class="housing-feed-casework__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>Plan du comité d’examen du logement</strong><small>Vérifier les changements d’état</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>Inspiration du tableau d’évaluation du service logement</strong><small>Confirmer l’entrée clavier</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Notes du tableau de contrôle d’examen des logements</strong><small>Observer le repli pour les petits écrans</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Collaboration du panneau d’examen du logement</strong><small>Écrire le verdict actuel</small></button></div><button id="housingFeedCaseworkCapture" class="action primary" type="button">Exemple de flux d’enregistrement</button><ol id="housingFeedCaseworkLog" class="housing-feed-casework__log"><li>En attente du premier enregistrement</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Tableau d’examen du poste de services résidentiels FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:dashboards-admin-activity-feed */
const feedFilter=document.querySelector('#feedFilter');function filterFeed(){const type=feedFilter.value;const items=[...document.querySelectorAll('#activityFeed li')];const visible=items.filter(item=>{const show=!type||item.dataset.feedType===type;item.hidden=!show;return show;});document.querySelector('#activityVisible').textContent='Afficher '+visible.length+' élément';document.querySelector('#activitySummary').textContent=type?'Actuellement selon '+(type==='system'?'Système':'Membre')+' Vue de type.':'Affichage actuel par tous les types.';announce('Affichage du flux d’activité '+visible.length+' élément');}feedFilter.addEventListener('change',filterFeed);document.querySelector('#prependActivity').addEventListener('click',()=>{const item=document.createElement('li');item.dataset.feedType='system';item.innerHTML='<i aria-hidden="true">Nouveau</i><div><b>Mise à jour en temps réel du comité d’examen du logement</b><p>Flux locaux de simulation ajoutés à l’instant.</p></div><time>À l’instant</time>';document.querySelector('#activityFeed').prepend(item);filterFeed();});filterFeed();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-activity-feed","selector":"[data-core-bridge=\"dashboards-admin-activity-feed\"]","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('Le canevas du panneau d’évaluation des espaces de vie a été réorganisé');}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='Panneau appliqué · largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'% · '+bridge.summary;announce(document.querySelector('#workflowSpatialStatus').textContent);});workflowSpatialDrive();
workflowBridgeReset();
const caseworkShell=document.querySelector('#housingFeedCasework');const caseworkScale=document.querySelector('#housingFeedCaseworkScale');const caseworkScaleValue=document.querySelector('#housingFeedCaseworkScaleValue');const caseworkLog=document.querySelector('#housingFeedCaseworkLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["Plan du comité d’examen du logement","Inspiration du tableau d’évaluation du service logement","Notes du tableau de contrôle d’examen des logements","Collaboration du panneau d’examen du logement"];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('#housingFeedCaseworkCapture').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>