Line 1: |
Line 1: |
| <includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}"> | | <includeonly><div style="{{{style|text-align:center;font-size:18px;font-weight:bold;color:red;margin:0px 0px 10px 0px}}};{{{extra_style|}}}"> |
− | <span class="countdown" data-options="no-leading-zeros" data-end="toggle" data-toggle=".{{{class|{{{endClass|countdownComplete1}}}}}}" style="display:none"> | + | <span class="countdown" data-options="no-leading-zeros;{{#if:{{{short|}}}|short-format}}" {{#if:{{{countup|}}}||data-end="toggle" data-toggle=".{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}"}} style="display:none"> |
− | <span class="countdowndate">{{{time|}}}</span> | + | <span class="countdowndate">{{{1|{{{time|}}}}}}</span> {{#if:{{{countup|}}}|{{{text|{{{endText|}}}}}}}} |
− | </span> | + | </span>{{#if:{{{countup|}}}|| |
− | <span class="{{{class|{{{endClass|countdownComplete1}}}}}}" style="display:none">{{{text|{{{endText|Countdown complete!}}}}}}</span> | + | <span class="{{{class|{{{endClass|countdownComplete{{{2|1}}}}}}}}}" style="display:none">{{{text|{{{endText|Countdown complete!}}}}}}</span>}} |
| </div></includeonly><noinclude> | | </div></includeonly><noinclude> |
| Displays a countdown timer. | | Displays a countdown timer. |
| ==Parameters== | | ==Parameters== |
− | * <code>time</code> : [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse time] to countdown to, required. | + | * <code>time</code> or <code>[1]</code> : [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse time] to countdown to, required. |
| + | * <code>countup</code> : boolean. Timer counts upwards if chosen date has passed. Will override/disregard <code>class</code> & <code>[2]</code>. |
| + | * <code>short</code> : boolean. Timer text is changed to single letters, e.g. "Days" becomes "d". |
| + | * <code>class</code> : specify when multiple timers are used on the page, <code>countdownComplete1</code> by default, e.g., <code>countdownComplete2</code> for a second timer, etc. |
| + | ** <code>[2]</code> : alternatively, to only specify a number, e.g. <code>2</code> for a second timer. |
| + | * <code>text</code> : optional completion text, <code>Countdown complete!</code> by default. Used at end of timer text for <code>countup</code>. |
| * <code>style</code> : custom style, optional. | | * <code>style</code> : custom style, optional. |
| * <code>extra_style</code> : extra style to add to the default style, optional. | | * <code>extra_style</code> : extra style to add to the default style, optional. |
− | * <code>class</code> : specify when multiple timers are used on the page, <code>countdownComplete1</code> by default, e.g., <code>countdownComplete2</code> for a second timer, etc.
| |
− | * <code>text</code> : optional completion text, <code>Countdown complete!</code> by default.
| |
| See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details. | | See [[MediaWiki:Gadget-Countdown.js]] for JS implementation details. |
| ==Examples== | | ==Examples== |
| <pre> | | <pre> |
− | {{Timer|time = January 1 2021 00:00:00 +0900|extra_style = text-align:left}} | + | {{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}} |
| + | </pre> |
| + | {{Timer|January 1 2023 00:00:00 +0900|extra_style = text-align:left}} |
| + | <pre> |
| + | {{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}} |
| + | </pre> |
| + | {{Timer|January 1 2030 00:00:00 +0900|2|style = font-style:italic|text = Not yet.}} |
| + | <pre> |
| + | {{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}} |
| + | </pre> |
| + | {{Timer|January 19 2038 12:14:07 +0900|3|style = font-weight:bold|text = The time is now!}} |
| + | <pre> |
| + | {{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}} |
| + | </pre> |
| + | {{Timer|January 29 2042 12:17:04 +0900|3|style = font-weight:bold|short=true|text = The time is now short!}} |
| + | ==countup Examples== |
| + | <pre> |
| + | {{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}} |
| + | </pre> |
| + | {{Timer|January 1 2020 00:00:00 +0900|countup=true|extra_style = text-align:left}} |
| + | <pre> |
| + | {{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}} |
| </pre> | | </pre> |
− | {{Timer|time = January 1 2021 00:00:00 +0900|extra_style = text-align:left}} | + | {{Timer|January 1 1980 00:00:00 +0900|countup=true|style = font-style:italic|text = ago}} |
| <pre> | | <pre> |
− | {{Timer | + | {{Timer|January 1 1970 00:00:00 +0900|countup=true|style = font-weight:bold|short=true|text = in the past}} |
− | |time = January 1 2025 00:00:00 +0900 | |
− | |style = font-style:italic | |
− | |class = countdownComplete2 | |
− | |text = Not yet. | |
− | }} | |
| </pre> | | </pre> |
− | {{Timer | + | {{Timer|January 1 1970 00:00:00 +0900|countup=true|style = font-weight:bold|short=true|text = in the past}} |
− | |time = January 1 2025 00:00:00 +0900 | |
− | |style = font-style:italic | |
− | |class = countdownComplete2 | |
− | |text = Not yet. | |
− | }} | |
| <pre> | | <pre> |
− | {{Timer | + | {{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}} |
− | |time = January 19 2038 12:14:07 +0900 | |
− | |style = font-weight:bold | |
− | |class = countdownComplete2
| |
− | |text = The time is now! | |
− | }} | |
| </pre> | | </pre> |
− | {{Timer | + | {{Timer|January 19 2038 12:14:07 +0900|countup=true|style = font-weight:bold|text =. Still counts down normally for future dates.}} |
− | |time = January 19 2038 12:14:07 +0900 | |
− | |style = font-weight:bold | |
− | |class = countdownComplete2
| |
− | |text = The time is now! | |
− | }} | |
| </noinclude> | | </noinclude> |