FlipClock.js 0.8.0 Beta

API Referrence

FlipClock.Factory

The FlipClock.Factory class has two primary functions: instantiating objects and executing public methods. Developers have access to advanced features by using or extending the classes instantiated by FlipClock.Factory.

Extends

FlipClock.Base

Properties

autoStart
(boolean) If this is set to false, the clock will not auto start. The default value is true.
callbacks
(object) An object of callback functions that are triggered at various times. For more information, view the callback documentation.
classes
(object) This is an object of CSS classes to use to append to DOM objects
clockFace
(string) This is the name of the clock that is used to build the clock display. The default value is HourlyCounter.
countdown
(boolean) If this is set to true, the clock will count down instead of up. The default value is false.
defaultClockFace
(string) This is the default clock face to use if the defined clock face does not exist. The default value is HourlyCounter.
defaultLanguage
(string) This is the default language of the clock if no language is defined. (English is the default)
$el
(object) The jQuery object.
face
(object) This is the FlipClock.Face object used to build the clock.
lang
(object) This is the FlipClock.Lang object used to translate strings of text.
language
(object) This is a string that is set to tell the translator what langauge file to load.
minimumDigits
(integer) The minimum digits a clock face must have
running
(bool) This property is automatically set to true each the clock starts, and is set to false when it stops.
time
(object) This is the FlipClock.Time object that tells the clock face the time to display.
timer
(object) This is the FlipClock.Timer object used to actually run the clock.

Methods

constructor(obj, digit, options)
The constructor method is automatically called when the FlipClock.Factory object is instantiated. The first argument is the jQuery object, the second is the value used to pass to FlipClock.Time object, and the last argument is an object used to override the default properties.
loadClockFace(name, options)
This method allows you to load a clock face. The first argument is the name of the clock face, and the second is an object of options used to override the default properties.
loadLanguage(name)
This method allows you to load a language file. The argument is the name of the language file.
localize(name, obj)
This method allows you to translate a token into the loaded the language. The first argument is the index within the lanauge file, and the second is an optional argument that allows you to pass a different language object to use.
setTime(time)
This method will set the time on the clock by passing a value which will be passed to the FlipFactory.Time object.
start(callback)
This method will start the clock. The callback will be called with each interval.
stop(callback)
This method will stop the clock. The callback will be called after the timer stops.
reset(callback)
This method will reset the clock. The callback will be called after the clock resets.
getTime()
This method will get the current FlipFactory.Time object.
setCountdown(countdown)
This method set the clockdown property to true or false. In addition to setting the property, this method will also change the direction the clock is flipping.
flip()
This method will flip the clock

FlipClock.Base

The FlipClock.Base class is an abstract class from which all other classes extend. The FlipClock.Base class extends Base.js and adds a few other methods to make things easier. so anything in FlipClock.Base is available in any other object.

Extends

Base.js

Properties

buildDate
(string) The date FlipClock.js was last updated. (YYYY-MM-DD)
version
(string) The FlipClock.js version number

Methods

constructor(defaultOptions, options);
The base constructor method serves one purpose: to override default properties with JSON objects. The first argument is the default options, and the second is an (optional) object to override the default. The properties are merged into one object and then merged with the instance object itself. If only one argument is passes, the default properties are the those of instance object.
callback(method, [arg1, [arg2, [arg3, [arg4…]]]])
This method triggers a callback by passing the name (string) of the disired method. Any argument that is passed after the method name, will also be passed to the callback method.
log(str)
This method extends console.log() and will log an item in the console and fallback gracefully for IE.
getOption(str)
Get a property of the instance object by passing the property name.

var prop = clock.getOption('propName');
setOption(prop, value)
Set a single property by passing a property name and value

clock.setOptions('propName', 'some value');
setOptions
Set multiple objects by passing a JSON object with the index being the property name along with the propety value.

clock.setOptions({
propName1: 'some value',
propName2: 'some value' 
});

FlipClock.Face

FlipClock.Face is an abstract class that all other “clock face” classes extend. This classes provides a set of base functions that the clocks faces can inherit and/or override. The clock face is piece that puts everything together and makes everthing “tick”. Clock faces are designed to be 100% customizable by providing a simple API with methods that are triggered at specific times.

Extends

FlipClock.Base

Properties

autoStart
(bool) Sets whether or not the clock should start upon instantiation
dividers
(array) An array of jQuery objects used to divide the clock
factory
(object) The parent FlipClock.Factory object
lists
(array) An array of FlipClock.List objects (one for each digit).

Methods

constructor(factory, options)
The constructor assigns the factory object and overrides the default properties.
build()
This method is triggered when the clock face is created by the FlipClock.Factory.
createDivider(label, [css, excludeDots])
Creates a jQuery object used for the digit divider. This method makes is easy to create dividing dots and labels that float above the numbers. The first argument is the label text, and the second is a boolean value and if true the dots will be be appended.
createList(digit, options)
This method creates a FlipClock.List object and appends it to the DOM. The first argument is the current digit that should be selected. The second argument is a JSON object used to override the default properties.
autoIncrement()
Auto increments/decrements the value of the clock face
addDigit(digit)
Add a digit to the clock face
appendDigitToClock(digit)
Handles the actual append of newly created lists to the clock
reset()
This method is triggered when the clock is reset.
start()
This method is triggered when the clock is started.
stop()
This method is triggered when the clock is stopped.
flip()
This method is triggered when the clock is flipped.
autoIncrement()
Facilitates the auto incrementing/decrementing of the clock face
increment()
Increments the value of the clock face
decrement()
Decrements the value of the clock face

