https://maisonessentielle.com/wp-content/plugins/wpc-countdown-tim…/jquery.flipper-responsive.js?ver=3.2.3

1jQuery(function($) {
2
3  // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
4  if (!String.prototype.repeat) {
5    String.prototype.repeat = function(count) {
6      'use strict';
7      if (this == null) {
8        throw new TypeError('can\'t convert ' + this + ' to object');
9      }
10      var str = '' + this;
11      count = +count;
12      if (count != count) {
13        count = 0;
14      }
15      if (count < 0) {
16        throw new RangeError('repeat count must be non-negative');
17      }
18      if (count == Infinity) {
19        throw new RangeError('repeat count must be less than infinity');
20      }
21      count = Math.floor(count);
22      if (str.length == 0 || count == 0) {
23        return '';
24      }
25      // Обеспечение того, что count является 31-битным целым числом, позволяет нам значительно
26      // соптимизировать главную часть функции. Впрочем, большинство современных (на август
27      // 2014 года) браузеров не обрабатывают строки, длиннее 1 << 28 символов, так что:
28      if (str.length * count >= 1 << 28) {
29        throw new RangeError(
30            'repeat count must not overflow maximum string size');
31      }
32      var rpt = '';
33      for (var i = 0; i < count; i++) {
34        rpt += str;
35      }
36      return rpt;
37    };
38  }
39
40  // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
41  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
42  if (!String.prototype.padStart) {
43    String.prototype.padStart = function padStart(targetLength, padString) {
44      targetLength = targetLength >> 0; //truncate if number or convert non-number to 0;
45      padString = String((typeof padString !== 'undefined' ? padString : ' '));
46      if (this.length > targetLength) {
47        return String(this);
48      } else {
49        targetLength = targetLength - this.length;
50        if (targetLength > padString.length) {
51          padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
52        }
53        return padString.slice(0, targetLength) + String(this);
54      }
55    };
56  }
57
58  $.fn.flipper = function(action, options) {
59    var $flipper = $(this);
60    var action = action || 'init';
61    var settings = $.extend({
62      // defaults.
63      reverse: $flipper.data('reverse') || false,
64      datetime: $flipper.data('datetime') || 'now',
65      template: $flipper.data('template') || 'HH:ii:ss',
66      labels: $flipper.data('labels') || 'Hours|Minutes|Seconds',
67      preload: true,
68    }, options);
69
70    if (action === 'init') {
71      if ($flipper.hasClass('flipper-initialized')) {
72        return;
73      }
74      $flipper.addClass('flipper-initialized');
75
76      var templateParts = settings.template.split('|');
77      var labelsArray = settings.labels.split('|');
78      var n;
79
80      templateParts.forEach(function(part, index) {
81        if (index > 0) {
82          $flipper.append(
83              '<div class="flipper-group flipper-delimiter">:</div>');
84        }
85        $flipper.append(
86            '<div class="flipper-group flipper-' + part + '"></div>');
87        var $part = $flipper.find('.flipper-group.flipper-' + part);
88        if (typeof labelsArray[index] !== 'undefined') {
89          $part.append('<label>' + labelsArray[index] + '</label>');
90        }
91        if (part === 'd' || part === 'H' || part === 'i' || part === 's') {
92          var rev = settings.reverse ? 'reverse' : '';
93          $part.append('<div class="flipper-digit ' + rev + '"></div>');
94        }
95        if (part === 'dd' || part === 'ddd' || part === 'HH' || part === 'ii' ||
96            part === 'ss') {
97          var rev = settings.reverse ? 'reverse' : '';
98          $part.append('<div class="flipper-digit ' + rev + '"></div>');
99          $part.append('<div class="flipper-delimiter"></div>');
100          $part.append('<div class="flipper-digit ' + rev + '"></div>');
101          if (part === 'ddd') {
102            $part.append('<div class="flipper-delimiter"></div>');
103            $part.append('<div class="flipper-digit ' + rev + '"></div>');
104          }
105        }
106        if (part === 'd') {
107          for (n = 0; n <= 31; n++) {
108            $part.find('.flipper-digit:eq(0)').
109                append('<div class="digit-face">' + n + '</div>');
110            $part.find('.flipper-digit:eq(1)').
111                append('<div class="digit-face">' + n + '</div>');
112          }
113        }
114        if (part === 'H') {
115          for (n = 0; n <= 23; n++) {
116            $part.find('.flipper-digit:eq(0)').
117                append('<div class="digit-face">' + n + '</div>');
118            $part.find('.flipper-digit:eq(1)').
119                append('<div class="digit-face">' + n + '</div>');
120          }
121        }
122        if (part === 'i' || part === 's') {
123          for (n = 0; n <= 59; n++) {
124            $part.find('.flipper-digit:eq(0)').
125                append('<div class="digit-face">' + n + '</div>');
126            $part.find('.flipper-digit:eq(1)').
127                append('<div class="digit-face">' + n + '</div>');
128          }
129        }
130        if (part === 'dd' || part === 'ddd') {
131          for (n = 0; n <= 9; n++) {
132            $part.find('.flipper-digit:eq(0)').
133                append('<div class="digit-face">' + n + '</div>');
134            $part.find('.flipper-digit:eq(1)').
135                append('<div class="digit-face">' + n + '</div>');
136            if (part === 'ddd') {
137              $part.find('.flipper-digit:eq(2)').
138                  append('<div class="digit-face">' + n + '</div>');
139            }
140          }
141        }
142        if (part === 'HH') {
143          for (n = 0; n <= 2; n++) {
144            $part.find('.flipper-digit:eq(0)').
145                append('<div class="digit-face">' + n + '</div>');
146          }
147          for (n = 0; n <= 9; n++) {
148            $part.find('.flipper-digit:eq(1)').
149                append('<div class="digit-face">' + n + '</div>');
150          }
151        }
152        if (part === 'ii' || part === 'ss') {
153          for (n = 0; n <= 5; n++) {
154            $part.find('.flipper-digit:eq(0)').
155                append('<div class="digit-face">' + n + '</div>');
156          }
157          for (n = 0; n <= 9; n++) {
158            $part.find('.flipper-digit:eq(1)').
159                append('<div class="digit-face">' + n + '</div>');
160          }
161        }
162      });
163
164      if (settings.preload) {
165        setFlipperDate($flipper, settings.datetime, false);
166      }
167
168      setInterval(function() {
169        setFlipperDate($flipper, settings.datetime, true);
170      }, 1000);
171
172      upsizeToParent($flipper);
173      $(window).on('resize', function() {
174        upsizeToParent($flipper);
175      });
176    }
177
178    var flipTime = 400;
179    var $body = $('body');
180
181    function flipDigit($digit) {
182      if (!$digit.closest('.flipper').is('.flipper-initialized')) {
183        return;
184      }
185      if ($digit.hasClass('r')) {
186        setTimeout(function() {
187          flipDigit($digit);
188        }, flipTime + 1);
189        return;
190      }
191      $digit.addClass('r');
192
193      var $currentTop = $digit.find('.digit-top');
194      var $currentTop2 = $digit.find('.digit-top2');
195      var $currentBottom = $digit.find('.digit-bottom');
196      var $activeDigit = $digit.find('.digit-face.active');
197      var $firstDigit = $digit.find('.digit-face:first');
198      var $prevDigit = $activeDigit.prev('.digit-face');
199      var $nextDigit = $activeDigit.next('.digit-face');
200      var $lastDigit = $digit.find('.digit-face:last');
201      if ($digit.hasClass('reverse')) {
202        var $next = $prevDigit.length ? $prevDigit : $lastDigit;
203      } else {
204        var $next = $nextDigit.length ? $nextDigit : $firstDigit;
205      }
206      var current = parseInt($currentTop.html());
207      var next = $next.html();
208      $digit.find('.digit-next').html(next);
209      $digit.find('.digit-face').removeClass('active');
210      $next.addClass('active');
211      $currentTop.addClass('r');
212      $currentTop2.addClass('r');
213      $currentBottom.addClass('r');
214      if (next.toString() === $digit.attr('data-value')) {
215        $digit.removeAttr('data-value');
216      }
217      setTimeout(function() {
218        $currentTop.html(next).hide();
219        $currentTop2.html(next);
220        setTimeout(function() {
221          $currentBottom.html(next).removeClass('r');
222          $currentTop.removeClass('r').show();
223          $currentTop2.html(next).removeClass('r');
224          $digit.removeClass('r');
225        }, flipTime / 2);
226      }, flipTime / 2);
227    }
228
229    function upsizeToParent($flipper) {
230      var parentWidth;
231      var flipperWidth;
232      var maxFontSize = 1000;
233      var fontSize = maxFontSize;
234      var i = 0;
235      var minFontSize = 0;
236      $flipper.css('font-size', fontSize + 'px');
237      while (i < 20) {
238        i++;
239        parentWidth = $flipper.innerWidth();
240        $flipper.css('width', '9999px');
241        flipperWidth = 0;
242        $flipper.find('.flipper-group').each(function() {
243          var w = parseFloat($(this).outerWidth());
244          flipperWidth += w;
245        });
246        if ((parentWidth - flipperWidth) < 10 && (parentWidth - flipperWidth) >
247            0) {
248          $flipper.css('width', '');
249          return;
250        }
251        if (flipperWidth > parentWidth) {
252          maxFontSize = fontSize < maxFontSize ? fontSize : maxFontSize;
253        } else {
254          minFontSize = fontSize > minFontSize ? fontSize : minFontSize;
255        }
256        fontSize = (maxFontSize + minFontSize) / 2;
257        $flipper.css('width', '');
258        $flipper.css('font-size', fontSize + 'px');
259      }
260    }
261
262    function setDigitValue(digitIndex, value) {
263      var $flipper = $('.flipper');
264      var $digit = $flipper.find('.flipper-digit:eq(' + digitIndex + ')');
265      var currentValue = getDigitValue($digit);
266      if (currentValue.toString() === value.toString()) {
267        return; // has same value, do nothing
268      }
269      $digit.attr('data-value', value);
270    }
271
272    setInterval(function() {
273      var $flipper = $('.flipper');
274      $flipper.find('.flipper-digit[data-value]').each(function() {
275        var $digit = $(this);
276        if ($digit.find('.active').html() === $digit.attr('data-value')) {
277          return; //
278        }
279        if (!$digit.is('.r')) {
280          flipDigit($digit);
281        }
282      });
283    }, flipTime / 4);
284
285    function formatFlipperDate(dateStr) {
286      var a = dateStr.split(' ');
287      var d = a[0].split('-');
288      var t = a[1].split(':');
289      var date = new Date(d[0], (d[1] - 1), d[2], t[0], t[1], t[2]);
290      return date;
291    }
292
293    function addAppearance($flipper) {
294      $flipper.find('.flipper-digit').each(function() {
295        var $digit = $(this);
296        var value = $digit.find('.digit-face.active').html();
297        $digit.find('.digit-top').remove();
298        $digit.find('.digit-top2').remove();
299        $digit.find('.digit-bottom').remove();
300        $digit.find('.digit-next').remove();

301        $digit.prepend('<div class="digit-top">' + value + '</div>');
302        $digit.prepend('<div class="digit-top2">' + value + '</div>');
303        $digit.prepend('<div class="digit-bottom">' + value + '</div>');
304        $digit.prepend('<div class="digit-next"></div>');
305      });
306    }
307
308    function setFlipperDate($flipper, dateString, animate) {
309      var animate = animate || false;
310      if (!$flipper.is(':visible')) {
311        $flipper.addClass('flipper-invisible');
312        return;
313      }
314      if ($flipper.hasClass('flipper-invisible')) {
315        $flipper.removeClass('flipper-invisible');
316        upsizeToParent($flipper);
317        setFlipperDate($flipper, settings.datetime, false);
318      }
319      var now = Date.now();
320      if (dateString === 'now') {
321        var now = new Date();
322        var seconds = now.getSeconds();
323        var minutes = now.getMinutes();
324        var hours = now.getHours();
325        var days = now.getDate();
326      } else {
327        var timestamp = Date.parse(formatFlipperDate(dateString));
328        var remainder = (timestamp - now) / 1000;
329        var days = Math.floor(remainder / 60 / 60 / 24);
330        remainder -= days * 60 * 60 * 24;
331        var hours = Math.floor(remainder / 60 / 60);
332        remainder -= hours * 60 * 60;
333        var minutes = Math.floor(remainder / 60);
334        remainder -= minutes * 60;
335        var seconds = Math.floor(remainder);
336      }
337
338      var days_str = days.toString().padStart(3, '0');
339      var hours_str = hours.toString().padStart(2, '0');
340      var minutes_str = minutes.toString().padStart(2, '0');
341      var seconds_str = seconds.toString().padStart(2, '0');
342
343      if (animate) {
344        // one section
345        $flipper.find('.flipper-d').
346            find('.flipper-digit:eq(0)').
347            attr('data-value', days);
348        $flipper.find('.flipper-H').
349            find('.flipper-digit:eq(0)').
350            attr('data-value', hours);
351        $flipper.find('.flipper-i').
352            find('.flipper-digit:eq(0)').
353            attr('data-value', minutes);
354        $flipper.find('.flipper-s').
355            find('.flipper-digit:eq(0)').
356            attr('data-value', seconds);
357
358        // two sections
359        $flipper.find('.flipper-dd').
360            find('.flipper-digit:eq(0)').
361            attr('data-value', days_str[1]);
362        $flipper.find('.flipper-dd').
363            find('.flipper-digit:eq(1)').
364            attr('data-value', days_str[2]);
365        $flipper.find('.flipper-HH').
366            find('.flipper-digit:eq(0)').
367            attr('data-value', hours_str[0]);
368        $flipper.find('.flipper-HH').
369            find('.flipper-digit:eq(1)').
370            attr('data-value', hours_str[1]);
371        $flipper.find('.flipper-ii').
372            find('.flipper-digit:eq(0)').
373            attr('data-value', minutes_str[0]);
374        $flipper.find('.flipper-ii').
375            find('.flipper-digit:eq(1)').
376            attr('data-value', minutes_str[1]);
377        $flipper.find('.flipper-ss').
378            find('.flipper-digit:eq(0)').
379            attr('data-value', seconds_str[0]);
380        $flipper.find('.flipper-ss').
381            find('.flipper-digit:eq(1)').
382            attr('data-value', seconds_str[1]);
383
384        // three sections
385        $flipper.find('.flipper-ddd').
386            find('.flipper-digit:eq(0)').
387            attr('data-value', days_str[0]);
388        $flipper.find('.flipper-ddd').
389            find('.flipper-digit:eq(1)').
390            attr('data-value', days_str[1]);
391        $flipper.find('.flipper-ddd').
392            find('.flipper-digit:eq(2)').
393            attr('data-value', days_str[2]);
394      } else {
395        $flipper.find('.flipper-group .flipper-digit').removeAttr('data-value');
396        $flipper.find('.digit-face.active').removeClass('active');
397
398        // one section
399        $flipper.find(
400            '.flipper-d .flipper-digit:eq(0) .digit-face:contains(' + days +
401            ')').addClass('active');
402        $flipper.find(
403            '.flipper-H .flipper-digit:eq(0) .digit-face:contains(' + hours +
404            ')').addClass('active');
405        $flipper.find(
406            '.flipper-i .flipper-digit:eq(0) .digit-face:contains(' + minutes +
407            ')').addClass('active');
408        $flipper.find(
409            '.flipper-s .flipper-digit:eq(0) .digit-face:contains(' + seconds +
410            ')').addClass('active');
411
412        // two sections
413        $flipper.find('.flipper-dd .flipper-digit:eq(0) .digit-face:contains(' +
414            days_str[1] + ')').addClass('active');
415        $flipper.find('.flipper-dd .flipper-digit:eq(1) .digit-face:contains(' +
416            days_str[2] + ')').addClass('active');
417        $flipper.find('.flipper-HH .flipper-digit:eq(0) .digit-face:contains(' +
418            hours_str[0] + ')').addClass('active');
419        $flipper.find('.flipper-HH .flipper-digit:eq(1) .digit-face:contains(' +
420            hours_str[1] + ')').addClass('active');
421        $flipper.find('.flipper-ii .flipper-digit:eq(0) .digit-face:contains(' +
422            minutes_str[0] + ')').addClass('active');
423        $flipper.find('.flipper-ii .flipper-digit:eq(1) .digit-face:contains(' +
424            minutes_str[1] + ')').addClass('active');
425        $flipper.find('.flipper-ss .flipper-digit:eq(0) .digit-face:contains(' +
426            seconds_str[0] + ')').addClass('active');
427        $flipper.find('.flipper-ss .flipper-digit:eq(1) .digit-face:contains(' +
428            seconds_str[1] + ')').addClass('active');
429
430        // three sections
431        $flipper.find(
432            '.flipper-ddd .flipper-digit:eq(0) .digit-face:contains(' +
433            days_str[0] + ')').addClass('active');
434        $flipper.find(
435            '.flipper-ddd .flipper-digit:eq(1) .digit-face:contains(' +
436            days_str[1] + ')').addClass('active');
437        $flipper.find(
438            '.flipper-ddd .flipper-digit:eq(2) .digit-face:contains(' +
439            days_str[2] + ')').addClass('active');
440        addAppearance($flipper);
441      }
442
443    }
444  };
445
446});