FANDOM


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

Voir aussi : Aide:CSS et JS avancés

En utilisant le nouveau MediaWiki:ImportJS, vous pouvez l'inclure immédiatement à votre wiki en ajoutant :

dev:Countdown/code.js

Si vous souhaitez l'inclure de façon ancienne, copiez-collez le texte ci-dessous dans la page MediaWiki:Common.js page votre wiki :

importArticles({
    type: "script",
    articles: [
        "w:c:dev:MediaWiki:Countdown/code.js"
    ]
});

Si votre page MediaWiki:Common.js comporte déjà un import comme présenté ci-dessus, ajoutez simplement "w:c:dev:MediaWiki:Countdown/code.js" à la liste, comme décrit ici.

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 2021 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 2021 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 2021 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 2021 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 2021 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 2021 00:00:00</span> jusqu'au Nouvel An…<!--
--></span><span class="post-countdown" style="display:none;">Bonne Année 2021&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 2021 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('Happy 2021!');
    }
}

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 2021 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;"><!--
-->Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...<!--
--></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é.

Localisation

Des messages localisés peuvent être ajoutés en utilisant le code langue comme clé et ensuite créer un objet pour les messages. Voir l'exemple ci-dessous pour voir comment changer les valeurs par défaut utilisées pour la langue anglaise.

countdownTimer.translations = { 
    en: {
        and: 'and',
        second: 'second',
        seconds: 'seconds',
        minute: 'minute',
        minutes: 'minutes',
        hour: 'hour',
        hours: 'hours',
        day: 'day',
        days: 'days'
    }
};

Ajouter des traductions

Les équivalents locaux des intervalles de temps suivants sont requis par le script :

  • second/seconds
  • minute/minutes
  • hour/hours
  • day/days

De plus, la version localisée de "and" (et) est requise.

Si vous souhaitez nous aider, merci de poster les traductions pour ce script dans la page de discussion du script (ou ajoutez les directement dans MediaWiki:Countdown/code.js si vous vous sentez à l'aise pour le faire vous-même).

Mises à jour majeures

21 octobre 2017
Jorgemg14: ajout de l'option pour le format court
15 juin 2017
Jorgemg14: support du contenu dynamique
9 décembre 2012
Pecoes: réécriture complète et ajout de plusieurs options
28 juin 2012
Eladkse: simplification du code pour singulier/pluriel.
31 janvier 2012
Eladkse: ajout du code pour la localisation par Dantman.
7 juillet 2011
Eladkse: ajout du code permettant la définition des formes au singulier et au pluriel de l'heure.
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+