SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

291 Plugins, 198 contribs sur SPIP-Zone, 119 visiteurs en ce moment

Accueil > Dates, calendriers et agendas > TimeCircles > Plugin TimeCircles pour SPIP 3.1+

Plugin TimeCircles pour SPIP 3.1+

4 décembre 2018 – par Loiseau2nuit – 17 commentaires

Toutes les versions de cet article : [English] [français]

2 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.

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)

  1. <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 :

  1. <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)

  1. <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)

  1. <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 ?

  1. <pageopentimer|>
PageOpenTimer

Modification et styles

Le plugin fournit une feuille de style css/timecircles.css et un fichier d’appels des fonctions jQuery, situé dans js/timecircles.js. Ces 2 fichiers 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.

Ces 2 fichiers sont à surcharger (avec leur arborescence) dans votre répertoire /squelettes pour toutes modification de style.

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.

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 de la fenêtre dans le fichier js/timecircles.js :

  1. $(window).on('resize', function(){
  2.         $('.DateCountdown').TimeCircles().rebuild();
  3.         $('.CountDownTimer').TimeCircles().rebuild();
  4.         $('.PageOpenTimer').TimeCircles().rebuild();
  5. });

Télécharger

Ce tronçon de code sera donc à conserver idéalement dans vos surcharges.

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

[1du 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...

Dernière modification de cette page le 7 décembre 2018

Retour en haut de la page

Vos commentaires

  • Le 7 décembre à 16:42, par AlainF En réponse à : Plugin TimeCircles pour SPIP 3.1+

    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

    • Le 7 décembre à 17:21, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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

  • Le 5 décembre à 08:33, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

    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

    • Le 5 décembre à 08:55, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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

    • Le 5 décembre à 14:39, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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= ...>

    • Le 5 décembre à 15:09, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      ...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.

    • Le 5 décembre à 16:05, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

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

    • Le 6 décembre à 15:54, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

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

    • Le 6 décembre à 16:22, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

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

    • Le 6 décembre à 17:39, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

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

    • Le 6 décembre à 18:14, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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 ?

    • Le 6 décembre à 18:29, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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à ...

    • Le 7 décembre à 07:29, par Michel En réponse à : Plugin TimeCircles pour SPIP 3.1+

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

    Répondre à ce message

  • Le 5 décembre à 01:43, par liberte En réponse à : Plugin TimeCircles pour SPIP 3.1+

    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

    • Le 5 décembre à 14:55, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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 ...)

    • Le 5 décembre à 14:58, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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.

    • Le 6 décembre à 00:47, par Loiseau2nuit En réponse à : Plugin TimeCircles pour SPIP 3.1+

      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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2533 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Plugin Bank

    12 juin 2015 – 88 commentaires

    Le plugin Bank prend en charge l’interface technique de paiement avec de nombreux prestataires de paiement par Carte Bleue, SEPA… Il prend également en charge la conservation de l’historique des transactions de paiement et de leur état et offre une (...)

  • Le Couteau Suisse

    4 mai 2007 – 1860 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Owl Carousel 2

    30 novembre 2017 – 42 commentaires

    Owl Carousel est un diaporama jQuery adaptable aux différentes tailles d’écran, qu’on peut actionner par glisser, il utilise CSS3 mais il est compatible avec les vieux navigateurs, et il est aussi paramétrable. Le présent plugin permet d’utiliser (...)

  • Calendrier Mini 2.0

    19 mai 2012 – 256 commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)