Plugin TimeCircles pour SPIP 3.1+

Publié le : 4 décembre 2018 – Dernière modification le 21 décembre 2021 – par Loiseau2nuit – 37 commentaires

English, français
1
2
3
4
5
4 votes

Cette contribution ou ce plugin est en phase de test. Des bugs peuvent subsister. N’hésitez pas à les signaler dans le forum ci-dessous.

Ajouter à SPIP des chronomètres et des comptes à rebours, personnalisables et animés par jQuery.

Une échéance d’importance ou une « Grande Ouverture » arrive bientôt ? Chauffer votre audience à son propos avec un joli compte à rebours personnalisable en jQuery

Ce plugin est un simple, néanmoins fonctionnel portage sous SPIP du plugin jQuery TimeCircles, de Wim Barelds dans sa dernière version en date : la 1.5.3.

Comment installer TimeCircles ?

TimeCircles s’installe comme n’importe quel autre plugin.

Il ne dépend de rien d’autre que de la librairie jQuery 1.9.1 ou supérieur, ce qui le rend naturellement incompatible avec toute version précédant SPIP 3.1 [1].

Bien que la dépendance ne soit aucunement obligatoire, TimeCircles a été conçu et imaginé pour fonctionner avec le plugin Agenda, alors que je travaillais à la conception d’un site web pour un festival (en ligne 1er semestre 2019 si tout va bien).
L’association souhaitait en effet afficher en page d’accueil le « final countdown » jusqu’à l’heure de l’ouverture des portes, laquelle était enregistrée en base de données sous forme d’événement SPIP dans une logique de publication de la programmation complète du festival.

Comment l’utiliser ?

TimeCircles est livré avec 3 modèles de rédaction, permettant de générer dans vos textes des comptes à rebours et autres chronomètres, animés par jQuery, un peu dans ce style :

Quelque soit le contenu que vous éditez, ajoutez simplement l’un des modèles suivants pour générer le timer approprié

NOTE : le plugin ne stocke AUCUNE donnée en base (bientôt peut être mais chaque chose en son temps...)

DateCountDown

Si vous utilisez Agenda, le modèle suivant fonctionnera très bien et, partout dans le site, pour afficher un décompte temps jusqu’au départ de n’importe quel événement SPIP à venir.
Exemple ici avec un id_evenement=3 (1er de l’an 2019 en l’occurrence)

<datecountdown|id_evenement=3>
DateCountDown

Le modèle fonctionnera également très bien avec une date que vous aurez au préalable déclaré au modèle :

<datecountdown|data-date=2057-08-07 20:00:00>

Ces 2 exemples à l’oeuvre, ici sur la page d’accueil de mon site de tests :

Attention :
Les valeurs de date doivent être renseignées en utilisant le format date de php : Y-m-d h:i:s (ou grand ’H’ pour les heures en mode 0-24) ex. : 2019-01-01 00:00:00

Dans un contexte d’événement (avec Agenda)

<datecountdown|>

placé tel quel, n’importe où dans le contenu texte de votre événement, fera également l’affaire, en se basant sur l’heure de début de votre événement.

Vous pouvez également appliquer TimeCircles de manière automatique à tous vos événements en ajoutant simplement la balise #MODELE{datecountdown} aux endroits voulus, dans vos squelettes d’agenda et autres boucles événementielles.

CountDownTimer

Ici nous démarrons un compte à rebours de 15 minutes avec le modele suivant (les valeurs doivent être renseignées en secondes : ici 900 = 15 minutes)

<countdowntimer|class=something|data-timer=900>
CountDownTimer

PageOpenTimer

Et sinon, ça fait combien de temps que tu es en train de lire cette page web ?

<pageopentimer|>
PageOpenTimer

Modification et styles

Le plugin fournit une feuille de style css/timecircles.css. Ce fichier, ainsi que tout le jacascript, sont insérés automatiquement dans votre <head> via les balises SPIP #INSERT_HEAD & #INSERT_HEAD_CSS. Vous n’avez donc rien à faire dans vos squelettes pour les appeler.

Si vous souhaitez des idées ou/et un générateur automatique de javascript d’appels, rendez vous sur le site de l’auteur dont vous pourrez copier/coller le code dans un fichier /squelettes/js/vos_scripts.js.

Note aux développeurs de squelettes : Depuis la version 1.5.3.22, et suivant la méthode suivante, les comptes à rebours sont rendus responsifs par défaut grâce à la function rebuild() de javascript, invoquée sur le conteneur lors d’un redimensionnement. Ce code est directement passé au pipeline insert_head_.

$(window).on('resize', function(){
	$('.DateCountdown').TimeCircles().rebuild();
	$('.CountDownTimer').TimeCircles().rebuild();
	$('.PageOpenTimer').TimeCircles().rebuild();
});

Ce tronçon de code sera donc à conserver idéalement dans vos surcharges sui vous décidez de coder des chronos spécifiques dans un fichier personnel /squelettes/js/vos_scripts.js.

Plugin naturellement gratuit et open source

Son code source est bien évidement libre et accessible sur SPIP-ZONE, pour téléchargement et développement collaboratif :
https://zone.spip.net/trac/spip-zon...

N’hésitez pas à git clone / svn co la dernière version et “let’s dance” !

