dev

TimeanddateClock is a script that enables wikis to embed free clocks and countdowns from timeanddate.com. Although there are several other scripts which produce clocks and countdowns, timeanddate.com offers a larger variety of layouts and styling. Unfortunately, embedding these clocks requires use of HTML's <iframe> tag. For security reasons, the default MediaWiki settings do not allow use of this tag in page content. This script resolves this issue by finding placeholder tags in the rendered page and replacing them with the necessary <iframe> tags.

Installation

Configuration

The configuration options for this script simply provide a means of altering the default values associated with the placeholder attributes described in the next section. The options are properties of the script's configuration object which can be created in a community's JS with the following lines of code. 

if (!window.andrewds1021) {
    window.andrewds1021 = {
        timeanddate_clock: {
            defaults: {}
        }
    };
} else if (!window.andrewds1021.timeanddate_clock) {
    window.andrewds1021.timeanddate_clock = {
        defaults: {}
    };
} else if (!window.andrewds1021.timeanddate_clock.defaults) {
    window.andrewds1021.timeanddate_clock.defaults = {};
}

The following table lists the recognized options.

Defaults Object Key Placeholder Attribute(s) Data Type Factory Default
source data-timeanddateclock-source string i71tro3z/tt0/th1/tb2
is_countdown data-timeanddateclock-iscountdown, data-timeanddateclock-isclock boolean false
allow_transparency data-timeanddateclock-allowtransparency, data-timeanddateclock-preventtransparency boolean false
width data-timeanddateclock-width string no default value
height data-timeanddateclock-height string no default value

To set a particular option, place a line of code below the code creating the script's configuration object. It should follow the following format where property is replaced by the key as listed in the above table and value is replaced by the desired value. 

window.andrewds1021.timeanddate_clock.defaults.property = value;

This example sets is_countdown to true. This will cause the script to assume placeholders are for countdowns unless specified otherwise using data-timeanddateclock-isclock. 

window.andrewds1021.timeanddate_clock.defaults.is_countdown = true;

Usage

In order to properly piece together the <iframe> tag, the script must be provided with certain information. This is done using attributes of the placeholder tags. If a particular attribute is not specified, the default value will be used.

data-timeanddateclock-source

The URL from timeanddate.com contains a unique tail that encodes the clock configuration. That tail should be passed as the value for this attribute. In example 1, the URL is http://free.timeanddate.com/clock/i71vvzfa/fn15/fs30/fc00f/tct/pct/fti/bas5/bat1/tt0/tw0/tm1/ts1/tb4. Therefore, the value that should be passed is i71vvzfa/fn15/fs30/fc00f/tct/pct/fti/bas5/bat1/tt0/tw0/tm1/ts1/tb4.

data-timeanddateclock-iscountdown, data-timeanddateclock-isclock

Since timeanddate.com offers both clocks and countdowns, it is necessary to specify which type a particular placeholder represents. The script assumes either clocks or countdowns depending on the value of the is_countdown configuration setting. In the event that a placeholder represents the non-default type, the appropriate attribute should be added to the placeholder. For example, if the script has been configured so that is_countdown is true, the script will assume placeholders represent countdowns. If you then wanted to have a placeholder represent a clock, you would need to add data-timeanddateclock-isclock to the placeholder. Note that these attributes are binary. This means that the value assigned to them is irrelevant; the script merely checks for their presence. If both attributes are added, then the script assumes the default type.

data-timeanddateclock-allowtransparency, data-timeanddateclock-preventtransparency

Some of the <iframe> tags produced by timeanddate.com have allowtransparency="true" (see example 1). This is a deprecated attribute and is therefore irrelevant to most modern browsers. However, a user may still choose to include it by adding data-timeanddateclock-allowtransparency. If the configuration setting allow_transparency has been set to true, the script will add the attribute by default. These attributes are binary and the default will be used if both are present.

data-timeanddateclock-width, data-timeanddateclock-height

