Passer au contenu principal

Les Timelines

WIP / les timelines c'est compliqué !

Pour l'instant, l'édition de timelines est réservée au staff wiki

Avant de commencer

  • Les Timelines utilisent Vega : une grammaire qui permet de décrire une visualisation en JSON pour qu'elle s'affiche en image directement dans un navigateur.
  • Pour intégrer cette fonction à Bookstack, il faut passer par une intégration en Javascript. Pour que les balises HTML restent intactes, il faut obligatoirement utiliser l'éditeur Markdown de Bookstack.
  • Le code de la Timeline doit donc être stocké dans une variable JS, ce qui implique quelques contraintes, notamment sur l'encodage des caractères, des smileys, et interdit le double saut de ligne.
  • Toute la description de la timeline est stockée dans la variable timelineSpec sous forme d'un dictionnaire. Pour modifier une timeline, il ne faut modifier que le contenu de cette variable (entre l'accolade ouvrante ligne 4 et fermante ligne 349 sur le modèle). En aucun cas il ne faut modifier tout ce qu'il y a autour sous peine de tout péter.
Encodage des caractères spéciaux

Table des caractères spéciaux courants et leur équivalent à inscrire dans le code des timeline.

Lettre Encodage
Lettre Encodage
é \xE9


à \xE0


è \xE8


ù \xF9


â \xE2


ê \xEA


î \xEE


ô \xF4


û \xF9


ä \xE4


ë \xEB


ï \xEF


ö \xF6


ü \xFC


Pour une liste exhaustive : https://outils-javascript.aliasdmc.fr/encodage-caracteres-accentues/encode-caractere-00E9-html-css-js-autre.html

Correspondance champ "statut" <> Emoji

Inscrire directement des emojis dans le code des timelines est assez compliqué, le champ statut de chaque membre contient donc un mot clef qui est associé à un emoji au moment du rendu de la timeline.

Statut Emoji
décès ⚰️
départ ✈️
consenti  🚪 
dissolution ❌
démantèlement  👮 
trahison 💢
renvoi  📢 

Si le membre n'a pas de statut, il faut laisser ce champ à la valeur null.

Format des dates

Toutes les dates utilisées pour le rendu sont au format YYYY-MM-DD. Par exemple 2022-02-03 correspond au 3 Février 2022.
Si un champ de date est mis à la valeur null, il sera converti à la date du jour lors du rendu (correspond en général à un membre actif de l'entité).

Créer une nouvelle Timeline

  • Etagère CaliRP > Livre Timelines
  • Nouvelle page
  • Modification du brouillon > Basculer vers l'éditeur Markdown (contenu nettoyé) > Continuer
  • Modèles > [Modèle de Timeline]
  • Remplacer les placeholders dans value de membre, chef, et events
  • Adapter les couleurs des rect de chef et membre aux couleurs de l'entité (champ fill.value, code hexadécimal)

Intégrer une Timeline dans une page

  • sur la page de la timeline, double-cliquer sur l'image pour faire apparaitre la popup d'intégration

  • image.png

  • copier le lien (dans le cas de la Timeline modèle : https://wiki.calirp.fr/link/56#bkmrk-timeline)
  • garder uniquement l'identifiant de la page et le marque-page (ici 56#bkmrk-timeline)
  • et les insérer entre double accolades dans la page associée à cette timeline
    {{56#bkmrk-timeline}}
  • la partie après le # devrait toujours être "bkmrk-timeline", il n'y a que l'identifiant de la page qui change d'une timeline à une autre.

Mettre à jour une Timeline

Même si il est tout à fait possible de mettre à jour une Timeline directement dans l'éditeur Bookstack, je conseille fortement d'utiliser un éditeur externe avec un minimum de compréhension syntaxique pour rendre le code plus lisible (notepad++ configuré sur json, ou votre IDE préféré) et de vérifier dans l'éditeur Vega en ligne que le résultat des modifications correspond à ce que vous souhaitez faire : https://vega.github.io/editor/#/edited

l'escape des caractères spéciaux nécessaire sur le Wiki ne fonctionne pas dans l'éditeur en ligne, désolé :'(

Ajout d'un membre

Pour ajouter un membre, il faut insérer ce bloc la liste values de la data membre

{
  "label": "prenom_nom",
  "nom": "Prénom Nom",
  "début": "2022-01-01",
  "fin": null,
  "statut": null
}
  • Remplacez le label, le nom, et la date d'entrée dans l'organisation
  • Si le membre est toujours dans le groupe au moment de son ajout à la Timeline, laissez les champs fin et statut à null

Comme toujours en json, attention aux virgules : le dernier élément d'une énumération n'en possède pas (le champ statut ici) mais il faut en ajouter une avant le bloc qu'on vient d'insérer dans la liste.

Veillez à toujours ajouter les nouveaux membres à la fin de la liste pour que l'ordre chronologique d'arrivée des membres soit conservé.

Départ d'un membre

Au départ d'un membre, il suffit de mettre à jour les champs fin et statut dans la liste des membres.
Cf. la liste des statuts possible plus haut dans la page.

Attention, si le membre avait un grade distinctif (chef par exemple), il faut aussi mettre à jour la date de fin dans cette liste ci.

Nouvel évènement marquant

 

Nouveau chef ou changement de chef (ou autre grade)

 

Ajout d'un échelon hiérarchique

 

Retour en haut