Timeline Me

TimelineMe - ​http://mickaelr.github.io/jquery-timelineMe/ - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps.

Le présent plugin pour SPIP l’utilise et propose un modèle pour afficher les articles d’une rubrique de cette manière :

<rubriqueX|timelineme>

X est bien le numéro de la rubrique dont on veut lister les articles.

Le tri des articles est du plus récent en haut au plus ancien en bas. Si on choisi d’utiliser les numéros de titre, ils seront triés du plus grand chiffre en haut vers le plus petit en bas.

Les encarts affichent en alternance le titre d’un côté de la ligne, et de l’autre côté le chapeau des articles, avec un bouton « voir plus » pour lire le texte, « voir moins » pour le masquer.

On peut utiliser ce modèle avec quelques paramètres d’appel :

|sens=inverse (changer le sens de tri des articles.)

|background=#8DD8DD (détermine la couleur d’arrière-plan)

et si on utilise :
|orientation=horizontal

alors on peut ajouter au choix :
|scrollArrows=true (false par défaut)
|scrollBar=false (true par défaut)
|scrollZones=true (false par défaut)

Exemple :

<rubrique2|timelineme|sens=inverse|orientation=horizontal|scrollArrows=true|scrollBar=false>

Nota bene : Pour l’instant, aucune mise en forme n’est possible dans les textes (chapeau ou texte), et donc aucun lien ni aucune image non plus.

À faire : L’idéal serait justement de trouver une solution pour afficher la mise en forme des textes, les liens et les images incluses.

Dernière modification de cette page le 9 février 2019

Discussion

4 discussions

  • 4
    Philippe Robin

    bonjour

    merci pour cette bonne idée.

    la balise

    <rubriqueX|timelineme>

    est une balise à insérer dans un article ? un squelette de page ?
    les balises dans les squelettes sont généralement de la forme

    #TIMELINE|filtre

    quid de son insertion sous Zpip ?

    merci à vous

    bonne journée.

    • Bonjour,
      le modèle proposé est bien à ajouter dans les textes, n’importe où dans le site, avec n’importe quel squelette - normalement ;o)
      La rubrique X qui contient les articles peut être masquée de l’arborescence générale du site... ou pas, à vous de voir, de faire quelques boucles pour obtenir ce que vous voulez...

    • Philippe Robin

      merci pour la réponse. Après mise en oeuvre et appelé via

      monsite.com/ ?page=timeline

      la page est bien appelée ainsi que le modèle, mais celui_ci n’a aucune forme de matérialisation dans le rendu final.

      voici ma page (via Zpip) :

      <section>
              <header class="main">
              TITRE
              </header>
              <rubrique2|timelineme|orientation=vertical|scrollArrows=true>
      </section>
    • Philippe Robin

      ok, ça fonctionne

      après quelques aléas personnels.

      j’essaye d’ajouter la DATE à coté du TITRE, parce que c’est quand même dommage d’avoir une TIMELINE sans ... DATE

      merci

    Répondre à ce message

  • 6

    Salut,

    merci pour ce plugin.
    Est-ce qu’il y a dans l’idée de le rendre générique pour afficher tout type d’objet SPIP ? Je pense évidemment aux événements du plugin Agenda :)

    jeanmarie

    • salut,
      bin... moi j’l’ai pas eu cette idée, j’ai fais avec des articles comme des actualités, sans réfléchir plus que ça... mais là c’est pas la mer à boire de faire un modèle pour les évènements, vas-y gogoggo ;o)

    • L’idée serait plus de faire un outil générique, fonctionnant pour tout type d’objet, pour éviter de devoir faire des modèles pour chaque objet.
      Un peu à l’image de ce que fait Charles pour Métas+ : https://www.mail-archive.com/spip-zone@rezo.net/msg45061.html
      Bon, c’est peut être un autre chantier hein :)

    • Pour moi c’est pas la peine de faire ça, ce plugin n’est qu’un petit modèle léger pour un usage plutôt rare et occasionnel... ça me semble simple avec des modèles.
      Ce serait même plutôt un exemple pour faire d’autres petits modèles maîtrisés par le rédacteur, où on est pas limité par la technique puisqu’elle est simple.

    • D’autant plus qu’on se heurterai vite à une limite des boucles de SPIP : il n’est pas possible de passer la table comme parametre dynamiques.

      On ne peut pas faire

      <BOUCLE_generique(#ENV{objet})>
      </BOUCLE_generique>

      Il y aurait bien moyen de contourner, mais cela serait complexe pour pas grand chose.

    • Pas faux... on voit bien le chantier pour Métas+ :)

    • Je rebondis un peu tardivement sur cette discussion, mais j’avoue que je rejoins @jeanmarie sur ce besoin.

      Pour une appli de travail interne propulsée par SPIP, j’ai créé pleins de nouveaux types d’objets éditoriaux en liaisons les uns les autres, et que je dois pouvoir timer dans le temps (outil de plannification) autant que n’importe quel autre article. Là, je verrais bien ce genre d’affichage pour mes grappes par exemple. :)

    Répondre à ce message

  • spipfactory

    cool merci jc

    /* largeur des boites timeline */
    .annonce-titre {
            background: rgba(255,255,255,0.5);
            padding: 5px 20px;
            margin-left: 0;
    }
    .timeline-me-track{
            width: auto
    }
    .timeline-me-smallitem .timeline-me-item-wrapper {
            width: 170px;
    }
    .timeline-me-shortcontent {
            width: 150px !important;
    }

    Répondre à ce message

  • 1
    spipfactory

    bien ,

    bien ce petit timelime me pour faire un fil conducteur.

    me reste a régler la taille des boites ;) , et sans doute d’autre truc ....

    • spipfactory

      boen elle est ou cette régle css qui permet de définir la taille de la boite chapeaux

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom