218 lines
7.5 KiB
Plaintext
218 lines
7.5 KiB
Plaintext
---
|
|
// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7).
|
|
// BAS : iframe carte AEP + scroll articles Substack (PC4).
|
|
import CarteOWrapper from '../vue/CarteOWrapper.vue';
|
|
import ChatbotV2 from '../vue/ChatbotV2.vue';
|
|
import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
|
---
|
|
<div id="col-centre-grid" class="h-full grid gap-2 p-2" style="grid-template-rows: 1fr 2fr;">
|
|
<!-- HAUT 50% : tabs Carte O / Chatbot -->
|
|
<section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white" style="min-height: 0;">
|
|
<nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
id="tab-mindmap"
|
|
aria-controls="panel-mindmap"
|
|
aria-selected="true"
|
|
data-tab="mindmap"
|
|
class="tab-btn px-3 py-2 text-sm border-b-2 border-neutral-900 font-medium text-neutral-900"
|
|
>
|
|
Carte O
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
id="tab-chatbot"
|
|
aria-controls="panel-chatbot"
|
|
aria-selected="false"
|
|
data-tab="chatbot"
|
|
class="tab-btn px-3 py-2 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-900"
|
|
>
|
|
Chatbot
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="flex-1 overflow-hidden relative">
|
|
<div
|
|
id="panel-mindmap"
|
|
role="tabpanel"
|
|
aria-labelledby="tab-mindmap"
|
|
data-tab-panel="mindmap"
|
|
class="absolute inset-0"
|
|
>
|
|
<CarteOWrapper client:visible />
|
|
</div>
|
|
<div
|
|
id="panel-chatbot"
|
|
role="tabpanel"
|
|
aria-labelledby="tab-chatbot"
|
|
data-tab-panel="chatbot"
|
|
class="absolute inset-0 hidden"
|
|
>
|
|
<ChatbotV2 client:visible />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Drag handle desktop - redimensionnement vertical md+ -->
|
|
<div
|
|
id="col-centre-drag-handle"
|
|
class="hidden md:flex items-center justify-center h-2 cursor-row-resize hover:bg-neutral-200 transition-colors w-full -mt-1 -mb-1"
|
|
aria-hidden="true"
|
|
>
|
|
<span class="block w-10 h-0.5 bg-neutral-300 rounded-full"></span>
|
|
</div>
|
|
|
|
<!-- Poignee repli zone HAUT - mobile only -->
|
|
<button
|
|
id="col-centre-poignee"
|
|
type="button"
|
|
aria-label="Replier ou deployer la Carte O"
|
|
class="md:hidden flex items-center justify-center h-6 bg-neutral-100 border-y border-neutral-200 cursor-pointer w-full -mt-2 -mb-2 hover:bg-neutral-200 transition-colors"
|
|
>
|
|
<span class="block w-8 h-0.5 bg-neutral-400 rounded-full"></span>
|
|
</button>
|
|
|
|
<!-- BAS 50% : embed dynamique (carte AEP default, article journal au click) -->
|
|
<section class="border border-neutral-200 rounded overflow-hidden bg-white" style="min-height: 0;">
|
|
<div class="h-full min-h-[60vh] md:min-h-[400px]">
|
|
<EmbedDynamique client:visible />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// Poignee repli zone HAUT (mobile only, D.3)
|
|
const grid = document.getElementById('col-centre-grid');
|
|
const haut = document.getElementById('col-centre-haut');
|
|
const poignee = document.getElementById('col-centre-poignee');
|
|
|
|
const applyRepliState = (replie: boolean) => {
|
|
if (!grid || !haut) return;
|
|
if (replie) {
|
|
grid.classList.remove('grid-rows-2');
|
|
grid.style.gridTemplateRows = '0fr 1fr';
|
|
haut.style.overflow = 'hidden';
|
|
haut.style.minHeight = '0';
|
|
poignee?.setAttribute('aria-label', 'Deployer la Carte O');
|
|
} else {
|
|
grid.classList.remove('grid-rows-2');
|
|
grid.style.gridTemplateRows = '1fr 2fr';
|
|
haut.style.overflow = '';
|
|
haut.style.minHeight = '';
|
|
poignee?.setAttribute('aria-label', 'Replier la Carte O');
|
|
}
|
|
};
|
|
|
|
// Etat initial depuis sessionStorage
|
|
const savedRepli = sessionStorage.getItem('tf-haut-replie');
|
|
applyRepliState(savedRepli === 'true');
|
|
|
|
poignee?.addEventListener('click', () => {
|
|
const current = sessionStorage.getItem('tf-haut-replie') === 'true';
|
|
const next = !current;
|
|
sessionStorage.setItem('tf-haut-replie', String(next));
|
|
applyRepliState(next);
|
|
});
|
|
|
|
// Drag-resize desktop (>=768px)
|
|
const dragHandle = document.getElementById('col-centre-drag-handle');
|
|
const gridEl = document.getElementById('col-centre-grid');
|
|
|
|
if (dragHandle && gridEl) {
|
|
let isDragging = false;
|
|
let startY = 0;
|
|
let startTop = 0;
|
|
|
|
const getGridHeight = () => gridEl.getBoundingClientRect().height;
|
|
|
|
const getHautPercent = (): number => {
|
|
const rows = gridEl.style.gridTemplateRows;
|
|
if (rows && rows.includes('fr')) {
|
|
const parts = rows.split(' ');
|
|
if (parts.length >= 2) {
|
|
const top = parseFloat(parts[0]) || 1;
|
|
const bot = parseFloat(parts[parts.length - 1]) || 1;
|
|
return (top / (top + bot)) * 100;
|
|
}
|
|
}
|
|
if (rows && rows.includes('%')) {
|
|
const parts = rows.split(' ');
|
|
return parseFloat(parts[0]) || 50;
|
|
}
|
|
return 33.33;
|
|
};
|
|
|
|
dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
|
|
if (sessionStorage.getItem('tf-haut-replie') === 'true') return;
|
|
isDragging = true;
|
|
startY = e.clientY;
|
|
startTop = (getHautPercent() / 100) * getGridHeight();
|
|
document.body.style.cursor = 'row-resize';
|
|
document.body.style.userSelect = 'none';
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e: MouseEvent) => {
|
|
if (!isDragging || !gridEl) return;
|
|
const delta = e.clientY - startY;
|
|
const totalH = getGridHeight();
|
|
const newTop = Math.min(Math.max(startTop + delta, totalH * 0.2), totalH * 0.8);
|
|
const topPct = (newTop / totalH) * 100;
|
|
const botPct = 100 - topPct;
|
|
gridEl.style.gridTemplateRows = `${topPct.toFixed(1)}% ${botPct.toFixed(1)}%`;
|
|
gridEl.classList.remove('grid-rows-2');
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
if (isDragging) {
|
|
isDragging = false;
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
const rows = gridEl.style.gridTemplateRows;
|
|
if (rows) sessionStorage.setItem('tf-centre-rows', rows);
|
|
}
|
|
});
|
|
|
|
// Restaurer position depuis sessionStorage
|
|
const savedRows = sessionStorage.getItem('tf-centre-rows');
|
|
if (savedRows && sessionStorage.getItem('tf-haut-replie') !== 'true') {
|
|
gridEl.style.gridTemplateRows = savedRows;
|
|
gridEl.classList.remove('grid-rows-2');
|
|
}
|
|
|
|
// Double-click sur drag handle = reset default 1/3 + 2/3
|
|
dragHandle.addEventListener('dblclick', () => {
|
|
gridEl.style.gridTemplateRows = '1fr 2fr';
|
|
gridEl.classList.remove('grid-rows-2');
|
|
sessionStorage.removeItem('tf-centre-rows');
|
|
});
|
|
}
|
|
|
|
// Tabs toggle.
|
|
const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
|
|
const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');
|
|
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener('click', () => {
|
|
const target = tab.dataset.tab;
|
|
if (!target) return;
|
|
|
|
tabs.forEach((t) => {
|
|
const active = t.dataset.tab === target;
|
|
t.setAttribute('aria-selected', active ? 'true' : 'false');
|
|
t.classList.toggle('border-neutral-900', active);
|
|
t.classList.toggle('border-transparent', !active);
|
|
t.classList.toggle('font-medium', active);
|
|
t.classList.toggle('text-neutral-900', active);
|
|
t.classList.toggle('text-neutral-500', !active);
|
|
});
|
|
|
|
panels.forEach((p) => {
|
|
p.classList.toggle('hidden', p.dataset.tabPanel !== target);
|
|
});
|
|
});
|
|
});
|
|
</script>
|