frendeitpt

countdown-simple ~ compte à rebours

Cette action affiche le délai jusqu'à une date définie.
La différence avec l'action countdown est qu'il est plus facile de la styler pour l'intégrer dans un texte.

🆙 countdown_simple : Affiche un compte à rebours simple et facilement adaptable par CSS

Cliquer pour lire la documentation

syntaxe {up countdown-simple=AAAAMMJJHHMM}
author LOMART version UP-2.2 license GNU/GPLv3 credit Countdown From A Specific Date de anik4e tags widget
  • countdown_simple: date cible ou délai si débute par +
  • intro-text: texte avant les afficheurs
  • close-text: texte après les afficheurs
  • prefix: texte avant valeur
  • suffix = lang[en=years,months,days,hours,minutes,seconds;fr=années,mois,jours,heures,minutes,secondes]: texte après valeur
  • elapsed-text = lang[en=Too late;fr=Trop tard]: Texte ou bbcode affiché si délai écoulé
  • model = inline: CSS de base pour la présentation
  • digit-view = YMDHMS: afficheurs. Mettre un X pour ne pas l'afficher. Pour les premiers non affichés, la valeur sera convertie et ajoutée au premier affiché
  • digit-class: classe(s) pour les chiffres
  • zero = 0: ajoute un zéro devant les heures, minutes et secondes
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
  • filter:

    un exemple simple

    Pour connaître le temps à attendre pour fêter le passage au prochain siècle, il suffit de ce shortcode

    Trop tard

    Le shortcode

    {up countdown_simple=21000101000000}
    Le résultat

     années
     mois
     jours
     heures
     minutes
     secondes


    L'argument principal est la date sous la forme AAAAMMJJHHMMSS. Soit 6 groupes : année, mois, jour, heure, minutes et secondes.

    Si l'heure (HHMMSS) n'est pas spécifiée, elle est considérée comme égale à zéro (000000).

    Pour notre premier exemple qui concerne une date lointaine, nous avons le nombre d'années. Par contre pour une date plus proche comme le prochain Noël, seules les parties argumentées sont affichées.

    Le shortcode

    {up countdown_simple=20211225}

    Le résultat

     mois
     jours
     heures
     minutes
     secondes

    Variante

    Pour indiquer un laps de temps à partir du chargement de la page, il est possible d'utiliser la notation suivante

    Le shortcode

    {up countdown_simple=+ 15 secondes}
    {up countdown_simple=+ 1 jour 15 secondes}
    {up countdown_simple=+ 1 month}

    Le résultat

     secondes
     jours
     heures
     minutes
     secondes
     jours
     heures
     minutes
     secondes
     

    Les mots reconnus sont :  année / an / year, mois / month, jour / day, semaine / week, heure / hour, seconde / second

    Les parties affichées

    Nous avons vu que seules les parties non nulles au moment du lancement du countdown sont affichées.

    L'option digit-view permet de spécifier les parties fractionnaires souhaitées. Son argument est une chaine de 6 caractères quelconques représentant dans l'ordre les 6 groupes "année, mois, jour, heure, minutes et secondes".
    La lettre X masque la partie concernée. Exemple : xMJhms masque les années. xYYYYY produit le même résultat en étant moins lisible.

    Le shortcode

    {up countdown_simple=21000101 | digit-view=xMJxxS}
    {up countdown_simple=21000101 | digit-view=xxxHMx}
    {up countdown_simple=21000101 | digit-view=AMx}

    Le résultat

     mois
     jours
     secondes
     heures
     minutes
     heures
     minutes
     

    Commentaires :

    1. Seuls les mois, jours et secondes sont demandés. Les années sont converties en mois. Les heures et minutes sont exprimées en secondes.
    2. les années, mois et jours sont exprimés en heures et minutes. Les secondes sont décomptées sans être affichées
    3. attention la chaine est évaluée à partir de la fin. AMx doit être compris comme xxxAMx, soit la même présentation que l'exemple 2

    Les textes du compteur

    Dans les exemples précédents, les unités (heures, minutes, ...) sont affichées après les compteurs à l'aide de la valeur par défaut de l'option suffix.

    Les valeurs chiffrées des compteurs sans texte d'accompagnement seraient incompréhensibles.

    L'action countdown_simple propose plusieurs options pour ajouter du texte explicatif.

    intro-text ce texte sera toujours affiché avant le compteur. BBcode accepté
    close-text ce texte sera toujours affiché après le compteur. BBcode accepté
    suffix les libellés des 6 unités séparées par des virgules.
    Par défaut en anglais et français :
    lang[en=years,months,days,hours,minutes,seconds;fr=années,mois,jours,heures,minutes,secondes]
    prefix idem suffix, mais le texte est affiché avant les compteurs.
    Ne pas oublier d'ajouter une option suffix vide pour annuler la valeur par défaut (suffix=).
    {up countdown_simple=+ 10 ans
      | intro-text=ce texte est affiché [b]avant[/b] les compteurs[br]
      | close-text=[br]ce texte est affiché [b]après[/b] les compteurs
      | prefix=an:,mois:,jours:,heures:,min:,sec:
      | suffix=
      | class=display-block tc
    }
    ce texte est affiché avant les compteurs
    an: 
    mois: 
    jours: 
    heures: 
    min: 
    sec: 

    ce texte est affiché après les compteurs

    Une fois le décompte achevé

    Le texte affiché si la date cible est dépassée ou à la fin du décompte peut être indiqué de 2 façons :

    1. l'option elapsed-text qui accepte du bbcode. too late/trop tard par défaut.
    2. le contenu entre le shortcode ouvrant et fermant (prioritaire)

    Le shortcode

    {up countdown_simple=+ 10 secondes
     | elapsed-text=[b]c'est fini[/b]}
       <img src="/images/actions-demo/image-rollover/danse.gif" />
       <strong>Super, c'est fini</strong>
    {/up countdown_simple}

    Le résultat

     secondes
     

    Commentaires :

    • L'exemple ci-dessous utilise les 2 méthodes pour démontrer que le contenu entre chortcode est prioritaire.
    • Remarquez que l'option elapsed-text accepte du bbcode

    Astuce :

    En ajoutant l'option digit-view=xxxxxx, Tic & Toc apparaitraient au bout de 10 secondes sans que le décompte soit visible.

    Un peu de déco en plus !

    Jusqu'à présent nos compteurs sont tristes. Remédions à cela avec quelques options.

    model Par défaut le compteur est sous la forme d'un texte sur une ligne.
    2 autres modèles sont fournis avec l'action : digital et rainbow
    digit-class classe(s) ou style pour les chiffres des compteurs
    zero force l'ajout d'un zéro devant les heures, minutes et secondes
    class / style règles CSS pour l'ensemble du compteur
    css-head pour les cas particuliers, permet d'ajouter des règles CSS dans le head de la page
    {up countdown_simple=+2 semaines
     | digit-class=t-rouge fs200 b
     | class=t-vert
    }
     jours
     heures
     minutes
     secondes
    {up countdown_simple=+2 semaines
     | model=digital
     | zero}
     jours
     heures
     minutes
     secondes
    {up countdown_simple=+2 semaines
     | model=rainbow}
    
    
     jours
     heures
     minutes
     secondes

    Exemples et astuces

    Encore
     heures
     minutes
     secondes
    avant demain

    Pour afficher le temps restant jusqu'au lendemain, nous pouvons utiliser ces shortcodes :

    {up countdown_simple= {up php=echo (date('Ymd2400'));} 
     | intro-text=Encore
     | close-text=avant demain 
     | elapsed-text=Vous avez ouvert cette page hier
     | class=t-blanc bg-vert ph1 }

    L'action php est utilisée comme argument pour l'action countdown-simple. Elle retourne la date du jour à minuit. Si nous sommes le 1er janvier 2021, le résultat sera "202101012400".

    Les autres options de countdown_simple définissent le texte avant et après le compteur, ainsi que le texte une fois le délai écoulé. Cette façon de procéder nous assure que tout le texte sera substitué une fois le temps écoulé.