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.

un exemple simple

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

{up countdown_simple=21000101000000}

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.

{up countdown_simple=20241225}

Variante

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

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

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.

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

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.

{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
}

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)

{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}

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.

{up countdown_simple=+2 semaines
 | digit-class=t-rouge fs200 b
 | class=t-vert
}

{up countdown_simple=+2 semaines
 | model=digital
 | zero}

{up countdown_simple=+2 semaines
 | model=rainbow}

Exemples et astuces

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