mirror of
https://github.com/JMP-MS/ASPIC.git
synced 2026-10-27 16:07:10 +00:00
V1.15.17 Evolutions des consignes
This commit is contained in:
+261
-48
@@ -48,16 +48,23 @@
|
||||
background:#ad580d url('ecran_fond.jpg') center center / contain no-repeat;
|
||||
position:relative;
|
||||
}
|
||||
/* Étiquette "Contacts" sur la tranche du 1er classeur (2 septembre 2026,
|
||||
essai). Positionnée en JS plutôt qu'en CSS pur : comme l'image est en
|
||||
"contain", sa taille et sa position réelles à l'écran changent avec la
|
||||
proportion de la fenêtre — même calcul que "background-size:contain"
|
||||
refait à la main pour caler ce texte sur l'étiquette blanche, quelle
|
||||
que soit la fenêtre. Coordonnées mesurées sur ecran_fond.jpg (image de
|
||||
référence 1280×650) : rectangle d'étiquette à peu près x:[54,91],
|
||||
y:[376,481] sur cette image. rotate(-90deg) : lecture bas → haut,
|
||||
comme demandé (on tourne la tête pour lire), plutôt que haut → bas. */
|
||||
#etiquette-contacts{
|
||||
/* Étiquettes des 9 classeurs (7 septembre 2026 — évolution de l'essai à
|
||||
un seul classeur "Contacts" du 2 septembre). Nouvelle photo fournie par
|
||||
Jean-Marc, mêmes dimensions de référence (1024×457) et même bureau/mur/
|
||||
micro (vérifié par comparaison pixel à pixel avec l'ancienne image :
|
||||
seule la zone des classeurs, x≈[40,400], diffère réellement — le reste
|
||||
n'est que du bruit de compression) — les constantes MICRO_ZONE, ICONE et
|
||||
ZONE_POSTITS restent donc inchangées plus bas, seules les constantes de
|
||||
classeurs et la pastille "Contacts" ont été remesurées sur la nouvelle
|
||||
photo.
|
||||
Toujours positionnées en JS (voir creerClasseurs()/positionner()) pour
|
||||
le même motif que le 2 septembre : l'image étant en "contain", sa
|
||||
taille/position réelles à l'écran changent avec la proportion de la
|
||||
fenêtre. rotate(-90deg) : lecture bas → haut (on tourne la tête pour
|
||||
lire), inchangé. Règles génériques (classe, plus un seul id) : il y a
|
||||
désormais 9 étiquettes/classeurs au lieu d'un seul — voir le tableau
|
||||
CLASSEURS dans le script. */
|
||||
.etiquette-classeur{
|
||||
position:fixed;
|
||||
transform:translate(-50%,-50%) rotate(-90deg);
|
||||
transform-origin:center;
|
||||
@@ -69,18 +76,25 @@
|
||||
pointer-events:none;
|
||||
user-select:none;
|
||||
}
|
||||
/* Zone cliquable calée sur la tranche visible (face plate, sans le
|
||||
dessus incliné) du 1er classeur — même principe de positionnement en
|
||||
JS que l'étiquette ci-dessus. Pas d'habillage visuel par défaut (le
|
||||
classeur photographié suffit), juste un léger éclaircissement au survol
|
||||
pour signaler que c'est cliquable, en plus du curseur et de l'infobulle. */
|
||||
#classeur-contacts{
|
||||
/* Zone calée sur la tranche visible (face plate, sans le dessus incliné)
|
||||
de chaque classeur — même principe de positionnement en JS que
|
||||
l'étiquette ci-dessus. Pas d'habillage visuel par défaut (le classeur
|
||||
photographié suffit), juste un léger éclaircissement au survol pour
|
||||
signaler que c'est cliquable, en plus du curseur et de l'infobulle —
|
||||
UNIQUEMENT sur le classeur réellement branché (voir .classeur-actif
|
||||
ci-dessous) : les 8 autres n'ont pas encore d'écran derrière (voir
|
||||
tableau CLASSEURS), pas de survol trompeur pour eux tant que ce n'est
|
||||
pas le cas.*/
|
||||
.classeur-zone{
|
||||
position:fixed;
|
||||
display:block;
|
||||
}
|
||||
.classeur-zone.classeur-actif{
|
||||
cursor:pointer;
|
||||
box-shadow:inset 0 0 0 0 rgba(255,255,255,0);
|
||||
transition:box-shadow .12s ease;
|
||||
}
|
||||
#classeur-contacts:hover{
|
||||
.classeur-zone.classeur-actif:hover{
|
||||
box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
|
||||
}
|
||||
/* Chevalet supprimé le 3 septembre 2026 (voir journal) : Jean-Marc l'a
|
||||
@@ -348,8 +362,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a id="classeur-contacts" href="liste_contacts.html" title="Ouvrir le classeur des contacts"></a>
|
||||
<div id="etiquette-contacts">Contacts</div>
|
||||
<!-- Les 9 zones cliquables + étiquettes de classeurs (7 septembre 2026) sont
|
||||
créées par creerClasseurs() (voir script) à partir du tableau CLASSEURS,
|
||||
sur le même principe que les post-its plus bas : éviter de dupliquer 9
|
||||
fois à la main un bloc HTML quasi identique. -->
|
||||
<button id="micro-desk" type="button" title="Le micro est inactif"></button>
|
||||
<div id="micro-icone">
|
||||
<svg id="glyphe-repos" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -389,28 +405,139 @@ Créé par Mevelia Solutions">
|
||||
// silhouette du micro) : décalage vertical uniforme de +13 confirmé pour
|
||||
// tout ce qui était calé sur le bureau ou le mur, aucun décalage
|
||||
// horizontal — cohérent avec la description de Jean-Marc.
|
||||
// 4ᵉ version le 7 septembre 2026 : Jean-Marc a retravaillé l'image pour
|
||||
// passer d'un unique classeur "Contacts" à une rangée de 9 classeurs
|
||||
// (mêmes dimensions 1024×457, même bureau/mur/micro/carnet/téléphone,
|
||||
// vérifié par différence pixel à pixel entre les deux photos — seule la
|
||||
// zone des classeurs, x≈[40,400], a réellement changé). Constantes de
|
||||
// classeurs et pastille "Contacts" remesurées ci-dessous sur cette
|
||||
// nouvelle version ; MICRO_ZONE_*/ICONE_*/ZONE_POSTITS_* inchangées.
|
||||
const IMG_W = 1024, IMG_H = 457;
|
||||
// Centre de l'étiquette du 1er classeur (57.5, 282 -> 57.5, 295 : +13).
|
||||
const ETIQ_CENTRE_X_FRAC = 57.5 / IMG_W;
|
||||
const ETIQ_CENTRE_Y_FRAC = 295 / IMG_H;
|
||||
const ETIQ_POLICE_FRAC = 19 / IMG_W;
|
||||
// Rectangle de la tranche visible du 1er classeur (x inchangé, y:[224,397]
|
||||
// -> y:[237,410]).
|
||||
const CLASSEUR_X1 = 37, CLASSEUR_X2 = 78;
|
||||
const CLASSEUR_Y1 = 237, CLASSEUR_Y2 = 410;
|
||||
// Chevalet supprimé le 3 septembre 2026 (voir journal) : plus d'objet à
|
||||
// cet endroit sur la nouvelle photo, Jean-Marc l'a rangé.
|
||||
// Zone cliquable/survolable du micro : silhouette complète, x inchangé,
|
||||
// y:[236,406] -> y:[249,419].
|
||||
|
||||
// -------- Classeurs (7 septembre 2026 — 9 classeurs remplacent l'unique
|
||||
// classeur "Contacts" du 2 septembre) --------
|
||||
// Nouvelle photo fournie par Jean-Marc, mêmes dimensions de référence
|
||||
// 1024×457. Toutes les coordonnées ci-dessous ont été mesurées directement
|
||||
// sur cette nouvelle photo par analyse pixel par pixel (relevé des
|
||||
// transitions de couleur colonne par colonne / ligne par ligne), pas à
|
||||
// l'œil — même exigence de précision que les mesures manuelles de
|
||||
// Jean-Marc sur les versions précédentes.
|
||||
//
|
||||
// CLASSEURS_Y1/Y2 : rectangle vertical de la tranche visible, commun aux
|
||||
// 9 classeurs (mesuré quasi identique sur chacun, 230-233 en haut et
|
||||
// 409-411 en bas — la photo montre les 9 classeurs à la même hauteur).
|
||||
const CLASSEURS_Y1 = 231, CLASSEURS_Y2 = 410;
|
||||
// Rectangle vertical utile de la partie blanche de l'étiquette (mesuré
|
||||
// constant à 255-339 sur les 9 classeurs) : c'est cette hauteur, une fois
|
||||
// convertie à l'écran, qui borne la largeur du texte tourné à -90°
|
||||
// (voir calculerPoliceEtiquette() plus bas).
|
||||
const ETIQ_LABEL_Y1 = 255, ETIQ_LABEL_Y2 = 339;
|
||||
const ETIQ_CENTRE_Y_FRAC = ((ETIQ_LABEL_Y1 + ETIQ_LABEL_Y2) / 2) / IMG_H;
|
||||
// Largeur utile de la partie blanche de l'étiquette (mesurée 22-25px selon
|
||||
// le classeur, valeur basse retenue par sécurité — cette largeur borne
|
||||
// l'ÉPAISSEUR du texte tourné, donc indirectement la taille de police
|
||||
// maximale des libellés courts, voir calculerPoliceEtiquette() plus bas).
|
||||
const ETIQ_LABEL_LARGEUR = 22;
|
||||
// Marges de sécurité (10-6%) sur les deux contraintes ci-dessus. Plus
|
||||
// resserrées que la précédente version (12%) : la taille de police n'est
|
||||
// plus estimée à partir d'un ratio de largeur de caractère deviné, mais
|
||||
// mesurée pour de vrai par le navigateur lui-même (voir
|
||||
// calculerPoliceEtiquette()) — la marge ne sert donc plus qu'à absorber
|
||||
// l'écart entre la police réellement utilisée chez Jean-Marc (Segoe UI,
|
||||
// Windows) et celle du moteur qui affiche la page au moment du calcul,
|
||||
// jamais à compenser une approximation de largeur de texte.
|
||||
const ETIQ_MARGE_HAUTEUR = 0.94;
|
||||
const ETIQ_MARGE_LARGEUR = 0.90;
|
||||
// Facteur hauteur de ligne approximatif (line-height non fixé en CSS ici,
|
||||
// donc dépendant du navigateur — 1.2 est une valeur usuelle prudente) :
|
||||
// c'est cette épaisseur de ligne, pas la taille de police elle-même, qui
|
||||
// doit tenir dans ETIQ_LABEL_LARGEUR une fois le texte tourné à -90°.
|
||||
const ETIQ_LIGNE_HAUTEUR = 1.2;
|
||||
// Seuil plancher, en dessous duquel le texte deviendrait illisible quel
|
||||
// que soit le libellé (aucun classeur actuel ne devrait l'atteindre).
|
||||
const ETIQ_POLICE_MIN_FRAC = 9 / IMG_W;
|
||||
// Plafond commun aux libellés courts : épaisseur de ligne maximale qui
|
||||
// tient dans la largeur physique de l'étiquette (2ᵉ contrainte de
|
||||
// calculerPoliceEtiquette() ci-dessous, extraite ici en constante
|
||||
// partagée) — c'est la taille qu'atteignent "Contacts", "Catalogue", "En
|
||||
// cours" ou "Factures" une fois que la contrainte de hauteur cesse d'être
|
||||
// la plus stricte des deux. Sert aussi de police forcée pour "Documents"
|
||||
// (policeForceeFrac dans CLASSEURS, voir plus bas) le 7 septembre 2026
|
||||
// (soir).
|
||||
const ETIQ_POLICE_CAP_FRAC = (ETIQ_LABEL_LARGEUR * ETIQ_MARGE_LARGEUR) / ETIQ_LIGNE_HAUTEUR / IMG_W;
|
||||
|
||||
// Tableau des 9 classeurs, dans l'ordre demandé par Jean-Marc le
|
||||
// 7 septembre 2026 (photo retravaillée : le 1er classeur a glissé vers la
|
||||
// gauche et devient "Consignes", "Contacts" passe en 2e position).
|
||||
// x1/x2 : bornes horizontales de la tranche visible (classeur entier, y
|
||||
// compris le bord en plastique coloré autour de l'étiquette) — définissent
|
||||
// la zone cliquable/survolable. labelCx : centre horizontal mesuré du
|
||||
// RECTANGLE BLANC de l'étiquette lui-même (pas du classeur entier) —
|
||||
// retouché le 7 septembre 2026 après retour de Jean-Marc ("Consignes" trop
|
||||
// à droite, "Contacts"/"Catalogue" à décaler vers la gauche) : l'étiquette
|
||||
// n'est pas toujours parfaitement centrée sur la tranche du classeur,
|
||||
// mieux vaut mesurer sa propre position que supposer qu'elle coïncide avec
|
||||
// le centre de la tranche. Re-décalé une seconde fois le 7 septembre 2026
|
||||
// (soir) pour "Consignes" seul ("presque parfait", encore un peu trop à
|
||||
// droite) : -2px supplémentaires. href : écran réel derrière le classeur,
|
||||
// ou null quand cet écran n'existe pas encore — seul un classeur avec href
|
||||
// reçoit la classe "classeur-actif" (survol + clic, voir creerClasseurs()) ;
|
||||
// les 8 autres affichent leur étiquette mais ne sont pas encore cliquables,
|
||||
// faute d'écran à ouvrir (voir le journal pour la liste des écrans
|
||||
// restant à construire). policeForceeFrac : taille de police imposée (en
|
||||
// fraction de IMG_W), au lieu de la double contrainte calculée par
|
||||
// calculerPoliceEtiquette() — voir commentaire sur "Documents" ci-dessous
|
||||
// pour le seul cas qui l'utilise pour l'instant.
|
||||
const CLASSEURS = [
|
||||
{id:'consignes', label:'Consignes', x1:44, x2:79.5, labelCx:57.2, href:null},
|
||||
{id:'contacts', label:'Contacts', x1:79.5, x2:118, labelCx:96.6, href:'liste_contacts.html'},
|
||||
{id:'catalogue', label:'Catalogue', x1:118, x2:155, labelCx:135.0, href:null},
|
||||
// "Documentations" remplacé par "Documents" le 7 septembre 2026 (soir),
|
||||
// à la demande de Jean-Marc (le libellé complet restait peu lisible même
|
||||
// après le passage à measureText() : un mot de 14 lettres doit beaucoup
|
||||
// rétrécir pour tenir dans la hauteur de l'étiquette). Police forcée
|
||||
// (policeForceeFrac, voir ETIQ_POLICE_CAP_FRAC plus haut) plutôt que
|
||||
// laissée au calcul automatique : "Documents" (9 lettres, comme
|
||||
// "Consignes") tiendrait déjà largement dans la hauteur disponible même
|
||||
// à la taille plafond commune aux libellés courts — autant l'aligner
|
||||
// explicitement sur ce plafond pour garantir la même taille bien lisible
|
||||
// que "Contacts"/"Catalogue"/"En cours"/"Factures", plutôt que de
|
||||
// dépendre d'un calcul qui pourrait légèrement varier d'un libellé à
|
||||
// l'autre. id conservé en interne à 'documentations' (cohérence avec
|
||||
// l'historique de la photo/des mesures), seul le libellé affiché change.
|
||||
{id:'documentations', label:'Documents', x1:155, x2:192.5, labelCx:173.9, href:null},
|
||||
{id:'prospection', label:'Prospection', x1:192.5, x2:234, labelCx:212.6, href:null},
|
||||
// "Communication" remplacé par "Réseaux" le 7 septembre 2026 (soir), à la
|
||||
// demande de Jean-Marc : ce classeur regroupe la génération de posts
|
||||
// Instagram et la veille concurrentielle sur les réseaux sociaux —
|
||||
// "Réseaux" colle mieux à cet usage que le générique "Communication",
|
||||
// en plus d'être bien plus court (donc bien plus lisible une fois
|
||||
// tourné à -90°, voir calculerPoliceEtiquette()). id conservé en interne
|
||||
// à 'communication' (cohérence avec l'historique de la photo/des
|
||||
// mesures), seul le libellé affiché change.
|
||||
{id:'communication', label:'Réseaux', x1:234, x2:274.5, labelCx:253.0, href:null},
|
||||
{id:'en-cours', label:'En cours', x1:274.5, x2:312.5, labelCx:293.0, href:null},
|
||||
{id:'factures', label:'Factures', x1:312.5, x2:352.5, labelCx:332.5, href:null},
|
||||
{id:'journalier', label:'Journalier', x1:352.5, x2:395.5, labelCx:372.6, href:null},
|
||||
];
|
||||
|
||||
// Zone cliquable/survolable du micro, centre du rond noir de la grille
|
||||
// (icône) et zone des post-its personnels : AUCUN changement le 7
|
||||
// septembre 2026 — vérifié par comparaison pixel à pixel avec l'ancienne
|
||||
// photo, identiques au-delà de x≈400 (voir commentaire CSS plus haut).
|
||||
const MICRO_ZONE_X1 = 465, MICRO_ZONE_X2 = 543;
|
||||
const MICRO_ZONE_Y1 = 249, MICRO_ZONE_Y2 = 419;
|
||||
// Centre du rond noir en haut du micro (grille), pour l'icône seule :
|
||||
// (512, 255) -> (512, 268).
|
||||
const ICONE_CENTRE_X = 512, ICONE_CENTRE_Y = 268;
|
||||
const ICONE_TAILLE_FRAC = 22 / IMG_W;
|
||||
// Pastille "nombre de contacts", sous le trou cerclé de métal du classeur
|
||||
// Contacts : centre (58, 381) -> (58, 394).
|
||||
const PASTILLE_CONTACTS_CENTRE_X = 58, PASTILLE_CONTACTS_CENTRE_Y = 394;
|
||||
// Pastille "nombre de contacts" — sous le trou de préhension du classeur
|
||||
// Contacts, à mi-chemin entre ce trou et le bas du classeur (retour de
|
||||
// Jean-Marc le 7 septembre 2026 : la 1ʳᵉ mesure avait par erreur calé la
|
||||
// pastille SUR le trou lui-même, pas en dessous). Trou de préhension
|
||||
// repéré par sa forme ovale sombre, mesurée sur la nouvelle photo :
|
||||
// x≈[89,107] (centre 98), y≈[360,374] (bas du trou 374). Milieu entre ce
|
||||
// bas de trou (374) et le bas du classeur (CLASSEURS_Y2=410) : (374+410)/2
|
||||
// = 392.
|
||||
const PASTILLE_CONTACTS_CENTRE_X = 98, PASTILLE_CONTACTS_CENTRE_Y = 392;
|
||||
const PASTILLE_CONTACTS_DIAM_FRAC = 17 / IMG_W;
|
||||
|
||||
// Zone des post-its personnels (2 septembre 2026, premier affichage réel
|
||||
@@ -418,9 +545,10 @@ Créé par Mevelia Solutions">
|
||||
// 30% de la largeur de l'écran depuis le bord droit (1024 × 0.30 ≈ 307).
|
||||
// Bas de la zone (Y2) recalculé le 3 septembre 2026 : n'était plus borné
|
||||
// par le chevalet (supprimé) mais par la nouvelle ligne de bureau
|
||||
// (CLASSEUR_Y2 = 410), avec la même marge de sécurité qu'avant (~15px) —
|
||||
// 352 devient 395, quelques pixels de plus qu'un simple +13 puisque
|
||||
// l'espace se libère réellement, comme relevé par Jean-Marc. Grille
|
||||
// (CLASSEURS_Y2 = 410, ex-CLASSEUR_Y2 avant le passage à 9 classeurs le
|
||||
// 7 septembre — valeur inchangée), avec la même marge de sécurité qu'avant
|
||||
// (~15px) — 352 devient 395, quelques pixels de plus qu'un simple +13
|
||||
// puisque l'espace se libère réellement, comme relevé par Jean-Marc. Grille
|
||||
// 4 colonnes × 5 lignes = 20 cases, volontairement alignée sur
|
||||
// CAPACITE_TABLEAU_PAR_UTILISATEUR (todolist.php) — à faire évoluer
|
||||
// ensemble le jour où cette capacité changera.
|
||||
@@ -446,6 +574,84 @@ Créé par Mevelia Solutions">
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
}
|
||||
|
||||
// Crée les 9 zones cliquables + étiquettes de classeurs, une seule fois
|
||||
// (voir tableau CLASSEURS plus haut) — même principe que les post-its,
|
||||
// appelée une fois au chargement, positionnée ensuite (comme tout le
|
||||
// reste) dans positionner(). Un classeur avec href (voir CLASSEURS) est
|
||||
// un vrai lien <a> ; les 8 autres, sans écran derrière pour l'instant,
|
||||
// sont de simples <div> — pas de lien mort ni de survol trompeur (voir
|
||||
// commentaire CSS .classeur-zone plus haut).
|
||||
function creerClasseurs() {
|
||||
CLASSEURS.forEach(function (c) {
|
||||
const zone = document.createElement(c.href ? 'a' : 'div');
|
||||
zone.className = 'classeur-zone' + (c.href ? ' classeur-actif' : '');
|
||||
zone.id = 'classeur-' + c.id;
|
||||
zone.dataset.classeurId = c.id;
|
||||
if (c.href) {
|
||||
zone.href = c.href;
|
||||
zone.title = 'Ouvrir le classeur ' + c.label.toLowerCase();
|
||||
}
|
||||
document.body.appendChild(zone);
|
||||
|
||||
const etiquette = document.createElement('div');
|
||||
etiquette.className = 'etiquette-classeur';
|
||||
etiquette.id = 'etiquette-' + c.id;
|
||||
etiquette.textContent = c.label;
|
||||
document.body.appendChild(etiquette);
|
||||
});
|
||||
}
|
||||
|
||||
// Mesure de la largeur RÉELLE d'un texte (7 septembre 2026, remplace une
|
||||
// première version qui estimait cette largeur à partir d'un ratio de
|
||||
// largeur de caractère deviné — trop approximatif : "Prospection" et
|
||||
// "Journalier" étaient ressortis trop petits à l'usage réel chez
|
||||
// Jean-Marc). Utilise un <canvas> hors-écran avec exactement la même
|
||||
// police que .etiquette-classeur (voir CSS plus haut) : measureText()
|
||||
// interroge directement le moteur de rendu de police du navigateur EN
|
||||
// COURS D'UTILISATION — celui de Jean-Marc (Segoe UI, Windows) une fois la
|
||||
// page redéployée chez lui — plutôt qu'une estimation calculée ici. Un
|
||||
// seul canvas et un petit cache par (libellé, taille) : positionner() est
|
||||
// rappelée à chaque redimensionnement de fenêtre, pas la peine de remesurer
|
||||
// à chaque fois un texte qui n'a pas changé.
|
||||
const canvasMesure = document.createElement('canvas');
|
||||
const ctxMesure = canvasMesure.getContext('2d');
|
||||
const largeursTexteMesurees = {};
|
||||
function mesurerLargeurTexte(libelle, taillePx) {
|
||||
const cle = libelle + '@' + taillePx;
|
||||
if (largeursTexteMesurees[cle] !== undefined) return largeursTexteMesurees[cle];
|
||||
ctxMesure.font = '600 ' + taillePx + 'px "Segoe UI","Arial",sans-serif';
|
||||
// letter-spacing:0.03em (voir .etiquette-classeur) ajouté à la main :
|
||||
// measureText() ne le prend pas en compte nativement de façon fiable
|
||||
// sur tous les navigateurs, un calcul explicite est plus sûr qu'un
|
||||
// support incertain de ctx.letterSpacing.
|
||||
const largeurBase = ctxMesure.measureText(libelle).width;
|
||||
const largeur = largeurBase + (libelle.length - 1) * 0.03 * taillePx;
|
||||
largeursTexteMesurees[cle] = largeur;
|
||||
return largeur;
|
||||
}
|
||||
|
||||
// Taille de police (en fraction de IMG_W) pour l'étiquette d'un classeur —
|
||||
// double contrainte, la plus stricte des deux l'emporte :
|
||||
// 1) La largeur RÉELLE du texte (mesurée ci-dessus à une taille de
|
||||
// référence, puis mise à l'échelle) doit tenir dans la hauteur
|
||||
// disponible de l'étiquette (ETIQ_LABEL_Y2-Y1) : c'est cette hauteur
|
||||
// qui devient la largeur du texte une fois tourné à -90°. C'est cette
|
||||
// contrainte qui borne les libellés longs ("Documentations",
|
||||
// "Communication").
|
||||
// 2) L'épaisseur d'une ligne de texte (≈ taille × ETIQ_LIGNE_HAUTEUR) doit
|
||||
// tenir dans la largeur physique de l'étiquette (ETIQ_LABEL_LARGEUR) :
|
||||
// sans cette 2ᵉ contrainte, un libellé court comme "Factures" pourrait
|
||||
// grandir au point de déborder du rectangle blanc sur les côtés.
|
||||
// Bornée par ETIQ_POLICE_MIN_FRAC en dessous (seuil de lisibilité) — pas de
|
||||
// plafond arbitraire au-dessus, les deux contraintes ci-dessus suffisent.
|
||||
function calculerPoliceEtiquette(libelle) {
|
||||
const TAILLE_REF = 100; // px CSS, taille arbitraire pour la mesure
|
||||
const largeurRef = mesurerLargeurTexte(libelle, TAILLE_REF);
|
||||
const hauteurDispoImg = (ETIQ_LABEL_Y2 - ETIQ_LABEL_Y1) * ETIQ_MARGE_HAUTEUR;
|
||||
const parContrainteHauteur = (hauteurDispoImg / largeurRef) * TAILLE_REF / IMG_W;
|
||||
return Math.max(ETIQ_POLICE_MIN_FRAC, Math.min(parContrainteHauteur, ETIQ_POLICE_CAP_FRAC));
|
||||
}
|
||||
|
||||
function positionner() {
|
||||
const vw = window.innerWidth, vh = window.innerHeight;
|
||||
const ratioImg = IMG_W / IMG_H;
|
||||
@@ -458,16 +664,22 @@ Créé par Mevelia Solutions">
|
||||
dispW = vw; dispH = dispW / ratioImg;
|
||||
offX = 0; offY = (vh - dispH) / 2;
|
||||
}
|
||||
const etiquette = document.getElementById('etiquette-contacts');
|
||||
etiquette.style.left = (offX + ETIQ_CENTRE_X_FRAC * dispW) + 'px';
|
||||
etiquette.style.top = (offY + ETIQ_CENTRE_Y_FRAC * dispH) + 'px';
|
||||
etiquette.style.fontSize = (ETIQ_POLICE_FRAC * dispW) + 'px';
|
||||
|
||||
const classeur = document.getElementById('classeur-contacts');
|
||||
classeur.style.left = (offX + (CLASSEUR_X1 / IMG_W) * dispW) + 'px';
|
||||
classeur.style.top = (offY + (CLASSEUR_Y1 / IMG_H) * dispH) + 'px';
|
||||
classeur.style.width = (((CLASSEUR_X2 - CLASSEUR_X1) / IMG_W) * dispW) + 'px';
|
||||
classeur.style.height = (((CLASSEUR_Y2 - CLASSEUR_Y1) / IMG_H) * dispH) + 'px';
|
||||
// Les 9 classeurs (zone cliquable + étiquette tournée, voir
|
||||
// creerClasseurs() et calculerPoliceEtiquette() plus haut).
|
||||
CLASSEURS.forEach(function (c) {
|
||||
const zone = document.getElementById('classeur-' + c.id);
|
||||
zone.style.left = (offX + (c.x1 / IMG_W) * dispW) + 'px';
|
||||
zone.style.top = (offY + (CLASSEURS_Y1 / IMG_H) * dispH) + 'px';
|
||||
zone.style.width = (((c.x2 - c.x1) / IMG_W) * dispW) + 'px';
|
||||
zone.style.height = (((CLASSEURS_Y2 - CLASSEURS_Y1) / IMG_H) * dispH) + 'px';
|
||||
|
||||
const etiquette = document.getElementById('etiquette-' + c.id);
|
||||
etiquette.style.left = (offX + (c.labelCx / IMG_W) * dispW) + 'px';
|
||||
etiquette.style.top = (offY + ETIQ_CENTRE_Y_FRAC * dispH) + 'px';
|
||||
const taillePoliceFrac = (c.policeForceeFrac !== undefined) ? c.policeForceeFrac : calculerPoliceEtiquette(c.label);
|
||||
etiquette.style.fontSize = (taillePoliceFrac * dispW) + 'px';
|
||||
});
|
||||
|
||||
const microDesk = document.getElementById('micro-desk');
|
||||
microDesk.style.left = (offX + (MICRO_ZONE_X1 / IMG_W) * dispW) + 'px';
|
||||
@@ -530,6 +742,7 @@ Créé par Mevelia Solutions">
|
||||
postit.style.transform = 'rotate(' + rotation.toFixed(1) + 'deg)';
|
||||
});
|
||||
}
|
||||
creerClasseurs();
|
||||
window.addEventListener('resize', positionner);
|
||||
positionner();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user