@plasma-platform/clock-timer
Version:
Counter for promotions
175 lines (174 loc) • 11.8 kB
JavaScript
;Object.defineProperty(exports,'__esModule',{value:true});var runtime_es=require('./runtime.es-3e5eb61d.js'),index=require('./index-9ec197f3.js');function template(locals) {var pug_html = "", pug_interp;var pug_debug_filename, pug_debug_line;try {var pug_debug_sources = {};
;var locals_for_with = (locals || {});(function (labels, styles, time, timerFace, timerId, timerName) {
if (timerFace === 'daily' || timerFace === 'hourly') {
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer], [true]), false, true)) + "\u003E";
if (!(timerFace !== 'daily')) {
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__fragment], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__valueWrapper], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceTop], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cspan" + (runtime_es.p.attr("class", runtime_es.p.classes([`${styles.TMClockTimer__value} ${timerName + '_days_' + timerId}`], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = time ? time.days : null) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceBottom], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__label], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = labels.days) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
}
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__fragment], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__valueWrapper], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceTop], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cspan" + (runtime_es.p.attr("class", runtime_es.p.classes([`${styles.TMClockTimer__value} ${timerName + '_hours_' + timerId}`], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = time ? time.hours : null) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceBottom], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__label], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = labels.hours) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__fragment], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__valueWrapper], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceTop], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cspan" + (runtime_es.p.attr("class", runtime_es.p.classes([`${styles.TMClockTimer__value} ${timerName + '_minutes_' + timerId}`], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = time ? time.minutes : null) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceBottom], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__label], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = labels.minutes) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__fragment], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__valueWrapper], [true]), false, true)) + "\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceTop], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cspan" + (runtime_es.p.attr("class", runtime_es.p.classes([`${styles.TMClockTimer__value} ${timerName + '_seconds_' + timerId}`], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = time ? time.seconds : null) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__clockFaceBottom], [true]), false, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
pug_html = pug_html + "\u003Cdiv" + (runtime_es.p.attr("class", runtime_es.p.classes([styles.TMClockTimer__label], [true]), false, true)) + "\u003E";
pug_html = pug_html + (runtime_es.p.escape(null == (pug_interp = labels.seconds) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
}}.call(this,"labels" in locals_for_with?locals_for_with.labels:typeof labels!=="undefined"?labels:undefined,"styles" in locals_for_with?locals_for_with.styles:typeof styles!=="undefined"?styles:undefined,"time" in locals_for_with?locals_for_with.time:typeof time!=="undefined"?time:undefined,"timerFace" in locals_for_with?locals_for_with.timerFace:typeof timerFace!=="undefined"?timerFace:undefined,"timerId" in locals_for_with?locals_for_with.timerId:typeof timerId!=="undefined"?timerId:undefined,"timerName" in locals_for_with?locals_for_with.timerName:typeof timerName!=="undefined"?timerName:undefined));} catch (err) {runtime_es.p.rethrow(err, pug_debug_filename, pug_debug_line, pug_debug_sources[pug_debug_filename]);}return pug_html;}var styles$1 = {"PlasmaPromotion__timerWrapper":"CNT1A_PlasmaPromotion__timerWrapper__zrNZc","TMClockTimer":"CNT1A_TMClockTimer__1hN-w","TMClockTimer__fragment":"CNT1A_TMClockTimer__fragment__bLkkN","TMClockTimer__valueWrapper":"CNT1A_TMClockTimer__valueWrapper__EJ2Fq","TMClockTimer__clockFaceTop":"CNT1A_TMClockTimer__clockFaceTop__eG7Ux","TMClockTimer__clockFaceBottom":"CNT1A_TMClockTimer__clockFaceBottom__Z0n31","TMClockTimer__value":"CNT1A_TMClockTimer__value__XzQQ6","TMClockTimer__label":"CNT1A_TMClockTimer__label__pPl94","TMFadeIn":"CNT1A_TMFadeIn__QpdJ8","TMFadeOut":"CNT1A_TMFadeOut__KzPDO","TMFadeInScaleIn":"CNT1A_TMFadeInScaleIn__Q7X47","TMFadeOutScaleOut":"CNT1A_TMFadeOutScaleOut__5-1yk","TMShake":"CNT1A_TMShake__Oxr3Q"};/**
* @namespace ClockTimer
* @description Creates CNT1A promotion timer
* @class
* @exports
*/
class CNT1A {
/**
* @method constructor
* @memberOf ClockTimer
* @description CNT1A instance constructor
* @param {string} wrapper - css class identifier for clock-timer
* @public
*/
constructor(_wrapper) {
/**
* Init
* @description Initializes the timer
* @param {Object} args
* @param {string} args.locale - timer locale
* @param {number} [args.count] - Quantity of ticks for 'counter' timerFace type.
* @param {string} args.timerFace - Timer type (daily | hourly | counter). 'daily' by default
* @param {string} args.timerName - Unique name for the timer
* @param {number} [args.startTimeStamp] - Timer start date
* @param {number} args.endTimeStamp - Timer end date
* @param {string} args.direction - Timer count direction ('decrement' | 'increment') // TODO: implement direction behaviour
*/
runtime_es._(this, "init", args => {
if (!this.timerWrapper) {
return false;
}
const currentDate = Date.now();
const {
locale,
timerFace,
timerName,
endTimeStamp,
startTimeStamp,
count
} = args;
if (!endTimeStamp || currentDate > endTimeStamp || currentDate < startTimeStamp) {
return false;
}
const timerId = Math.floor(Date.now() * Math.random());
const timer = new runtime_es.T({
callbacks: {
beforeStart: timeBeforeStart => {
this.time = timeBeforeStart;
this.timerName = timerName;
this.html = template({
labels: index.l[locale] || index.l.en,
timerFace: timerFace || 'daily',
time: timeBeforeStart,
timerId,
styles: styles$1,
timerName
});
},
afterStart: () => {
this.timerWrapper.forEach(wrapper => {
runtime_es.a.renderHtml(wrapper, this.html);
});
},
beforeTick: () => {},
afterTick: timeAfterTick => {
const changedTime = this.getChangedValues(timeAfterTick);
this.time = {
...this.time,
...changedTime
};
this.updateTimer(changedTime, timerId);
}
},
endTimeStamp,
startTimeStamp,
count,
timerFace
});
// stopTimer function to be passed to class instance
this.stopTimer = timer.stop;
timer.start();
return true;
});
/**
* Update Timer
* @description updates timer value(s)
* @param {Object} changedTime - timer changed values
* @param {number} timerId - generated id to distinguish which timer to update
* @returns {boolean}
*/
runtime_es._(this, "updateTimer", (changedTime, timerId) => {
if (Object.keys(changedTime).length) {
const keys = Object.keys(changedTime);
const values = Object.values(changedTime);
const elements = keys.map(val => {
return runtime_es.a.getAll(".".concat(this.timerName, "_").concat(val, "_").concat(timerId));
});
if (elements && elements.length) {
for (let i = 0; i <= elements.length; i += 1) {
if (elements[i] && elements[i].length) {
for (let j = 0; j <= elements[i].length; j += 1) {
if (elements[i][j] && elements[i][j] instanceof HTMLElement) {
elements[i][j].innerText = values[i];
}
}
}
}
}
}
return false;
});
/**
* Get changed values
* @description Compares new and old date and decides which values to change
* @param {Object} newTime - new time object
* @returns {Object} - Values to be changed
*/
runtime_es._(this, "getChangedValues", newTime => {
const oldTime = {
...this.time
};
const changedTime = {};
Object.keys(oldTime).forEach(val => {
if (oldTime[val] !== newTime[val]) {
changedTime[val] = newTime[val];
}
});
return changedTime;
});
this.timerWrapper = runtime_es.a.getAll(_wrapper);
this.html = '';
this.time = {};
this.timerName = '';
this.stopTimer = null;
}
}exports.default=CNT1A;