dc-countdown-plugin

Purpose

Easily turn any element in your html to a countdown slot.

Logic

Each countdown consists of many fields. More specifically our plugin supports:

• days
• hours
• minutes
• seconds

This plugin allows you to initiate a countdown and pick the elements in your clip that will host each of the four supported fields.

Example

const secs_countdown = new CountdownPlugin.Countdown(
  {
    type: "minutes", // can be either 'days', 'seconds', 'minutes' or 'hours'
    operation: "free", // can be either 'free' or 'fixed'. Default 'fixed'
    forceDoubleDigit: true, // set it to true if you want to see double digits always (e.g. "01" instead of "1")
    animatedAttrs: {
      time: time, // set the target time. Is always in milliseconds and can either be a future uinx timestamp or just the duration of the countdown in milliseconds. Don't worry the plugin will automtically figure out what you meant
    },
  },
  {
    selector: `#your-selector`,
    duration: 1000,
  },
);

Parameters

Parameter	Description	Type	Default
type	Define which of the three available fields will be illustrated via this incident	string one of days, seconds, minutes, hours	seconds
operation	Define if the countdown will follow the clip's time or it'll operate freely and independently	string, one of fixed and free	fixed
forceDoubleDigit	Make it true if you want to always have double digits in your fields. E.g. 01 instead of just 1	boolean	false
animatedAttrs.time	Defines the target time of the countdown either via a unix timestamp in milliseconds or via providing the duration of the countdown in milliseconds. You don't need to specify which of the two you want, the plugin will figure it out automatically	number, always in milliseconds