HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<html>
<head>
<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<script type="text/javascript">
var clock;
$(document).ready(function() {
// Instantiate a counter
clock = new FlipClock($('.clock'), 60, {
clockFace: 'Counter',
autoStart: true,
countdown: true
});
});
</script>
</body>
</html>
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
}
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 10px;
width: 70px;
height: 135px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 65px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
line-height: 130px;
background-color: #333;
border-radius: 6px;
font-size: 120px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.5s 0.5s linear both;
-moz-animation: asd 0.5s 0.5s linear both;
animation: asd 0.5s 0.5s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
@-webkit-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-moz-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@-o-keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
@keyframes asd {
0% {
z-index: 2; }
20% {
z-index: 4; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
@-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
@-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
@-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
@keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
@-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
@-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
@-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
@keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
@-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
Base.js, version 1.1a
Copyright 2006-2010, Dean Edwards
License: https://www.opensource.org/licenses/mit-license.php
*/
var Base = function() {
// dummy
};
Base.extend = function(_instance, _static) { // subclass
"use strict";
var extend = Base.prototype.extend;
// build the prototype
Base._prototyping = true;
var proto = new this();
extend.call(proto, _instance);
proto.base = function() {
// call this method from any other method to invoke that method's ancestor
};
delete Base._prototyping;
// create the wrapper for the constructor function
//var constructor = proto.constructor.valueOf(); //-dean
var constructor = proto.constructor;
var klass = proto.constructor = function() {
if (!Base._prototyping) {
if (this._constructing || this.constructor == klass) { // instantiation
this._constructing = true;
constructor.apply(this, arguments);
delete this._constructing;
} else if (arguments[0] !== null) { // casting
return (arguments[0].extend || extend).call(arguments[0], proto);
}
}
};
// build the class interface
klass.ancestor = this;
klass.extend = this.extend;
klass.forEach = this.forEach;
klass.implement = this.implement;
klass.prototype = proto;
klass.toString = this.toString;
klass.valueOf = function(type) {
//return (type == "object") ? klass : constructor; //-dean
return (type == "object") ? klass : constructor.valueOf();
};
extend.call(klass, _static);
// class initialisation
if (typeof klass.init == "function") klass.init();
return klass;
};
Base.prototype = {
extend: function(source, value) {
if (arguments.length > 1) { // extending with a name/value pair
var ancestor = this[source];
if (ancestor && (typeof value == "function") && // overriding a method?
// the valueOf() comparison is to avoid circular references
(!ancestor.valueOf || ancestor.valueOf() != value.valueOf()) &&
/\bbase\b/.test(value)) {
// get the underlying method
var method = value.valueOf();
// override
value = function() {
var previous = this.base || Base.prototype.base;
this.base = ancestor;
var returnValue = method.apply(this, arguments);
this.base = previous;
return returnValue;
};
// point to the underlying method
value.valueOf = function(type) {
return (type == "object") ? value : method;
};
value.toString = Base.toString;
}
this[source] = value;
} else if (source) { // extending with an object literal
var extend = Base.prototype.extend;
// if this object has a customised extend method then use it
if (!Base._prototyping && typeof this != "function") {
extend = this.extend || extend;
}
var proto = {toSource: null};
// do the "toString" and other methods manually
var hidden = ["constructor", "toString", "valueOf"];
// if we are prototyping then include the constructor
var i = Base._prototyping ? 0 : 1;
while (key = hidden[i++]) {
if (source[key] != proto[key]) {
extend.call(this, key, source[key]);
}
}
// copy each of the source object's properties to this object
for (var key in source) {
if (!proto[key]) extend.call(this, key, source[key]);
}
}
return this;
}
};
// initialise
Base = Base.extend({
constructor: function() {
this.extend(arguments[0]);
}
}, {
ancestor: Object,
version: "1.1",
forEach: function(object, block, context) {
for (var key in object) {
if (this.prototype[key] === undefined) {
block.call(context, object[key], key, object);
}
}
},
implement: function() {
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == "function") {
// if it's a function, call it
arguments[i](this.prototype);
} else {
// add the interface using the extend method
this.prototype.extend(arguments[i]);
}
}
return this;
},
toString: function() {
return String(this.valueOf());
}
});
/*jshint smarttabs:true */
var FlipClock;
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* FlipFlock Helper
*
* @param object A jQuery object or CSS select
* @param int An integer used to start the clock (no. seconds)
* @param object An object of properties to override the default
*/
FlipClock = function(obj, digit, options) {
if(digit instanceof Object && digit instanceof Date === false) {
options = digit;
digit = 0;
}
return new FlipClock.Factory(obj, digit, options);
};
/**
* The global FlipClock.Lang object
*/
FlipClock.Lang = {};
/**
* The Base FlipClock class is used to extend all other FlipFlock
* classes. It handles the callbacks and the basic setters/getters
*
* @param object An object of the default properties
* @param object An object of properties to override the default
*/
FlipClock.Base = Base.extend({
/**
* Build Date
*/
buildDate: '2014-10-06',
/**
* Version
*/
version: '0.7.3',
/**
* Sets the default options
*
* @param object The default options
* @param object The override options
*/
constructor: function(_default, options) {
if(typeof _default !== "object") {
_default = {};
}
if(typeof options !== "object") {
options = {};
}
this.setOptions($.extend(true, {}, _default, options));
},
/**
* Delegates the callback to the defined method
*
* @param object The default options
* @param object The override options
*/
callback: function(method) {
if(typeof method === "function") {
var args = [];
for(var x = 1; x <= arguments.length; x++) {
if(arguments[x]) {
args.push(arguments[x]);
}
}
method.apply(this, args);
}
},
/**
* Log a string into the console if it exists
*
* @param string The name of the option
* @return mixed
*/
log: function(str) {
if(window.console && console.log) {
console.log(str);
}
},
/**
* Get an single option value. Returns false if option does not exist
*
* @param string The name of the option
* @return mixed
*/
getOption: function(index) {
if(this[index]) {
return this[index];
}
return false;
},
/**
* Get all options
*
* @return bool
*/
getOptions: function() {
return this;
},
/**
* Set a single option value
*
* @param string The name of the option
* @param mixed The value of the option
*/
setOption: function(index, value) {
this[index] = value;
},
/**
* Set a multiple options by passing a JSON object
*
* @param object The object with the options
* @param mixed The value of the option
*/
setOptions: function(options) {
for(var key in options) {
if(typeof options[key] !== "undefined") {
this.setOption(key, options[key]);
}
}
}
});
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* The FlipClock Face class is the base class in which to extend
* all other FlockClock.Face classes.
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.Face = FlipClock.Base.extend({
/**
* Sets whether or not the clock should start upon instantiation
*/
autoStart: true,
/**
* An array of jQuery objects used for the dividers (the colons)
*/
dividers: [],
/**
* An array of FlipClock.List objects
*/
factory: false,
/**
* An array of FlipClock.List objects
*/
lists: [],
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.dividers = [];
this.lists = [];
this.base(options);
this.factory = factory;
},
/**
* Build the clock face
*/
build: function() {
if(this.autoStart) {
this.start();
}
},
/**
* Creates a jQuery object used for the digit divider
*
* @param mixed The divider label text
* @param mixed Set true to exclude the dots in the divider.
* If not set, is false.
*/
createDivider: function(label, css, excludeDots) {
if(typeof css == "boolean" || !css) {
excludeDots = css;
css = label;
}
var dots = [
'<span class="'+this.factory.classes.dot+' top"></span>',
'<span class="'+this.factory.classes.dot+' bottom"></span>'
].join('');
if(excludeDots) {
dots = '';
}
label = this.factory.localize(label);
var html = [
'<span class="'+this.factory.classes.divider+' '+(css ? css : '').toLowerCase()+'">',
'<span class="'+this.factory.classes.label+'">'+(label ? label : '')+'</span>',
dots,
'</span>'
];
var $html = $(html.join(''));
this.dividers.push($html);
return $html;
},
/**
* Creates a FlipClock.List object and appends it to the DOM
*
* @param mixed The digit to select in the list
* @param object An object to override the default properties
*/
createList: function(digit, options) {
if(typeof digit === "object") {
options = digit;
digit = 0;
}
var obj = new FlipClock.List(this.factory, digit, options);
this.lists.push(obj);
return obj;
},
/**
* Triggers when the clock is reset
*/
reset: function() {
this.factory.time = new FlipClock.Time(
this.factor,
this.factory.original ? Math.round(this.factory.original) : 0,
{
minimumDigits: this.factory.minimumDigits
}
);
this.flip(this.factory.original, false);
},
/**
* Append a newly created list to the clock
*/
appendDigitToClock: function(obj) {
obj.$el.append(false);
},
/**
* Add a digit to the clock face
*/
addDigit: function(digit) {
var obj = this.createList(digit, {
classes: {
active: this.factory.classes.active,
before: this.factory.classes.before,
flip: this.factory.classes.flip
}
});
this.appendDigitToClock(obj);
},
/**
* Triggers when the clock is started
*/
start: function() {},
/**
* Triggers when the time on the clock stops
*/
stop: function() {},
/**
* Auto increments/decrements the value of the clock face
*/
autoIncrement: function() {
if(!this.factory.countdown) {
this.increment();
}
else {
this.decrement();
}
},
/**
* Increments the value of the clock face
*/
increment: function() {
this.factory.time.addSecond();
},
/**
* Decrements the value of the clock face
*/
decrement: function() {
if(this.factory.time.getTimeSeconds() == 0) {
this.factory.stop()
}
else {
this.factory.time.subSecond();
}
},
/**
* Triggers when the numbers on the clock flip
*/
flip: function(time, doNotAddPlayClass) {
var t = this;
$.each(time, function(i, digit) {
var list = t.lists[i];
if(list) {
if(!doNotAddPlayClass && digit != list.digit) {
list.play();
}
list.select(digit);
}
else {
t.addDigit(digit);
}
});
}
});
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* The FlipClock Factory class is used to build the clock and manage
* all the public methods.
*
* @param object A jQuery object or CSS selector used to fetch
the wrapping DOM nodes
* @param mixed This is the digit used to set the clock. If an
object is passed, 0 will be used.
* @param object An object of properties to override the default
*/
FlipClock.Factory = FlipClock.Base.extend({
/**
* The clock's animation rate.
*
* Note, currently this property doesn't do anything.
* This property is here to be used in the future to
* programmaticaly set the clock's animation speed
*/
animationRate: 1000,
/**
* Auto start the clock on page load (True|False)
*/
autoStart: true,
/**
* The callback methods
*/
callbacks: {
destroy: false,
create: false,
init: false,
interval: false,
start: false,
stop: false,
reset: false
},
/**
* The CSS classes
*/
classes: {
active: 'flip-clock-active',
before: 'flip-clock-before',
divider: 'flip-clock-divider',
dot: 'flip-clock-dot',
label: 'flip-clock-label',
flip: 'flip',
play: 'play',
wrapper: 'flip-clock-wrapper'
},
/**
* The name of the clock face class in use
*/
clockFace: 'HourlyCounter',
/**
* The name of the clock face class in use
*/
countdown: false,
/**
* The name of the default clock face class to use if the defined
* clockFace variable is not a valid FlipClock.Face object
*/
defaultClockFace: 'HourlyCounter',
/**
* The default language
*/
defaultLanguage: 'english',
/**
* The jQuery object
*/
$el: false,
/**
* The FlipClock.Face object
*/
face: true,
/**
* The language object after it has been loaded
*/
lang: false,
/**
* The language being used to display labels (string)
*/
language: 'english',
/**
* The minimum digits the clock must have
*/
minimumDigits: 0,
/**
* The original starting value of the clock. Used for the reset method.
*/
original: false,
/**
* Is the clock running? (True|False)
*/
running: false,
/**
* The FlipClock.Time object
*/
time: false,
/**
* The FlipClock.Timer object
*/
timer: false,
/**
* The jQuery object (depcrecated)
*/
$wrapper: false,
/**
* Constructor
*
* @param object The wrapping jQuery object
* @param object Number of seconds used to start the clock
* @param object An object override options
*/
constructor: function(obj, digit, options) {
if(!options) {
options = {};
}
this.lists = [];
this.running = false;
this.base(options);
this.$el = $(obj).addClass(this.classes.wrapper);
// Depcrated support of the $wrapper property.
this.$wrapper = this.$el;
this.original = (digit instanceof Date) ? digit : (digit ? Math.round(digit) : 0);
this.time = new FlipClock.Time(this, this.original, {
minimumDigits: this.minimumDigits,
animationRate: this.animationRate
});
this.timer = new FlipClock.Timer(this, options);
this.loadLanguage(this.language);
this.loadClockFace(this.clockFace, options);
if(this.autoStart) {
this.start();
}
},
/**
* Load the FlipClock.Face object
*
* @param object The name of the FlickClock.Face class
* @param object An object override options
*/
loadClockFace: function(name, options) {
var face, suffix = 'Face', hasStopped = false;
name = name.ucfirst()+suffix;
if(this.face.stop) {
this.stop();
hasStopped = true;
}
this.$el.html('');
this.time.minimumDigits = this.minimumDigits;
if(FlipClock[name]) {
face = new FlipClock[name](this, options);
}
else {
face = new FlipClock[this.defaultClockFace+suffix](this, options);
}
face.build();
this.face = face
if(hasStopped) {
this.start();
}
return this.face;
},
/**
* Load the FlipClock.Lang object
*
* @param object The name of the language to load
*/
loadLanguage: function(name) {
var lang;
if(FlipClock.Lang[name.ucfirst()]) {
lang = FlipClock.Lang[name.ucfirst()];
}
else if(FlipClock.Lang[name]) {
lang = FlipClock.Lang[name];
}
else {
lang = FlipClock.Lang[this.defaultLanguage];
}
return this.lang = lang;
},
/**
* Localize strings into various languages
*
* @param string The index of the localized string
* @param object Optionally pass a lang object
*/
localize: function(index, obj) {
var lang = this.lang;
if(!index) {
return null;
}
var lindex = index.toLowerCase();
if(typeof obj == "object") {
lang = obj;
}
if(lang && lang[lindex]) {
return lang[lindex];
}
return index;
},
/**
* Starts the clock
*/
start: function(callback) {
var t = this;
if(!t.running && (!t.countdown || t.countdown && t.time.time > 0)) {
t.face.start(t.time);
t.timer.start(function() {
t.flip();
if(typeof callback === "function") {
callback();
}
});
}
else {
t.log('Trying to start timer when countdown already at 0');
}
},
/**
* Stops the clock
*/
stop: function(callback) {
this.face.stop();
this.timer.stop(callback);
for(var x in this.lists) {
if (this.lists.hasOwnProperty(x)) {
this.lists[x].stop();
}
}
},
/**
* Reset the clock
*/
reset: function(callback) {
this.timer.reset(callback);
this.face.reset();
},
/**
* Sets the clock time
*/
setTime: function(time) {
this.time.time = time;
this.flip(true);
},
/**
* Get the clock time
*
* @return object Returns a FlipClock.Time object
*/
getTime: function(time) {
return this.time;
},
/**
* Changes the increment of time to up or down (add/sub)
*/
setCountdown: function(value) {
var running = this.running;
this.countdown = value ? true : false;
if(running) {
this.stop();
this.start();
}
},
/**
* Flip the digits on the clock
*
* @param array An array of digits
*/
flip: function(doNotAddPlayClass) {
this.face.flip(false, doNotAddPlayClass);
}
});
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* The FlipClock List class is used to build the list used to create
* the card flip effect. This object fascilates selecting the correct
* node by passing a specific digit.
*
* @param object A FlipClock.Factory object
* @param mixed This is the digit used to set the clock. If an
* object is passed, 0 will be used.
* @param object An object of properties to override the default
*/
FlipClock.List = FlipClock.Base.extend({
/**
* The digit (0-9)
*/
digit: 0,
/**
* The CSS classes
*/
classes: {
active: 'flip-clock-active',
before: 'flip-clock-before',
flip: 'flip'
},
/**
* The parent FlipClock.Factory object
*/
factory: false,
/**
* The jQuery object
*/
$el: false,
/**
* The jQuery object (deprecated)
*/
$obj: false,
/**
* The items in the list
*/
items: [],
/**
* The last digit
*/
lastDigit: 0,
/**
* Constructor
*
* @param object A FlipClock.Factory object
* @param int An integer use to select the correct digit
* @param object An object to override the default properties
*/
constructor: function(factory, digit, options) {
this.factory = factory;
this.digit = digit;
this.lastDigit = digit;
this.$el = this.createList();
// Depcrated support of the $obj property.
this.$obj = this.$el;
if(digit > 0) {
this.select(digit);
}
this.factory.$el.append(this.$el);
},
/**
* Select the digit in the list
*
* @param int A digit 0-9
*/
select: function(digit) {
if(typeof digit === "undefined") {
digit = this.digit;
}
else {
this.digit = digit;
}
if(this.digit != this.lastDigit) {
var $delete = this.$el.find('.'+this.classes.before).removeClass(this.classes.before);
this.$el.find('.'+this.classes.active).removeClass(this.classes.active)
.addClass(this.classes.before);
this.appendListItem(this.classes.active, this.digit);
$delete.remove();
this.lastDigit = this.digit;
}
},
/**
* Adds the play class to the DOM object
*/
play: function() {
this.$el.addClass(this.factory.classes.play);
},
/**
* Removes the play class to the DOM object
*/
stop: function() {
var t = this;
setTimeout(function() {
t.$el.removeClass(t.factory.classes.play);
}, this.factory.timer.interval);
},
/**
* Creates the list item HTML and returns as a string
*/
createListItem: function(css, value) {
return [
'<li class="'+(css ? css : '')+'">',
'<a href="#">',
'<div class="up">',
'<div class="shadow"></div>',
'<div class="inn">'+(value ? value : '')+'</div>',
'</div>',
'<div class="down">',
'<div class="shadow"></div>',
'<div class="inn">'+(value ? value : '')+'</div>',
'</div>',
'</a>',
'</li>'
].join('');
},
/**
* Append the list item to the parent DOM node
*/
appendListItem: function(css, value) {
var html = this.createListItem(css, value);
this.$el.append(html);
},
/**
* Create the list of digits and appends it to the DOM object
*/
createList: function() {
var lastDigit = this.getPrevDigit() ? this.getPrevDigit() : this.digit;
var html = $([
'<ul class="'+this.classes.flip+' '+(this.factory.running ? this.factory.classes.play : '')+'">',
this.createListItem(this.classes.before, lastDigit),
this.createListItem(this.classes.active, this.digit),
'</ul>'
].join(''));
return html;
},
getNextDigit: function() {
return this.digit == 9 ? 0 : this.digit + 1;
},
getPrevDigit: function() {
return this.digit == 0 ? 9 : this.digit - 1;
}
});
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* Capitalize the first letter in a string
*
* @return string
*/
String.prototype.ucfirst = function() {
return this.substr(0, 1).toUpperCase() + this.substr(1);
};
/**
* jQuery helper method
*
* @param int An integer used to start the clock (no. seconds)
* @param object An object of properties to override the default
*/
$.fn.FlipClock = function(digit, options) {
return new FlipClock($(this), digit, options);
};
/**
* jQuery helper method
*
* @param int An integer used to start the clock (no. seconds)
* @param object An object of properties to override the default
*/
$.fn.flipClock = function(digit, options) {
return $.fn.FlipClock(digit, options);
};
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* The FlipClock Time class is used to manage all the time
* calculations.
*
* @param object A FlipClock.Factory object
* @param mixed This is the digit used to set the clock. If an
* object is passed, 0 will be used.
* @param object An object of properties to override the default
*/
FlipClock.Time = FlipClock.Base.extend({
/**
* The time (in seconds) or a date object
*/
time: 0,
/**
* The parent FlipClock.Factory object
*/
factory: false,
/**
* The minimum number of digits the clock face must have
*/
minimumDigits: 0,
/**
* Constructor
*
* @param object A FlipClock.Factory object
* @param int An integer use to select the correct digit
* @param object An object to override the default properties
*/
constructor: function(factory, time, options) {
if(typeof options != "object") {
options = {};
}
if(!options.minimumDigits) {
options.minimumDigits = factory.minimumDigits;
}
this.base(options);
this.factory = factory;
if(time) {
this.time = time;
}
},
/**
* Convert a string or integer to an array of digits
*
* @param mixed String or Integer of digits
* @return array An array of digits
*/
convertDigitsToArray: function(str) {
var data = [];
str = str.toString();
for(var x = 0;x < str.length; x++) {
if(str[x].match(/^\d*$/g)) {
data.push(str[x]);
}
}
return data;
},
/**
* Get a specific digit from the time integer
*
* @param int The specific digit to select from the time
* @return mixed Returns FALSE if no digit is found, otherwise
* the method returns the defined digit
*/
digit: function(i) {
var timeStr = this.toString();
var length = timeStr.length;
if(timeStr[length - i]) {
return timeStr[length - i];
}
return false;
},
/**
* Formats any array of digits into a valid array of digits
*
* @param mixed An array of digits
* @return array An array of digits
*/
digitize: function(obj) {
var data = [];
$.each(obj, function(i, value) {
value = value.toString();
if(value.length == 1) {
value = '0'+value;
}
for(var x = 0; x < value.length; x++) {
data.push(value.charAt(x));
}
});
if(data.length > this.minimumDigits) {
this.minimumDigits = data.length;
}
if(this.minimumDigits > data.length) {
for(var x = data.length; x < this.minimumDigits; x++) {
data.unshift('0');
}
}
return data;
},
/**
* Gets a new Date object for the current time
*
* @return array Returns a Date object
*/
getDateObject: function() {
if(this.time instanceof Date) {
return this.time;
}
return new Date((new Date()).getTime() + this.getTimeSeconds() * 1000);
},
/**
* Gets a digitized daily counter
*
* @return object Returns a digitized object
*/
getDayCounter: function(includeSeconds) {
var digits = [
this.getDays(),
this.getHours(true),
this.getMinutes(true)
];
if(includeSeconds) {
digits.push(this.getSeconds(true));
}
return this.digitize(digits);
},
/**
* Gets number of days
*
* @param bool Should perform a modulus? If not sent, then no.
* @return int Retuns a floored integer
*/
getDays: function(mod) {
var days = this.getTimeSeconds() / 60 / 60 / 24;
if(mod) {
days = days % 7;
}
return Math.floor(days);
},
/**
* Gets an hourly breakdown
*
* @return object Returns a digitized object
*/
getHourCounter: function() {
var obj = this.digitize([
this.getHours(),
this.getMinutes(true),
this.getSeconds(true)
]);
return obj;
},
/**
* Gets an hourly breakdown
*
* @return object Returns a digitized object
*/
getHourly: function() {
return this.getHourCounter();
},
/**
* Gets number of hours
*
* @param bool Should perform a modulus? If not sent, then no.
* @return int Retuns a floored integer
*/
getHours: function(mod) {
var hours = this.getTimeSeconds() / 60 / 60;
if(mod) {
hours = hours % 24;
}
return Math.floor(hours);
},
/**
* Gets the twenty-four hour time
*
* @return object returns a digitized object
*/
getMilitaryTime: function(date, showSeconds) {
if(typeof showSeconds === "undefined") {
showSeconds = true;
}
if(!date) {
date = this.getDateObject();
}
var data = [
date.getHours(),
date.getMinutes()
];
if(showSeconds === true) {
data.push(date.getSeconds());
}
return this.digitize(data);
},
/**
* Gets number of minutes
*
* @param bool Should perform a modulus? If not sent, then no.
* @return int Retuns a floored integer
*/
getMinutes: function(mod) {
var minutes = this.getTimeSeconds() / 60;
if(mod) {
minutes = minutes % 60;
}
return Math.floor(minutes);
},
/**
* Gets a minute breakdown
*/
getMinuteCounter: function() {
var obj = this.digitize([
this.getMinutes(),
this.getSeconds(true)
]);
return obj;
},
/**
* Gets time count in seconds regardless of if targetting date or not.
*
* @return int Returns a floored integer
*/
getTimeSeconds: function(date) {
if(!date) {
date = new Date();
}
if (this.time instanceof Date) {
if (this.factory.countdown) {
return Math.max(this.time.getTime()/1000 - date.getTime()/1000,0);
} else {
return date.getTime()/1000 - this.time.getTime()/1000 ;
}
} else {
return this.time;
}
},
/**
* Gets the current twelve hour time
*
* @return object Returns a digitized object
*/
getTime: function(date, showSeconds) {
if(typeof showSeconds === "undefined") {
showSeconds = true;
}
if(!date) {
date = this.getDateObject();
}
console.log(date);
var hours = date.getHours();
var merid = hours > 12 ? 'PM' : 'AM';
var data = [
hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours),
date.getMinutes()
];
if(showSeconds === true) {
data.push(date.getSeconds());
}
return this.digitize(data);
},
/**
* Gets number of seconds
*
* @param bool Should perform a modulus? If not sent, then no.
* @return int Retuns a ceiled integer
*/
getSeconds: function(mod) {
var seconds = this.getTimeSeconds();
if(mod) {
if(seconds == 60) {
seconds = 0;
}
else {
seconds = seconds % 60;
}
}
return Math.ceil(seconds);
},
/**
* Gets number of weeks
*
* @param bool Should perform a modulus? If not sent, then no.
* @return int Retuns a floored integer
*/
getWeeks: function() {
var weeks = this.getTimeSeconds() / 60 / 60 / 24 / 7;
if(mod) {
weeks = weeks % 52;
}
return Math.floor(weeks);
},
/**
* Removes a specific number of leading zeros from the array.
* This method prevents you from removing too many digits, even
* if you try.
*
* @param int Total number of digits to remove
* @return array An array of digits
*/
removeLeadingZeros: function(totalDigits, digits) {
var total = 0;
var newArray = [];
$.each(digits, function(i, digit) {
if(i < totalDigits) {
total += parseInt(digits[i], 10);
}
else {
newArray.push(digits[i]);
}
});
if(total === 0) {
return newArray;
}
return digits;
},
/**
* Adds X second to the current time
*/
addSeconds: function(x) {
if(this.time instanceof Date) {
this.time.setSeconds(this.time.getSeconds() + x);
}
else {
this.time += x;
}
},
/**
* Adds 1 second to the current time
*/
addSecond: function() {
this.addSeconds(1);
},
/**
* Substracts X seconds from the current time
*/
subSeconds: function(x) {
if(this.time instanceof Date) {
this.time.setSeconds(this.time.getSeconds() - x);
}
else {
this.time -= x;
}
},
/**
* Substracts 1 second from the current time
*/
subSecond: function() {
this.subSeconds(1);
},
/**
* Converts the object to a human readable string
*/
toString: function() {
return this.getTimeSeconds().toString();
}
/*
getYears: function() {
return Math.floor(this.time / 60 / 60 / 24 / 7 / 52);
},
getDecades: function() {
return Math.floor(this.getWeeks() / 10);
}*/
});
}(jQuery));
/*jshint smarttabs:true */
/**
* FlipClock.js
*
* @author Justin Kimbrell
* @copyright 2013 - Objective HTML, LLC
* @licesnse https://www.opensource.org/licenses/mit-license.php
*/
(function($) {
"use strict";
/**
* The FlipClock.Timer object managers the JS timers
*
* @param object The parent FlipClock.Factory object
* @param object Override the default options
*/
FlipClock.Timer = FlipClock.Base.extend({
/**
* Callbacks
*/
callbacks: {
destroy: false,
create: false,
init: false,
interval: false,
start: false,
stop: false,
reset: false
},
/**
* FlipClock timer count (how many intervals have passed)
*/
count: 0,
/**
* The parent FlipClock.Factory object
*/
factory: false,
/**
* Timer interval (1 second by default)
*/
interval: 1000,
/**
* The rate of the animation in milliseconds (not currently in use)
*/
animationRate: 1000,
/**
* Constructor
*
* @return void
*/
constructor: function(factory, options) {
this.base(options);
this.factory = factory;
this.callback(this.callbacks.init);
this.callback(this.callbacks.create);
},
/**
* This method gets the elapsed the time as an interger
*
* @return void
*/
getElapsed: function() {
return this.count * this.interval;
},
/**
* This method gets the elapsed the time as a Date object
*
* @return void
*/
getElapsedTime: function() {
return new Date(this.time + this.getElapsed());
},
/**
* This method is resets the timer
*
* @param callback This method resets the timer back to 0
* @return void
*/
reset: function(callback) {
clearInterval(this.timer);
this.count = 0;
this._setInterval(callback);
this.callback(this.callbacks.reset);
},
/**
* This method is starts the timer
*
* @param callback A function that is called once the timer is destroyed
* @return void
*/
start: function(callback) {
this.factory.running = true;
this._createTimer(callback);
this.callback(this.callbacks.start);
},
/**
* This method is stops the timer
*
* @param callback A function that is called once the timer is destroyed
* @return void
*/
stop: function(callback) {
this.factory.running = false;
this._clearInterval(callback);
this.callback(this.callbacks.stop);
this.callback(callback);
},
/**
* Clear the timer interval
*
* @return void
*/
_clearInterval: function() {
clearInterval(this.timer);
},
/**
* Create the timer object
*
* @param callback A function that is called once the timer is created
* @return void
*/
_createTimer: function(callback) {
this._setInterval(callback);
},
/**
* Destroy the timer object
*
* @param callback A function that is called once the timer is destroyed
* @return void
*/
_destroyTimer: function(callback) {
this._clearInterval();
this.timer = false;
this.callback(callback);
this.callback(this.callbacks.destroy);
},
/**
* This method is called each time the timer interval is ran
*
* @param callback A function that is called once the timer is destroyed
* @return void
*/
_interval: function(callback) {
this.callback(this.callbacks.interval);
this.callback(callback);
this.count++;
},
/**
* This sets the timer interval
*
* @param callback A function that is called once the timer is destroyed
* @return void
*/
_setInterval: function(callback) {
var t = this;
t._interval(callback);
t.timer = setInterval(function() {
t._interval(callback);
}, this.interval);
}
});
}(jQuery));
(function($) {
/**
* Twenty-Four Hour Clock Face
*
* This class will generate a twenty-four our clock for FlipClock.js
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.TwentyFourHourClockFace = FlipClock.Face.extend({
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.base(factory, options);
},
/**
* Build the clock face
*
* @param object Pass the time that should be used to display on the clock.
*/
build: function(time) {
var t = this;
var children = this.factory.$el.find('ul');
if(!this.factory.time.time) {
this.factory.original = new Date();
this.factory.time = new FlipClock.Time(this.factory, this.factory.original);
}
var time = time ? time : this.factory.time.getMilitaryTime(false, this.showSeconds);
if(time.length > children.length) {
$.each(time, function(i, digit) {
t.createList(digit);
});
}
this.createDivider();
this.createDivider();
$(this.dividers[0]).insertBefore(this.lists[this.lists.length - 2].$el);
$(this.dividers[1]).insertBefore(this.lists[this.lists.length - 4].$el);
this.base();
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
this.autoIncrement();
time = time ? time : this.factory.time.getMilitaryTime(false, this.showSeconds);
this.base(time, doNotAddPlayClass);
}
});
}(jQuery));
(function($) {
/**
* Counter Clock Face
*
* This class will generate a generice flip counter. The timer has been
* disabled. clock.increment() and clock.decrement() have been added.
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.CounterFace = FlipClock.Face.extend({
/**
* Tells the counter clock face if it should auto-increment
*/
shouldAutoIncrement: false,
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
if(typeof options != "object") {
options = {};
}
factory.autoStart = options.autoStart ? true : false;
if(options.autoStart) {
this.shouldAutoIncrement = true;
}
factory.increment = function() {
factory.countdown = false;
factory.setTime(factory.getTime().getTimeSeconds() + 1);
};
factory.decrement = function() {
factory.countdown = true;
var time = factory.getTime().getTimeSeconds();
if(time > 0) {
factory.setTime(time - 1);
}
};
factory.setValue = function(digits) {
factory.setTime(digits);
};
factory.setCounter = function(digits) {
factory.setTime(digits);
};
this.base(factory, options);
},
/**
* Build the clock face
*/
build: function() {
var t = this;
var children = this.factory.$el.find('ul');
var time = this.factory.getTime().digitize([this.factory.getTime().time]);
if(time.length > children.length) {
$.each(time, function(i, digit) {
var list = t.createList(digit);
list.select(digit);
});
}
$.each(this.lists, function(i, list) {
list.play();
});
this.base();
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(this.shouldAutoIncrement) {
this.autoIncrement();
}
if(!time) {
time = this.factory.getTime().digitize([this.factory.getTime().time]);
}
this.base(time, doNotAddPlayClass);
},
/**
* Reset the clock face
*/
reset: function() {
this.factory.time = new FlipClock.Time(
this.factory,
this.factory.original ? Math.round(this.factory.original) : 0
);
this.flip();
}
});
}(jQuery));
(function($) {
/**
* Daily Counter Clock Face
*
* This class will generate a daily counter for FlipClock.js. A
* daily counter will track days, hours, minutes, and seconds. If
* the number of available digits is exceeded in the count, a new
* digit will be created.
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.DailyCounterFace = FlipClock.Face.extend({
showSeconds: true,
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.base(factory, options);
},
/**
* Build the clock face
*/
build: function(time) {
var t = this;
var children = this.factory.$el.find('ul');
var offset = 0;
time = time ? time : this.factory.time.getDayCounter(this.showSeconds);
if(time.length > children.length) {
$.each(time, function(i, digit) {
t.createList(digit);
});
}
if(this.showSeconds) {
$(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
}
else
{
offset = 2;
}
$(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4 + offset].$el);
$(this.createDivider('Hours')).insertBefore(this.lists[this.lists.length - 6 + offset].$el);
$(this.createDivider('Days', true)).insertBefore(this.lists[0].$el);
this.base();
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(!time) {
time = this.factory.time.getDayCounter(this.showSeconds);
}
this.autoIncrement();
this.base(time, doNotAddPlayClass);
}
});
}(jQuery));
(function($) {
/**
* Hourly Counter Clock Face
*
* This class will generate an hourly counter for FlipClock.js. An
* hour counter will track hours, minutes, and seconds. If number of
* available digits is exceeded in the count, a new digit will be
* created.
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.HourlyCounterFace = FlipClock.Face.extend({
// clearExcessDigits: true,
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.base(factory, options);
},
/**
* Build the clock face
*/
build: function(excludeHours, time) {
var t = this;
var children = this.factory.$el.find('ul');
time = time ? time : this.factory.time.getHourCounter();
if(time.length > children.length) {
$.each(time, function(i, digit) {
t.createList(digit);
});
}
$(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
$(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4].$el);
if(!excludeHours) {
$(this.createDivider('Hours', true)).insertBefore(this.lists[0].$el);
}
this.base();
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(!time) {
time = this.factory.time.getHourCounter();
}
this.autoIncrement();
this.base(time, doNotAddPlayClass);
},
/**
* Append a newly created list to the clock
*/
appendDigitToClock: function(obj) {
this.base(obj);
this.dividers[0].insertAfter(this.dividers[0].next());
}
});
}(jQuery));
(function($) {
/**
* Minute Counter Clock Face
*
* This class will generate a minute counter for FlipClock.js. A
* minute counter will track minutes and seconds. If an hour is
* reached, the counter will reset back to 0. (4 digits max)
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.MinuteCounterFace = FlipClock.HourlyCounterFace.extend({
clearExcessDigits: false,
/**
* Constructor
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
constructor: function(factory, options) {
this.base(factory, options);
},
/**
* Build the clock face
*/
build: function() {
this.base(true, this.factory.time.getMinuteCounter());
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(!time) {
time = this.factory.time.getMinuteCounter();
}
this.base(time, doNotAddPlayClass);
}
});
}(jQuery));
(function($) {
/**
* Twelve Hour Clock Face
*
* This class will generate a twelve hour clock for FlipClock.js
*
* @param object The parent FlipClock.Factory object
* @param object An object of properties to override the default
*/
FlipClock.TwelveHourClockFace = FlipClock.TwentyFourHourClockFace.extend({
/**
* The meridium jQuery DOM object
*/
meridium: false,
/**
* The meridium text as string for easy access
*/
meridiumText: 'AM',
/**
* Build the clock face
*
* @param object Pass the time that should be used to display on the clock.
*/
build: function() {
var t = this;
var time = this.factory.time.getTime(false, this.showSeconds);
this.base(time);
this.meridiumText = this.getMeridium();
this.meridium = $([
'<ul class="flip-clock-meridium">',
'<li>',
'<a href="#">'+this.meridiumText+'</a>',
'</li>',
'</ul>'
].join(''));
this.meridium.insertAfter(this.lists[this.lists.length-1].$el);
},
/**
* Flip the clock face
*/
flip: function(time, doNotAddPlayClass) {
if(this.meridiumText != this.getMeridium()) {
this.meridiumText = this.getMeridium();
this.meridium.find('a').html(this.meridiumText);
}
this.base(this.factory.time.getTime(false, this.showSeconds), doNotAddPlayClass);
},
/**
* Get the current meridium
*
* @return string Returns the meridium (AM|PM)
*/
getMeridium: function() {
return new Date().getHours() >= 12 ? 'PM' : 'AM';
},
/**
* Is it currently in the post-medirium?
*
* @return bool Returns true or false
*/
isPM: function() {
return this.getMeridium() == 'PM' ? true : false;
},
/**
* Is it currently before the post-medirium?
*
* @return bool Returns true or false
*/
isAM: function() {
return this.getMeridium() == 'AM' ? true : false;
}
});
}(jQuery));
(function($) {
/**
* FlipClock Arabic Language Pack
*
* This class will be used to translate tokens into the Arabic language.
*
*/
FlipClock.Lang.Arabic = {
'years' : '?????',
'months' : '????',
'days' : '????',
'hours' : '?????',
'minutes' : '?????',
'seconds' : '?????'
};
/* Create various aliases for convenience */
FlipClock.Lang['ar'] = FlipClock.Lang.Arabic;
FlipClock.Lang['ar-ar'] = FlipClock.Lang.Arabic;
FlipClock.Lang['arabic'] = FlipClock.Lang.Arabic;
}(jQuery));
(function($) {
/**
* FlipClock Danish Language Pack
*
* This class will used to translate tokens into the Danish language.
*
*/
FlipClock.Lang.Danish = {
'years' : 'År',
'months' : 'Måneder',
'days' : 'Dage',
'hours' : 'Timer',
'minutes' : 'Minutter',
'seconds' : 'Sekunder'
};
/* Create various aliases for convenience */
FlipClock.Lang['da'] = FlipClock.Lang.Danish;
FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
FlipClock.Lang['danish'] = FlipClock.Lang.Danish;
}(jQuery));
(function($) {
/**
* FlipClock German Language Pack
*
* This class will used to translate tokens into the German language.
*
*/
FlipClock.Lang.German = {
'years' : 'Jahre',
'months' : 'Monate',
'days' : 'Tage',
'hours' : 'Stunden',
'minutes' : 'Minuten',
'seconds' : 'Sekunden'
};
/* Create various aliases for convenience */
FlipClock.Lang['de'] = FlipClock.Lang.German;
FlipClock.Lang['de-de'] = FlipClock.Lang.German;
FlipClock.Lang['german'] = FlipClock.Lang.German;
}(jQuery));
(function($) {
/**
* FlipClock English Language Pack
*
* This class will used to translate tokens into the English language.
*
*/
FlipClock.Lang.English = {
'years' : 'Years',
'months' : 'Months',
'days' : 'Days',
'hours' : 'Hours',
'minutes' : 'Minutes',
'seconds' : 'Seconds'
};
/* Create various aliases for convenience */
FlipClock.Lang['en'] = FlipClock.Lang.English;
FlipClock.Lang['en-us'] = FlipClock.Lang.English;
FlipClock.Lang['english'] = FlipClock.Lang.English;
}(jQuery));
(function($) {
/**
* FlipClock Spanish Language Pack
*
* This class will used to translate tokens into the Spanish language.
*
*/
FlipClock.Lang.Spanish = {
'years' : 'Años',
'months' : 'Meses',
'days' : 'DÍas',
'hours' : 'Horas',
'minutes' : 'Minutos',
'seconds' : 'Segundo'
};
/* Create various aliases for convenience */
FlipClock.Lang['es'] = FlipClock.Lang.Spanish;
FlipClock.Lang['es-es'] = FlipClock.Lang.Spanish;
FlipClock.Lang['spanish'] = FlipClock.Lang.Spanish;
}(jQuery));
(function($) {
/**
* FlipClock Finnish Language Pack
*
* This class will used to translate tokens into the Finnish language.
*
*/
FlipClock.Lang.Finnish = {
'years' : 'Vuotta',
'months' : 'Kuukautta',
'days' : 'Päivää',
'hours' : 'Tuntia',
'minutes' : 'Minuuttia',
'seconds' : 'Sekuntia'
};
/* Create various aliases for convenience */
FlipClock.Lang['fi'] = FlipClock.Lang.Finnish;
FlipClock.Lang['fi-fi'] = FlipClock.Lang.Finnish;
FlipClock.Lang['finnish'] = FlipClock.Lang.Finnish;
}(jQuery));
(function($) {
/**
* FlipClock Canadian French Language Pack
*
* This class will used to translate tokens into the Canadian French language.
*
*/
FlipClock.Lang.French = {
'years' : 'Ans',
'months' : 'Mois',
'days' : 'Jours',
'hours' : 'Heures',
'minutes' : 'Minutes',
'seconds' : 'Secondes'
};
/* Create various aliases for convenience */
FlipClock.Lang['fr'] = FlipClock.Lang.French;
FlipClock.Lang['fr-ca'] = FlipClock.Lang.French;
FlipClock.Lang['french'] = FlipClock.Lang.French;
}(jQuery));
(function($) {
/**
* FlipClock Italian Language Pack
*
* This class will used to translate tokens into the Italian language.
*
*/
FlipClock.Lang.Italian = {
'years' : 'Anni',
'months' : 'Mesi',
'days' : 'Giorni',
'hours' : 'Ore',
'minutes' : 'Minuti',
'seconds' : 'Secondi'
};
/* Create various aliases for convenience */
FlipClock.Lang['it'] = FlipClock.Lang.Italian;
FlipClock.Lang['it-it'] = FlipClock.Lang.Italian;
FlipClock.Lang['italian'] = FlipClock.Lang.Italian;
}(jQuery));
(function($) {
/**
* FlipClock Latvian Language Pack
*
* This class will used to translate tokens into the Latvian language.
*
*/
FlipClock.Lang.Latvian = {
'years' : 'Gadi',
'months' : 'Meneši',
'days' : 'Dienas',
'hours' : 'Stundas',
'minutes' : 'Minutes',
'seconds' : 'Sekundes'
};
/* Create various aliases for convenience */
FlipClock.Lang['lv'] = FlipClock.Lang.Latvian;
FlipClock.Lang['lv-lv'] = FlipClock.Lang.Latvian;
FlipClock.Lang['latvian'] = FlipClock.Lang.Latvian;
}(jQuery));
(function($) {
/**
* FlipClock Dutch Language Pack
*
* This class will used to translate tokens into the Dutch language.
*/
FlipClock.Lang.Dutch = {
'years' : 'Jaren',
'months' : 'Maanden',
'days' : 'Dagen',
'hours' : 'Uren',
'minutes' : 'Minuten',
'seconds' : 'Seconden'
};
/* Create various aliases for convenience */
FlipClock.Lang['nl'] = FlipClock.Lang.Dutch;
FlipClock.Lang['nl-be'] = FlipClock.Lang.Dutch;
FlipClock.Lang['dutch'] = FlipClock.Lang.Dutch;
}(jQuery));
(function($) {
/**
* FlipClock Norwegian-Bokmål Language Pack
*
* This class will used to translate tokens into the Norwegian language.
*
*/
FlipClock.Lang.Norwegian = {
'years' : 'År',
'months' : 'Måneder',
'days' : 'Dager',
'hours' : 'Timer',
'minutes' : 'Minutter',
'seconds' : 'Sekunder'
};
/* Create various aliases for convenience */
FlipClock.Lang['no'] = FlipClock.Lang.Norwegian;
FlipClock.Lang['nb'] = FlipClock.Lang.Norwegian;
FlipClock.Lang['no-nb'] = FlipClock.Lang.Norwegian;
FlipClock.Lang['norwegian'] = FlipClock.Lang.Norwegian;
}(jQuery));
(function($) {
/**
* FlipClock Portuguese Language Pack
*
* This class will used to translate tokens into the Portuguese language.
*
*/
FlipClock.Lang.Portuguese = {
'years' : 'Anos',
'months' : 'Meses',
'days' : 'Dias',
'hours' : 'Horas',
'minutes' : 'Minutos',
'seconds' : 'Segundos'
};
/* Create various aliases for convenience */
FlipClock.Lang['pt'] = FlipClock.Lang.Portuguese;
FlipClock.Lang['pt-br'] = FlipClock.Lang.Portuguese;
FlipClock.Lang['portuguese'] = FlipClock.Lang.Portuguese;
}(jQuery));
(function($) {
/**
* FlipClock Russian Language Pack
*
* This class will used to translate tokens into the Russian language.
*
*/
FlipClock.Lang.Russian = {
'years' : '???',
'months' : '???????',
'days' : '????',
'hours' : '?????',
'minutes' : '?????',
'seconds' : '??????'
};
/* Create various aliases for convenience */
FlipClock.Lang['ru'] = FlipClock.Lang.Russian;
FlipClock.Lang['ru-ru'] = FlipClock.Lang.Russian;
FlipClock.Lang['russian'] = FlipClock.Lang.Russian;
}(jQuery));
(function($) {
/**
* FlipClock Swedish Language Pack
*
* This class will used to translate tokens into the Swedish language.
*
*/
FlipClock.Lang.Swedish = {
'years' : 'År',
'months' : 'Månader',
'days' : 'Dagar',
'hours' : 'Timmar',
'minutes' : 'Minuter',
'seconds' : 'Sekunder'
};
/* Create various aliases for convenience */
FlipClock.Lang['sv'] = FlipClock.Lang.Swedish;
FlipClock.Lang['sv-se'] = FlipClock.Lang.Swedish;
FlipClock.Lang['swedish'] = FlipClock.Lang.Swedish;
}(jQuery));
Also see: Tab Triggers