feat(v12-p): preview article 3 zones + colonnes scrollables indep
- PreviewArticle.vue : nouveau composant qui ecoute journal-item-click et s'insere entre Carte O et iframe AEP - EmbedDynamique.vue : retire le swap article (iframe AEP toujours visible en bas) - ColCentre.astro : passe en flex-col, preview ouverte = Carte O 33vh + Preview auto + iframe 67vh, overflow-y-auto sur le container - Bouton 'Retour a la carte' emet preview-close -> grid revient 1/3 + 2/3 - Scroll independant : Journal (gauche), Centre (preview), Insta (droite) - Drag-resize desactive quand preview ouverte (anti-collision)
This commit is contained in:
Jules Neny
@@ -1,13 +1,30 @@
|
||||
---
|
||||
// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7).
|
||||
// BAS : iframe carte AEP + scroll articles Substack (PC4).
|
||||
// MILIEU : preview article (V1.2-P) - inseree au clic journal-item-click.
|
||||
// BAS : iframe carte AEP (toujours visible).
|
||||
import CarteOWrapper from '../vue/CarteOWrapper.vue';
|
||||
import ChatbotV2 from '../vue/ChatbotV2.vue';
|
||||
import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
import PreviewArticle from '../vue/PreviewArticle.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;">
|
||||
<!--
|
||||
V1.2-P : Col centre = flex column container.
|
||||
- Default : Carte O (1/3) + iframe AEP (2/3), pas de scroll vertical (h-full).
|
||||
- Preview ouverte : Carte O (33vh fixe) + Preview (auto) + iframe AEP (67vh fixe), overflow-y-auto.
|
||||
Flex-basis dynamique pilote via JS.
|
||||
-->
|
||||
<div
|
||||
id="col-centre-grid"
|
||||
class="flex flex-col gap-2 p-2"
|
||||
data-preview-open="false"
|
||||
style="height: 100%; overflow-y: hidden;"
|
||||
>
|
||||
<!-- HAUT (default flex-1 base 33%) : 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; flex: 1 1 33%;"
|
||||
>
|
||||
<nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
@@ -58,7 +75,7 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
<!-- 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"
|
||||
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 shrink-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="block w-10 h-0.5 bg-neutral-300 rounded-full"></span>
|
||||
@@ -69,13 +86,24 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
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"
|
||||
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 shrink-0"
|
||||
>
|
||||
<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;">
|
||||
<!-- MILIEU (V1.2-P) : preview article inseree entre Carte O et iframe AEP.
|
||||
Pas de border ici - PreviewArticle.vue gere son propre conteneur.
|
||||
shrink-0 pour preserver sa taille auto, sinon flex pourrait l'ecraser. -->
|
||||
<div id="col-centre-preview-slot" class="shrink-0" style="display: contents;">
|
||||
<PreviewArticle client:visible />
|
||||
</div>
|
||||
|
||||
<!-- BAS (default flex-1 base 67%) : iframe carte AEP toujours visible -->
|
||||
<section
|
||||
id="col-centre-bas"
|
||||
class="border border-neutral-200 rounded overflow-hidden bg-white"
|
||||
style="min-height: 0; flex: 1 1 67%;"
|
||||
>
|
||||
<div class="h-full min-h-[60vh] md:min-h-[400px]">
|
||||
<EmbedDynamique client:visible />
|
||||
</div>
|
||||
@@ -83,29 +111,32 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Poignee repli zone HAUT (mobile only, D.3)
|
||||
// Poignee repli zone HAUT (mobile only)
|
||||
const grid = document.getElementById('col-centre-grid');
|
||||
const haut = document.getElementById('col-centre-haut');
|
||||
const bas = document.getElementById('col-centre-bas');
|
||||
const poignee = document.getElementById('col-centre-poignee');
|
||||
|
||||
// Sauvegarde flex-basis defaults pour restaure apres fermeture preview
|
||||
let defaultHautFlex = '1 1 33%';
|
||||
let defaultBasFlex = '1 1 67%';
|
||||
|
||||
const applyRepliState = (replie: boolean) => {
|
||||
if (!grid || !haut) return;
|
||||
if (grid.dataset.previewOpen === 'true') return; // skip si preview ouverte
|
||||
if (replie) {
|
||||
grid.classList.remove('grid-rows-2');
|
||||
grid.style.gridTemplateRows = '0fr 1fr';
|
||||
haut.style.flex = '0 0 0%';
|
||||
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.flex = defaultHautFlex;
|
||||
haut.style.overflow = '';
|
||||
haut.style.minHeight = '';
|
||||
haut.style.minHeight = '0';
|
||||
poignee?.setAttribute('aria-label', 'Replier la Carte O');
|
||||
}
|
||||
};
|
||||
|
||||
// Etat initial depuis sessionStorage
|
||||
const savedRepli = sessionStorage.getItem('tf-haut-replie');
|
||||
applyRepliState(savedRepli === 'true');
|
||||
|
||||
@@ -116,53 +147,78 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
applyRepliState(next);
|
||||
});
|
||||
|
||||
// Drag-resize desktop (>=768px)
|
||||
const dragHandle = document.getElementById('col-centre-drag-handle');
|
||||
const gridEl = document.getElementById('col-centre-grid');
|
||||
// V1.2-P : preview ouverte = container scrollable, Carte O et iframe AEP figes en vh.
|
||||
const applyPreviewState = (open: boolean) => {
|
||||
if (!grid || !haut || !bas) return;
|
||||
grid.dataset.previewOpen = String(open);
|
||||
if (open) {
|
||||
// Memorise les flex actuels avant override (au cas ou l'user a drag-resize)
|
||||
const curHautFlex = haut.style.flex;
|
||||
const curBasFlex = bas.style.flex;
|
||||
if (curHautFlex && !curHautFlex.startsWith('0 0')) defaultHautFlex = curHautFlex;
|
||||
if (curBasFlex) defaultBasFlex = curBasFlex;
|
||||
|
||||
if (dragHandle && gridEl) {
|
||||
// Figer hauteurs : Carte O 33vh, iframe AEP 67vh - on perd le flex
|
||||
haut.style.flex = '0 0 33vh';
|
||||
bas.style.flex = '0 0 67vh';
|
||||
// Le container reste a 100% du parent (overflow-hidden de <main>),
|
||||
// mais on active le scroll interne pour passer Carte O -> Preview -> iframe AEP.
|
||||
grid.style.height = '100%';
|
||||
grid.style.minHeight = '';
|
||||
grid.style.overflowY = 'auto';
|
||||
} else {
|
||||
haut.style.flex = defaultHautFlex;
|
||||
bas.style.flex = defaultBasFlex;
|
||||
grid.style.height = '100%';
|
||||
grid.style.minHeight = '';
|
||||
grid.style.overflowY = 'hidden';
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('journal-item-click', () => {
|
||||
applyPreviewState(true);
|
||||
// Scroll vers la preview apres mount
|
||||
requestAnimationFrame(() => {
|
||||
const preview = document.querySelector('.preview-article');
|
||||
if (preview && grid) {
|
||||
const previewTop = (preview as HTMLElement).offsetTop;
|
||||
grid.scrollTo({ top: Math.max(0, previewTop - 8), behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
window.addEventListener('preview-close', () => {
|
||||
applyPreviewState(false);
|
||||
});
|
||||
|
||||
// Drag-resize desktop (>=768px) - desactive quand preview ouverte
|
||||
const dragHandle = document.getElementById('col-centre-drag-handle');
|
||||
|
||||
if (dragHandle && grid && haut && bas) {
|
||||
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;
|
||||
};
|
||||
let startHautH = 0;
|
||||
let containerH = 0;
|
||||
|
||||
dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
|
||||
if (grid.dataset.previewOpen === 'true') return;
|
||||
if (sessionStorage.getItem('tf-haut-replie') === 'true') return;
|
||||
isDragging = true;
|
||||
startY = e.clientY;
|
||||
startTop = (getHautPercent() / 100) * getGridHeight();
|
||||
startHautH = haut.getBoundingClientRect().height;
|
||||
containerH = grid.getBoundingClientRect().height;
|
||||
document.body.style.cursor = 'row-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
if (!isDragging || !gridEl) return;
|
||||
if (!isDragging) 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');
|
||||
const newHautH = Math.min(Math.max(startHautH + delta, containerH * 0.2), containerH * 0.8);
|
||||
const hautPct = (newHautH / containerH) * 100;
|
||||
const basPct = 100 - hautPct;
|
||||
haut.style.flex = `1 1 ${hautPct.toFixed(1)}%`;
|
||||
bas.style.flex = `1 1 ${basPct.toFixed(1)}%`;
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
@@ -170,23 +226,37 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
|
||||
isDragging = false;
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
const rows = gridEl.style.gridTemplateRows;
|
||||
if (rows) sessionStorage.setItem('tf-centre-rows', rows);
|
||||
const hf = haut.style.flex;
|
||||
const bf = bas.style.flex;
|
||||
if (hf) {
|
||||
sessionStorage.setItem('tf-centre-haut-flex', hf);
|
||||
defaultHautFlex = hf;
|
||||
}
|
||||
if (bf) {
|
||||
sessionStorage.setItem('tf-centre-bas-flex', bf);
|
||||
defaultBasFlex = bf;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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');
|
||||
const savedHF = sessionStorage.getItem('tf-centre-haut-flex');
|
||||
const savedBF = sessionStorage.getItem('tf-centre-bas-flex');
|
||||
if (savedHF && savedBF && sessionStorage.getItem('tf-haut-replie') !== 'true') {
|
||||
haut.style.flex = savedHF;
|
||||
bas.style.flex = savedBF;
|
||||
defaultHautFlex = savedHF;
|
||||
defaultBasFlex = savedBF;
|
||||
}
|
||||
|
||||
// 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');
|
||||
haut.style.flex = '1 1 33%';
|
||||
bas.style.flex = '1 1 67%';
|
||||
sessionStorage.removeItem('tf-centre-haut-flex');
|
||||
sessionStorage.removeItem('tf-centre-bas-flex');
|
||||
defaultHautFlex = '1 1 33%';
|
||||
defaultBasFlex = '1 1 67%';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user