(when using toggle, the code only change css display when it ends so we have to hide the toggle span at first) |
Gabriel2456 (talk | contribs) No edit summary |
||
(42 intermediate revisions by 25 users not shown) | |||
Line 1: | Line 1: | ||
+ | <noinclude>{{LangSelect}}</noinclude><includeonly>{{Languages}} |
||
{{Infobox JavaScript |
{{Infobox JavaScript |
||
− | | Description = Script that creates a countdown clock |
+ | | Description = Script that creates a countdown clock |
− | | Scope |
+ | | Scope = s |
− | | Author |
+ | | Author = |
+ | * [[User talk:Pecoes|Pecoes]] |
||
− | | Using code by = [[w:User:Splarka|Splarka]]<br />[[User:Eladkse|Eladkse]] |
||
+ | * [[User:Asaba|Asaba]] |
||
− | | Updated = 25 April 2013 |
||
− | | |
+ | | Using code by = |
+ | * [[w:User:Splarka|Splarka]] |
||
− | | Skins = Monobook<br />Oasis |
||
+ | * [[User:Eladkse|Eladkse]] |
||
− | | Languages = {{#language:en}}<br />{{#language:fr}}<br />{{#language:es}}<br />{{#language:de}}<br />{{#language:it}}<br />{{#language:pl}}<br />{{#language:hu}}<br />{{#language:nl}}<br />{{#language:zh}}<br />{{#language:pt-br}}<br />{{#language:ca}}<br />{{#language:sr}} |
||
+ | | Code = [[MediaWiki:Countdown/code.js|code.js]] |
||
+ | | Languages = {{l|source-js=MediaWiki:Countdown/code.js}} |
||
+ | | Type = site |
||
}} |
}} |
||
The '''Countdown''' script creates a countdown clock where specified. |
The '''Countdown''' script creates a countdown clock where specified. |
||
− | ==What it does== |
+ | == What it does == |
You add an element with a target date to the page and this script will replace that date with a countdown until the day/hour/minute/second of that date is reached. |
You add an element with a target date to the page and this script will replace that date with a countdown until the day/hour/minute/second of that date is reached. |
||
− | ==Installation== |
+ | == Installation == |
− | :''See also: [[Help: |
+ | :''See also: [[Help:Advanced CSS and JS]]'' |
⚫ | |||
+ | Using the new [[MediaWiki:ImportJS]], you can include this immediately to your wiki by adding: |
||
⚫ | |||
+ | <syntaxhighlight lang="javascript"> |
||
+ | dev:Countdown/code.js |
||
⚫ | |||
+ | |||
⚫ | |||
+ | |||
+ | <syntaxhighlight lang="javascript"> |
||
importArticles({ |
importArticles({ |
||
type: "script", |
type: "script", |
||
articles: [ |
articles: [ |
||
− | "w:c:dev:Countdown/code.js" |
+ | "w:c:dev:MediaWiki:Countdown/code.js" |
] |
] |
||
}); |
}); |
||
+ | </syntaxhighlight> |
||
− | </source> |
||
− | If your MediaWiki:Common.js page already has an import like the one above, just add "w:c:dev:Countdown/code.js" to the list, as described [[Help:Including additional |
+ | If your MediaWiki:Common.js page already has an import like the one above, just add "w:c:dev:MediaWiki:Countdown/code.js" to the list, as described [[Help:Including additional CSS and JS|here]]. |
− | |||
⚫ | |||
− | A countdown can be added to a page using the following format: |
||
− | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
− | The text within "countdown" only appears when the countdown is active. Any text before "countdowndate" will precede the countdown, and any text after "countdowndate" will follow the countdown. |
+ | A countdown can be added to a page using the following format:{{#tag:syntaxhighlight|<span class="countdown" style="display:none;">Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...</span>|lang="html5"}}The text within "countdown" only appears when the countdown is active. Any text before "countdowndate" will precede the countdown, and any text after "countdowndate" will follow the countdown. |
The example above produces: |
The example above produces: |
||
− | <span class="countdown" style="display:none; margin-left:50px; font-weight:bold;"> |
+ | <span class="countdown" style="display:none; margin-left:50px; font-weight:bold;"><!-- |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-- |
− | </span> |
+ | --></span><!-- |
− | <span class="nocountdown" style="margin-left:50px; font-weight:bold;">(Countdown example)</span> |
+ | --><span class="nocountdown" style="margin-left:50px; font-weight:bold;">(Countdown example)</span> |
Line 53: | Line 55: | ||
This span should be placed directly after the countdown code above. |
This span should be placed directly after the countdown code above. |
||
− | ==Time zones== |
+ | == Time zones == |
Using the example code above, the countdown works relative to the reader's system clock. While this may be useful in cases such as counting down to the new year, it is impractical in others. |
Using the example code above, the countdown works relative to the reader's system clock. While this may be useful in cases such as counting down to the new year, it is impractical in others. |
||
Line 72: | Line 74: | ||
Note that changes to and from daylight savings are not done automatically, and must be done by the user - either with the daylight savings identifier, or by using the UTC offset. |
Note that changes to and from daylight savings are not done automatically, and must be done by the user - either with the daylight savings identifier, or by using the UTC offset. |
||
− | ==Options== |
+ | == Options == |
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
− | |||
⚫ | |||
− | |||
⚫ | |||
# removal of the countdown container |
# removal of the countdown container |
||
# stopping the countdown at zero |
# stopping the countdown at zero |
||
Line 84: | Line 84: | ||
# calling a custom JavaScript function of your choice |
# calling a custom JavaScript function of your choice |
||
− | ====Countup==== |
+ | ==== Countup ==== |
− | |||
Since this is the default option, you needn't do anything. |
Since this is the default option, you needn't do anything. |
||
− | ====Remove==== |
+ | ==== Remove ==== |
− | |||
Add a <code>data-end</code> attribute with the value "remove" to the container: |
Add a <code>data-end</code> attribute with the value "remove" to the container: |
||
{{#tag:syntaxhighlight| |
{{#tag:syntaxhighlight| |
||
− | <span data-end="remove" class="countdown" style="display:none;"> |
+ | <span data-end="remove" class="countdown" style="display:none;"><!-<nowiki>-</nowiki> |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-<nowiki>-</nowiki> |
− | </span> |
+ | --></span> |
|lang="html5"}} |
|lang="html5"}} |
||
− | ====Stop==== |
+ | ==== Stop ==== |
− | |||
Add a <code>data-end</code> attribute with the value "stop" to the container: |
Add a <code>data-end</code> attribute with the value "stop" to the container: |
||
{{#tag:syntaxhighlight| |
{{#tag:syntaxhighlight| |
||
− | <span data-end="stop" class="countdown" style="display:none;"> |
+ | <span data-end="stop" class="countdown" style="display:none;"><!-<nowiki>-</nowiki> |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-<nowiki>-</nowiki> |
− | </span> |
+ | --></span> |
|lang="html5"}} |
|lang="html5"}} |
||
− | ====Replacement==== |
+ | ==== Replacement ==== |
− | |||
Add a <code>data-end</code> attribute with the value "toggle" to the container. Additionally you will have to add a <code>data-toggle</code> attribute with a selector that points to the replacement: |
Add a <code>data-end</code> attribute with the value "toggle" to the container. Additionally you will have to add a <code>data-toggle</code> attribute with a selector that points to the replacement: |
||
{{#tag:syntaxhighlight| |
{{#tag:syntaxhighlight| |
||
− | <span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"> |
+ | <span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!-<nowiki>-</nowiki> |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-<nowiki>-</nowiki> |
− | </span> |
+ | --></span><!-- |
− | <span class="post-countdown" style="display:none;">Happy {{#expr:{{CURRENTYEAR}}+1}}!</span> |
+ | --><span class="post-countdown" style="display:none;">Happy {{#expr:{{CURRENTYEAR}}+1}}!</span> |
|lang="html5"}} |
|lang="html5"}} |
||
Note the dot in the value of <code>data-toggle</code>! The expected value is a CSS or jQuery selector. So that's ".name" for classes. "#name" for IDs. Etc. |
Note the dot in the value of <code>data-toggle</code>! The expected value is a CSS or jQuery selector. So that's ".name" for classes. "#name" for IDs. Etc. |
||
+ | Alternatively, if the toggle container is the following one after the counter, the special value <code>data-toggle="next"</code> can be used instead, without needing to specify any selector. This is useful when using multiple countdowns as part of a template, for instance. |
||
⚫ | |||
⚫ | |||
Add a <code>data-end</code> attribute with the value "callback" to the container. Additionally you will have to add a <code>data-callback</code> attribute with the name of the function you want to call: |
Add a <code>data-end</code> attribute with the value "callback" to the container. Additionally you will have to add a <code>data-callback</code> attribute with the name of the function you want to call: |
||
{{#tag:syntaxhighlight| |
{{#tag:syntaxhighlight| |
||
− | <span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"> |
+ | <span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!-<nowiki>-</nowiki> |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-<nowiki>-</nowiki> |
− | </span> |
+ | --></span> |
|lang="html5"}} |
|lang="html5"}} |
||
Line 143: | Line 140: | ||
|lang="javascript"}} |
|lang="javascript"}} |
||
− | ===Leading Zeros=== |
+ | === Leading Zeros === |
− | |||
By default leading zeros will be shown: |
By default leading zeros will be shown: |
||
Line 156: | Line 152: | ||
{{#tag:syntaxhighlight| |
{{#tag:syntaxhighlight| |
||
− | <span data-options="no-leading-zeros" class="countdown" style="display:none;"> |
+ | <span data-options="no-leading-zeros" class="countdown" style="display:none;"><!-<nowiki>-</nowiki> |
− | Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year... |
+ | -->Only <span class="countdowndate">January 01 {{#expr:{{CURRENTYEAR}}+1}} 00:00:00</span> until the new year...<!-<nowiki>-</nowiki> |
− | </span> |
+ | --></span> |
|lang="html5"}} |
|lang="html5"}} |
||
+ | === Short format === |
||
− | ==Localisation== |
||
+ | If you prefer to show the countdown in a short format like <code>2d 5h 30m 1s</code> instead of the full words, you need to add a <code>data-options</code> attribute with the value "short-format". |
||
+ | |||
+ | If you already set the <code>data-options</code> attribute, add all the options separating them with a space: |
||
+ | |||
+ | {{#tag:syntaxhighlight| |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
+ | |||
+ | == Dynamic content == |
||
+ | |||
+ | This script supports dynamic inserted content, such as article comments or editor previews. However, if you insert a counter via JavaScript, you need to fire this event after inserting it: |
||
+ | |||
+ | {{#tag:syntaxhighlight| |
||
+ | mw.hook('wikipage.content').fire($('ELEMENT')); |
||
⚫ | |||
+ | |||
+ | Where <code>ELEMENT</code> is a selector to the element in which the counter has been inserted. |
||
+ | |||
+ | == Localization == |
||
Localized messages can be added using the [[wikipedia:ISO 639-1|language code]] as a key and then creating an object for the messages. See example below for how to override the default messages used for the English language. |
Localized messages can be added using the [[wikipedia:ISO 639-1|language code]] as a key and then creating an object for the messages. See example below for how to override the default messages used for the English language. |
||
− | < |
+ | <syntaxhighlight lang="javascript"> |
− | + | countdownTimer.translations = { |
|
en: { |
en: { |
||
and: 'and', |
and: 'and', |
||
Line 178: | Line 195: | ||
} |
} |
||
}; |
}; |
||
+ | </syntaxhighlight> |
||
− | </source> |
||
− | ===Adding translations=== |
+ | === Adding translations === |
The local equivalents of following time intervals are required by the script: |
The local equivalents of following time intervals are required by the script: |
||
* second/seconds |
* second/seconds |
||
Line 189: | Line 206: | ||
In addition, the localised version of "and" is required. |
In addition, the localised version of "and" is required. |
||
− | If you would like to help out, please post translations for these on the [[Talk:Countdown|script's talk page]] (or add them to [[/code.js]] directly if you are comfortable with doing so). |
+ | If you would like to help out, please post translations for these on the [[Talk:Countdown|script's talk page]] (or add them to [[MediaWiki:Countdown/code.js]] directly if you are comfortable with doing so). |
== Major Updates == |
== Major Updates == |
||
+ | ;October 21, 2017 |
||
+ | : [[User talk:Jorgemg14|Jorgemg14]]: added short format option |
||
+ | ;June 15, 2017 |
||
+ | : [[User talk:Jorgemg14|Jorgemg14]]: dynamic content support |
||
;December 9, 2012 |
;December 9, 2012 |
||
− | : [[ |
+ | : [[User talk:Pecoes|Pecoes]]: complete rewrite and addition of a few options |
;June 28, 2012 |
;June 28, 2012 |
||
: [[User:Eladkse|Eladkse]]: simplified singular/plural code. |
: [[User:Eladkse|Eladkse]]: simplified singular/plural code. |
||
Line 200: | Line 221: | ||
;July 7, 2011 |
;July 7, 2011 |
||
: [[User:Eladkse|Eladkse]]: added code to allow the definition of singular and plural forms of time. |
: [[User:Eladkse|Eladkse]]: added code to allow the definition of singular and plural forms of time. |
||
− | [[Category:JavaScript]] |
Revision as of 17:45, 27 May 2020
The Countdown script creates a countdown clock where specified.
What it does
You add an element with a target date to the page and this script will replace that date with a countdown until the day/hour/minute/second of that date is reached.
Installation
- See also: Help:Advanced CSS and JS
Using the new MediaWiki:ImportJS, you can include this immediately to your wiki by adding:
dev:Countdown/code.js
If you want to include this the older way, copy and paste the following into your wiki's MediaWiki:Common.js page:
importArticles({
type: "script",
articles: [
"w:c:dev:MediaWiki:Countdown/code.js"
]
});
If your MediaWiki:Common.js page already has an import like the one above, just add "w:c:dev:MediaWiki:Countdown/code.js" to the list, as described here.
Creating a countdown
A countdown can be added to a page using the following format:
<span class="countdown" style="display:none;">Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...</span>
The text within "countdown" only appears when the countdown is active. Any text before "countdowndate" will precede the countdown, and any text after "countdowndate" will follow the countdown.
The example above produces:
(Countdown example)
An optional span with class "nocountdown" can be used as alternative text when the countdown script does not work or while it is loading.
- e.g. Using
<span class="nocountdown">It's almost the new year!</span>
results in
"It's almost the new year!" while the script loads.
- e.g. Using
This span should be placed directly after the countdown code above.
Time zones
Using the example code above, the countdown works relative to the reader's system clock. While this may be useful in cases such as counting down to the new year, it is impractical in others.
Two methods can be used to make the countdown work based on a specific time zone. The easiest is to add the time zone identifier to the end of the code. For example, to make a countdown for Eastern Standard Time (EST):
<span class="countdowndate">January 01 2025 00:00:00 EST</span>
While this method works with most identifiers, it does not work for some daylight savings variants (e.g. British Summer Time - BST).
An alternative and more reliable method is to add the Coordinated Universal Time (UTC) offset to the end of the code. For example, to make a countdown for EST, which has an offset of -5 hours:
<span class="countdowndate">January 01 2025 00:00:00 -0500</span>
Note that changes to and from daylight savings are not done automatically, and must be done by the user - either with the daylight savings identifier, or by using the UTC offset.
Options
Ending the Countdown
How do you want the countdown to end? There are five options:
- counting up from zero — this is the default for legacy reasons
- removal of the countdown container
- stopping the countdown at zero
- replacing the countdown with something else
- calling a custom JavaScript function of your choice
Countup
Since this is the default option, you needn't do anything.
Remove
Add a data-end
attribute with the value "remove" to the container:
<span data-end="remove" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span>
Stop
Add a data-end
attribute with the value "stop" to the container:
<span data-end="stop" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span>
Replacement
Add a data-end
attribute with the value "toggle" to the container. Additionally you will have to add a data-toggle
attribute with a selector that points to the replacement:
<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span><span class="post-countdown" style="display:none;">Happy 2025!</span>
Note the dot in the value of data-toggle
! The expected value is a CSS or jQuery selector. So that's ".name" for classes. "#name" for IDs. Etc.
Alternatively, if the toggle container is the following one after the counter, the special value data-toggle="next"
can be used instead, without needing to specify any selector. This is useful when using multiple countdowns as part of a template, for instance.
Custom Callback
Add a data-end
attribute with the value "callback" to the container. Additionally you will have to add a data-callback
attribute with the name of the function you want to call:
<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span>
The countdown will stop at zero and then your function will be called. The countdown container will be the this
object of the function.
To make the function available to the Countdown module, you will have to add it to the module itself:
window.countdownTimer = {
myFunction: function () {
$(this).text('Happy 2025!');
}
}
Leading Zeros
By default leading zeros will be shown:
0 days, 0 hours, 10 minutes and 10 seconds
If you prefer this instead:
10 minutes and 10 seconds
you need to add a data-options
attribute with the value "no-leading-zeros":
<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span>
Short format
If you prefer to show the countdown in a short format like 2d 5h 30m 1s
instead of the full words, you need to add a data-options
attribute with the value "short-format".
If you already set the data-options
attribute, add all the options separating them with a space:
<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Only <span class="countdowndate">January 01 2025 00:00:00</span> until the new year...<!--
--></span>
Dynamic content
This script supports dynamic inserted content, such as article comments or editor previews. However, if you insert a counter via JavaScript, you need to fire this event after inserting it:
mw.hook('wikipage.content').fire($('ELEMENT'));
Where ELEMENT
is a selector to the element in which the counter has been inserted.
Localization
Localized messages can be added using the language code as a key and then creating an object for the messages. See example below for how to override the default messages used for the English language.
countdownTimer.translations = {
en: {
and: 'and',
second: 'second',
seconds: 'seconds',
minute: 'minute',
minutes: 'minutes',
hour: 'hour',
hours: 'hours',
day: 'day',
days: 'days'
}
};
Adding translations
The local equivalents of following time intervals are required by the script:
- second/seconds
- minute/minutes
- hour/hours
- day/days
In addition, the localised version of "and" is required.
If you would like to help out, please post translations for these on the script's talk page (or add them to MediaWiki:Countdown/code.js directly if you are comfortable with doing so).
Major Updates
- October 21, 2017
- Jorgemg14: added short format option
- June 15, 2017
- Jorgemg14: dynamic content support
- December 9, 2012
- Pecoes: complete rewrite and addition of a few options
- June 28, 2012
- Eladkse: simplified singular/plural code.
- January 31, 2012
- Eladkse: added localisation code by Dantman.
- July 7, 2011
- Eladkse: added code to allow the definition of singular and plural forms of time.