These attributes are used to specify the width and height of the <iframe> tag. The values used for these attributes should be in a form recognizable to CSS's width and height properties. If one or both of these attributes are not used, the script will attempt to use the corresponding default value for the missing attribute(s). If the default value has not been specified (as is the case for the factory defaults), then the corresponding dimension will not be set and thus take the browser's default value (typically 300px for width and 150px for height). Note that the dimensions of the clock will not change so having dimensions that don't match that of the clock will result in either extra space around the clock or clipping of the clock. The "correct" dimensions of the clock can be obtained from the <iframe> tag provided by timeanddate.com. Note that timeanddate.com chooses to specify the dimensions via HTML rather than CSS so there are no units included with the numbers. These numbers are in pixels so the user should append px to them if copying from the HTML generated by timeanddate.com.

Example

The following are examples of how to use this script. All examples are written assuming the script defaults have not been changed. If you are not able to see the results, you may have disabled the DemoScripts gadget. Go to your preferences and verify that DemoScripts is enabled (the box should have a check mark in it).

Default example

Placeholder in page content: 

<div class="TimeanddateClock"></div>

Result:

Example 1

HTML from timeanddate.com: 

<iframe allowTransparency="true" frameborder="0" height="84" src="http://free.timeanddate.com/clock/i71vvzfa/fn15/fs30/fc00f/tct/pct/fti/bas5/bat1/tt0/tw0/tm1/ts1/tb4" width="179"></iframe>

Placeholder in page content: 

<div class="TimeanddateClock" data-timeanddateclock-allowtransparency data-timeanddateclock-height="84px" data-timeanddateclock-source="i71vvzfa/fn15/fs30/fc00f/tct/pct/fti/bas5/bat1/tt0/tw0/tm1/ts1/tb4" data-timeanddateclock-width="179px"></div>

Result:

Example 2

HTML from timeanddate.com: 

<iframe frameborder="0" height="110" src="http://free.timeanddate.com/clock/i71vvzfa/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhs2/hms2/hsv0" width="110"></iframe>

Placeholder in page content: 

<div class="TimeanddateClock" data-timeanddateclock-height="110px" data-timeanddateclock-source="i71vvzfa/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhs2/hms2/hsv0" data-timeanddateclock-width="110px"></div>

Result:

Example 3

HTML from timeanddate.com: 

<iframe allowTransparency="true" frameborder="0" height="135" src="http://free.timeanddate.com/countdown/i71vwgtn/cf101/cm0/cu4/ct0/cs1/ca0/cr0/ss0/cac000/cpc000/pcd8873c/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2025-01-01T00:00:00" width="320"></iframe>

Placeholder in page content: 

<div class="TimeanddateClock" data-timeanddateclock-allowtransparency data-timeanddateclock-height="135px" data-timeanddateclock-iscountdown data-timeanddateclock-source="i71vwgtn/cf101/cm0/cu4/ct0/cs1/ca0/cr0/ss0/cac000/cpc000/pcd8873c/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2025-01-01T00:00:00" data-timeanddateclock-width="320px"></div>

Result:

Example 4

HTML from timeanddate.com: 

<iframe allowTransparency="true" frameborder="0" height="66" src="http://free.timeanddate.com/countdown/i71vwor8/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2025-01-01T00:00:00" width="175"></iframe>

Placeholder in page content: 

<div class="TimeanddateClock" data-timeanddateclock-allowtransparency data-timeanddateclock-height="66px" data-timeanddateclock-iscountdown data-timeanddateclock-source="i71vwor8/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2025-01-01T00:00:00" data-timeanddateclock-width="175px"></div>

Result:

Additional Notes

As discussed in this thread, there may be an issue with certain clocks/countdowns not getting served properly by timeanddate.com. For now, Fandom still displays these clocks/countdowns and simply prints a warning to the browser's console. However, Fandom may choose to implement the security filter at which point the impacted clocks/countdowns may no longer display.

Text above can be found here (edit)