263 lines
9.9 KiB
JavaScript
263 lines
9.9 KiB
JavaScript
import $ from 'jquery';
|
|
import prestashop from 'prestashop';
|
|
|
|
!function($){
|
|
"use strict";
|
|
|
|
var County = function(arg, options){
|
|
this.init(arg, options);
|
|
};
|
|
|
|
County.prototype = {
|
|
constructor: County,
|
|
|
|
init: function(arg, options){
|
|
this.settings = $.extend({ endDateTime: new Date(), animation: 'fade', reflection: false, reflectionOpacity: 0.2, speed: 500, theme: 'black' }, options);
|
|
this.timeoutInterval = null;
|
|
this.container = $(arg);
|
|
|
|
this.createViews();
|
|
},
|
|
|
|
createViews: function() {
|
|
var self = this;
|
|
if (!this.container.hasClass('county')) {
|
|
this.container.addClass('county ' + this.settings.theme);
|
|
this.container.append('<div class="county-cell county-days-wrapper first"><span class="county-days">000</span><span class="county-label county-label-days">' + this.settings.titleDays + '</span></div><div class="county-cell county-hours-wrapper"><span class="county-hours">00</span><span class="county-label county-label-hours">' + this.settings.titleHours + '</span></div><div class="county-cell county-minutes-wrapper separator-left separator-left"><span class="county-minutes">00</span><span class="county-label county-label-minutes">' + this.settings.titleMinutes + '</span></div><div class="county-cell county-seconds-wrapper separator-left last"><span class="county-seconds">00</span><span class="county-label county-label-seconds">' + this.settings.titleSeconds + '</span></div>');
|
|
}
|
|
if (this.container.attr('id') == undefined || this.container.attr('id') == null) {
|
|
this.container.attr('id', Math.random());
|
|
}
|
|
var w = 0;
|
|
this.container.find('>span').each(function () {
|
|
if ($(this).hasClass('county-days-wrapper') ||
|
|
$(this).hasClass('county-hours-wrapper') ||
|
|
$(this).hasClass('county-minutes-wrapper') ||
|
|
$(this).hasClass('county-seconds-wrapper'))
|
|
w += $(this).outerWidth();
|
|
});
|
|
|
|
this.container.css({ width: w });
|
|
|
|
this.container.find('>span>span').each(function () {
|
|
|
|
$(this).css({ position: 'absolute', width: $(this).width(), height: $(this).height() });
|
|
$(this).parent().css({ width: $(this).width() });
|
|
var daysLabel = self.container.find('.county-label-days');
|
|
var hoursLabel = self.container.find('.county-label-hours');
|
|
var minutesLabel = self.container.find('.county-label-minutes');
|
|
var secondsLabel = self.container.find('.county-label-seconds');
|
|
if ($(this).hasClass('county-days')) {
|
|
daysLabel.css({ width: $(this).parent().outerWidth() });
|
|
}
|
|
if ($(this).hasClass('county-hours')) {
|
|
hoursLabel.css({ width: $(this).parent().outerWidth() });
|
|
}
|
|
if ($(this).hasClass('county-minutes')) {
|
|
minutesLabel.css({ width: $(this).parent().outerWidth() });
|
|
}
|
|
if ($(this).hasClass('county-seconds')) {
|
|
secondsLabel.css({ width: $(this).parent().outerWidth() });
|
|
}
|
|
});
|
|
|
|
this.reflectionContainer = this.container.clone().css({ opacity: this.settings.reflectionOpacity }).attr('id', this.container.attr('id') + '-refl').addClass('county-reflection');
|
|
if (this.settings.reflection)
|
|
this.container.after(this.reflectionContainer);
|
|
|
|
this.updateCounter();
|
|
},
|
|
|
|
getCountDown: function() {
|
|
var self = this;
|
|
clearTimeout(this.timeoutInterval);
|
|
this.timeoutInterval = setTimeout(function () {
|
|
|
|
self.updateCounter();
|
|
|
|
}, 1000);
|
|
},
|
|
|
|
updateCounter: function() {
|
|
var countDown = this.getCurrentCountDown();
|
|
var days = this.container.find('.county-days');
|
|
var hours = this.container.find('.county-hours');
|
|
var minutes = this.container.find('.county-minutes');
|
|
var seconds = this.container.find('.county-seconds');
|
|
|
|
var dayVal = days.html();
|
|
var hourVal = hours.html();
|
|
var minuteVal = minutes.html();
|
|
var secondVal = seconds.html();
|
|
|
|
if (dayVal == countDown.days) {
|
|
days.html(countDown.days);
|
|
}
|
|
else {
|
|
if (this.settings.reflection)
|
|
this.aimateObject(days, this.reflectionContainer.find('.county-days'), dayVal, countDown.days, this.settings.animation);
|
|
else
|
|
this.aimateObject(days, null, dayVal, countDown.days, this.settings.animation);
|
|
}
|
|
|
|
if (hourVal == countDown.hours)
|
|
hours.html(countDown.hours);
|
|
else {
|
|
if (this.settings.reflection)
|
|
this.aimateObject(hours, this.reflectionContainer.find('.county-hours'), hourVal, countDown.hours, this.settings.animation);
|
|
else
|
|
this.aimateObject(hours, null, hourVal, countDown.hours, this.settings.animation);
|
|
}
|
|
|
|
if (minuteVal == countDown.minutes)
|
|
minutes.html(countDown.minutes);
|
|
else {
|
|
if (this.settings.reflection)
|
|
this.aimateObject(minutes, this.reflectionContainer.find('.county-minutes'), minuteVal, countDown.minutes, this.settings.animation);
|
|
else
|
|
this.aimateObject(minutes, null, minuteVal, countDown.minutes, this.settings.animation);
|
|
}
|
|
if (secondVal == countDown.seconds)
|
|
seconds.html(countDown.seconds);
|
|
else {
|
|
if (this.settings.reflection)
|
|
this.aimateObject(seconds, this.reflectionContainer.find('.county-seconds'), secondVal, countDown.seconds, this.settings.animation);
|
|
else
|
|
this.aimateObject(seconds, null, secondVal, countDown.seconds, this.settings.animation);
|
|
}
|
|
|
|
this.getCountDown();
|
|
},
|
|
|
|
aimateObject: function(element, reflectionElement, oldValue, newValue, type) {
|
|
|
|
if (type == 'fade') {
|
|
element.fadeOut('fast').fadeIn('fast').html(newValue);
|
|
if (this.settings.reflection)
|
|
this.reflectionElement.fadeOut('fast').fadeIn('fast').html(newValue);
|
|
}
|
|
else if (type == 'none') {
|
|
element.html(newValue);
|
|
}
|
|
else if (type == 'scroll') {
|
|
var copy = element.clone();
|
|
var reflectionCopy = null;
|
|
|
|
if (this.settings.reflection)
|
|
reflectionCopy = reflectionElement.clone();
|
|
|
|
var marginTop = copy.outerHeight();
|
|
|
|
copy.css({ marginTop: -marginTop });
|
|
copy.html(newValue);
|
|
copy.prependTo(element.parent());
|
|
|
|
if (this.settings.reflection) {
|
|
reflectionCopy.css({ marginTop: -marginTop });
|
|
reflectionCopy.html(newValue);
|
|
reflectionCopy.prependTo(this.reflectionElement.parent());
|
|
}
|
|
|
|
element.animate({ marginTop: "22px", opacity: 0 }, this.settings.speed, function () { $(this).remove(); });
|
|
copy.animate({ marginTop: 0 }, this.settings.speed, function () { });
|
|
|
|
if (this.settings.reflection) {
|
|
this.reflectionElement.animate({ marginTop: marginTop }, this.settings.speed, function () { $(this).remove(); });
|
|
reflectionCopy.animate({ marginTop: 0 }, this.settings.speed, function () { });
|
|
}
|
|
|
|
}
|
|
},
|
|
|
|
getCurrentCountDown: function() {
|
|
var currentDateTime = new Date();
|
|
|
|
var diff = parseFloat(this.settings.endDateTime - currentDateTime);
|
|
var self = this;
|
|
|
|
var seconds = 0;
|
|
var minutes = 0;
|
|
var hours = 0;
|
|
var total = parseFloat(((((diff / 1000.0) / 60.0) / 60.0) / 24.0));
|
|
|
|
var days = parseInt(total);
|
|
|
|
total -= days;
|
|
|
|
total *= 24.0;
|
|
|
|
hours = parseInt(total);
|
|
|
|
total -= hours;
|
|
|
|
total *= 60.0;
|
|
|
|
minutes = parseInt(total);
|
|
|
|
total -= minutes;
|
|
|
|
total *= 60;
|
|
|
|
seconds = parseInt(total);
|
|
|
|
return { days: self.formatNumber(Math.max(0, days), true), hours: self.formatNumber(Math.max(0, hours), false), minutes: self.formatNumber(Math.max(0, minutes), false), seconds: self.formatNumber(Math.max(0, seconds), false) };
|
|
|
|
},
|
|
|
|
formatNumber: function(number, isday) {
|
|
var strNumber = number.toString();
|
|
if (!isday) {
|
|
if (strNumber.length == 1)
|
|
return '0' + strNumber;
|
|
else
|
|
return strNumber;
|
|
}
|
|
else {
|
|
if (strNumber.length == 1)
|
|
return strNumber;
|
|
else if (strNumber == 2)
|
|
return strNumber;
|
|
else
|
|
return strNumber;
|
|
}
|
|
},
|
|
|
|
getHunderth: function(number) {
|
|
var strNumber = '' + number;
|
|
|
|
if (strNumber.length == 3)
|
|
return strNumber.substr(0, 1);
|
|
else
|
|
return '0';
|
|
},
|
|
|
|
getTenth: function(number) {
|
|
var strNumber = '' + number;
|
|
|
|
if (strNumber.length == 2)
|
|
return strNumber.substr(0, 1);
|
|
else
|
|
return '0';
|
|
},
|
|
|
|
getUnit: function(number) {
|
|
var strNumber = '' + number;
|
|
|
|
if (strNumber.length >= 1)
|
|
return strNumber.substr(0, 1);
|
|
else
|
|
return '0';
|
|
}
|
|
}
|
|
|
|
$.fn.county = function (option, params) {
|
|
var $this = $(this);
|
|
var data = $this.data('list');
|
|
if (!data) {$this.data('list', (data = new County(this, option)));}
|
|
if (typeof option === 'string'){ return data[option](params);}
|
|
};
|
|
|
|
$.fn.county.Constructor = County;
|
|
|
|
}(window.jQuery);
|