https://www.thekmall.co.kr/V2_pc/resource/js/flipdown.js

1"use strict";
2
3function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
5function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
7function _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, descriptor.key, descriptor); } }
8
9function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
10
11var FlipDown = function () {
12  function FlipDown(uts) {
13    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "flipdown";
14    var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
15
16    _classCallCheck(this, FlipDown);
17
18    if (typeof uts !== "number") {
19      throw new Error("FlipDown: Constructor expected unix timestamp, got ".concat(_typeof(uts), " instead."));
20    }
21
22    if (_typeof(el) === "object") {
23      opt = el;
24      el = "flipdown";
25    }
26
27    this.version = "0.3.2";
28    this.initialised = false;
29    this.now = this._getTime();
30    this.epoch = uts;
31    this.countdownEnded = false;
32    this.hasEndedCallback = null;
33    this.element = document.getElementById(el);
34    this.rotors = [];
35    this.rotorLeafFront = [];
36    this.rotorLeafRear = [];
37    this.rotorTops = [];
38    this.rotorBottoms = [];
39    this.countdown = null;
40    this.daysRemaining = 0;
41    this.clockValues = {};
42    this.clockStrings = {};
43    this.clockValuesAsString = [];
44    this.prevClockValuesAsString = [];
45    this.opts = this._parseOptions(opt);
46
47    this._setOptions();
48
49    console.log("FlipDown ".concat(this.version, " (Theme: ").concat(this.opts.theme, ")"));
50  }
51
52  _createClass(FlipDown, [{
53    key: "start",
54    value: function start() {
55      if (!this.initialised) this._init();
56      this.countdown = setInterval(this._tick.bind(this), 1000);
57      return this;
58    }
59  }, {
60    key: "ifEnded",
61    value: function ifEnded(cb) {
62      this.hasEndedCallback = function () {
63        cb();
64        this.hasEndedCallback = null;
65      };
66
67      return this;
68    }
69  }, {
70    key: "_getTime",
71    value: function _getTime() {
72      return new Date().getTime() / 1000;
73    }
74  }, {
75    key: "_hasCountdownEnded",
76    value: function _hasCountdownEnded() {
77      if (this.epoch - this.now < 0) {
78        this.countdownEnded = true;
79
80        if (this.hasEndedCallback != null) {
81          this.hasEndedCallback();
82          this.hasEndedCallback = null;
83        }
84
85        return true;
86      } else {
87        this.countdownEnded = false;
88        return false;
89      }
90    }
91  }, {
92    key: "_parseOptions",
93    value: function _parseOptions(opt) {
94      var headings = ["Days", "Hours", "Minutes", "Seconds"];
95
96      if (opt.headings && opt.headings.length === 4) {
97        headings = opt.headings;
98      }
99
100      return {
101        theme: opt.hasOwnProperty("theme") ? opt.theme : "dark",
102        headings: headings
103      };
104    }
105  }, {
106    key: "_setOptions",
107    value: function _setOptions() {
108      this.element.classList.add("flipdown__theme-".concat(this.opts.theme));
109    }
110  }, {
111    key: "_init",
112    value: function _init() {
113      this.initialised = true;
114
115      if (this._hasCountdownEnded()) {
116        this.daysremaining = 0;
117      } else {
118        this.daysremaining = Math.floor((this.epoch - this.now) / 86400).toString().length;
119      }
120
121      var dayRotorCount = this.daysremaining <= 2 ? 2 : this.daysremaining;
122
123      for (var i = 0; i < dayRotorCount + 6; i++) {
124        this.rotors.push(this._createRotor(0));
125      }
126
127      var dayRotors = [];
128
129      for (var i = 0; i < dayRotorCount; i++) {
130        dayRotors.push(this.rotors[i]);
131      }
132
133      this.element.appendChild(this._createRotorGroup(dayRotors, 0));
134      var count = dayRotorCount;
135
136      for (var i = 0; i < 3; i++) {
137        var otherRotors = [];
138
139        for (var j = 0; j < 2; j++) {
140          otherRotors.push(this.rotors[count]);
141          count++;
142        }
143
144        this.element.appendChild(this._createRotorGroup(otherRotors, i + 1));
145      }
146
147      this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-front"));
148      this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-rear"));
149      this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-top"));
150      this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-bottom"));
151
152      this._tick();
153
154      this._updateClockValues(true);
155
156      return this;
157    }
158  }, {
159    key: "_createRotorGroup",
160    value: function _createRotorGroup(rotors, rotorIndex) {
161      var rotorGroup = document.createElement("div");
162      rotorGroup.className = "rotor-group";
163      var dayRotorGroupHeading = document.createElement("div");
164      dayRotorGroupHeading.className = "rotor-group-heading";
165      dayRotorGroupHeading.setAttribute("data-before", this.opts.headings[rotorIndex]);
166      rotorGroup.appendChild(dayRotorGroupHeading);
167      appendChildren(rotorGroup, rotors);
168      return rotorGroup;
169    }
170  }, {
171    key: "_createRotor",
172    value: function _createRotor() {
173      var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
174      var rotor = document.createElement("div");
175      var rotorLeaf = document.createElement("div");
176      var rotorLeafRear = document.createElement("figure");
177      var rotorLeafFront = document.createElement("figure");
178      var rotorTop = document.createElement("div");
179      var rotorBottom = document.createElement("div");
180      rotor.className = "rotor";
181      rotorLeaf.className = "rotor-leaf";
182      rotorLeafRear.className = "rotor-leaf-rear";
183      rotorLeafFront.className = "rotor-leaf-front";
184      rotorTop.className = "rotor-top";
185      rotorBottom.className = "rotor-bottom";
186      rotorLeafRear.textContent = v;
187      rotorTop.textContent = v;
188      rotorBottom.textContent = v;
189      appendChildren(rotor, [rotorLeaf, rotorTop, rotorBottom]);
190      appendChildren(rotorLeaf, [rotorLeafRear, rotorLeafFront]);
191      return rotor;
192    }
193  }, {
194    key: "_tick",
195    value: function _tick() {
196      this.now = this._getTime();
197      var diff = this.epoch - this.now <= 0 ? 0 : this.epoch - this.now;
198      this.clockValues.d = Math.floor(diff / 86400);
199      diff -= this.clockValues.d * 86400;
200      this.clockValues.h = Math.floor(diff / 3600);
201      diff -= this.clockValues.h * 3600;
202      this.clockValues.m = Math.floor(diff / 60);
203      diff -= this.clockValues.m * 60;
204      this.clockValues.s = Math.floor(diff);
205
206      this._updateClockValues();
207
208      this._hasCountdownEnded();
209    }
210  }, {
211    key: "_updateClockValues",
212    value: function _updateClockValues() {
213      var _this = this;
214
215      var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
216      this.clockStrings.d = pad(this.clockValues.d, 2);
217      this.clockStrings.h = pad(this.clockValues.h, 2);
218      this.clockStrings.m = pad(this.clockValues.m, 2);
219      this.clockStrings.s = pad(this.clockValues.s, 2);
220      this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split("");
221      this.rotorLeafFront.forEach(function (el, i) {
222        el.textContent = _this.prevClockValuesAsString[i];
223      });
224      this.rotorBottom.forEach(function (el, i) {
225        el.textContent = _this.prevClockValuesAsString[i];
226      });
227
228      function rotorTopFlip() {
229        var _this2 = this;
230
231        this.rotorTop.forEach(function (el, i) {
232          if (el.textContent != _this2.clockValuesAsString[i]) {
233            el.textContent = _this2.clockValuesAsString[i];
234          }
235        });
236      }
237
238      function rotorLeafRearFlip() {
239        var _this3 = this;
240
241        this.rotorLeafRear.forEach(function (el, i) {
242          if (el.textContent != _this3.clockValuesAsString[i]) {
243            el.textContent = _this3.clockValuesAsString[i];
244            el.parentElement.classList.add("flipped");
245            var flip = setInterval(function () {
246              el.parentElement.classList.remove("flipped");
247              clearInterval(flip);
248            }.bind(_this3), 500);
249          }
250        });
251      }
252
253      if (!init) {
254        setTimeout(rotorTopFlip.bind(this), 500);
255        setTimeout(rotorLeafRearFlip.bind(this), 500);
256      } else {
257        rotorTopFlip.call(this);
258        rotorLeafRearFlip.call(this);
259      }
260
261      this.prevClockValuesAsString = this.clockValuesAsString;
262    }
263  }]);
264
265  return FlipDown;
266}();
267
268function pad(n, len) {
269  n = n.toString();
270  return n.length < len ? pad("0" + n, len) : n;
271}
272
273function appendChildren(parent, children) {
274  children.forEach(function (el) {
275    parent.appendChild(el);
276  });
277}