Fandom Developers Wiki
Advertisement

Le script Countdown crée un compte à rebours à l'endroit spécifié.

Comment ça marche ?[]

Implémente un élément avec une date limite dans une page et le script remplacera cette date avec un compte à rebours jusqu'à ce que la date limite jour/heure/minute/seconde soit atteinte.

Installation[]

Créer un compte à rebours[]

Un compte à rebours peut être ajouté à une page en utilisant le format suivant :

<span class="countdown" style="display:none;">Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…</span>

Le texte au sein de "countdown" apparaîtra seulement lorsque le compte à rebours est actif. Tout texte avant "countdowndate" précédera le compte à rebours, et tout texte après "countdowndate" sera affiché après.

L'exemple ci-dessus donne :

(Exemple de compte à rebours)

Un span optionnel avec une classe "nocountdown" peut être utilisé comme texte alternatif lorsque le script de compte à rebours ne fonctionne pas ou qu'il est en train de charger.

  • Par exemple, en utilisant <span class="nocountdown">C'est presque le Nouvel An !</span> donne
    « C'est presque le Nouvel An ! » le temps que le script charge.

Ce span doit être placé directement après le code du compte à rebours ci-dessous.

Fuseaux horaires[]

En utilisant le code présenté précédemment, le compte à rebours fonctionne relativement de façon correct pour les utilisateurs dans le même fuseau que l'horloge système. Bien que cela puisse être utile dans des cas comme celui de compter jusqu'au prochain jour de l'an, cela peut s'avérer non-pratique dans les autres cas.

Deux méthodes peuvent être utilisées pour que le compte à rebours se base sur un fuseau horaire spécifique. Le plus simple étant d'ajouter l'identifiant du fuseau horaire à la fin du code. Par exemple, pour faire un compte à rebours pour le fuseau Heure de l'Est (EST ; Eastern Standard Time)

<span class="countdowndate">January 01 2025 00:00:00 EST</span>

Bien que cette méthode fonctionne avec le plupart des identifiants, il ne fonctionne pas avec certaines variantes pour l'heure d'été (par exemple Heure d'Été du Royaume-Uni (BST ; British Summer Time).

Une autre méthode plus fiable consiste à ajouter le décalage par rapport au Temps Universel Coordonné (UTC) à la fin du code. Par exemple, pour faire un compte à rebours à l'heure CET, qui a un décalage de -5 heures :

<span class="countdowndate">January 01 2025 00:00:00 -0500</span>

Veuillez noter que les changements vers ou depuis l'heure d'été ne sont pas faits automatiquement et doivent être fait par l'utilisateur — soit avec l'identifiant de l'heure d'été, soit en utilisant le décalage UTC.

Options[]

Arrêt du compte à rebours[]

De quelle manière souhaitez vous que le compte à rebours se termine ? Il existe cinq options :

  1. compter à partir de zéro — c'est celui par défaut pour des raisons historiques
  2. retrait du conteneur du compte à rebours
  3. arrêter le compteur à zéro
  4. remplacer le compteur par autre chose
  5. appeler une fonction JavaScript personnalisée de votre choix

Continuer de compter[]

Du fait que c'est l'option par défaut, aucune action n'est nécessaire.

Retrait[]

Ajoutez un attribut data-end avec la valeur "remove" au conteneur :

<span data-end="remove" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span>

Arrêt[]

Ajoutez un attribut data-end avec la valeur "stop" au conteneur :

<span data-end="stop" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span>

Remplacement[]

Ajoutez un attribut data-end avec la valeur "toggle" au conteneur. Vous devrez également ajouter un attribut data-toggle avec un sélecteur qui pointe vers le remplaçant :

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span><span class="post-countdown" style="display:none;">Bonne Année 2025&nbsp;!</span>

Veuillez noter que le point dans la valeur du data-toggle ! La valeur attendue est un sélecteur CSS ou jQuery. Donc, c'est ".nom" pour les classes. "#nom" pour les identifiants. Etc.

Autre variante, si le conteneur toggle est celui qui suit celui du compteur, la valeur spéciale data-toggle="next" peut être utilisée à la place, sans avoir besoin de spécifier de sélecteur. C'est utile lorsqu'il y a plusieurs comptes à rebours dans un même modèle, à titre d'exemple.

Appel personnalisé[]

Ajoutez un attribut data-end avec la valeur "callback" au conteneur. Vous devrez également ajouter un attribut data-callback avec le nom de la fonction que vous souhaitez appeler :

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span>

Le compte à rebours s'arrêtera à zéro et ensuite votre fonction sera appelée. Le conteneur du compte à rebours sera l'objet this de la fonction.

Pour rendre la fonction disponible au module Countdown, vous devrez l'ajouter au module lui-même :

window.countdownTimer = {
    myFunction: function () {
       $(this).text("Bonne Année 2025&nbsp;!");
    }
}

Zéros de tête[]

Par défaut, les zéros de tête seront affichés :

0 jours, 0 heures, 10 minutes et 10 secondes

Si vous préférez obtenir ceci à la place :

10 minutes et 10 secondes

vous devez ajouter l'attribut data-options avec la valeur "no-leading-zeros" :

<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span>

Format court[]

Si vous préférez afficher le compte à rebours dans un format court comme 2j 5h 30m 1s au lieu des mots entiers, vous devez ajouter l'attribut data-options avec la valeur "short-format".

Si vous avez déjà défini l'attribut data-options, ajoutez toutes les options en les séparant par des espaces :

<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Seulement <span class="countdowndate">January 01 2025 00:00:00</span> jusqu'au Nouvel An…<!--
--></span>

Contenu dynamique[]

Ce script supporte le contenu inséré dynamiquement, tel que des commentaires d'article ou les aperçus des éditeurs. Cependant, si vous insérez un compteur via du JavaScript, vous devez déclencher (fire) l'événement après l'avoir inséré :

mw.hook("wikipage.content").fire($("ELEMENT"));

ELEMENT est le sélecteur de l'élément dans lequel le compteur a été inséré.

Changelog[]

Date Description Author
July 7, 2011 Added code to allow the definition of singular and plural forms of time. Eladkse
January 31, 2012 Added localisation code by Dantman. Eladkse
June 28, 2012 Simplified singular/plural code. Eladkse
December 9, 2012 Complete rewrite and addition of a few options. Pecoes
June 15, 2017 Dynamic content support. Jorgemg14
October 21, 2017 Added short format option. Jorgemg14
Advertisement