TO DO

  • Faire fonctionner le plugin sur la page en_travaux
  • Proposer un panneau de config générique à l’image du générateur d’appels JS personnalisés disponible sur le site de l’auteur :
    Config panel
  • Gérer l’insertion des modèles via le plugin inserer_modeles
  • trouver un moyen de stocker les infos de démarrage/arrêt pour les modèles <pageopentimer|> et <countdowntimer|>

“That’s All, Folks !”

Notes

[1] du moins, pas sans bidouillage à la surcharge sauvage de jQuery et la modification locale du paquet.xml. Je dis pas que faut le faire, je dis juste que c’est possible...

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

2 discussions

  • 1
    Kingrise

    Bonjour,
    Juste pour signaler que ce plugin fonctionne sur mon site sous Spip 4.2.10 en modifiant la balise du fichier paquet.xml compatibilite=« [3.1.0 ;4.2.*] »

    • Kingrise

      Bonjour,
      Juste pour signaler que ce plugin fonctionne sur mon site sous Spip 4.2.10 en modifiant la balise du fichier paquet.xml compatibilite=« [3.1.0 ;4.2.*] »
      Vous pouvez combiner ce plugin avec une petite boucle pour faire disparaître un formulaire créé avec le plugin formidable lorsque le timer est terminé
      Premièrement insérer le modèle dans votre article du plugin timecircles :
      <datecountdown|data-date=2024-03-30 15:00:00>
      et ensuite à l’aide du modèle suivant :

      <!-- modele/formulairetimer.html -->
#CACHE{0}
[(#DATE|affdate{'Y-m-d H:i:s'}|<={#ENV{data}}|oui)
  <div class="formulaire_timer">
    #FORMULAIRE_FORMIDABLE{#ENV{id}}
  </div>
]

      Pour utiliser ce modèle, placez-le dans le dossier squelettes/modeles/ de votre installation SPIP et nommez-le formulairetimer.html. Ensuite, vous pouvez l’inclure dans vos articles avec la balise suivante :

      <formulairetimer|id=24|data=2024-03-30 15:00:00>
      _Ce modèle prend deux paramètres : id pour l’identifiant du formulaire et data pour la date et l’heure après lesquelles le formulaire ne doit plus s’afficher.

    Répondre à ce message

  • 4
    Kingrise

    Bonjour,

    Merci pour ce superbe plugin.

    Juste une question... Est-il possible de recalculer la page automatiquement lorsque que le compte à rebours arrive à zéro pour rafraîchir la page ?...

    Si quelqu’un a une idée, je suis preneur.

    • Loiseau2nuit

      Hello et merci pour ton message !

      Non, j’avoue que cette fonctionnalité là n’est pas prévue. Dans le sens où la page indiquant l’événement dédié, n’a, à priori, pas vocation a changer de contenu.

      L’idée est intéressante, ceci dit, au cas où ton événement soit si « Woaw » que tous tes visiteurs seront là au moment où on passe à 0:00:00, auquel cas, un petit Javascript tout bête devrait pouvoir lancer un event particulier (genre des étincelles qui apparaissent ou autre *plop*eries dans le style), Mais je n’y ai pas réfléchis et c’est pas vraiment une priorité pour moi.

      Je me note ça quand même dans un coin de ma TODO, au cas où, mais si tu as des idées d’implémentation d’ici que j’y réfléchisse vraiment, n’hésite pas à les partager ici ;-)

      #PrenezSoinDeVous #RestezChezVous

    • Kingrise

      L’idée était de faire apparaître une vidéo postée sur YouTube (ou autre) une fois le compteur terminé, utile en ce moment pour faire un live ! Voyons ça aussi pour une enchère, une promotion... Franchement, je trouve ça utile ;-)

      Mais, je trouve déjà le plugin très très bien !!

      Merci et Bon confinement,

    • Loiseau2nuit

      Oui je vois bien... Bon après ce qui me dérange un peu c’est que ca sortirait du rôle de ce plugin, dont l’unique fonction, au final, est d’intégrer proprement un JQuery, tel quel, dans SPIP, sans modifier son fonctionnement de base. Le point noir en ce cas, est que TimeCircles ne stocke aucune info (heure de démarrage, d’arrêt, des timers...) car ce n’est pas sa fonction.

      Pour ton besoin, je verrais bien, en revanche, un squelette d’événement avec les boucles d’Agenda et faire une boucle conditionnelle selon la date du jour :
      -  si on n’est pas le Jour J => on affiche TimeCircles
      -  si on est le Jour J => on affiche autre chose

      avec un peu de JS éventuellement, pour que la bascule puisse se voir en direct si on est sur la page au moment M

      A creuser ...
      Bon confinement de même !

    • Loiseau2nuit

      J’ai pas testé mais je pense que tu peux partir sur un truc comme ça (et venir nous dire si ca donne quelque chose)

      <BOUCLE_event(spip_evenements){id_evenement}>

	[(#REM) partie à "ajaxer" pour gérer la bascule d'affichage 
            au moment M mais là je sais pas faire ]
	<BOUCLE_test(CONDITION){si #DATE|>={#_event:DATE_DEBUT}}>
	  ton contenu événementiel
	</BOUCLE_test>
	  sinon, le countdown
	<//B_test>

</BOUCLE_event>

      Un peu de lecture :

      Bon sprint ! ;-)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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