| 1 |
"use strict"; |
| 2 |
|
| 3 |
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } |
| 4 |
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } |
| 5 |
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } } |
| 6 |
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } |
| 7 |
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } |
| 8 |
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } |
| 9 |
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } |
| 10 |
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } |
| 11 |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } |
| 12 |
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } |
| 13 |
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } |
| 14 |
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); } |
| 15 |
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } |
| 16 |
; |
| 17 |
(function ($, window, document, undefined) { |
| 18 |
'use strict'; |
| 19 |
|
| 20 |
$(document).ready(function ($) { |
| 21 |
new CountDownTimer($); |
| 22 |
}); |
| 23 |
})(jQuery, window, document); |
| 24 |
var defaultStyles = { |
| 25 |
classic: { |
| 26 |
labelsColor: '', |
| 27 |
digitsColor: '#444444', |
| 28 |
digitsBackground: '', |
| 29 |
borderColor: '', |
| 30 |
fontSizeDigits: 16, |
| 31 |
fontSizeLabels: 16 |
| 32 |
}, |
| 33 |
progress: { |
| 34 |
labelsColor: '', |
| 35 |
digitsColor: '#3858E9', |
| 36 |
digitsBackground: '#3858E9', |
| 37 |
borderColor: '', |
| 38 |
progressColor: '#3858E9', |
| 39 |
fontSizeDigits: 16, |
| 40 |
fontSizeLabels: 16 |
| 41 |
}, |
| 42 |
circles: { |
| 43 |
labelsColor: '#7C7C7C', |
| 44 |
digitsColor: '#000', |
| 45 |
digitsBackground: '#fff', |
| 46 |
borderColor: '#444444', |
| 47 |
progressColor: '#3858E9', |
| 48 |
fontSizeDigits: 22, |
| 49 |
fontSizeLabels: 10, |
| 50 |
width: 80, |
| 51 |
height: 80 |
| 52 |
}, |
| 53 |
squares: { |
| 54 |
labelsColor: '#180B40', |
| 55 |
digitsColor: '#000', |
| 56 |
digitsBackground: '#fff', |
| 57 |
borderColor: '#000000', |
| 58 |
fontSizeDigits: 28, |
| 59 |
fontSizeLabels: 12, |
| 60 |
width: 65, |
| 61 |
height: 65 |
| 62 |
}, |
| 63 |
minimalist: { |
| 64 |
labelsColor: '#7C7C7C', |
| 65 |
digitsColor: '#000000', |
| 66 |
digitsBackground: '#F6F7F7', |
| 67 |
borderColor: '', |
| 68 |
fontSizeDigits: 40, |
| 69 |
fontSizeLabels: 12, |
| 70 |
width: 80, |
| 71 |
height: 80 |
| 72 |
}, |
| 73 |
cards: { |
| 74 |
labelsColor: '#3858E9', |
| 75 |
digitsColor: '#3858E9', |
| 76 |
digitsBackground: '#E0E2EC', |
| 77 |
borderColor: '#000000', |
| 78 |
fontSizeDigits: 40, |
| 79 |
fontSizeLabels: 12, |
| 80 |
width: 80, |
| 81 |
height: 80 |
| 82 |
}, |
| 83 |
modern: { |
| 84 |
labelsColor: '#180B40', |
| 85 |
digitsColor: '#fff', |
| 86 |
digitsBackground: '#180B40', |
| 87 |
borderColor: '', |
| 88 |
fontSizeDigits: 36, |
| 89 |
fontSizeLabels: 12, |
| 90 |
width: 80, |
| 91 |
height: 95 |
| 92 |
} |
| 93 |
}; |
| 94 |
var CountDownTimer = /*#__PURE__*/function () { |
| 95 |
function CountDownTimer($) { |
| 96 |
var _merchant; |
| 97 |
_classCallCheck(this, CountDownTimer); |
| 98 |
this.countDownWrapper = $('.merchant-countdown-timer'); |
| 99 |
this.countDownTimer = this.countDownWrapper.find('.merchant-countdown-timer-countdown'); |
| 100 |
if (!this.countDownTimer.length) { |
| 101 |
return; |
| 102 |
} |
| 103 |
this.total; |
| 104 |
this.days; |
| 105 |
this.hours; |
| 106 |
this.minutes; |
| 107 |
this.seconds; |
| 108 |
this.currentTimeInitial = this.getCurrentTime(); |
| 109 |
this.theme = this.countDownWrapper.attr('data-theme'); |
| 110 |
this.timerType = this.countDownWrapper.attr('data-countdown-type'); |
| 111 |
this.startDate = new Date(this.countDownWrapper.attr('data-start-date') || null); |
| 112 |
this.endDate = new Date(this.countDownWrapper.attr('data-end-date') || null); |
| 113 |
this.startTime = this.startDate.getTime(); |
| 114 |
this.endTime = this.endDate.getTime(); |
| 115 |
this.minExpiration = parseInt(this.countDownWrapper.attr('data-min-expiration')); |
| 116 |
this.maxExpiration = parseInt(this.countDownWrapper.attr('data-max-expiration')); |
| 117 |
this.offPeriod = parseInt(this.countDownWrapper.attr('data-off-period')); |
| 118 |
this.timerCookie = 'merchant_countdown_timer'; |
| 119 |
this.timerOffPeriodCookie = 'merchant_countdown_timer_off_period'; |
| 120 |
this.variationsDates = this.countDownWrapper.attr('data-variations-dates'); |
| 121 |
this.variationsDates = this.variationsDates ? JSON.parse(this.variationsDates) : []; |
| 122 |
this.flipTimerKeys = { |
| 123 |
days: { |
| 124 |
value: '', |
| 125 |
currentValue: '' |
| 126 |
}, |
| 127 |
hours: { |
| 128 |
value: '', |
| 129 |
currentValue: '' |
| 130 |
}, |
| 131 |
minutes: { |
| 132 |
value: '', |
| 133 |
currentValue: '' |
| 134 |
}, |
| 135 |
seconds: { |
| 136 |
value: '', |
| 137 |
currentValue: '' |
| 138 |
} |
| 139 |
}; |
| 140 |
|
| 141 |
// Clear cookie page load on admin |
| 142 |
if ((_merchant = merchant) !== null && _merchant !== void 0 && _merchant.is_admin) { |
| 143 |
this.deleteCookie(this.timerCookie); |
| 144 |
this.deleteCookie(this.timerOffPeriodCookie); |
| 145 |
} |
| 146 |
this.init(); |
| 147 |
} |
| 148 |
_createClass(CountDownTimer, [{ |
| 149 |
key: "init", |
| 150 |
value: function init() { |
| 151 |
this.buildTimerMarkup(); |
| 152 |
this.setTimerData(); |
| 153 |
this.startTimer(); |
| 154 |
this.events(); |
| 155 |
} |
| 156 |
}, { |
| 157 |
key: "events", |
| 158 |
value: function events() { |
| 159 |
this.updateVariationTimer(); |
| 160 |
this.updateAdminPreview(); |
| 161 |
} |
| 162 |
}, { |
| 163 |
key: "buildTimerMarkup", |
| 164 |
value: function buildTimerMarkup() { |
| 165 |
var countDownEl; |
| 166 |
if (['classic', 'progress'].includes(this.theme)) { |
| 167 |
countDownEl = "<span></span>"; |
| 168 |
} else if (this.theme === 'circles') { |
| 169 |
countDownEl = "\n <div class=\"cd-days\">\n <svg class=\"cd-svg\">\n <circle class=\"circle-static\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n <circle class=\"circle-dynamic\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n </svg>\n <div>\n <span class=\"cd-value\">00</span>\n <span class=\"cd-label\">Days</span>\n </div>\n </div>\n <div class=\"cd-hours\">\n <svg class=\"cd-svg\">\n <circle class=\"circle-static\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n <circle class=\"circle-dynamic\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n </svg>\n <div>\n <span class=\"cd-value\">00</span>\n <span class=\"cd-label\">Hours</span>\n </div>\n </div>\n <div class=\"cd-minutes\">\n <svg class=\"cd-svg\">\n <circle class=\"circle-static\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n <circle class=\"circle-dynamic\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n </svg>\n <div>\n <span class=\"cd-value\">00</span>\n <span class=\"cd-label\">Minutes</span>\n </div>\n </div>\n <div class=\"cd-seconds\">\n <svg class=\"cd-svg\">\n <circle class=\"circle-static\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n <circle class=\"circle-dynamic\" r=\"47%\" cx=\"50%\" cy=\"50%\"></circle>\n </svg>\n <div>\n <span class=\"cd-value\">00</span>\n <span class=\"cd-label\">Seconds</span>\n </div>\n </div>\n "; |
| 170 |
} else if (this.theme === 'modern') { |
| 171 |
countDownEl = "\n <div class=\"cd-flip\">\n <div class=\"cd-flip-card cd-days\">\n <div class=\"cd-flip-card-wrapper\">\n <div class=\"cd-flip-card-inner\">\n <span class=\"cd-flip-card-top cd-value\">00</span>\n <span class=\"cd-flip-card-back\" data-time=\"00\">\n <span class=\"cd-flip-card-bottom\" data-time=\"00\"></span>\n </span>\n </div>\n </div>\n <span class=\"cd-flip-clock-label cd-label\">Days</span>\n </div>\n\n <div class=\"cd-flip-card cd-hours\">\n <div class=\"cd-flip-card-wrapper\">\n <div class=\"cd-flip-card-inner\">\n <span class=\"cd-flip-card-top cd-value\">00</span>\n <span class=\"cd-flip-card-back\" data-time=\"00\">\n <span class=\"cd-flip-card-bottom\" data-time=\"00\"></span>\n </span>\n </div>\n </div>\n <span class=\"cd-flip-clock-label cd-label\">Hours</span>\n </div>\n\n <div class=\"cd-flip-card cd-minutes\">\n <div class=\"cd-flip-card-wrapper\">\n <div class=\"cd-flip-card-inner\">\n <span class=\"cd-flip-card-top cd-value\">00</span>\n <span class=\"cd-flip-card-back\" data-time=\"00\">\n <span class=\"cd-flip-card-bottom\" data-time=\"00\"></span>\n </span>\n </div>\n </div>\n <span class=\"cd-flip-clock-label cd-label\">Minutes</span>\n </div>\n \n <div class=\"cd-flip-card cd-seconds\">\n <div class=\"cd-flip-card-wrapper\">\n <div class=\"cd-flip-card-inner\">\n <span class=\"cd-flip-card-top cd-value\">00</span>\n <span class=\"cd-flip-card-back\" data-time=\"00\">\n <span class=\"cd-flip-card-bottom\" data-time=\"00\"></span>\n </span>\n </div>\n </div>\n <span class=\"cd-flip-clock-label cd-label\">Seconds</span>\n </div>\n\n </div>\n "; |
| 172 |
} else { |
| 173 |
countDownEl = "\n <div class=\"cd-days\">\n <span class=\"cd-value\" data-time=\"00\">00</span>\n <span class=\"cd-label\">Days</span>\n </div>\n <div class=\"cd-hours\">\n <span class=\"cd-value\" data-time=\"00\">00</span>\n <span class=\"cd-label\" data-time=\"\">Hours</span>\n </div>\n <div class=\"cd-minutes\">\n <span class=\"cd-value\" data-time=\"00\">00</span>\n <span class=\"cd-label\">Minutes</span>\n </div>\n <div class=\"cd-seconds\">\n <span class=\"cd-value\" data-time=\"00\">00</span>\n <span class=\"cd-label\">Seconds</span>\n </div>\n "; |
| 174 |
} |
| 175 |
this.countDownWrapper.find('.cd-progress').remove(); |
| 176 |
|
| 177 |
// Add the timer |
| 178 |
this.countDownTimer.html(countDownEl); |
| 179 |
if (this.theme === 'progress') { |
| 180 |
jQuery('<progress class="cd-progress" value="0" max="100"></progress>').insertBefore(this.countDownTimer); |
| 181 |
} |
| 182 |
} |
| 183 |
}, { |
| 184 |
key: "setTimerData", |
| 185 |
value: function setTimerData() { |
| 186 |
if (this.timerType === 'sale-dates') { |
| 187 |
this.endTime = this.endDate.getTime(); |
| 188 |
} else if (this.timerType === 'evergreen') { |
| 189 |
// Get data from cookie |
| 190 |
var cookieTimer = this.getCookie(this.timerCookie); |
| 191 |
var cookieOffPeriod = this.getCookie(this.timerOffPeriodCookie); |
| 192 |
var randomTimeInSeconds = this.getRandomValueForCountDown(this.minExpiration, this.maxExpiration); |
| 193 |
var timeInMilliseconds = randomTimeInSeconds * 1000; |
| 194 |
var futureTime = this.getCurrentTime() + timeInMilliseconds; |
| 195 |
var futureDate = new Date(futureTime); |
| 196 |
var offPeriodMilliseconds = futureTime + this.offPeriod * 1000; |
| 197 |
|
| 198 |
// If off-period found in cookie but not the timer, means countdown was finished and now it's off-period time. |
| 199 |
// So don't start the countdown now. |
| 200 |
var startCountDown = !(!cookieTimer && cookieOffPeriod); |
| 201 |
|
| 202 |
// If no countdown started yet or off-period is finishes, start the countdown |
| 203 |
if (startCountDown) { |
| 204 |
if (!cookieTimer) { |
| 205 |
this.setCookie(this.timerCookie, futureDate, futureTime); |
| 206 |
this.setCookie(this.timerOffPeriodCookie, this.offPeriod, offPeriodMilliseconds); |
| 207 |
this.endTime = futureDate.getTime(); |
| 208 |
} else { |
| 209 |
// If cookie found |
| 210 |
this.endTime = new Date(cookieTimer).getTime(); |
| 211 |
if (!cookieOffPeriod) { |
| 212 |
this.setCookie(this.timerOffPeriodCookie, this.offPeriod, offPeriodMilliseconds); |
| 213 |
} |
| 214 |
} |
| 215 |
} else { |
| 216 |
this.endTime = 0; |
| 217 |
this.displayTimer(0); |
| 218 |
} |
| 219 |
} |
| 220 |
} |
| 221 |
}, { |
| 222 |
key: "startTimer", |
| 223 |
value: function startTimer() { |
| 224 |
var remaining = this.getRemainingTime(); |
| 225 |
if (remaining) { |
| 226 |
this.displayTimer(remaining, this.timerEnd); |
| 227 |
} else { |
| 228 |
this.timerEnd(); |
| 229 |
} |
| 230 |
if (this.theme === 'circles') { |
| 231 |
this.progressCircles(); |
| 232 |
} else if (this.theme === 'progress') { |
| 233 |
this.progressBar(); |
| 234 |
} |
| 235 |
} |
| 236 |
}, { |
| 237 |
key: "displayTimer", |
| 238 |
value: function displayTimer(timeLeftInMilliseconds, timerEndCallback) { |
| 239 |
timerEndCallback = timerEndCallback || function () {}; |
| 240 |
var classicOrProgress = ['classic', 'progress'].includes(this.theme); |
| 241 |
this.days = Math.floor(timeLeftInMilliseconds / (1000 * 60 * 60 * 24)); |
| 242 |
this.days = classicOrProgress ? this.days : this.days.toString().padStart(2, '0'); |
| 243 |
this.hours = Math.floor(timeLeftInMilliseconds % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)).toString().padStart(2, '0'); |
| 244 |
this.minutes = Math.floor(timeLeftInMilliseconds % (1000 * 60 * 60) / (1000 * 60)).toString().padStart(2, '0'); |
| 245 |
this.seconds = Math.floor(timeLeftInMilliseconds % (1000 * 60) / 1000).toString().padStart(2, '0'); |
| 246 |
if (classicOrProgress) { |
| 247 |
this.countDownTimer.find('span').html("".concat(this.days, " <span>days ").concat(this.theme === 'progress' ? ' : ' : '', " </span> ").concat(this.hours, ":").concat(this.minutes, ":").concat(this.seconds)); |
| 248 |
} else if (this.theme === 'modern') { |
| 249 |
this.flipTimer(); |
| 250 |
} else { |
| 251 |
this.countDownTimer.find('.cd-days .cd-value').html(this.days).attr('data-time', this.days); |
| 252 |
this.countDownTimer.find('.cd-hours .cd-value').html(this.hours).attr('data-time', this.hours); |
| 253 |
this.countDownTimer.find('.cd-minutes .cd-value').html(this.minutes).attr('data-time', this.minutes); |
| 254 |
this.countDownTimer.find('.cd-seconds .cd-value').html(this.seconds).attr('data-time', this.seconds); |
| 255 |
} |
| 256 |
if (timeLeftInMilliseconds <= 0) { |
| 257 |
timerEndCallback.call(this); |
| 258 |
} else { |
| 259 |
this.countDownWrapper.show(); |
| 260 |
setTimeout(this.startTimer.bind(this), 1000); |
| 261 |
} |
| 262 |
} |
| 263 |
}, { |
| 264 |
key: "timerEnd", |
| 265 |
value: function timerEnd() { |
| 266 |
var _merchant2; |
| 267 |
// Keep showing the timer on admin even if countdown finishes |
| 268 |
(_merchant2 = merchant) !== null && _merchant2 !== void 0 && _merchant2.is_admin ? this.countDownWrapper.show() : this.countDownWrapper.hide(); |
| 269 |
this.displayTimer(0); |
| 270 |
this.deleteCookie(this.timerCookie); |
| 271 |
} |
| 272 |
}, { |
| 273 |
key: "updateVariationTimer", |
| 274 |
value: function updateVariationTimer() { |
| 275 |
if (this.timerType !== 'sale-dates') { |
| 276 |
return; |
| 277 |
} |
| 278 |
var $ = jQuery; |
| 279 |
var self = this; |
| 280 |
$('input[name="variation_id"]').on('change', function () { |
| 281 |
var currentVariationId = parseInt($(this).val()); |
| 282 |
if (currentVariationId && self.variationsDates.length) { |
| 283 |
var currentVariation = self.variationsDates.find(function (date) { |
| 284 |
return parseInt(date === null || date === void 0 ? void 0 : date.id) === currentVariationId; |
| 285 |
}); |
| 286 |
var _ref = currentVariation || {}, |
| 287 |
start = _ref.start, |
| 288 |
end = _ref.end; |
| 289 |
var startDate = _typeof(start) === 'object' ? start === null || start === void 0 ? void 0 : start.date : start; |
| 290 |
var endDate = _typeof(end) === 'object' ? end === null || end === void 0 ? void 0 : end.date : end; |
| 291 |
|
| 292 |
// Update global data |
| 293 |
self.startTime = startDate ? new Date(startDate).getTime() : 0; |
| 294 |
self.endTime = endDate ? new Date(endDate).getTime() : 0; |
| 295 |
self.displayTimer(0); |
| 296 |
self.startTimer(); |
| 297 |
} |
| 298 |
}); |
| 299 |
} |
| 300 |
}, { |
| 301 |
key: "flipTimer", |
| 302 |
value: function flipTimer() { |
| 303 |
var self = this; |
| 304 |
var $flipCards = this.countDownTimer.find('.cd-flip-card'); |
| 305 |
$flipCards.each(function () { |
| 306 |
var $card = jQuery(this); |
| 307 |
var flipKey = ''; |
| 308 |
Object.keys(self.flipTimerKeys).forEach(function (unit) { |
| 309 |
if ($card.hasClass('cd-' + unit)) { |
| 310 |
flipKey = unit; |
| 311 |
return false; |
| 312 |
} |
| 313 |
}); |
| 314 |
var currentValue = self.flipTimerKeys[flipKey].currentValue; |
| 315 |
var newVal = self[flipKey]; |
| 316 |
if (newVal !== currentValue) { |
| 317 |
var top = $card.find('.cd-flip-card-top'); |
| 318 |
var back = $card.find('.cd-flip-card-back'); |
| 319 |
var backBottom = $card.find('.cd-flip-card-back .cd-flip-card-bottom'); |
| 320 |
if (currentValue >= 0) { |
| 321 |
back.attr('data-time', currentValue); |
| 322 |
} |
| 323 |
self.flipTimerKeys[flipKey].currentValue = newVal; |
| 324 |
top.html(newVal); |
| 325 |
backBottom.attr('data-time', newVal); |
| 326 |
$card.removeClass('cd-flipped'); |
| 327 |
void $card[0].offsetWidth; |
| 328 |
$card.addClass('cd-flipped'); |
| 329 |
} |
| 330 |
}); |
| 331 |
} |
| 332 |
}, { |
| 333 |
key: "getCurrentTime", |
| 334 |
value: function getCurrentTime() { |
| 335 |
var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; |
| 336 |
var date = new Date(); |
| 337 |
return time ? date.getTime() : date; |
| 338 |
} |
| 339 |
}, { |
| 340 |
key: "getRemainingTime", |
| 341 |
value: function getRemainingTime() { |
| 342 |
var currentTime = this.getCurrentTime(); |
| 343 |
if (this.startTime > currentTime || this.endTime < currentTime) { |
| 344 |
return 0; |
| 345 |
} |
| 346 |
return Math.max(this.endTime - currentTime, 0); |
| 347 |
} |
| 348 |
}, { |
| 349 |
key: "progressBar", |
| 350 |
value: function progressBar() { |
| 351 |
var currentTime = this.getCurrentTime(); |
| 352 |
|
| 353 |
// Set start time to current time when page loads if not already defined. |
| 354 |
this.startTime = this.startTime || this.currentTimeInitial; |
| 355 |
this.total = this.endTime - this.startTime; |
| 356 |
var passedTime = currentTime - this.startTime; |
| 357 |
var passedTimePercent = passedTime / this.total * 100; |
| 358 |
var timeLeftPercent = 100 - passedTimePercent; |
| 359 |
var $progressBar = this.countDownWrapper.find('.cd-progress'); |
| 360 |
if ($progressBar.length) { |
| 361 |
$progressBar.attr('value', Math.floor(timeLeftPercent)); |
| 362 |
} |
| 363 |
} |
| 364 |
}, { |
| 365 |
key: "progressCircles", |
| 366 |
value: function progressCircles() { |
| 367 |
var circleWidth = parseInt(this.countDownWrapper.find('.merchant-countdown-timer-countdown').css('--merchant-digits-width')); |
| 368 |
var _seconds = 60; |
| 369 |
|
| 370 |
// 3 times circleWidth fits `stroke-dasharray` properly |
| 371 |
var strokeDasharray = parseInt(circleWidth) * 3; |
| 372 |
var getStrokeOffset = function getStrokeOffset(remainingSeconds) { |
| 373 |
var step = strokeDasharray / 60; |
| 374 |
return (_seconds - parseInt(remainingSeconds)) * step; |
| 375 |
}; |
| 376 |
this.countDownTimer.find('.circle-dynamic').css('stroke-dasharray', strokeDasharray); |
| 377 |
var elements = { |
| 378 |
days: { |
| 379 |
$el: this.countDownTimer.find('.cd-days .circle-dynamic'), |
| 380 |
offset: getStrokeOffset(this.days) |
| 381 |
}, |
| 382 |
hours: { |
| 383 |
$el: this.countDownTimer.find('.cd-hours .circle-dynamic'), |
| 384 |
offset: getStrokeOffset(this.hours) |
| 385 |
}, |
| 386 |
minutes: { |
| 387 |
$el: this.countDownTimer.find('.cd-minutes .circle-dynamic'), |
| 388 |
offset: getStrokeOffset(this.minutes) |
| 389 |
}, |
| 390 |
seconds: { |
| 391 |
$el: this.countDownTimer.find('.cd-seconds .circle-dynamic'), |
| 392 |
offset: getStrokeOffset(this.seconds) |
| 393 |
} |
| 394 |
}; |
| 395 |
for (var key in elements) { |
| 396 |
if (Object.hasOwnProperty.call(elements, key)) { |
| 397 |
var _ref2 = elements[key] || {}, |
| 398 |
$el = _ref2.$el, |
| 399 |
offset = _ref2.offset; |
| 400 |
if ($el.length) { |
| 401 |
$el.css('stroke-dashoffset', offset); |
| 402 |
} |
| 403 |
} |
| 404 |
} |
| 405 |
} |
| 406 |
}, { |
| 407 |
key: "setCookie", |
| 408 |
value: function setCookie(name, value, expiration) { |
| 409 |
var date = new Date(expiration); |
| 410 |
var expires = "expires=".concat(date.toUTCString()); |
| 411 |
document.cookie = "".concat(name, "=").concat(value, ";").concat(expires, ";path=/"); |
| 412 |
} |
| 413 |
}, { |
| 414 |
key: "getCookie", |
| 415 |
value: function getCookie(name) { |
| 416 |
var cookies = document.cookie.split(';'); |
| 417 |
var _iterator = _createForOfIteratorHelper(cookies), |
| 418 |
_step; |
| 419 |
try { |
| 420 |
for (_iterator.s(); !(_step = _iterator.n()).done;) { |
| 421 |
var cookie = _step.value; |
| 422 |
var _cookie$trim$split = cookie.trim().split('='), |
| 423 |
_cookie$trim$split2 = _slicedToArray(_cookie$trim$split, 2), |
| 424 |
cookieName = _cookie$trim$split2[0], |
| 425 |
cookieValue = _cookie$trim$split2[1]; |
| 426 |
if (cookieName === name) { |
| 427 |
return decodeURIComponent(cookieValue); |
| 428 |
} |
| 429 |
} |
| 430 |
} catch (err) { |
| 431 |
_iterator.e(err); |
| 432 |
} finally { |
| 433 |
_iterator.f(); |
| 434 |
} |
| 435 |
return null; |
| 436 |
} |
| 437 |
}, { |
| 438 |
key: "deleteCookie", |
| 439 |
value: function deleteCookie(name) { |
| 440 |
document.cookie = "".concat(name, "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"); |
| 441 |
} |
| 442 |
}, { |
| 443 |
key: "getRandomValueForCountDown", |
| 444 |
value: function getRandomValueForCountDown(min, max) { |
| 445 |
return Math.floor(Math.random() * (max - min + 1)) + min; |
| 446 |
} |
| 447 |
|
| 448 |
// Admin preview |
| 449 |
}, { |
| 450 |
key: "updateAdminPreview", |
| 451 |
value: function updateAdminPreview() { |
| 452 |
var self = this; |
| 453 |
var $ = jQuery; |
| 454 |
|
| 455 |
// On save |
| 456 |
$(document).on('save.merchant', function (e, module) { |
| 457 |
if (module === 'countdown-timer') { |
| 458 |
self.deleteCookie(self.timerOffPeriodCookie); |
| 459 |
} |
| 460 |
}); |
| 461 |
|
| 462 |
// On timer type select |
| 463 |
$(document).on('change', '.merchant-field-end_date select', function () { |
| 464 |
self.timerType = $(this).val(); |
| 465 |
self.deleteCookie(self.timerCookie); |
| 466 |
self.deleteCookie(self.timerOffPeriodCookie); |
| 467 |
self.init(); |
| 468 |
}); |
| 469 |
|
| 470 |
// On theme select |
| 471 |
$(document).on('change', '.merchant-field-theme input', function () { |
| 472 |
self.theme = $('.merchant-field-theme input:checked').val(); |
| 473 |
$('.merchant-field-theme input').each(function () { |
| 474 |
self.countDownWrapper.removeClass('merchant-countdown-timer-' + $(this).val()); |
| 475 |
}); |
| 476 |
|
| 477 |
// Add the class and update attr corresponding to the currently selected theme |
| 478 |
self.countDownWrapper.attr('data-theme', self.theme).addClass('merchant-countdown-timer-' + self.theme); |
| 479 |
|
| 480 |
// Re-build the timer |
| 481 |
self.buildTimerMarkup(); |
| 482 |
|
| 483 |
// Change to default styles |
| 484 |
self.updateStyles(); |
| 485 |
}); |
| 486 |
|
| 487 |
// On date select |
| 488 |
$(document).on('change.merchant-datepicker', function (e, date, input) { |
| 489 |
if (!input) { |
| 490 |
return; |
| 491 |
} |
| 492 |
self.displayTimer(0); |
| 493 |
var name = input === null || input === void 0 ? void 0 : input.attr('name'); |
| 494 |
|
| 495 |
// Update timer data |
| 496 |
if (name === 'merchant[sale_start_date]') { |
| 497 |
self.startTime = new Date(date); |
| 498 |
} |
| 499 |
if (name === 'merchant[sale_end_date]') { |
| 500 |
self.endTime = new Date(date); |
| 501 |
} |
| 502 |
|
| 503 |
// Hide |
| 504 |
self.countDownTimer.hide(); |
| 505 |
|
| 506 |
// Start timer |
| 507 |
self.startTimer(); |
| 508 |
|
| 509 |
// Show |
| 510 |
setTimeout(function () { |
| 511 |
return self.countDownTimer.show(); |
| 512 |
}, 500); |
| 513 |
}); |
| 514 |
|
| 515 |
// On evergreen fields change |
| 516 |
var timer = null; |
| 517 |
$(document).on('input', '.merchant-countdown-evergreen-field input', function () { |
| 518 |
self.displayTimer(0); |
| 519 |
clearTimeout(timer); |
| 520 |
timer = setTimeout(function () { |
| 521 |
var minDays = 0; |
| 522 |
var maxDays = 0; |
| 523 |
var minHours = 2; |
| 524 |
var maxHours = 26; |
| 525 |
var minMinutes = 0; |
| 526 |
var maxMinutes = 0; |
| 527 |
self.deleteCookie(self.timerCookie); |
| 528 |
self.deleteCookie(self.timerOffPeriodCookie); |
| 529 |
$('.merchant-countdown-evergreen-field input').each(function () { |
| 530 |
var name = $(this).attr('name'); |
| 531 |
var value = +$(this).val(); |
| 532 |
switch (name) { |
| 533 |
case 'merchant[min_expiration_deadline_days]': |
| 534 |
minDays = value; |
| 535 |
break; |
| 536 |
case 'merchant[max_expiration_deadline_days]': |
| 537 |
maxDays = value; |
| 538 |
break; |
| 539 |
case 'merchant[min_expiration_deadline]': |
| 540 |
minHours = value; |
| 541 |
break; |
| 542 |
case 'merchant[max_expiration_deadline]': |
| 543 |
maxHours = value; |
| 544 |
break; |
| 545 |
case 'merchant[min_expiration_deadline_minutes]': |
| 546 |
minMinutes = value; |
| 547 |
break; |
| 548 |
case 'merchant[max_expiration_deadline_minutes]': |
| 549 |
maxMinutes = value; |
| 550 |
break; |
| 551 |
} |
| 552 |
}); |
| 553 |
self.minExpiration = minDays * 24 * 60 * 60 + minHours * 60 * 60 + minMinutes * 60; |
| 554 |
self.maxExpiration = maxDays * 24 * 60 * 60 + maxHours * 60 * 60 + maxMinutes * 60; |
| 555 |
self.setTimerData(); |
| 556 |
self.startTimer(); |
| 557 |
}, 500); |
| 558 |
}); |
| 559 |
$(document).on('input', '.merchant-field-cool_off_period input', function () { |
| 560 |
self.clearOffPeriodCookie = true; |
| 561 |
}); |
| 562 |
|
| 563 |
// On alignment change |
| 564 |
$(document).on('change', '.merchant-field-sale_ending_alignment select', function () { |
| 565 |
$(this).find('option').each(function () { |
| 566 |
self.countDownWrapper.removeClass('merchant-countdown-timer--' + $(this).val()); |
| 567 |
}); |
| 568 |
self.countDownWrapper.addClass('merchant-countdown-timer--' + $(this).val()); |
| 569 |
}); |
| 570 |
} |
| 571 |
}, { |
| 572 |
key: "updateStyles", |
| 573 |
value: function updateStyles() { |
| 574 |
var $ = jQuery; |
| 575 |
var properties = { |
| 576 |
'digits_font_size': 'fontSizeDigits', |
| 577 |
'labels_font_size': 'fontSizeLabels', |
| 578 |
'labels_color': 'labelsColor', |
| 579 |
'digits_color': 'digitsColor', |
| 580 |
'digits_background': 'digitsBackground', |
| 581 |
'progress_color': 'progressColor', |
| 582 |
'digits_border': 'borderColor', |
| 583 |
'digits_width': 'width', |
| 584 |
'digits_height': 'height' |
| 585 |
}; |
| 586 |
for (var _i2 = 0, _Object$entries = Object.entries(properties); _i2 < _Object$entries.length; _i2++) { |
| 587 |
var _defaultStyles$this$t; |
| 588 |
var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2), |
| 589 |
inputName = _Object$entries$_i[0], |
| 590 |
propertyName = _Object$entries$_i[1]; |
| 591 |
var value = (_defaultStyles$this$t = defaultStyles[this.theme]) === null || _defaultStyles$this$t === void 0 ? void 0 : _defaultStyles$this$t[propertyName]; |
| 592 |
if (value) { |
| 593 |
$("input[name=\"merchant[".concat(inputName, "]\"]")).val(value).attr('value', value).trigger('input').trigger('change'); |
| 594 |
} |
| 595 |
} |
| 596 |
} |
| 597 |
}]); |
| 598 |
return CountDownTimer; |
| 599 |
}(); |
