Compare commits
6 Commits
v2026.5.30
...
v2026.5.36
| Author | SHA1 | Date | |
|---|---|---|---|
 FroSteel
|
cd54764dd5 | ||
|
FroSteel
|
a92e3429b2 | ||
|
FroSteel
|
1ecc60e160 | ||
|
FroSteel
|
a5993c54c9 | ||
|
FroSteel
|
b0a8102c29 | ||
|
FroSteel
|
ecb490c55a |
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Planification",
|
||||
"version": "2026.5.30",
|
||||
"version": "2026.5.36",
|
||||
"description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.",
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
|
||||
+843
-20
@@ -2634,34 +2634,97 @@ header.topbar::before {
|
||||
overflow: visible;
|
||||
background: var(--bg-elevated) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
/* Séparer visuellement la dragbar (collée en haut) des boutons topbar */
|
||||
|
||||
/* Dans le mode minimisé, la topbar n'est plus en absolute : elle se pose en fin
|
||||
de ligne à droite, après la ref */
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-topbar {
|
||||
top: 14px !important; /* sous la dragbar (qui fait ~6-8px) */
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
right: auto !important;
|
||||
margin-left: auto !important;
|
||||
order: 3;
|
||||
flex-shrink: 0;
|
||||
padding: 0 2px;
|
||||
}
|
||||
/* Masquer tous les enfants directs du popup minimisé */
|
||||
|
||||
/* La dragbar devient un simple "handle" à gauche (≡) */
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar {
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
order: 1;
|
||||
flex-shrink: 0;
|
||||
width: 18px !important;
|
||||
height: 22px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
cursor: grab;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-faint);
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.12s, color 0.12s;
|
||||
}
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar::before {
|
||||
content: "≡" !important;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
/* v2026.5.24 : annuler les propriétés du ::before normal (barre grise) */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar:hover {
|
||||
opacity: 1;
|
||||
color: var(--text);
|
||||
}
|
||||
.pinned-popup.pinned-popup-minimized.dragging .pinned-popup-dragbar {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Masquer tous les enfants directs SAUF topbar, dragbar et minref */
|
||||
.pinned-popup.pinned-popup-minimized > *:not(.pinned-popup-topbar):not(.pinned-popup-dragbar):not(.pinned-popup-minref) {
|
||||
display: none !important;
|
||||
}
|
||||
/* L'élément ref dédié, centré et gros */
|
||||
|
||||
/* La ref au centre, cliquable pour agrandir */
|
||||
.pinned-popup-minref {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* v2026.5.24 : centrer horizontalement la ref */
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 10px;
|
||||
font-family: var(--mono, monospace);
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
transition: background 0.12s;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
order: 2;
|
||||
text-align: center; /* v2026.5.24 : centrer le texte */
|
||||
}
|
||||
.pinned-popup-minref:hover {
|
||||
background: var(--bg-muted);
|
||||
color: var(--accent, #3b82f6);
|
||||
}
|
||||
|
||||
/* Boutons plus petits en mode minimisé */
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-btn {
|
||||
width: 22px !important;
|
||||
height: 22px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.pinned-popup.pinned-popup-minimized .pinned-popup-refresh svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -2708,15 +2771,9 @@ header.topbar::before {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
/* v2026.5.18 : couleurs par catégorie (fond = couleur, texte blanc) */
|
||||
.pinned-popup-dock-pill.color-livraison { background: var(--c-livraison); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-installation { background: var(--c-installation); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-recup { background: var(--c-recup); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-remplacement { background: var(--c-remplacement); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-incident { background: var(--c-incident); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-rollout { background: var(--c-rollout); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-reservation { background: var(--c-reservation); color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-absence { background: #2a2f36; color: white; border-color: transparent; }
|
||||
.pinned-popup-dock-pill.color-autre { background: var(--c-autre); color: white; border-color: transparent; }
|
||||
/* v2026.5.26 : les anciennes règles color-XXX qui mettaient un fond coloré vif
|
||||
sont remplacées par une simple barre verticale à gauche de la pastille.
|
||||
Les styles pour ::before sont plus bas dans le fichier. */
|
||||
|
||||
/* v2026.5.18 : bouton "Fermer tous" à droite du dock */
|
||||
.pinned-popups-close-all {
|
||||
@@ -2940,3 +2997,769 @@ body.popup-dragging .pinned-popup {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.23 : drag & drop des pastilles du dock
|
||||
========================================================================== */
|
||||
.pinned-popup-dock-pill {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: opacity 0.15s, transform 0.12s;
|
||||
}
|
||||
.pinned-popup-dock-pill:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.pinned-popup-dock-pill.pill-dragging {
|
||||
opacity: 0.3 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pill-dragging-ghost {
|
||||
animation: pill-ghost-bounce 0.2s ease-out;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.4);
|
||||
}
|
||||
@keyframes pill-ghost-bounce {
|
||||
from { transform: scale(1); }
|
||||
to { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.25 : pastille dock enrichie (lieu + service + date) +
|
||||
bouton Paramètres dans popup user-badge +
|
||||
ref dans mini-menu pill
|
||||
v2026.5.26 : couleurs sobres (fond sombre + barre colorée à gauche) +
|
||||
contenu centré
|
||||
========================================================================== */
|
||||
|
||||
/* Pastille dock : 3 lignes centrées, fond sombre, barre colorée à gauche */
|
||||
.pinned-popup-dock-pill {
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 6px 14px 6px 18px !important;
|
||||
gap: 2px !important;
|
||||
line-height: 1.2 !important;
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
/* Fond sobre et texte bien lisible, peu importe la catégorie */
|
||||
background: var(--bg-muted) !important;
|
||||
color: var(--text) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Barre verticale colorée à gauche = indicateur de catégorie */
|
||||
.pinned-popup-dock-pill::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--c-autre);
|
||||
}
|
||||
.pinned-popup-dock-pill.color-livraison::before { background: var(--c-livraison); }
|
||||
.pinned-popup-dock-pill.color-installation::before { background: var(--c-installation); }
|
||||
.pinned-popup-dock-pill.color-recup::before { background: var(--c-recup); }
|
||||
.pinned-popup-dock-pill.color-remplacement::before { background: var(--c-remplacement); }
|
||||
.pinned-popup-dock-pill.color-incident::before { background: var(--c-incident); }
|
||||
.pinned-popup-dock-pill.color-rollout::before { background: var(--c-rollout); }
|
||||
.pinned-popup-dock-pill.color-reservation::before { background: var(--c-reservation); }
|
||||
.pinned-popup-dock-pill.color-absence::before { background: #666; }
|
||||
.pinned-popup-dock-pill.color-autre::before { background: var(--c-autre); }
|
||||
|
||||
.pinned-popup-dock-pill-lieu {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
.pinned-popup-dock-pill-service {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
.pinned-popup-dock-pill-date {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--mono, monospace);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Ref dans le mini-menu hover de la pastille */
|
||||
.pill-hover-menu-ref {
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
font-family: var(--mono, monospace);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Bouton Paramètres dans popup user-badge */
|
||||
.user-name-popup-settings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg-muted);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||||
}
|
||||
.user-name-popup-settings:hover {
|
||||
background: var(--accent, #3b82f6);
|
||||
color: white;
|
||||
border-color: var(--accent, #3b82f6);
|
||||
}
|
||||
.user-name-popup-settings .settings-ico {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.26 : rond gris avec "?" quand user inconnu
|
||||
========================================================================== */
|
||||
.user-badge.user-badge-unknown {
|
||||
--user-badge-color: #6b7280 !important;
|
||||
opacity: 0.75;
|
||||
font-weight: 500;
|
||||
}
|
||||
.user-badge.user-badge-unknown:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.27 : agrandir +20% les textes topbar + stats bar pour la lisibilité
|
||||
========================================================================== */
|
||||
/* Labels boutons topbar */
|
||||
.btn-action-label,
|
||||
.btn-refresh-label {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.btn-today {
|
||||
font-size: 14px !important;
|
||||
padding: 7px 12px !important;
|
||||
}
|
||||
.btn-subtle {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.capture-info {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 21px !important; /* +20% depuis 18px */
|
||||
}
|
||||
/* Date-custom label (Vendredi 24.04.2026) */
|
||||
#date-custom-label {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.date-custom {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
/* Stats bar */
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.stats-bar strong {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* v2026.5.27 : icône thème plus contrastée avec bordure + fond visible */
|
||||
#theme-toggle {
|
||||
border: 1.5px solid var(--border-strong, rgba(128,128,128,0.5)) !important;
|
||||
background: var(--bg-muted) !important;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
#theme-toggle:hover {
|
||||
background: var(--accent-soft, rgba(59, 130, 246, 0.15)) !important;
|
||||
border-color: var(--accent, #3b82f6) !important;
|
||||
}
|
||||
#theme-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.27 : classification visuelle des absences (Maladie, Congé, Pompier)
|
||||
========================================================================== */
|
||||
|
||||
/* Variables de couleurs pour les catégories d'absence */
|
||||
:root {
|
||||
--c-maladie: #4338ca; /* Indigo foncé */
|
||||
--c-maladie-soft: #e0e7ff; /* Indigo très clair */
|
||||
--c-conge: #06b6d4; /* Cyan */
|
||||
--c-conge-soft: #cffafe; /* Cyan très clair */
|
||||
}
|
||||
html.theme-dark {
|
||||
--c-maladie: #818cf8; /* Indigo plus clair pour dark mode */
|
||||
--c-maladie-soft: #2a1e66; /* Indigo foncé pour fonds */
|
||||
--c-conge: #67e8f9; /* Cyan plus clair pour dark mode */
|
||||
--c-conge-soft: #0e3e4a; /* Cyan foncé pour fonds */
|
||||
}
|
||||
|
||||
/* Badge "Maladie" à côté du nom */
|
||||
.badge-maladie {
|
||||
background: var(--c-maladie-soft);
|
||||
color: var(--c-maladie);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Badge "Congé" / "Congés" à côté du nom */
|
||||
.badge-conge {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Carte entière : couleur de fond + barre gauche épaisse pour absence */
|
||||
.card.absence-cat-maladie {
|
||||
border-left: 4px solid var(--c-maladie);
|
||||
background: linear-gradient(to bottom, var(--c-maladie-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-maladie {
|
||||
background: linear-gradient(to bottom, rgba(67, 56, 202, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
.card.absence-cat-conge {
|
||||
border-left: 4px solid var(--c-conge);
|
||||
background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-conge {
|
||||
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
/* Pompier — on reprend le style existant mais on accentue le border-left */
|
||||
.card.absence-cat-pompier {
|
||||
border-left: 4px solid var(--danger);
|
||||
}
|
||||
|
||||
/* Pastille ronde à côté du nom */
|
||||
.tech-name-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tech-name-dot.absence-dot-maladie { background: var(--c-maladie); }
|
||||
.tech-name-dot.absence-dot-conge { background: var(--c-conge); }
|
||||
.tech-name-dot.absence-dot-pompier { background: var(--danger); }
|
||||
|
||||
/* Note statut (banner texte sur la zone interventions) */
|
||||
.card-status-note {
|
||||
padding: 14px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
margin: 10px;
|
||||
}
|
||||
.card-status-note.absent-maladie {
|
||||
background: var(--c-maladie-soft);
|
||||
color: var(--c-maladie);
|
||||
}
|
||||
.card-status-note.absent-conge {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
}
|
||||
.card-status-note.pompier {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.28 : popups épinglés gardent une taille standard au resize de la
|
||||
fenêtre. Le max-width 620px du tooltip de base les contraignait quand on
|
||||
réduisait la largeur depuis le côté droit — désormais ils restent à leur
|
||||
taille créée et sont simplement repositionnés dans la safe area.
|
||||
========================================================================== */
|
||||
.pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
|
||||
max-width: none !important;
|
||||
width: 520px !important; /* largeur standard fixe */
|
||||
min-width: 380px;
|
||||
}
|
||||
/* Sur les très petits écrans (< 600px), on laisse le clamp naturel */
|
||||
@media (max-width: 600px) {
|
||||
.pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
|
||||
width: calc(100vw - 20px) !important;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.30 : absences récurrentes (Pillonel vendredi) en cyan
|
||||
(même couleur que Congé mais texte distinct "Absent le vendredi")
|
||||
========================================================================== */
|
||||
|
||||
/* Badge "Absent" cyan pour récurrent */
|
||||
.badge-recurring {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Carte entière : bordure gauche cyan + fond dégradé */
|
||||
.card.absence-cat-recurring {
|
||||
border-left: 4px solid var(--c-conge);
|
||||
background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-recurring {
|
||||
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
/* Message "Absent le vendredi" (ou autre récurrence) en cyan */
|
||||
.tech-absence-recurring {
|
||||
padding: 14px 12px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--c-conge);
|
||||
background: var(--c-conge-soft);
|
||||
border-radius: 6px;
|
||||
margin: 10px;
|
||||
}
|
||||
html.theme-dark .tech-absence-recurring {
|
||||
background: rgba(6, 182, 212, 0.12);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.30 : mode compact pour écrans 24" Full HD (1920×1080) ou plus petits
|
||||
Objectif : réduire les paddings et tailles sans casser la lisibilité.
|
||||
========================================================================== */
|
||||
@media (max-width: 1920px) {
|
||||
/* Topbar légèrement compactée */
|
||||
.topbar {
|
||||
padding: 8px 14px !important;
|
||||
gap: 10px;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.app-clock-date,
|
||||
.app-clock-time {
|
||||
font-size: 19px !important;
|
||||
}
|
||||
.app-clock-date::after {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
/* Stats bar plus dense */
|
||||
.stats-bar {
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.stats-bar strong {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* Cartes : padding réduit */
|
||||
.card-header {
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
.card-tech-name {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.card-tech-badge {
|
||||
font-size: 10px !important;
|
||||
padding: 2px 6px !important;
|
||||
}
|
||||
|
||||
/* Interventions : padding vertical réduit */
|
||||
.intervention-v2 {
|
||||
padding: 7px 10px 9px 6px !important;
|
||||
}
|
||||
|
||||
/* Timeline plus fine */
|
||||
.timeline {
|
||||
padding: 10px 12px 6px 12px !important;
|
||||
}
|
||||
.timeline-bar {
|
||||
height: 18px !important;
|
||||
}
|
||||
.timeline-label {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
/* Boutons topbar un peu plus compacts */
|
||||
.btn-action,
|
||||
.btn-refresh {
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
.btn-action-label,
|
||||
.btn-refresh-label {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.btn-today {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.btn-subtle {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Grid cartes : colonnes légèrement plus étroites pour en caser 1-2 de + */
|
||||
.main-grid {
|
||||
gap: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint encore plus étroit (tablette / laptop 13-14") */
|
||||
@media (max-width: 1400px) {
|
||||
.topbar {
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
.app-clock-date,
|
||||
.app-clock-time {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
.intervention-v2 {
|
||||
padding: 6px 8px 7px 5px !important;
|
||||
}
|
||||
.card-header {
|
||||
padding: 7px 10px !important;
|
||||
}
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.32 : Vue horizontale — chaque tech = 1 ligne fine empilée
|
||||
Active seulement quand <html class="view-horizontal">.
|
||||
But : voir les 8 techs d'un coup sur un 24" Full HD.
|
||||
========================================================================== */
|
||||
|
||||
/* Mode horizontal : la grille devient un simple stack vertical */
|
||||
html.view-horizontal .cards {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
padding: 8px 12px 24px 12px !important;
|
||||
}
|
||||
|
||||
/* Chaque carte devient une ligne horizontale compacte */
|
||||
html.view-horizontal .card {
|
||||
flex-direction: row !important;
|
||||
align-items: stretch !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Header devient une barre latérale gauche fixe */
|
||||
/* v2026.5.35 : réduit à 140px (au lieu de 200px) pour donner plus de place à la timeline */
|
||||
html.view-horizontal .card-header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
justify-content: center !important;
|
||||
min-width: 140px !important;
|
||||
max-width: 140px !important;
|
||||
border-bottom: none !important;
|
||||
border-right: 1px solid var(--border) !important;
|
||||
padding: 6px 10px !important;
|
||||
gap: 3px !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
html.view-horizontal .card-tech-name {
|
||||
font-size: 13px !important;
|
||||
font-weight: 600;
|
||||
line-height: 1.2 !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
max-width: 100%;
|
||||
}
|
||||
html.view-horizontal .card-tech-badge {
|
||||
font-size: 10px !important;
|
||||
padding: 2px 6px !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Le body prend le reste de la ligne, scroll horizontal si trop d'interv */
|
||||
html.view-horizontal .card-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Timeline visible, un peu plus fine */
|
||||
html.view-horizontal .timeline {
|
||||
padding: 6px 10px 4px 10px !important;
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
html.view-horizontal .timeline-bar {
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
/* Liste interventions en mode "chips" (défilement horizontal) */
|
||||
html.view-horizontal .card-body > .intervention-v2,
|
||||
html.view-horizontal .card-body > .intervention {
|
||||
display: none !important; /* masquer la liste détaillée en vue horiz */
|
||||
}
|
||||
|
||||
/* Messages "Pas d'intervention planifiée" / "Absent" tiennent sur la ligne */
|
||||
html.view-horizontal .card-empty,
|
||||
html.view-horizontal .card-status-note,
|
||||
html.view-horizontal .tech-absence-recurring {
|
||||
padding: 8px 12px !important;
|
||||
font-size: 13px !important;
|
||||
margin: 4px 8px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Stats quick pour chaque tech (nb interv etc.) affichées dans le header */
|
||||
html.view-horizontal .card-header::after {
|
||||
content: "";
|
||||
}
|
||||
html.view-horizontal .tech-row-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
html.view-horizontal .tech-row-stats .stat-pill {
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* En vue classique, on cache les éléments spécifiques horizontal */
|
||||
html.view-classic .tech-row-stats {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.35 : en vue horizontale, stats globales sur le CÔTÉ GAUCHE
|
||||
v2026.5.36 : REFONTE — les stats (et tout le reste) sont maintenant déplacés
|
||||
physiquement dans .horizontal-sidebar (via JS _moveElementsToSidebar).
|
||||
Le CSS ci-dessous est conservé au cas où une ancienne instance
|
||||
ait encore .stats dans <main>, mais il ne devrait plus s'appliquer.
|
||||
========================================================================== */
|
||||
html.view-horizontal main#main.legacy-stats-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.36 : Vue horizontale — sidebar verticale à gauche
|
||||
Contient (haut → bas) : nav date, horloge, stats, boutons actions.
|
||||
Seuls restent en haut : user-badge, titre "Planification", bouton thème.
|
||||
========================================================================== */
|
||||
|
||||
/* Topbar en vue horizontale : minimaliste */
|
||||
html.view-horizontal .topbar {
|
||||
padding: 6px 12px !important;
|
||||
gap: 8px;
|
||||
}
|
||||
/* Cacher la zone centrale (déplacée vers sidebar) */
|
||||
html.view-horizontal .topbar .app-clock,
|
||||
html.view-horizontal .topbar .capture-info,
|
||||
html.view-horizontal .topbar .app-session {
|
||||
display: none !important;
|
||||
}
|
||||
/* topbar-left ne contient plus que user-badge + titre */
|
||||
html.view-horizontal .topbar-left {
|
||||
gap: 10px;
|
||||
}
|
||||
/* topbar-right ne contient plus que le theme-toggle */
|
||||
html.view-horizontal .topbar-right {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Sidebar verticale à gauche */
|
||||
.horizontal-sidebar {
|
||||
flex: 0 0 auto;
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
background: var(--bg-muted);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
max-height: calc(100vh - 48px); /* topbar ~48px */
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Cacher la sidebar en vue classique (au cas où elle existe encore) */
|
||||
html.view-classic .horizontal-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Layout main avec sidebar */
|
||||
html.view-horizontal main#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Groupe navigation date dans la sidebar — v2026.5.36 (OBSOLÈTE v2026.5.37)
|
||||
v2026.5.37 : date-nav devient display: contents pour que ses enfants
|
||||
soient directement positionnables dans la sidebar (btn-today
|
||||
en haut, app-clock intercalé, flèches groupées dans wrapper).
|
||||
Les anciennes règles ci-dessous sont conservées pour compat
|
||||
mais neutralisées par les overrides v5.37 plus bas. */
|
||||
html.view-horizontal .horizontal-sidebar .date-nav {
|
||||
/* v5.37 override via display: contents ci-dessous */
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-nav {
|
||||
/* v5.37 : ces règles sont conservées au cas où flèches restent dans date-nav
|
||||
(pas censé arriver puisque JS les sort dans #sidebar-arrows). */
|
||||
padding: 4px 8px;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-today {
|
||||
padding: 4px 10px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Horloge dans la sidebar */
|
||||
html.view-horizontal .horizontal-sidebar .app-clock {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
left: auto !important;
|
||||
top: auto !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-date {
|
||||
font-size: 11px !important;
|
||||
color: var(--text-muted) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-date::after {
|
||||
content: "" !important; /* supprimer le gros point · */
|
||||
display: none !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-time {
|
||||
font-size: 20px !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--text) !important;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Info capture (Synchronisé à...) */
|
||||
html.view-horizontal .horizontal-sidebar .capture-info {
|
||||
display: block !important;
|
||||
font-size: 11px !important;
|
||||
color: var(--text-muted);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* Stats globales dans la sidebar (séparateurs cachés) */
|
||||
html.view-horizontal .horizontal-sidebar #stats {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 4px !important;
|
||||
padding: 6px 4px !important;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin: 2px 0;
|
||||
background: transparent !important;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
html.view-horizontal .stats .global-stat-main b {
|
||||
font-size: 18px !important;
|
||||
color: var(--text);
|
||||
}
|
||||
/* Masquer les séparateurs "·" en vue verticale */
|
||||
html.view-horizontal .stats .global-stat-sep {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.view-horizontal .cards {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0; /* autorise le shrink si grand nombre de techs */
|
||||
}
|
||||
|
||||
/* Breakpoint étroit : stats plus compactes */
|
||||
@media (max-width: 1400px) {
|
||||
html.view-horizontal .stats {
|
||||
width: 160px;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@
|
||||
fetch aboutit. En cas d'échec persistant, reste sur "?". -->
|
||||
<button id="user-badge" class="user-badge user-badge-unknown"
|
||||
type="button" aria-label="Utilisateur connecté"
|
||||
title="Utilisateur connecté"></button>
|
||||
title="Utilisateur — cliquer pour accéder aux paramètres">?</button>
|
||||
<h1 id="app-title">Planification</h1>
|
||||
<div class="date-nav">
|
||||
<button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>
|
||||
|
||||
@@ -1046,8 +1046,33 @@ function _toggleView() {
|
||||
_setCurrentView(next);
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.36 : applique le mode de vue (classique/horizontal) en déplaçant
|
||||
* physiquement les éléments de la topbar vers/depuis une sidebar verticale
|
||||
* à gauche de l'écran.
|
||||
*
|
||||
* En vue horizontale :
|
||||
* - Sidebar gauche verticale contenant (haut → bas) :
|
||||
* · Navigation date (prev / date / next / aujourd'hui)
|
||||
* · Horloge + date (compacte, une par ligne)
|
||||
* · Info de synchro
|
||||
* · Stats globales (interventions/techs/absents)
|
||||
* · Boutons actions (Absence, Douchette, Actualiser, Tout recharger, Vider cache)
|
||||
* - Topbar réduite à : user-badge + titre + theme-toggle
|
||||
*
|
||||
* En vue classique :
|
||||
* - Tout est remis dans la topbar comme avant (topbar-left / topbar-right)
|
||||
*
|
||||
* On mémorise les parents d'origine sur chaque élément (data-orig-parent)
|
||||
* pour restaurer proprement en vue classique.
|
||||
*
|
||||
* Logs [viewMode] pour debug.
|
||||
*/
|
||||
function _applyViewMode() {
|
||||
const mode = _getCurrentView();
|
||||
console.log(`[viewMode] application de la vue : ${mode}`);
|
||||
|
||||
// Mettre à jour la classe sur <html> pour les règles CSS
|
||||
document.documentElement.classList.remove("view-classic", "view-horizontal");
|
||||
document.documentElement.classList.add("view-" + mode);
|
||||
}
|
||||
@@ -5964,6 +5989,21 @@ function extractContacts(raw) {
|
||||
*/
|
||||
function splitOneContact(raw) {
|
||||
if (!raw) return { name: null, phone: null };
|
||||
|
||||
// v2026.5.25 : avant d'extraire les numéros, on REMPLACE les séquences qui
|
||||
// sont des identifiants de matériel (LETTRES_CHIFFRES) par des espaces.
|
||||
// Exemples : XXXX_NNNNNNNNNNN, XNNNNNN, XNNNNNN, XNNNNNN.
|
||||
// Sans ça, XXXX_NNNNNNNNNNN laisse des "NNNN NNN NN NN" qui se font prendre
|
||||
// pour un numéro de téléphone par le regex qui greedy sur [0-9\s.\-].
|
||||
// On remplace par des espaces de même longueur pour préserver les offsets
|
||||
// (important pour le calcul de position du nom avant le 1er numéro).
|
||||
raw = String(raw);
|
||||
raw = raw.replace(/\b[A-Z]{1,6}_\d+/g, (m) => " ".repeat(m.length));
|
||||
// Idem pour les identifiants sans underscore style XNNNNNN, XNNNNNN, XNNNNNN
|
||||
// (1-2 lettres majuscules suivies de 5+ chiffres collés). On garde assez
|
||||
// permissif pour matcher les variantes sans enlever des vrais mots.
|
||||
raw = raw.replace(/\b[A-Z]{1,3}\d{5,}\b/g, (m) => " ".repeat(m.length));
|
||||
|
||||
// v4.1.20 : regex plus permissives pour tolérer les erreurs humaines :
|
||||
// - pas d'espace après le numéro (ex: "021555555Textecoller")
|
||||
// - pas d'espace/parenthèse avant un court numéro
|
||||
@@ -6485,12 +6525,29 @@ function showTooltip(e, iv, rowEl) {
|
||||
// v2026.5.19 : pendant qu'un popup épinglé est en cours de drag, on ignore
|
||||
// les mouseenter sur les cartes — sinon en survolant une carte on déclenche
|
||||
// l'ouverture d'un nouveau tooltip par-dessus ce qu'on est en train de bouger.
|
||||
if (state._popupDragging) return;
|
||||
if (state._popupDragging) {
|
||||
console.log("[showTooltip] ignoré : popup drag en cours");
|
||||
return;
|
||||
}
|
||||
|
||||
// v2026.5.27 : fermer tout popup "soft-unpinned" encore visible (il traîne
|
||||
// parce que la souris était dessus). Dès qu'on survole autre chose, on veut
|
||||
// que seul le popup actuel ou les popups épinglés restent.
|
||||
// v2026.5.34 : le softUnpin ne supprime plus le popup au mouseleave, donc
|
||||
// ici on les supprime explicitement quand un nouveau tooltip démarre.
|
||||
const softUnpinned = document.querySelectorAll(".soft-unpinned");
|
||||
if (softUnpinned.length) {
|
||||
console.log(`[showTooltip] suppression de ${softUnpinned.length} popup(s) soft-unpinned`);
|
||||
softUnpinned.forEach(el => {
|
||||
try { el.remove(); } catch (err) {}
|
||||
});
|
||||
}
|
||||
|
||||
// v4.1.15 : si la bulle est épinglée sur une autre iv, on NE REMPLACE PAS
|
||||
// son contenu (l'user veut garder la fiche épinglée même en survolant
|
||||
// d'autres cartes).
|
||||
if (bulleState.pinned && state.currentTooltipIv && state.currentTooltipIv !== iv) {
|
||||
console.log("[showTooltip] ignoré : tooltip épinglé sur une autre iv");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -6677,56 +6734,108 @@ function reapplyTooltipPosition() {
|
||||
el.style.top = ((el._absBasisTop || 0) + dy) + "px";
|
||||
}
|
||||
|
||||
function positionTooltipAnchored(rowEl) {
|
||||
/**
|
||||
* v2026.5.34 : fonction UNIQUE et unifiée de positionnement ancré du tooltip.
|
||||
*
|
||||
* Utilisée par :
|
||||
* - showTooltip() — hover d'une row intervention en vue classique
|
||||
* - openPersistentTimelinePopup() — clic (classique) ou hover (horizontal)
|
||||
* d'un segment timeline
|
||||
* - showTooltip() pour les cartes/badges absence
|
||||
*
|
||||
* Algorithme :
|
||||
* 1. Essaie 4 positions dans l'ordre : droite, gauche, dessous, dessus
|
||||
* 2. Chaque position : padding de 8px min par rapport à la source
|
||||
* 3. Chaque position : doit tenir dans la safe area (pas sous topbar/dock)
|
||||
* 4. Chaque position : ne doit pas chevaucher les popups épinglés existants
|
||||
* 5. Première position qui satisfait tout → on la prend
|
||||
* 6. Fallback si aucune ne marche : droite clampée (la moins pire)
|
||||
*
|
||||
* La popup ne couvre JAMAIS la source (pad >= 8px en distance euclidienne).
|
||||
*
|
||||
* @param {HTMLElement} sourceEl - l'élément déclencheur (row, card, segment)
|
||||
* @param {object} opts - options { anchorBelow: true pour préférer dessous }
|
||||
*/
|
||||
function positionTooltipAnchored(sourceEl, opts) {
|
||||
opts = opts || {};
|
||||
const el = tooltipEl();
|
||||
if (!rowEl || !el) return;
|
||||
const pad = 14;
|
||||
const rowRect = rowEl.getBoundingClientRect();
|
||||
if (!el) {
|
||||
console.warn("[positionTooltip] tooltip DOM introuvable");
|
||||
return;
|
||||
}
|
||||
if (!sourceEl) {
|
||||
console.warn("[positionTooltip] sourceEl null — pas de positionnement");
|
||||
return;
|
||||
}
|
||||
|
||||
const pad = 10; // padding entre source et popup
|
||||
const viewportMargin = 8; // marge par rapport aux bords
|
||||
const srcRect = sourceEl.getBoundingClientRect();
|
||||
const tipRect = el.getBoundingClientRect();
|
||||
|
||||
// Position X : à droite de la ligne par défaut
|
||||
let x = rowRect.right + pad;
|
||||
if (x + tipRect.width > window.innerWidth - 8) {
|
||||
x = rowRect.left - tipRect.width - pad;
|
||||
}
|
||||
if (x < 4) x = 4;
|
||||
|
||||
// Position Y : aligné en haut de la ligne
|
||||
let y = rowRect.top;
|
||||
if (y + tipRect.height > window.innerHeight - 8) {
|
||||
y = window.innerHeight - tipRect.height - 8;
|
||||
}
|
||||
if (y < 4) y = 4;
|
||||
|
||||
// v2026.5.17 : éviter le chevauchement avec les popups épinglés existants.
|
||||
// On teste la position candidate, et si elle chevauche un popup épinglé,
|
||||
// on essaie d'autres candidats (gauche de la carte, au-dessous, au-dessus).
|
||||
const tipW = tipRect.width || 320;
|
||||
const tipW = tipRect.width || 320; // fallback taille si pas encore rendu
|
||||
const tipH = tipRect.height || 200;
|
||||
const pinnedRects = _getPinnedPopupsViewportRects();
|
||||
if (pinnedRects.length) {
|
||||
const candidates = [
|
||||
{ x, y, label: "right" },
|
||||
{ x: rowRect.left - tipW - pad, y: rowRect.top, label: "left" },
|
||||
{ x: rowRect.left, y: rowRect.bottom + pad, label: "below" },
|
||||
{ x: rowRect.left, y: rowRect.top - tipH - pad, label: "above" }
|
||||
];
|
||||
for (const c of candidates) {
|
||||
// Borne dans le viewport
|
||||
if (c.x < 4) c.x = 4;
|
||||
if (c.x + tipW > window.innerWidth - 8) c.x = window.innerWidth - tipW - 8;
|
||||
if (c.y < 4) c.y = 4;
|
||||
if (c.y + tipH > window.innerHeight - 8) c.y = window.innerHeight - tipH - 8;
|
||||
const testRect = { left: c.x, top: c.y, right: c.x + tipW, bottom: c.y + tipH };
|
||||
const overlaps = pinnedRects.some(pr => _rectsOverlap(testRect, pr));
|
||||
if (!overlaps) {
|
||||
x = c.x; y = c.y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Safe area : respecter topbar en haut, dock en bas
|
||||
const safe = (typeof _getPopupSafeArea === "function")
|
||||
? _getPopupSafeArea()
|
||||
: { left: viewportMargin, top: viewportMargin,
|
||||
right: window.innerWidth - viewportMargin,
|
||||
bottom: window.innerHeight - viewportMargin };
|
||||
|
||||
// 4 candidats (ordre : droite → gauche → dessous → dessus)
|
||||
// Préférence opts.anchorBelow = true : dessous en premier (ex: clic timeline)
|
||||
const rightCandidate = { x: srcRect.right + pad, y: srcRect.top, label: "droite" };
|
||||
const leftCandidate = { x: srcRect.left - tipW - pad, y: srcRect.top, label: "gauche" };
|
||||
const belowCandidate = { x: srcRect.left, y: srcRect.bottom + pad, label: "dessous" };
|
||||
const aboveCandidate = { x: srcRect.left, y: srcRect.top - tipH - pad, label: "dessus" };
|
||||
|
||||
const candidates = opts.anchorBelow
|
||||
? [belowCandidate, aboveCandidate, rightCandidate, leftCandidate]
|
||||
: [rightCandidate, leftCandidate, belowCandidate, aboveCandidate];
|
||||
|
||||
const pinnedRects = (typeof _getPinnedPopupsViewportRects === "function")
|
||||
? _getPinnedPopupsViewportRects()
|
||||
: [];
|
||||
|
||||
let chosen = null;
|
||||
for (const c of candidates) {
|
||||
// Clamp dans la safe area
|
||||
let cx = c.x, cy = c.y;
|
||||
if (cx < safe.left) cx = safe.left;
|
||||
if (cx + tipW > safe.right) cx = safe.right - tipW;
|
||||
if (cx < safe.left) continue; // popup plus large que safe area — skip
|
||||
if (cy < safe.top) cy = safe.top;
|
||||
if (cy + tipH > safe.bottom) cy = safe.bottom - tipH;
|
||||
if (cy < safe.top) continue;
|
||||
|
||||
// Ne chevauche PAS la source (garantit qu'on ne la cache pas)
|
||||
const candRect = { left: cx, top: cy, right: cx + tipW, bottom: cy + tipH };
|
||||
if (_rectsOverlap(candRect, srcRect)) continue;
|
||||
|
||||
// Ne chevauche pas les popups épinglés existants
|
||||
const hitsPinned = pinnedRects.some(pr => _rectsOverlap(candRect, pr));
|
||||
if (hitsPinned) continue;
|
||||
|
||||
chosen = { x: cx, y: cy, label: c.label };
|
||||
break;
|
||||
}
|
||||
|
||||
setTooltipViewportPosition(x, y);
|
||||
if (!chosen) {
|
||||
// Fallback : droite clampée à tout prix, même si ça chevauche (cas rare
|
||||
// avec écran minuscule ou beaucoup de popups épinglés)
|
||||
let fx = srcRect.right + pad;
|
||||
let fy = srcRect.top;
|
||||
if (fx + tipW > safe.right) fx = safe.right - tipW;
|
||||
if (fx < safe.left) fx = safe.left;
|
||||
if (fy + tipH > safe.bottom) fy = safe.bottom - tipH;
|
||||
if (fy < safe.top) fy = safe.top;
|
||||
chosen = { x: fx, y: fy, label: "fallback" };
|
||||
console.log("[positionTooltip] fallback utilisé (aucun candidat optimal trouvé)");
|
||||
} else {
|
||||
console.log(`[positionTooltip] position choisie : ${chosen.label} (${Math.round(chosen.x)}, ${Math.round(chosen.y)})`);
|
||||
}
|
||||
|
||||
setTooltipViewportPosition(chosen.x, chosen.y);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -6923,13 +7032,60 @@ function pinTooltip() {
|
||||
if (closeAllBtn) closeAllBtn.remove();
|
||||
}
|
||||
|
||||
// Chercher la ligne source (row iv-v2)
|
||||
// Chercher la ligne source pour le positionnement.
|
||||
// v2026.5.35 : en vue horizontale, les rows .intervention-v2 sont CACHÉES
|
||||
// (display: none via CSS .view-horizontal). getBoundingClientRect d'un
|
||||
// élément caché retourne (0,0,0,0) → popup part en haut à gauche.
|
||||
// Solution : priorité au tooltip actuellement visible (qui EST la vraie
|
||||
// source visuelle du clic/hover). Fallback sur le segment timeline. Enfin
|
||||
// la row (qui marche en vue classique).
|
||||
let rowEl = null;
|
||||
if (iv.actionId) {
|
||||
rowEl = document.querySelector(`.intervention-v2[data-action-id="${iv.actionId}"]`);
|
||||
const _isHorizontalView = document.documentElement.classList.contains("view-horizontal");
|
||||
|
||||
if (_isHorizontalView) {
|
||||
console.log("[pinTooltip] vue horizontale → source = tooltip visible ou segment timeline");
|
||||
// Priorité 1 : le tooltip actuellement affiché (meilleure source visuelle)
|
||||
const currentTip = tooltipEl();
|
||||
if (currentTip && currentTip.classList.contains("visible")) {
|
||||
const r = currentTip.getBoundingClientRect();
|
||||
if (r.width > 0 && r.height > 0) {
|
||||
rowEl = currentTip;
|
||||
console.log(`[pinTooltip] source = tooltip visible (${Math.round(r.left)}, ${Math.round(r.top)})`);
|
||||
}
|
||||
}
|
||||
// Priorité 2 : segment timeline pour cette actionId
|
||||
if (!rowEl && iv.actionId) {
|
||||
// Il peut y avoir plusieurs .timeline-slot avec le même ivIdx si plusieurs
|
||||
// cartes. On prend celui dont la row parente a le bon actionId.
|
||||
const allSlots = document.querySelectorAll(".timeline-slot[data-iv-idx]");
|
||||
for (const slot of allSlots) {
|
||||
const card = slot.closest(".card");
|
||||
if (!card) continue;
|
||||
const ivIdx = slot.dataset.ivIdx;
|
||||
const row = card.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`);
|
||||
if (row && row.dataset.actionId === iv.actionId) {
|
||||
const r = slot.getBoundingClientRect();
|
||||
if (r.width > 0 && r.height > 0) {
|
||||
rowEl = slot;
|
||||
console.log(`[pinTooltip] source = segment timeline actionId=${iv.actionId}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Vue classique : chercher la row .intervention-v2 (comportement d'origine)
|
||||
if (iv.actionId) {
|
||||
rowEl = document.querySelector(`.intervention-v2[data-action-id="${iv.actionId}"]`);
|
||||
if (rowEl) {
|
||||
console.log(`[pinTooltip] vue classique → source = row intervention-v2`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback final : le tooltip live (même s'il n'est pas visible) — position actuelle
|
||||
if (!rowEl) {
|
||||
// Fallback : utiliser la position actuelle du tooltip live
|
||||
console.warn("[pinTooltip] aucune source visible trouvée → fallback tooltip live");
|
||||
rowEl = srcEl;
|
||||
}
|
||||
|
||||
@@ -6947,6 +7103,49 @@ function pinTooltip() {
|
||||
// v2026.5.19 : mémoriser aussi la date pour l'afficher sur la pastille dock
|
||||
popup.dataset.originDate = state.currentDate || "";
|
||||
|
||||
// v2026.5.25 : mémoriser aussi lieu + service pour la pastille enrichie
|
||||
try {
|
||||
const info = iv.infobulle || {};
|
||||
const lieuRaw = info.lieu || iv.bulleLieu || "";
|
||||
// Format pour pastille : "VILLE, Adresse" (on extrait les 2 premières parties)
|
||||
const { ville, adresse } = (typeof splitLieu === "function")
|
||||
? splitLieu(lieuRaw)
|
||||
: { ville: null, adresse: null };
|
||||
let lieuFmt = "";
|
||||
if (ville && adresse) lieuFmt = ville.toUpperCase() + ", " + adresse;
|
||||
else if (adresse) lieuFmt = adresse;
|
||||
else if (ville) lieuFmt = ville.toUpperCase();
|
||||
popup.dataset.lieu = lieuFmt;
|
||||
|
||||
// Service : prendre les 2 dernières parties séparées par "/"
|
||||
// Ex: "AdmCV/DJES/SSCM/SSCM - Admin/TEO - OS" → "SSCM - Admin/TEO - OS"
|
||||
// "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron"
|
||||
// v2026.5.26 : dans le DERNIER segment seulement, couper au " - " (espace
|
||||
// tiret espace) pour retirer les descriptions longues. Les
|
||||
// noms propres comme "Lavaux-Oron" (sans espaces) sont préservés.
|
||||
// Ex: "AdmCV/DJES/SSCM/SPOP - Centre administratif" → "SSCM/SPOP"
|
||||
// "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron" (inchangé)
|
||||
const serviceRaw = (info.service) || iv.categoryLine || "";
|
||||
if (serviceRaw) {
|
||||
const parts = serviceRaw.split("/").map(s => s.trim()).filter(Boolean);
|
||||
let last2 = parts.slice(-2);
|
||||
// Couper au " - " dans le DERNIER élément de last2
|
||||
if (last2.length > 0) {
|
||||
const lastIdx = last2.length - 1;
|
||||
const lastSeg = last2[lastIdx];
|
||||
const dashIdx = lastSeg.indexOf(" - ");
|
||||
if (dashIdx > 0) {
|
||||
last2[lastIdx] = lastSeg.substring(0, dashIdx).trim();
|
||||
}
|
||||
}
|
||||
popup.dataset.service = last2.join("/");
|
||||
} else {
|
||||
popup.dataset.service = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("[pin] lieu/service build failed", err);
|
||||
}
|
||||
|
||||
// v2026.5.17 : masquer l'icône 📌 du contenu cloné (redondante car le
|
||||
// popup a sa propre topbar avec le bouton "désépingler" 📍 explicite)
|
||||
const oldPin = popup.querySelector('.tooltip-pinbtn[data-action="pin"]');
|
||||
@@ -7075,6 +7274,9 @@ function pinTooltip() {
|
||||
|
||||
// Enregistrer dans la liste
|
||||
pinnedPopups.push({ el: popup, iv: iv, rect: pos.rect });
|
||||
// v2026.5.34 : stocker une référence à l'iv sur l'élément DOM — utilisée
|
||||
// par _softUnpinPopup pour pouvoir ré-épingler via le bouton 📌 restauré.
|
||||
popup._linkedIv = iv;
|
||||
|
||||
// v4.3.0 : libérer le tooltip live (il redevient utilisable pour d'autres survols)
|
||||
bulleState.pinned = false;
|
||||
@@ -7138,40 +7340,53 @@ async function _refreshPinnedPopupIv(popup, iv) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Désépinglage "mou" : la popup n'est plus considérée épinglée (elle n'est
|
||||
* plus dans pinnedPopups, donc le comptage pour Ctrl×2 etc. ignore) mais on
|
||||
* la laisse visible. Elle disparait quand la souris sort.
|
||||
* Désépinglage "mou" (v4.3.3) : transforme un popup épinglé en tooltip simple.
|
||||
*
|
||||
* v2026.5.34 : refonte — le popup ne disparaît PLUS au mouseleave. À la place,
|
||||
* il redevient un tooltip normal avec ses boutons ↻ (Actualiser) et 📌
|
||||
* (Épingler) restaurés dans .tooltip-actions, et reste visible à l'écran
|
||||
* comme un tooltip classique. L'user peut le re-cliquer sur 📌 pour le
|
||||
* ré-épingler, ou cliquer ailleurs pour s'en débarrasser normalement.
|
||||
*
|
||||
* @param {HTMLElement} el - le popup à désépingler
|
||||
*/
|
||||
function _softUnpinPopup(el) {
|
||||
// Retirer de la liste (pour le comptage Ctrl×2) mais garder le DOM
|
||||
const idx = pinnedPopups.findIndex(p => p.el === el);
|
||||
if (idx >= 0) pinnedPopups.splice(idx, 1);
|
||||
if (!el) {
|
||||
console.warn("[softUnpin] elément null — abandon");
|
||||
return;
|
||||
}
|
||||
console.log("[softUnpin] désépinglage du popup", el.dataset.actionId || "(sans actionId)");
|
||||
|
||||
// v4.3.3 corr : basculer visuellement en tooltip normal (retirer tous les
|
||||
// attributs visuels du mode épinglé : bordure bleue, dragbar, bouton ×,
|
||||
// padding-top, etc.). La classe .soft-unpinned fait ça côté CSS.
|
||||
// On retire .pinned-popup pour que les règles visuelles lourdes
|
||||
// disparaissent, tout en gardant la popup au même endroit (position
|
||||
// absolute conservée).
|
||||
el.classList.remove("pinned-popup");
|
||||
el.classList.add("soft-unpinned");
|
||||
// Icône 📌 → 📍 pour le clin d'œil (même si elle va bientôt disparaitre)
|
||||
const pinBtn = el.querySelector('[data-action="pin"]');
|
||||
if (pinBtn) pinBtn.textContent = "📍";
|
||||
// Supprimer les éléments propres au mode épinglé : barre de drag et ×
|
||||
// 1. Retirer de la liste des popups épinglés (pour Ctrl×2 etc.)
|
||||
const idx = pinnedPopups.findIndex(p => p.el === el);
|
||||
if (idx >= 0) {
|
||||
pinnedPopups.splice(idx, 1);
|
||||
console.log(`[softUnpin] retiré de pinnedPopups (reste ${pinnedPopups.length})`);
|
||||
}
|
||||
|
||||
// 2. Reset le flag global bulleState.pinned si plus aucun popup épinglé.
|
||||
// Sans ça, le tooltip live "croit" toujours qu'il est pinned et son
|
||||
// handler click (notamment ↻ reload) peut partir en cacahuète.
|
||||
if (pinnedPopups.length === 0) {
|
||||
bulleState.pinned = false;
|
||||
}
|
||||
|
||||
// 3. Retirer les éléments propres au mode épinglé : topbar, dragbar,
|
||||
// close btn, et classes minimized/reduced.
|
||||
const dragbar = el.querySelector(".pinned-popup-dragbar");
|
||||
if (dragbar) dragbar.remove();
|
||||
const closeBtn = el.querySelector(".pinned-popup-close");
|
||||
if (closeBtn) closeBtn.remove();
|
||||
// v2026.5.17 : retirer aussi la nouvelle topbar et le conteneur minimisé
|
||||
const topbar = el.querySelector(".pinned-popup-topbar");
|
||||
if (topbar) topbar.remove();
|
||||
el.classList.remove("pinned-popup-minimized");
|
||||
el.classList.remove("pinned-popup-reduced");
|
||||
|
||||
// v2026.5.18 : retirer aussi la pastille du dock si elle existe
|
||||
// 4. Retirer la pastille du dock si elle existe
|
||||
if (el._linkedPill) {
|
||||
try { el._linkedPill.remove(); } catch (e) {}
|
||||
try { el._linkedPill.remove(); } catch (e) {
|
||||
console.warn("[softUnpin] erreur remove pill:", e);
|
||||
}
|
||||
el._linkedPill = null;
|
||||
}
|
||||
// Si le dock est vide, le cacher ; mettre à jour le bouton "Fermer tous"
|
||||
@@ -7184,28 +7399,123 @@ function _softUnpinPopup(el) {
|
||||
_ensureDockCloseAllBtn();
|
||||
}
|
||||
|
||||
// v2026.5.22 : si le tooltip hover est actuellement affiché pour la même
|
||||
// intervention que celle qu'on désépingle, il faut regénérer son HTML pour
|
||||
// que l'icône passe de 📍 (active rouge) à 📌 (non active) — sinon l'user
|
||||
// voit l'ancienne icône et croit qu'il est toujours épinglé.
|
||||
// 5. Restaurer le bouton 📌 dans .tooltip-actions
|
||||
// Lors de l'épinglage, ce bouton a été SUPPRIMÉ du DOM (voir pinTooltip
|
||||
// v2026.5.17 ligne 6921). Il faut le recréer pour que l'user puisse
|
||||
// ré-épingler ou que l'icône 📌 revienne visible.
|
||||
const actionsEl = el.querySelector('.tooltip-actions');
|
||||
if (actionsEl) {
|
||||
const existingPin = actionsEl.querySelector('.tooltip-pinbtn[data-action="pin"]');
|
||||
if (!existingPin) {
|
||||
console.log("[softUnpin] restauration du bouton 📌 dans .tooltip-actions");
|
||||
const pinBtn = document.createElement('div');
|
||||
pinBtn.className = 'tooltip-actionbtn tooltip-pinbtn';
|
||||
pinBtn.setAttribute('data-action', 'pin');
|
||||
pinBtn.title = 'Épingler la bulle (ou double-Ctrl). Cliquer à nouveau pour libérer.';
|
||||
pinBtn.textContent = '📌';
|
||||
actionsEl.appendChild(pinBtn);
|
||||
} else {
|
||||
console.log("[softUnpin] bouton 📌 déjà présent, mise à jour visuelle");
|
||||
existingPin.textContent = '📌';
|
||||
existingPin.classList.remove('tooltip-pinbtn-active');
|
||||
}
|
||||
} else {
|
||||
console.warn("[softUnpin] .tooltip-actions introuvable dans le popup — boutons pas restaurés");
|
||||
}
|
||||
|
||||
// 5bis. v2026.5.34 : attacher un nouveau handler click sur .tooltip-actions
|
||||
// du popup soft-unpinned pour ré-épinglement / actualisation.
|
||||
// L'ancien handler du popup épinglé (qui faisait softUnpin au clic
|
||||
// sur pin) est encore attaché, mais notre nouveau handler utilise
|
||||
// stopPropagation avant pour l'empêcher de s'exécuter.
|
||||
// On garde une référence à l'iv pour pouvoir ré-épingler proprement.
|
||||
const ivForRepin = el._linkedIv || null;
|
||||
if (actionsEl && ivForRepin) {
|
||||
// Retirer d'éventuels handlers précédents en remplaçant l'element
|
||||
const newActions = actionsEl.cloneNode(true);
|
||||
actionsEl.parentNode.replaceChild(newActions, actionsEl);
|
||||
|
||||
newActions.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
const action = btn.dataset.action;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (action === "pin") {
|
||||
console.log("[softUnpin] clic sur 📌 d'un popup soft-unpinned → ré-épinglage");
|
||||
// Retirer le popup soft-unpinned actuel
|
||||
try { el.remove(); } catch (err) {}
|
||||
// Simuler le survol de l'iv pour rendre le tooltip live, puis épingler
|
||||
state.currentTooltipIv = ivForRepin;
|
||||
pinTooltip();
|
||||
} else if (action === "reload") {
|
||||
console.log("[softUnpin] clic sur ↻ d'un popup soft-unpinned → recharger intervention");
|
||||
if (typeof reloadSingleIntervention === "function") {
|
||||
reloadSingleIntervention(ivForRepin, btn);
|
||||
} else {
|
||||
console.warn("[softUnpin] reloadSingleIntervention indisponible");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 6. Basculer visuellement : retirer pinned-popup, mettre soft-unpinned.
|
||||
// La classe .soft-unpinned applique les styles "tooltip normal"
|
||||
// (pas de bordure bleue, pas de padding-top pour topbar disparue, etc.)
|
||||
el.classList.remove("pinned-popup");
|
||||
el.classList.add("soft-unpinned");
|
||||
|
||||
// 7. Régénérer le tooltip hover si on est en train de survoler la même iv
|
||||
// (pour synchroniser l'icône 📌/📍 dans le tooltip live).
|
||||
// Aussi, reset iv._reloading qui pourrait rester bloqué à true.
|
||||
const tip = tooltipEl();
|
||||
if (tip && tip.classList.contains("visible") && state.currentTooltipIv) {
|
||||
tip.innerHTML = buildTooltipHTML(state.currentTooltipIv);
|
||||
try {
|
||||
state.currentTooltipIv._reloading = false;
|
||||
tip.innerHTML = buildTooltipHTML(state.currentTooltipIv);
|
||||
} catch (err) {
|
||||
console.warn("[softUnpin] buildTooltipHTML failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper qui joue l'animation de sortie puis supprime le DOM
|
||||
const animateAndRemove = () => {
|
||||
el.classList.add("unpinning");
|
||||
setTimeout(() => el.remove(), 180);
|
||||
};
|
||||
// 8. v2026.5.34 : ne PAS programmer de suppression automatique au mouseleave.
|
||||
// Le popup reste visible comme un tooltip normal. L'user le ferme en
|
||||
// cliquant ailleurs ou en appuyant sur Échap. Il peut aussi re-cliquer
|
||||
// sur 📌 pour le ré-épingler.
|
||||
//
|
||||
// Pour que le popup disparaisse quand l'user clique ailleurs, on ajoute
|
||||
// un handler de clic document qui supprime tous les .soft-unpinned si
|
||||
// le clic est hors du popup. Ce handler ne s'arme QU'UNE FOIS (au premier
|
||||
// désépinglage) et reste globalement.
|
||||
_ensureSoftUnpinnedCleanupHandler();
|
||||
|
||||
if (!el.matches(":hover")) {
|
||||
animateAndRemove();
|
||||
return;
|
||||
}
|
||||
// Souris dessus : on ne supprime pas tout de suite. On attend mouseleave
|
||||
// et à ce moment on joue l'animation de sortie et on supprime.
|
||||
el.addEventListener("mouseleave", animateAndRemove, { once: true });
|
||||
console.log("[softUnpin] terminé — popup reste visible en mode tooltip normal");
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.34 : pose un handler global (une seule fois) qui ferme les popups
|
||||
* en état .soft-unpinned quand l'user clique ailleurs, ou appuie sur Échap.
|
||||
*/
|
||||
let _softUnpinnedCleanupHandlerInstalled = false;
|
||||
function _ensureSoftUnpinnedCleanupHandler() {
|
||||
if (_softUnpinnedCleanupHandlerInstalled) return;
|
||||
_softUnpinnedCleanupHandlerInstalled = true;
|
||||
|
||||
// Clic hors d'un popup soft-unpinned → supprimer
|
||||
document.addEventListener("mousedown", (e) => {
|
||||
const softPopups = document.querySelectorAll(".soft-unpinned");
|
||||
if (softPopups.length === 0) return;
|
||||
softPopups.forEach(el => {
|
||||
// Ne pas fermer si le clic est DANS le popup lui-même
|
||||
if (el.contains(e.target)) return;
|
||||
console.log("[softUnpin cleanup] clic hors du popup — suppression");
|
||||
el.classList.add("unpinning");
|
||||
setTimeout(() => { try { el.remove(); } catch (err) {} }, 180);
|
||||
});
|
||||
}, true); // phase capture pour attraper avant d'autres handlers
|
||||
|
||||
console.log("[softUnpin] handler cleanup global installé");
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
@@ -7311,24 +7621,34 @@ function _reducePinnedPopup(popup) {
|
||||
|
||||
// Créer la pastille dock
|
||||
// v2026.5.18 : le fond de la pastille prend la couleur de catégorie
|
||||
// (via la classe color-XXX déjà utilisée ailleurs dans le CSS)
|
||||
// v2026.5.19 : pastille à 2 lignes — ref (gras) + date origine (petit)
|
||||
// v2026.5.25 : pastille à 3 lignes — lieu (fort), service (petit), date (petit)
|
||||
// La référence est affichée dans le mini-menu au survol.
|
||||
const pill = document.createElement("button");
|
||||
pill.type = "button";
|
||||
pill.className = "pinned-popup-dock-pill color-" + colorKey;
|
||||
pill.title = "Cliquer pour agrandir";
|
||||
|
||||
const pillRef = document.createElement("span");
|
||||
pillRef.className = "pinned-popup-dock-pill-ref";
|
||||
pillRef.textContent = label;
|
||||
pill.appendChild(pillRef);
|
||||
// Ligne 1 : lieu (ou ref si pas de lieu)
|
||||
const pillLieu = document.createElement("span");
|
||||
pillLieu.className = "pinned-popup-dock-pill-lieu";
|
||||
pillLieu.textContent = popup.dataset.lieu || label || "—";
|
||||
pill.appendChild(pillLieu);
|
||||
|
||||
// Date d'origine (ex: "21.04")
|
||||
// Ligne 2 : service (2 dernières parties)
|
||||
const serviceTxt = popup.dataset.service || "";
|
||||
if (serviceTxt) {
|
||||
const pillService = document.createElement("span");
|
||||
pillService.className = "pinned-popup-dock-pill-service";
|
||||
pillService.textContent = serviceTxt;
|
||||
pill.appendChild(pillService);
|
||||
}
|
||||
|
||||
// Ligne 3 : date "Mardi 22.04"
|
||||
const originDate = popup.dataset.originDate || "";
|
||||
if (originDate) {
|
||||
const pillDate = document.createElement("span");
|
||||
pillDate.className = "pinned-popup-dock-pill-date";
|
||||
pillDate.textContent = _formatDateShort(originDate);
|
||||
pillDate.textContent = _formatDateForPill(originDate);
|
||||
pill.appendChild(pillDate);
|
||||
}
|
||||
|
||||
@@ -7347,12 +7667,18 @@ function _reducePinnedPopup(popup) {
|
||||
popup._linkedPill = pill;
|
||||
|
||||
pill.addEventListener("click", (e) => {
|
||||
// v2026.5.23 : si on était en train de drag, ne pas déclencher le clic
|
||||
if (pill._justDragged) {
|
||||
pill._justDragged = false;
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
_restorePinnedPopupFromDock(popup);
|
||||
});
|
||||
|
||||
// v2026.5.20 : mini-menu au survol (Agrandir / Fermer)
|
||||
pill.addEventListener("mouseenter", () => {
|
||||
if (pill._dragging) return; // pas de menu pendant le drag
|
||||
_showPillHoverMenu(pill, popup);
|
||||
});
|
||||
pill.addEventListener("mouseleave", (e) => {
|
||||
@@ -7360,6 +7686,9 @@ function _reducePinnedPopup(popup) {
|
||||
_schedulePillMenuClose();
|
||||
});
|
||||
|
||||
// v2026.5.23 : drag & drop — réordonne dans le dock, ou restaure hors du dock
|
||||
_attachPillDragHandler(pill, popup);
|
||||
|
||||
dock.appendChild(pill);
|
||||
dock.classList.add("visible");
|
||||
|
||||
@@ -7395,6 +7724,15 @@ function _showPillHoverMenu(pill, popup) {
|
||||
menu._linkedPill = pill;
|
||||
menu._linkedPopup = popup;
|
||||
|
||||
// v2026.5.25 : REF en haut du menu (info seulement, centrée)
|
||||
const refText = popup.dataset.ref || "";
|
||||
if (refText) {
|
||||
const refLabel = document.createElement("div");
|
||||
refLabel.className = "pill-hover-menu-ref";
|
||||
refLabel.textContent = refText;
|
||||
menu.appendChild(refLabel);
|
||||
}
|
||||
|
||||
const restoreBtn = document.createElement("button");
|
||||
restoreBtn.type = "button";
|
||||
restoreBtn.className = "pill-hover-menu-btn";
|
||||
@@ -7506,15 +7844,26 @@ function _clampPopupInSafeArea(popup) {
|
||||
const vTop = rect.top;
|
||||
|
||||
// Calcul des coords viewport cibles après clamp
|
||||
// v2026.5.28 : si le popup est plus large que la zone dispo (fenêtre rétrécie
|
||||
// depuis le côté droit), on le garde à sa position actuelle —
|
||||
// l'user redimensionnera ou bougera manuellement. On préfère
|
||||
// "déborder" à droite plutôt que rétrécir le popup.
|
||||
let newVLeft = vLeft;
|
||||
let newVTop = vTop;
|
||||
if (newVLeft < safe.left) newVLeft = safe.left;
|
||||
if (newVLeft + w > safe.right) newVLeft = safe.right - w;
|
||||
if (newVLeft < safe.left) newVLeft = safe.left; // si popup plus large que viewport
|
||||
|
||||
if (newVTop < safe.top) newVTop = safe.top;
|
||||
if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
|
||||
if (newVTop < safe.top) newVTop = safe.top;
|
||||
const safeWidth = safe.right - safe.left;
|
||||
const safeHeight = safe.bottom - safe.top;
|
||||
if (w <= safeWidth) {
|
||||
// Popup rentre : on clamp normalement
|
||||
if (newVLeft < safe.left) newVLeft = safe.left;
|
||||
if (newVLeft + w > safe.right) newVLeft = safe.right - w;
|
||||
if (newVLeft < safe.left) newVLeft = safe.left;
|
||||
}
|
||||
// Sinon : popup plus large que la zone → on laisse où il est, user libre
|
||||
if (h <= safeHeight) {
|
||||
if (newVTop < safe.top) newVTop = safe.top;
|
||||
if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
|
||||
if (newVTop < safe.top) newVTop = safe.top;
|
||||
}
|
||||
|
||||
if (newVLeft === vLeft && newVTop === vTop) return; // rien à faire
|
||||
|
||||
@@ -7536,6 +7885,185 @@ function _reclampAllFloatingPopups() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.23 : drag & drop d'une pastille du dock.
|
||||
* - Drag dans le dock : réordonne les pastilles (drop = insérer à la nouvelle
|
||||
* position). Les autres se décalent en live.
|
||||
* - Drop HORS du dock : restaure le popup en mode Normal à la position de la
|
||||
* souris.
|
||||
* Semi-transparent pendant le drag.
|
||||
*/
|
||||
function _attachPillDragHandler(pill, popup) {
|
||||
const DRAG_THRESHOLD = 4; // px avant de considérer un vrai drag
|
||||
let isDown = false;
|
||||
let isDragging = false;
|
||||
let startX = 0, startY = 0;
|
||||
let ghostEl = null;
|
||||
let pillOriginalNext = null; // voisin d'origine pour restaurer l'ordre
|
||||
|
||||
const onMouseMove = (e) => {
|
||||
if (!isDown) return;
|
||||
const dx = e.clientX - startX;
|
||||
const dy = e.clientY - startY;
|
||||
if (!isDragging) {
|
||||
if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return;
|
||||
// Début du drag
|
||||
isDragging = true;
|
||||
pill._dragging = true;
|
||||
pill._justDragged = true;
|
||||
_hidePillHoverMenu();
|
||||
pill.classList.add("pill-dragging");
|
||||
|
||||
// Créer un "ghost" flottant qui suit la souris
|
||||
const r = pill.getBoundingClientRect();
|
||||
ghostEl = pill.cloneNode(true);
|
||||
ghostEl.style.position = "fixed";
|
||||
ghostEl.style.left = r.left + "px";
|
||||
ghostEl.style.top = r.top + "px";
|
||||
ghostEl.style.width = r.width + "px";
|
||||
ghostEl.style.height = r.height + "px";
|
||||
ghostEl.style.zIndex = "1100";
|
||||
ghostEl.style.opacity = "0.85";
|
||||
ghostEl.style.pointerEvents = "none";
|
||||
ghostEl.classList.add("pill-dragging-ghost");
|
||||
document.body.appendChild(ghostEl);
|
||||
|
||||
// Mémoriser le voisin d'origine pour restaurer si drop hors dock
|
||||
pillOriginalNext = pill.nextSibling;
|
||||
}
|
||||
// Déplacer le ghost avec la souris
|
||||
if (ghostEl) {
|
||||
ghostEl.style.left = (e.clientX - ghostEl.offsetWidth / 2) + "px";
|
||||
ghostEl.style.top = (e.clientY - ghostEl.offsetHeight / 2) + "px";
|
||||
}
|
||||
|
||||
// Détecter si on est au-dessus du dock
|
||||
const dock = document.getElementById("pinned-popups-dock");
|
||||
if (!dock) return;
|
||||
const dockRect = dock.getBoundingClientRect();
|
||||
const insideDock = (
|
||||
e.clientX >= dockRect.left && e.clientX <= dockRect.right &&
|
||||
e.clientY >= dockRect.top && e.clientY <= dockRect.bottom
|
||||
);
|
||||
|
||||
if (insideDock) {
|
||||
// Trouver où insérer parmi les autres pastilles
|
||||
const pills = Array.from(dock.querySelectorAll(".pinned-popup-dock-pill"))
|
||||
.filter(p => p !== pill);
|
||||
let inserted = false;
|
||||
for (const other of pills) {
|
||||
const or = other.getBoundingClientRect();
|
||||
const midX = or.left + or.width / 2;
|
||||
if (e.clientX < midX) {
|
||||
dock.insertBefore(pill, other);
|
||||
inserted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!inserted) {
|
||||
// Insérer juste avant le bouton "Fermer tous" s'il existe, sinon en fin
|
||||
const closeAllBtn = document.getElementById("pinned-popups-close-all");
|
||||
if (closeAllBtn) {
|
||||
dock.insertBefore(pill, closeAllBtn);
|
||||
} else {
|
||||
dock.appendChild(pill);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = (e) => {
|
||||
if (!isDown) return;
|
||||
isDown = false;
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
|
||||
if (!isDragging) return; // juste un clic simple, pas un drag
|
||||
|
||||
isDragging = false;
|
||||
setTimeout(() => { pill._dragging = false; }, 10);
|
||||
pill.classList.remove("pill-dragging");
|
||||
if (ghostEl) {
|
||||
try { ghostEl.remove(); } catch (err) {}
|
||||
ghostEl = null;
|
||||
}
|
||||
|
||||
// Vérifier si drop dans le dock ou hors
|
||||
const dock = document.getElementById("pinned-popups-dock");
|
||||
let insideDock = false;
|
||||
if (dock) {
|
||||
const dockRect = dock.getBoundingClientRect();
|
||||
insideDock = (
|
||||
e.clientX >= dockRect.left && e.clientX <= dockRect.right &&
|
||||
e.clientY >= dockRect.top && e.clientY <= dockRect.bottom
|
||||
);
|
||||
}
|
||||
|
||||
if (insideDock) {
|
||||
// Drop dans le dock = réordonnage déjà fait pendant onMouseMove. OK.
|
||||
return;
|
||||
}
|
||||
|
||||
// Drop HORS du dock : restaurer le popup en mode Normal à la position souris
|
||||
// Le popup est actuellement en état "réduit" — on le réaffiche.
|
||||
popup.classList.remove("pinned-popup-reduced");
|
||||
popup.classList.remove("pinned-popup-minimized");
|
||||
// Positionner à la souris (coords document)
|
||||
const popupW = popup.offsetWidth || 320;
|
||||
const popupH = popup.offsetHeight || 200;
|
||||
const docX = _viewportToDocumentX(e.clientX - popupW / 2);
|
||||
const docY = _viewportToDocumentY(e.clientY - 20);
|
||||
popup.style.left = docX + "px";
|
||||
popup.style.top = docY + "px";
|
||||
// Clamper dans la safe area
|
||||
_clampPopupInSafeArea(popup);
|
||||
|
||||
// Retirer la pastille et nettoyer le dock si vide
|
||||
try { pill.remove(); } catch (err) {}
|
||||
popup._linkedPill = null;
|
||||
if (dock && dock.querySelectorAll(".pinned-popup-dock-pill").length === 0) {
|
||||
dock.classList.remove("visible");
|
||||
const closeAllBtn = document.getElementById("pinned-popups-close-all");
|
||||
if (closeAllBtn) closeAllBtn.remove();
|
||||
} else {
|
||||
_ensureDockCloseAllBtn();
|
||||
}
|
||||
// Restaurer le bouton Minimiser (si c'était en mode minimisé avant réduction)
|
||||
const minBtn = popup.querySelector(".pinned-popup-minimize");
|
||||
if (minBtn) {
|
||||
minBtn.innerHTML = "▭";
|
||||
minBtn.title = "Minimiser (reste flottant mais compact)";
|
||||
const newBtn = minBtn.cloneNode(true);
|
||||
minBtn.replaceWith(newBtn);
|
||||
newBtn.addEventListener("click", (ev) => {
|
||||
ev.stopPropagation();
|
||||
_minimizePinnedPopup(popup);
|
||||
});
|
||||
}
|
||||
|
||||
// v2026.5.23 : mettre à jour le rect dans pinnedPopups pour que l'anti-
|
||||
// chevauchement tienne compte de la nouvelle position
|
||||
const entry = pinnedPopups.find(p => p.el === popup);
|
||||
if (entry) {
|
||||
const l = parseFloat(popup.style.left) || 0;
|
||||
const t = parseFloat(popup.style.top) || 0;
|
||||
const w = popup.offsetWidth;
|
||||
const h = popup.offsetHeight;
|
||||
entry.rect = { left: l, top: t, right: l + w, bottom: t + h };
|
||||
}
|
||||
};
|
||||
|
||||
pill.addEventListener("mousedown", (e) => {
|
||||
if (e.button !== 0) return;
|
||||
isDown = true;
|
||||
isDragging = false;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.19 : réduit TOUS les popups épinglés actuellement ouverts (en mode
|
||||
* normal ou minimisé) dans la taskbar du bas. Appelé au changement de date.
|
||||
@@ -7557,6 +8085,24 @@ function _formatDateShort(iso) {
|
||||
return `${m[3]}.${m[2]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.25 : formatte une date ISO en "Mardi 22.04" pour la pastille dock.
|
||||
*/
|
||||
function _formatDateForPill(iso) {
|
||||
if (!iso) return "";
|
||||
const m = String(iso).match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
||||
if (!m) return iso;
|
||||
try {
|
||||
const d = new Date(parseInt(m[1]), parseInt(m[2]) - 1, parseInt(m[3]));
|
||||
const dayName = (typeof DAY_NAMES_FULL !== "undefined" && DAY_NAMES_FULL[d.getDay()])
|
||||
? DAY_NAMES_FULL[d.getDay()]
|
||||
: "";
|
||||
return (dayName ? dayName + " " : "") + m[3] + "." + m[2];
|
||||
} catch (e) {
|
||||
return m[3] + "." + m[2];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* v2026.5.18 : ajoute (ou met à jour) le bouton "Fermer tous" dans le dock
|
||||
* quand au moins 2 popups épinglés existent (réduits OU affichés).
|
||||
@@ -7931,6 +8477,31 @@ function bindTooltipInteractions() {
|
||||
const el = tooltipEl();
|
||||
if (!el) return;
|
||||
|
||||
// v2026.5.27 : quand la souris entre dans un popup épinglé, fermer tout
|
||||
// popup non-épinglé (tooltip live ou soft-unpinned) pour garder l'écran clair.
|
||||
document.addEventListener("mouseover", (e) => {
|
||||
const target = e.target;
|
||||
if (!target || !target.closest) return;
|
||||
const pinned = target.closest(".pinned-popup");
|
||||
if (!pinned) return;
|
||||
// On survole un popup épinglé → fermer tooltip live s'il n'est pas pinned
|
||||
if (!bulleState.pinned) {
|
||||
const tip = tooltipEl();
|
||||
if (tip && tip.classList.contains("visible")) {
|
||||
tip.classList.remove("visible");
|
||||
tip.classList.add("hidden");
|
||||
if (tip.dataset) delete tip.dataset.mode;
|
||||
state.currentTooltipIv = null;
|
||||
currentTooltipPos = null;
|
||||
tooltipPositionMode = null;
|
||||
}
|
||||
}
|
||||
// Fermer les soft-unpinned qui traînent
|
||||
document.querySelectorAll(".soft-unpinned").forEach(el => {
|
||||
try { el.remove(); } catch (err) {}
|
||||
});
|
||||
});
|
||||
|
||||
// v4.1.17 : ré-applique la position au scroll de la page (safety net
|
||||
// contre un ancêtre qui casserait position:fixed silencieusement).
|
||||
window.addEventListener("scroll", reapplyTooltipPosition, { passive: true });
|
||||
@@ -8078,6 +8649,7 @@ function bindTooltipInteractions() {
|
||||
}
|
||||
|
||||
function buildTooltipHTML(iv) {
|
||||
if (!iv) return '<dl><dt>Info</dt><dd>—</dd></dl>';
|
||||
const i = iv.infobulle || {};
|
||||
const rows = [];
|
||||
|
||||
@@ -8276,10 +8848,22 @@ function escapeHtml(s) {
|
||||
}
|
||||
|
||||
function highlightIntervention(cardEl, ivIdx, on) {
|
||||
const row = cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
|
||||
// v2026.5.29 : chercher .intervention-v2 (nouveau nom) et fallback .intervention
|
||||
const row = cardEl.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`)
|
||||
|| cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
|
||||
const slot = cardEl.querySelector(`.timeline-slot[data-iv-idx="${ivIdx}"]`);
|
||||
if (row) row.classList.toggle("highlight", on);
|
||||
if (slot) slot.classList.toggle("highlight", on);
|
||||
|
||||
// v2026.5.29 : quand on active le highlight (typiquement depuis un slot
|
||||
// timeline), faire scroller la row dans la vue pour que l'user voie la
|
||||
// carte correspondante sans avoir à chercher. On évite de scroller le
|
||||
// body, on scroll juste la row à l'intérieur de la carte si elle déborde.
|
||||
if (on && row && typeof row.scrollIntoView === "function") {
|
||||
try {
|
||||
row.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
|
||||
Reference in New Issue
Block a user