https://xn--80aakridokly5ca.xn--p1ai/assets/js/components/hs.countdown.js

1/**
2 * Countdown wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires Countdown (v2.2.0, http://hilios.github.io/jQuery.countdown), circles.js (v0.0.6)
7 *
8 */
9;(function ($) {
10  'use strict';
11
12  $.HSCore.components.HSCountdown = {
13
14    /**
15     *
16     *
17     * @var Object _baseConfig
18     */
19    _baseConfig: {
20      yearsElSelector: '.years',
21      monthElSelector: '.month',
22      daysElSelector: '.days',
23      hoursElSelector: '.hours',
24      minutesElSelector: '.minutes',
25      secondsElSelector: '.seconds',
26      // circles
27      circles: false,
28      wrpClass: 'wrpClass',
29      textClass: 'textClass',
30      valueStrokeClass: 'valueStrokeClass',
31      maxValueStrokeClass: 'maxValueStrokeClass',
32      styleWrapper: 'styleWrapper',
33      styleText: 'styleText'
34    },
35
36    /**
37     *
38     *
39     * @var jQuery pageCollection
40     */
41    pageCollection: $(),
42
43    /**
44     *
45     *
46     * @var
47     */
48    _circlesIds: [0],
49
50    /**
51     * Initialization of Countdown wrapper.
52     *
53     * @param String selector (optional)
54     * @param Object config (optional)
55     *
56     * @return jQuery pageCollection - collection of initialized items.
57     */
58    init: function (selector, config) {
59
60      this.collection = selector && $(selector).length ? $(selector) : $();
61      if (!$(selector).length) return;
62
63      this.config = config && $.isPlainObject(config) ?
64        $.extend({}, this._baseConfig, config) : this._baseConfig;
65
66      this.config.itemSelector = selector;
67
68      this.initCountdowns();
69
70      return this.pageCollection;
71
72    },
73
74    /**
75     * Initialization of each Countdown of the page.
76     *
77     * @return undefined
78     */
79    initCountdowns: function () {
80
81      var self = this;
82
83      this.collection.each(function (i, el) {
84
85        var $this = $(el),
86
87          options = {
88            endDate: $this.data('end-date') ? new Date($this.data('end-date')) : new Date(),
89            startDate: $this.data('start-date') ? new Date($this.data('start-date')) : new Date(),
90            yearsEl: $this.find(self.config['yearsElSelector']),
91            yearsFormat: $this.data('years-format'),
92            monthEl: $this.find(self.config['monthElSelector']),
93            monthFormat: $this.data('month-format'),
94            daysEl: $this.find(self.config['daysElSelector']),
95            daysFormat: $this.data('days-format'),
96            hoursEl: $this.find(self.config['hoursElSelector']),
97            hoursFormat: $this.data('hours-format'),
98            minutesEl: $this.find(self.config['minutesElSelector']),
99            minutesFormat: $this.data('minutes-format'),
100            secondsEl: $this.find(self.config['secondsElSelector']),
101            secondsFormat: $this.data('seconds-format')
102          };
103
104        if (self.config['circles'] && $this.data('start-date')) self._initPiesImplementation($this, options);
105        else self._initBaseImplementation($this, options);
106
107        self.pageCollection = self.pageCollection.add($this);
108
109      });
110
111    },
112
113    /**
114     *
115     * @param jQuery container
116     * @param Object options
117     *
118     * @return undefined
119     */
120    _initBaseImplementation: function (container, options) {
121
122      container.countdown(options.endDate, function (e) {
123
124        if (options.yearsEl.length) {
125          options.yearsEl.text(e.strftime(options.yearsFormat));
126        }
127
128        if (options.monthEl.length) {
129          options.monthEl.text(e.strftime(options.monthFormat));
130        }
131
132        if (options.daysEl.length) {
133          options.daysEl.text(e.strftime(options.daysFormat));
134        }
135
136        if (options.hoursEl.length) {
137          options.hoursEl.text(e.strftime(options.hoursFormat));
138        }
139
140        if (options.minutesEl.length) {
141          options.minutesEl.text(e.strftime(options.minutesFormat));
142        }
143
144        if (options.secondsEl.length) {
145          options.secondsEl.text(e.strftime(options.secondsFormat));
146        }
147
148      });
149
150    },
151
152    /**
153     *
154     * @param jQuery container
155     * @param Object options
156     *
157     * @return undefined
158     */
159    _initPiesImplementation: function (container, options) {
160
161      var self = this,
162        id,
163        oneDay = 24 * 60 * 60 * 1000;
164
165      // prepare elements
166
167      if (options.yearsEl.length) {
168
169        self._preparePieItem(options.yearsEl, {
170          maxValue: (options.endDate.getFullYear() - options.startDate.getFullYear()),
171          radius: container.data('circles-radius'),
172          width: container.data('circles-stroke-width'),
173          'fg-color': container.data('circles-fg-color'),
174          'bg-color': container.data('circles-bg-color'),
175          'additional-text': container.data('circles-additional-text'),
176          'font-size': container.data('circles-font-size')
177        });
178
179      }
180
181      if (options.monthEl.length) {
182
183        self._preparePieItem(options.monthEl, {
184          maxValue: Math.round(Math.abs((options.endDate.getTime() - options.startDate.getTime()) / (oneDay))) / 12,
185          radius: container.data('circles-radius'),
186          width: container.data('circles-stroke-width'),
187          'fg-color': container.data('circles-fg-color'),
188          'bg-color': container.data('circles-bg-color'),
189          'additional-text': container.data('circles-additional-text'),
190          'font-size': container.data('circles-font-size')
191        });
192
193      }
194
195      if (options.daysEl.length) {
196
197        self._preparePieItem(options.daysEl, {
198          maxValue: self._getDaysMaxValByFormat(options.daysFormat, options.startDate, options.endDate),
199          radius: container.data('circles-radius'),
200          width: container.data('circles-stroke-width'),
201          'fg-color': container.data('circles-fg-color'),
202          'bg-color': container.data('circles-bg-color'),
203          'additional-text': container.data('circles-additional-text'),
204          'font-size': container.data('circles-font-size')
205        });
206
207      }
208
209      if (options.hoursEl.length) {
210
211        self._preparePieItem(options.hoursEl, {
212          maxValue: 60,
213          radius: container.data('circles-radius'),
214          width: container.data('circles-stroke-width'),
215          'fg-color': container.data('circles-fg-color'),
216          'bg-color': container.data('circles-bg-color'),
217          'additional-text': container.data('circles-additional-text'),
218          'font-size': container.data('circles-font-size')
219        });
220
221      }
222
223      if (options.minutesEl.length) {
224
225        self._preparePieItem(options.minutesEl, {
226          maxValue: 60,
227          radius: container.data('circles-radius'),
228          width: container.data('circles-stroke-width'),
229          'fg-color': container.data('circles-fg-color'),
230          'bg-color': container.data('circles-bg-color'),
231          'additional-text': container.data('circles-additional-text'),
232          'font-size': container.data('circles-font-size')
233        });
234
235      }
236
237      if (options.secondsEl.length) {
238
239        self._preparePieItem(options.secondsEl, {
240          maxValue: 60,
241          radius: container.data('circles-radius'),
242          width: container.data('circles-stroke-width'),
243          'fg-color': container.data('circles-fg-color'),
244          'bg-color': container.data('circles-bg-color'),
245          'additional-text': container.data('circles-additional-text'),
246          'font-size': container.data('circles-font-size')
247        });
248
249      }
250
251      // init countdown
252      container.countdown(options.endDate, function (e) {
253
254        // years
255        if (options.yearsEl.length) {
256          options.yearsEl.data('circle').update(e.strftime(options.yearsFormat));
257        }
258
259        // months
260        if (options.monthEl.length) {
261
262          options.monthEl.data('circle').update(e.strftime(options.monthFormat));
263        }
264
265        // days
266        if (options.daysEl.length) {
267          options.daysEl.data('circle').update(e.strftime(options.daysFormat));
268        }
269
270        // hours
271        if (options.hoursEl.length) {
272          options.hoursEl.data('circle').update(e.strftime(options.hoursFormat));
273        }
274
275        // minutes
276        if (options.minutesEl.length) {
277          options.minutesEl.data('circle').update(e.strftime(options.minutesFormat));
278        }
279
280        // seconds
281        if (options.secondsEl.length) {
282          options.secondsEl.data('circle').update(e.strftime(options.secondsFormat));
283        }
284
285      });
286
287    },
288
289    /**
290     *
291     * @param jQuery el
292     * @param Object options
293     *
294     * @return undefined
295     */
296    _preparePieItem: function (el, options) {
297
298      var self = this,
299        id = self._circlesIds[self._circlesIds.length - 1] + 1;
300      self._circlesIds.push(id);
301
302      el.attr('id', 'hs-countdown-element-' + id);
303
304      el.data('circle', Circles.create({
305        id: 'hs-countdown-element-' + id,

306        radius: options['radius'] || 80,
307        value: 0,
308        maxValue: options['maxValue'] || 100,
309        width: options['width'] || 10,
310        text: function (value) {
311          return value + (options['additional-text'] || '');
312        },
313        colors: [options['bg-color'] || '#eeeeee', options['fg-color'] || '#72c02c'],
314        duration: 0,
315        wrpClass: self.config['wrpClass'],
316        textClass: self.config['textClass'],
317        valueStrokeClass: self.config['valueStrokeClass'],
318        maxValueStrokeClass: self.config['maxValueStrokeClass'],
319        styleWrapper: self.config['styleWrapper'],
320        styleText: self.config['styleText']
321      }));
322
323      if (options['font-size']) {
324        el.find('.' + self.config['textClass']).css('font-size', options['font-size'] + 'px');
325      }
326
327    },
328
329    /**
330     *
331     * @param String format
332     * @param Date startDate
333     * @param Date endDate
334     *
335     * @return Number
336     */
337    _getDaysMaxValByFormat: function (format, startDate, endDate) {
338
339      var oneDay = 24 * 60 * 60 * 1000;
340
341      switch (format) {
342
343        case '%D':
344
345          return Math.round(Math.abs((endDate.getTime() - startDate.getTime()) / (oneDay)));
346
347          break;
348
349        default:
350
351          return 31;
352
353      }
354
355    }
356
357  }
358
359})(jQuery);