Refonte structurelle
Internationnalisation
- l'ensemble des textes, liens, images à traduire sont dans un fichier data.lg.json. Le fichier fr est utilisé en fallback si le texte n'est pas traduit.
- les fichiers nav.html et footer.html ont donc été supprimés
Variables et Fonctions
Les variables sont regroupées dans un object pour en avoir une vue d'ensemble facilement :
- n${} = variables globales de la nav
- d${} = données localisées (texte, liens, icônes, couleurs, etc)
- h${} = code html utile généré (ou qui se répète)
- c${} = config complète du site
- l${} = config ajustée du site par rapport à la config globale
Les variables à usage unique sont préfixée d'un f$_ (idéalement il ne faudrait pas qu'il y en ait)
Les « frama » disparaissent des noms de fichier ext et dans la config. On a n.site (ex : "pad") à la place de f
_site et n$.name pour le nom du site (ex : "framapad")
Les fonctions sont préfixée selon le rôle qu'elles ont :
- i$() lorsqu'elle retourne un booléen ou un état
- h$() lorsqu'elle produit du code html (le but est d'éviter les répétitions et les erreurs de formatage)
- f$() lorsqu'il s'agit de fonctions génériques Il y aurait encore beaucoup d'amélioration à apporter de ce côté là.
Config
La config globale est remaniée, tout tient dans la variable c{}. La nav importe ensuite la variable l
{} du fichier config.js et écrase les valeurs à modifier.
Normalement, le changement dans le nom des variables est assez transparent : j$ = jQuery, b$ = bootstrap, fixed = nav_static…
La config des scripts js et des css sont regroupés dans un même sous-objet. Les paramètres pour configurer modales, alert, optin, etc sont également regroupés dans des tableaux.
A priori on devrait gagner en lisibilité. Si je parviens à automatiser la détection de la bonne config jquery/bootstrap ensuite ce sera encore moins chargé.
Pour les css, la variable css_position
est remplacé par une variable order
qui sert à déterminer dans quel ordre il faut charger les différents fichiers (cf commentaires dans config globale).
Il est possible de tester le bon fonctionnement d'une nouvelle config en production (notamment si on ajoute/modifie lourdement des scripts ou fonctions personnalisés) sans aucune incidence sur l'expérience des utilisateurs. En ajoutant « Framatech » à l'UserAgent de son navigateur, la nav charge la section agent
du fichier config.js. Ça c'est vraiment trop génial ! :)
La fonction i() sert à détecter sur quelle page, domaine, sous-domaine, etc on se trouve pour affiner la config (remplace et améliore f
_page).
La fonction i$Lang('en') sert à détecter si la page qu'on visite est en anglais (l’internationalisation de la nav se fait en fonction de la langue officielle de la page pas en fonction des paramètre de navigation).
Tests
Pour vérifier le bon fonctionnement de la nav quand on y fait de grosses modifs comme ici, j'ai mis quelques pages types en exemple dans le dossier test.