plasma-banner-scripts
Version:
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
233 lines (190 loc) • 7.45 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: initiators/flipclock/extension/faces.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: initiators/flipclock/extension/faces.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* @namespace Initiators/FlipClock/Faces
* @description FlipClock.js has a fully extendible API to create any clock face you need.
* More clock faces will be added over time, so be sure to fork the code and make a pull request
* if you want to see your clock face appear in the core library.
*/
/**
* @memberof Initiators/FlipClock/Faces
* @function numberize
* @description Formats any array of numbers into a valid array of numbers
* @return {Array} current time for Daily face
*/
function numberize(obj) {
const data = [];
obj.forEach((value) => {
data.push(value.toString().length === 1 ? `0${value}` : value.toString());
});
if (data.length > this.minimumDigits) {
this.minimumDigits = data.length;
}
if (this.minimumDigits > data.length) {
for (let x = data.length; x < this.minimumDigits; x += 1) {
data.unshift('0');
}
}
return data;
}
/**
* @memberof Initiators/FlipClock/Faces
* @function getPlasmaHourlyLabels
* @description Generate array with translate labels for Hourly face
* @return {Array} translate labels for Hourly face
*/
function getPlasmaHourlyLabels() {
return [
this.lang.hours,
this.lang.minutes,
this.lang.seconds,
];
}
/**
* @memberof Initiators/FlipClock/Faces
* @function getPlasmaHourlyCounter
* @description Generate array with current time for Hourly face
* @return {Array} current time for Hourly face
*/
function getPlasmaHourlyCounter() {
return numberize.call(this, [
this.time.getHours(),
this.time.getMinutes(true),
this.time.getSeconds(true),
]);
}
/**
* @memberof Initiators/FlipClock/Faces
* @function getPlasmaDailyLabels
* @description Generate array with translate labels for Daily face
* @return {Array} translate labels for Daily face
*/
function getPlasmaDailyLabels() {
return [
this.lang.days,
this.lang.hours,
this.lang.minutes,
this.lang.seconds,
];
}
/**
* @memberof Initiators/FlipClock/Faces
* @function getPlasmaHourlyCounter
* @description Generate array with current time for Daily face
* @return {Array} current time for Daily face
*/
function getPlasmaDailyCounter() {
return numberize.call(this, [
this.time.getDays(),
this.time.getHours(true),
this.time.getMinutes(true),
this.time.getSeconds(true),
]);
}
/**
* @memberof Initiators/FlipClock/Faces
* @exports DailyCounterFace
* @description Transform default counter to Plasma standard counter with day counter
* @member {Object} DailyCounterFace
*/
const DailyCounterFace = {
constructor(factory, options) {
this.options = options;
this.options.minimumDigits = 4;
this.base(factory, this.options);
},
build(excludeHours, time) {
const labels = getPlasmaDailyLabels.call(this.factory);
const newTime = time || getPlasmaDailyCounter.call(this.factory);
newTime.forEach((digit) => {
this.createList(digit);
});
this.lists.forEach((el, i) => {
const { $el } = el;
const elSpan = document.createElement('span');
elSpan.classList.add('flip-clock-label');
elSpan.innerText = labels[i];
const cover = document.createElement('div');
cover.classList.add('flip-wrapper');
$el.parentNode.insertBefore(cover, $el);
cover.appendChild($el);
cover.appendChild(elSpan);
});
this.base();
},
flip(time, doNotAddPlayClass) {
const newTime = time || getPlasmaDailyCounter.call(this.factory);
this.autoIncrement();
this.base(newTime, doNotAddPlayClass);
},
};
/**
* @memberof Initiators/FlipClock/Faces
* @exports HourlyCounterFace
* @description Transform default counter to Plasma standard counter without day counter
* @member {Object} HourlyCounterFace
*/
const HourlyCounterFace = {
constructor(factory, options) {
this.options = options;
this.options.minimumDigits = 3;
this.base(factory, this.options);
},
build(excludeHours, time) {
const labels = getPlasmaHourlyLabels.call(this.factory);
const newTime = time || getPlasmaHourlyCounter.apply(this.factory);
newTime.forEach((digit) => {
this.createList(digit);
});
this.lists.forEach((el, i) => {
const { $el } = el;
const elSpan = document.createElement('span');
elSpan.classList.add('flip-clock-label');
elSpan.innerText = labels[i];
const cover = document.createElement('div');
cover.classList.add('flip-wrapper');
$el.parentNode.insertBefore(cover, $el);
cover.appendChild($el);
cover.appendChild(elSpan);
});
this.base();
},
flip(time, doNotAddPlayClass) {
const newTime = time || getPlasmaHourlyCounter.apply(this.factory);
this.autoIncrement();
this.base(newTime, doNotAddPlayClass);
},
};
export { DailyCounterFace };
export { HourlyCounterFace };
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Initiators.Promotion.html">Promotion</a></li><li><a href="Initiators_Analytics.TagManager.html">TagManager</a></li><li><a href="Initiators_FlipClock.FlipClockInitiator.html">FlipClockInitiator</a></li><li><a href="Initiators_UI.UiBanner.html">UiBanner</a></li><li><a href="Initiators_UI.UiPopup.html">UiPopup</a></li><li><a href="Utils.Parameters.html">Parameters</a></li></ul><h3>Namespaces</h3><ul><li><a href="Initiators.html">Initiators</a></li><li><a href="Initiators_Analytics.html">Initiators/Analytics</a></li><li><a href="Initiators_FlipClock.html">Initiators/FlipClock</a></li><li><a href="Initiators_FlipClock_Faces.html">Initiators/FlipClock/Faces</a></li><li><a href="Initiators_FlipClock_Language.html">Initiators/FlipClock/Language</a></li><li><a href="Initiators_UI.html">Initiators/UI</a></li><li><a href="Main.html">Main</a></li><li><a href="Utils.html">Utils</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addClass">addClass</a></li><li><a href="global.html#attr">attr</a></li><li><a href="global.html#data">data</a></li><li><a href="global.html#dispatch">dispatch</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getAll">getAll</a></li><li><a href="global.html#hasClass">hasClass</a></li><li><a href="global.html#prepend">prepend</a></li><li><a href="global.html#removeAttribute">removeAttribute</a></li><li><a href="global.html#removeClass">removeClass</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Jun 18 2019 11:40:32 GMT+0300 (Eastern European Summer Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>