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

6 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

  • 12
    Amaury Adon

    Bonjour et merci pour ce plugin.
    Tout fonctionne très bien à un détail près. Je n’ai l’affichage des cercles sur le site public que lorsque je suis connecté. Si je ne le suis pas, pas d’affichage.
    Et ce, quelque soit la plateforme (ordi, mobile,…) ou le navigateur.

    J’ai bien rajouté les quelques lignes de javascript dans mon squelette mais cela ne change rien.

    Merci pour tout début de piste.

    • Loiseau2nuit

      Bonjour.

      Tel quel à froid, ca pourrait ressembler un soucis de cache.
      Auriez vous l’URL d’une page exemple svp ?
      + Vous me confirmez que vs êtes bien en version 1.5.3.22 ?

      Vider le cache SPIP (via l’espace privé) et le cache navigateur (http://www.viderlecache.fr) . Si ils y sont encore, supprimer également par FTP le répertoire tmp/cache/ et les fichiers tmp/meta_cache.php et tmp/mysql.out

    • Amaury Adon

      Cache vidé (et même désactivé).
      J’ai supprimé tous les plugins non nécessaires pour être sûr de ne pas avoir de conflit.
      Je suis en version 1.5.3.22 pour TimeCircles.

      Url de test http://forum.hopitalpsy.fr/nec/spip.php?article2

      Je confirme aussi que cela fonctionne parfaitement dans le privé et côté public quand je suis connecté.

    • Loiseau2nuit

      J’ai pu reproduire de mon côté en effet. Pour un raison qui m’échappe, dès que l’auteur n’est plus connecté, spip.php rencontre une erreur 403 lorsqu’il essaie de construire la lib depuis le squelette /lib/timecircles.js.html ...

      Je suis en train d’essayer de voir d’où ça peut venir...

    • Amaury Adon

      Salut
      J’ai continué mes investigations.
      À la ligne 35 de timecircles_pipelines.php, on fait appel au fichier lib/timecircles.js.html par generer_url_public('lib/timecircles.js')

      Il semble que le caractère / soit mal interprété ce qui conduit à des erreurs.

      J’ai contourné le problème en modifiant cet appel et en déplaçant le fichier lib/timecircles.js.html à la racine du plugin (donc en dehors du répertoire lib).

      Il semble que cela solutionne le souci mais ça ne me parait pas très propre.

      Mes deux sous

    • Loiseau2nuit

      Salut Amaury et désolé pour le délai de correction, j’avoue qu’avec les fête et la reprise ca n’a pas été simple.

      J’ai investigué dans ce même sens en effet mais n’ai pas retenu la solution (qui risquait de péter mes devs autour d’un formulaire de config plus complet que maintenant).

      Là le code d’erreur renvoyé par le plugin en l’état me laisse à penser qu’on ne s’en tirera pas à si bon compte... je suis en train de creuser du côté de l’API authorisation voire si je n’aurais pas zappé une brique élémentaire...

      (ps : et je m’excuse une fois encore pour le temps, il faut dire qu’à la base je suis plus front-end dev (HTML/CSS/JQUERY) que back-end donc forcément ya des codes et des méthodes à prendre ^^)

    • Loiseau2nuit

      ps : par ailleurs, je réfléchis également à revenir sur cette écriture .js.html du moins pour le contenu de la lib, laquelle doit rester simple à mettre à jour (c.a.d ne pas être modifée de trop, et là c’est pas le cas ...)

    • Amaury Adon

      Salut
      Il n’y a pas d’excuses à faire, j’ai moi même un projet que je dois finir pour dans deux semaines depuis deux ans…
      Ce qui me surprenait, c’était que j’avais une erreur 403 et que le caractère / était transformé en 2f ou quelque chose d’approchant.
      J’ai essayé dans un premier temps de passer le dossier lib en accès public en mettant

      	<chemin path="./" />
	<chemin path="lib" type='public'/>

      à la fin du paquet.xml comme je le fais pour tout mes plugins contenant un squelette

      	<chemin path="./" />
	<chemin path="squelettes" type='public'/>

      mais ça n’a pas semblé fonctionner.
      En désespoir de cause, j’ai déplacé le fichier et modifié son appel, ce qui a fait le taf. Mais c’est clair que ça ne correspond pas du tout à ta toutdouxliste

    • Loiseau2nuit

      Non ... mais tu viens de soulever un lièvre quand même !

      La balise <chemin> est composée d’un attribut obligatoire : path, le dossier que l’on veut rendre accessible
      et d’un attribut facultatif : type, définissant la portée de l’accessibilité pouvant prendre les valeurs “public” (accessible uniquement dans l’espace public), “prive” (accessible uniquement dans l’espace privé). Si absent, l’accessibilité est totale (privé + public).
      https://plugins.spip.net/redaction-du-paquet-xml.html

      Donc dans notre cas, la présence de <chemin> est à proscrire car on attend bien que l’effet se produise en public ET en privé

      Mais là du coup la lib se comporte comme si on avait <chemin path="lib" type='prive'/> ...

    • Loiseau2nuit

      Bon... c’est du patch et je cherche mieux mais la version 1.5.3.23 (dispo dans l’heure ou 2 max. via SVP) devrait fonctionner en attendant mieux.

      Peux tu confirmer que c’est ok ?

      (En revanche, ca remet en cause une partie de la doc que je vais adapter de ce pas .)

    • Amaury Adon

      J’essaye de te faire ça dans le weekend mais ça risque d’être un peu dur. Retour à la normale mardi, je te tiendrai au courant à ce moment là au plus tard.
      En tout cas, merci pour le boulot effectué.

    • Amaury Adon

      Bonjour Loiseau2nuit,
      bonne nouvelle ce matin, chaimoissamarche !

    • Loiseau2nuit

      Super ! Merci encore pour tes retours ! :-)

    Répondre à ce message

  • 1
    AlainF

    Bonjour et bravo pour ce plugin.
    Je serais très intéressé par la possibilité de l’associé à un mot clé.

    Pour le site d’un team bénévole d’endurance moto, j’utilise actuellement, pour afficher le compte à rebours de la prochaine course dans un squelette, un petit script avec TargetDate = « 04/21/2019 3:00 PM »
    J’affiche le résultat accompagné des éléments, d’une boucle, du dernier mot clé « course »
    avec un mot clé par épreuve (24 Mans2019, Bol d’Or2019 etc.)

    Le mot clé est nécessaire pour préciser les participations des pilotes
    (un article/pilote dans la rubrique « Les Pilotes »)

    -  Sur la page article/pilote, on reprend les courses auxquelles il a participé (mots clés « courses » associé avec le logo)
    -  Sur la page sommaire, on affiche les pilotes associés au dernier mot clé (prochaine course)

    Ce plugin pourrait - il correspondre à ce compte à rebours ?

    Alain

    • Loiseau2nuit

      Hello et merci pour ton message :)

      Concernant ton besoin je ne suis pas certain d’avoir bien compris le fonctionnement que tu me décris ?
      Est-ce que ton site utilise le plugin Agenda pour enregistrer les courses ?
      Ce mot clé vient d’où et sert à taguer quoi ? Dans quel but ?
      A quel moment est supposé intervenir le compte à rebours ? ... ?

      Sinon dans l’absolu il est tout à fait possible d’utiliser le modèle directement dans un squelettes avec #MODELE{datecountdown} placé dans une boucle événement. A partir de là si tu dis à ta boucle de n’afficher QUE les événements ayant le mot clé ’TRUC’, ca doit fonctionner... ou de n’afficher le timer QUE si l’événement en question a bien le mot clé ’BIDULE’.

    Répondre à ce message

  • 10
    Michel

    Mis en test sur laccreteil.fr.
    Première question concernant les possibilités de paramétrage du Plugin TimeCircles :
    -  Serait-il possible de définir la largeur en pixel ou en pourcentage de l’affichage et son positionnement, comme cela se fait habituellement (left, center, right) ?
    Bonne journée.
    Michel

    • Michel

      Complément d’info :
      -  En natif il est à 100% mais lors d’un redimensionnement manuel de la fenêtre de l’explorateur, il faut actualiser la page pour que l’affichage du décompte soit aussi redimensionné ...
      Exemple sur cette page : http://laccreteil.fr/spip.php?article407

    • Loiseau2nuit

      Possible en effet.
      Le plugin n’est rien de plus que l’insertion par les bons tuyaux SPIP d’un script auquel je n’ai apporté aucune modif (autre que l’internationalisation des chaines de langues, s’entend).

      Pour les modèles, savoir que, comme la CSS et l’appel JS, tu peux également les surcharger dans /squelettes et jouer sur le paramètre style=« width:what-you-need px ; »

      OU utiliser le paramètre class du modèle pour appliquer une class CSS perso :

      <datecountdown|class=ta-class--css|data-time= ...>

    • Loiseau2nuit

      ...mais cette histoire de non-redimensionnement automatique effectivement ca ne me plait qu’à moitié. Peut-être que enlevant style="100%" dans le modèle et en systématisant l’utilisation d’une class css perso, avec un sélecteur prévu et codé pour êre déjà responsive ...

      Ecoute je te dis pas que c’est pour dans l’heure qui suit mais je vais regarder ce que je peux faire là dessus.

    • Michel

      Merci beaucoup pour la rapidité de la réponse !
      Je vais faire des essais et des retours ensuite...

    • Michel

      L’affichage du compte à rebours n’est pas visible sur IOS (smartphone).

    • Loiseau2nuit

      même en vidant bien le cache ?
      (j’avoue que je n’ai rien pour tester sous Mac OS ici ...)

    • Loiseau2nuit

      Pour le redimensionnement responsif, la version 1.5.3.22 devrait corriger le problème.

    • Michel

      Sur mac OS, c’est OK avec Safari, mais pas avec Firefox 63.0.3... il donc se pourrait peut-être que ce soit lié aux limitations volontaires des ces navigateurs Internet ?

    • Loiseau2nuit

      Aucun soucis sous Firefox 63.0.3 ici avec timecircles 1.5.3.22 (je suis sous Linux Mint mais c’est le même moteur de rendu pour FF) ... il y a peut être un autre problème dans ton squelette là ...

    • Michel

      Avec la mise à jour, c’est maintenant OK pour le redimensionnement.

    Répondre à ce message

  • 3
    liberte

    Bonjour,

    Ḿerci pour ton plugin, j’en aurai l’usage.

    Pourquoi ne pas renommer ton plugin en langue de Molière, cela serait plus parlant pour ceux qui recherchent cette fonction.

    ex
    Compte à rebours
    Éphéméride

    • Loiseau2nuit

      Je t’en prie, ravi qu’il plaise :-)

      Pourquoi ne pas renommer ton plugin en langue de Molière

      MOUARF ! :D Alors celle-là on peut dire qu’elle tombe à propos :-D

      Plusieurs raisons à ca :

      1. la 1re et la plus évidente, c’est l’expérience utilisateur : éviter la confusion en donnant à un script un nom qui n’est pas le sien.
        Le plugin porte le même nom que la librairie qu’il propose afin que tu saches *vraiment* ce que tu installes sur ton site.
      2. je suis un fervent partisan de l’internationalisation de SPIP afin qu’il obtienne enfin le rayonnement qu’il mérite. La langue de Molière est très belle, et si j’en suis un fervent défenseur par ailleurs (de certains diraient même « Grammar Nazi ») pour ce qui est de l’informatique : si tu veux vraiment « ouvrir » ton travail à la communauté, il doit être internationalisé. Et le plus efficace en la matière, ne passe pas par la langue de Molière mais par celle de Shakespeare (ou plutôt d’Arthur Miller, pour une référence géographico-littéraire un peu plus adaptée). On peut ne pas aimer le principe, c’est un autre débat. Ca n’en reste pas moins un usage en vigueur.

      (exemple tout bête : si l’équipe qui a développé cet autre plugin avait décidé de l’appeler « bande de démarrage », perso jamais je n’aurais fait le lien direct avec Bootstrap ...)

    • Loiseau2nuit

      Ceci dit, rien ne t’empêche d’utiliser le plugin en français hein, la version 1.5.3.21 prévoit une internationalisation des chaines de langues.
      Donc si sur mes captures, réalisées sur un site paramétré en anglais, les chaines ’heures’ ’minutes’ ... s’affichent en anglais, elles s’afficheront bien en Français sur un site paramétré en français.

    • Loiseau2nuit

      Bon... je n’ai pas changé le titre mais en tout cas, suite à ta remarque, j’ai relu ma doc et effectivement, pour ré-équilibrer un peu le champ lexical, j’ai remplacé dans le texte plusieurs occurrences de ’timer’ et ’countdown’ en ’compte à rebours’ et autres ’chronomètre’. Ca devrait déjà permettre à la doc de remonter beaucoup plus facilement lors d’une recherche sur ces termes.

      Merci pour tes remarques en tout cas et n’hésite pas à poster tes retours d’utilisation :-)

    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