FlipClock.List

The FlipClock.List class is used to build the card flip effect for the clock. Since the card flip requires specific markup to create the desired effect, this object makes managing that much easier.

Extends

FlipClock.Base

Properties

digit
(int) The current digit selected in the list
classes
(object) An object of classes names used to append to DOM objects
factory
(object) The parent FlipClock.Factory object
$el
(object) The jQuery object
items
(array) An array of jQuery <li> objects
lastDigit
(int) The last digit selected in the list

Methods

constructor(factory, [digit, [options]])
The constructor assigns the list to the correct FlipClock.Factory object and automatically created the HTML in the list and selects the defined digit. If no digit is defined, 0 is selected. If a JSON object is defined, the options are used to override the default properties.
play(digit)
This method will adds the play class to the DOM object.
select(digit)
This method will select the specified digit.
stop(digit)
This method will remove the play class to the DOM object.
createList()
This method will create the list HTML and append it to the $el property.
appendListItem(css, value)
This method will append the list item to the parent DOM node.
createListItem(css, value)
Create a new list item and returns the HTML
getNextDigit()
Get the next digit in the list
getPrevDigit()
Get the previous digit in the list

FlipClock.Time

FlipClock.Time is a helper class that makes working with time easier in relation to the clock faces. Once instantiated, the FlipClock.Time object provides all or the majority of the methods one will need to build a clock face.

Extends

FlipClock.Base

Properties

time
(int) The current time (in seconds)
factory
(object) The parent FlipClock.Factory
minimumDigits
(integer) The minimum digits a digitized output must have

Methods

constructor(factory, [time, [options]])
The constructor assigns the time object to the parent FlipClock.Factory object. If no time is defined, 0 is the default. If a JSON object is defined, the options are used to override the default properties.
convertDigitsToArray()
This method convert a string or integer to an array of digits.
digit(int)
This method will get a specific digit from the time integer.
digitize(obj)
This method will formats any array of digits into a valid array of digits.
getDateObject()
This method will return a Date object for the current time.
getDayCounter(mod)
This method will get the an daily breakdown and returns a digitized object.
getDays(mod)
This method will get the number of days. If the mod parameter is true, then a digit of 0-6 will be returned.
getHourCounter()
This method will get the an hourly breakdown and returns a digitized object.
getHours(mod)
This method will get the number of hours. If the mod parameter is true, then a digit of 0-23 will be returned.
getMinutes(mod)
This method will get the number of minutes. If the mod parameter is true, then a digit of 0-59 is returned.
getMilitaryTime(date, showSeconds)
This method will get the twenty-four hour time and return a digitized object. If a Date object is passed as a parameter, the returned value will be relative to the date object that is passed instead of the current time. The showSeconds parameter is boolean, and if true seconds will be shown.
getMinuteCounter()
This method will get the a minute breakdown and return a digitized object.
getMinutes(mod)
This method will get the number of minutes. If the mod parameter is true, then a digit of 0-59 will be returned.
getSeconds(mod)
This method will get the number of seconds. If the mod parameter is true, then a digit of 0-59 will be returned.
getTime(date, showSeconds)
This method will get the current twelve hour time. This method returns a digitized object. If a Date object is passed as a parameter, the returned value will be relative to the date object that is passed instead of the current time. The showSeconds parameter is boolean, and if true seconds will be shown.
getTimeSeconds(date)
This method will return the time in seconds. If a Date object is passed as a parameter, the returned value will be relative to the date object that is passed instead of the current time.
getWeeks(mod)
This method will get the number of weeks. If the mod parameter is true, then a digit of 0-51 is returned.
removeLeadingZeros(totalDigits, digits)
This method will emoves a specific number of leading zeros from the array. This method prevents you from removing too many digits, even if you try. This method returns an array.
addSecond()
This method add a second to the current time.
addSeconds(x)
This method adds X seconds to the current time.
subSecond()
This method subtracts a second from the current time.
subSeconds(x)
This method subtracts X seconds from the current time.

FlipClock.Timer

The FlipClock.Timer object helps manage the actual JavaScript timers.

Extends

FlipClock.Base

Properties

callbacks
object An object of callback methods that trigger at various times.
count
int This property increases by one with each interval of the timer.
factory
object The parent FlipClock.Factory object.
interval
int The total of milliseconds used for the clock interval. By default it is 1000 (1 second).

Methods

constructor(factory, options)
The constructory method is called each time the object is instantiated and assigned the parent FlipClock.Factory object. If a JSON object is passed, it is used to override the default properties.
getElapsed()
This method gets the elapsed the time as an interger
getElapsedTime()
This method gets the elapsed the time as a Date object
reset(callback)
This method resets the timer back to zero.
start(callback)
This method starts the timer. If a callback is defined, it is triggered each timer interval.
stop(callback)
This method stops the timer. If a callback is defined, it is trigged after the timer has stopped.
_clearInterval()
This method clear the timer interval
_createTimer(callback)
This method creates the timer object. If a callback is defined, it is triggered each timer interval.
_destroyTimer
The method destroys the timer object.
_interval(callback)
This method fascilitates the gloabl interval callbacks. If a callback argument is defined, it is triggered each timer interval in addition to the global callback.
_setInterval(callback)
This method creates the timer interval. If a callback is defined, it is triggered each timer interval.