Utilisation de la timeline en javascript du laboratoire SIMILE du MIT.
Ce plugin est en cours de développement.... Ceci est un bloc-note de développement constituant également un début de documentation.
Lorsque le plugin sera jugé apte à devenir stable, cette documentation sera déplacée sur spip-contrib
Objectifs
En complément du plugn agenda de Cedric Morin, offir aux webmasters une autre méthode d’afficher ces évènements que l’utilisation d’un calendrier à la dotclear.
Utilisation de la timeline en javascript du laboratoire SIMILE du MIT.
Adaptation au maximum à SPIP.
SPIP utilise par défaut la librairie javascript Jquery... on va donc l’utiliser également un petit peu.
La boucle des évènements à récupérer
Il semble nécessaire de pouvoir spécifier quels évènements nous souhaitons récupérer en particulier...
Pour cela il suffit d’appeler la timeline de cette manière :
<timeline1|article=12> : récupère les évènements de l’article 12
<timeline1|mot=12> : récupère les évènements dans tout le site qui ont le mot clé numéro 12
Un peu de doc pour SIMILE Timeline
La documentation étant assez peu fournie et en anglais ... on va expliquer ici ce que l’on comprend...
2Le Javascript2
Tout d’abors et avant tout il faut insérer le js de la timeline... Le plus simple est de le chopper directement chez eux ... Donc on insère entre les balises head ceci :
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>Ensuite ... il va falloir bien entendu définir notre timeline :
- <script type="text/javascript">
- var tl; // On définit la Timeline
- $(document).ready(function (){ //Fonction Jquery qui remplace onload et qui charge le js après le chargement complet de la page
- // On utilise le theme classic
- var theme = Timeline.ClassicTheme.create();
- theme.event.label.width = 150; // px
- theme.event.bubble.width = 200;
- theme.event.bubble.height = 160;
- var eventSource = new Timeline.DefaultEventSource();
- //On définit les bandes de données
- var bandInfos = [
- // La première
- Timeline.createBandInfo({
- eventSource: eventSource,
- // on définit la date ou la tieline va se centrer
- date: "[(#ENV{date_debut}|?{#ENV{date_debut},[(#ENV{date}|affdate{M d Y H:00:00}) GMT]})]",
- width: "70%",
- //On définit la valeur de chaque intervalle dans la timeline : ici 1 mois
- intervalUnit: Timeline.DateTime.MONTH,
- // chaque intervalle = 300px
- intervalPixels: 300
- }),
- Timeline.createBandInfo({
- eventSource: eventSource,
- date: "[(#ENV{date_debut}|?{#ENV{date_debut},[(#ENV{date}|affdate{M d Y H:00:00}) GMT]})]",
- width: "30%",
- intervalUnit: Timeline.DateTime.YEAR,
- intervalPixels: 500
- })
- ];
- bandInfos[1].syncWith = 0;
- bandInfos[1].highlight = true;
- Timeline.loadXML("[(#URL_PAGE{backend_agenda_timeline})]", function(xml, url) { eventSource.loadXML(xml, url); });
- tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
- });
- </script>
2Le XML Contenant les évènements2
"start" est la date de début de l’évènement "end" est la date de fin "latestStart" "earliestEnd" "isDuration" != "true", "title" ... Le titre description "image" ... L’image "link" ... Le lien de l’évènement "icon" ... L’icone de l’évènement "color" ... La couleur dans laquelle appraîtra l’évènement dans la timeline "textColor" ... La couleur que prendra le texte dans l’infobulle
Ces éléments sont définis dans le fichier "sources.js" inclus automatiquement par "timeline-api.js".
Dépendances pour spip
Plugin CFG
Plugin Agenda de Cédric Morin
Plugin Widget calendar de Cédric Morin
Configuration à travers CFG
La plupart des options sont configurables dans CFG et sont réparties en plusieurs parties ...
Design de la timeline
largeur : largeur en pourcentages ou pixels du cadre de la timeline. Il est nécessaire de mettre "%" ou "px" à la fin de la valeur. Par défaut : 100%
hauteur : hauteur en pixels du cadre de la timeline. Il est nécessaire de mettre "px" à la fin de la valeur. Par défaut : 300px
Méthode de mise en place
Rajouter la balise #AGENDA_TIMELINE entre les balises
Rajouter le modèle agenda_timeline à l’emplacement ou vous souhaitez faire apparaitre votre timeline...
Note : il sera possible de modifier l’affichage dans le futur (taille couleur...).
