48 lines
2.2 KiB
JavaScript
48 lines
2.2 KiB
JavaScript
.pragma library
|
|
|
|
// ============================================================================
|
|
// responsive.js - fonctions utilitaires pour un affichage adaptatif (PC,
|
|
// tablette, téléphone). Même principe que fonctions.js/fonctions_date_heure.js
|
|
// côté natif (bibliothèque JS partagée, importée par les pages qui en ont
|
|
// besoin) - cf synthèse, chantier "responsive".
|
|
// ============================================================================
|
|
|
|
// Seuil en dessous duquel l'écran est considéré "étroit" (bascule en mise en
|
|
// page compacte - typiquement un téléphone en portrait) :
|
|
var SEUIL_ECRAN_ETROIT = 700;
|
|
|
|
function estEtroit(largeur) {
|
|
return largeur < SEUIL_ECRAN_ETROIT;
|
|
}
|
|
|
|
// Taille de police proportionnelle à la largeur d'écran disponible, avec un
|
|
// plancher et un plafond pour rester lisible sur petit écran et raisonnable
|
|
// sur grand écran PC. 'base' est la taille pensée pour un écran de référence
|
|
// (~950px de large, l'ordre de grandeur habituel de test de ce projet).
|
|
function police(base, largeur) {
|
|
var largeurReference = 950;
|
|
var taille = base * (largeur / largeurReference);
|
|
var plancher = base * 0.6;
|
|
var plafond = base * 1.3;
|
|
if (taille < plancher) taille = plancher;
|
|
if (taille > plafond) taille = plafond;
|
|
return Math.round(taille);
|
|
}
|
|
|
|
// Nombre de colonnes adapté à la largeur RÉELLEMENT disponible et au nombre
|
|
// d'éléments à afficher, plutôt qu'un simple seuil binaire "écran étroit/
|
|
// large" - chaque bouton reste au moins 'largeurMinBouton' de large, quel que
|
|
// soit le nombre d'éléments (qui peut varier dynamiquement - ex: familles
|
|
// créées/supprimées par l'utilisateur, différent d'un domaine à l'autre) :
|
|
var LARGEUR_MIN_BOUTON = 130;
|
|
|
|
function colonnesSelonLargeur(largeurDisponible, nombreElements, largeurMinBouton) {
|
|
if (largeurMinBouton === undefined) largeurMinBouton = LARGEUR_MIN_BOUTON;
|
|
var colonnesPossibles = Math.max(1, Math.floor(largeurDisponible / largeurMinBouton));
|
|
return Math.max(1, Math.min(nombreElements, colonnesPossibles));
|
|
}
|
|
|
|
// Hauteur minimale garantie pour une cible tactile (bouton), quelle que soit
|
|
// l'échelle par ailleurs - recommandation usuelle d'accessibilité (~44px) :
|
|
var HAUTEUR_MIN_TACTILE = 44;
|