295 lines
9.5 KiB
JavaScript
295 lines
9.5 KiB
JavaScript
/*!
|
|
* jQuery Final Countdown
|
|
*
|
|
* @author Pragmatic Mates, http://pragmaticmates.com
|
|
* @version 1.1.1
|
|
* @license GPL 2
|
|
* @link https://github.com/PragmaticMates/jquery-final-countdown
|
|
*/
|
|
|
|
(function ($) {
|
|
var settings;
|
|
var timer;
|
|
|
|
var circleSeconds;
|
|
var circleMinutes;
|
|
var circleHours;
|
|
var circleDays;
|
|
|
|
var layerSeconds;
|
|
var layerMinutes;
|
|
var layerHours;
|
|
var layerDays;
|
|
|
|
var element;
|
|
var callbackFunction;
|
|
|
|
$.fn.final_countdown = function(options, callback) {
|
|
element = $(this);
|
|
|
|
var defaults = $.extend({
|
|
start: undefined,
|
|
end: undefined,
|
|
now: undefined,
|
|
selectors: {
|
|
value_seconds: '.clock-seconds .val',
|
|
canvas_seconds: 'canvas-seconds',
|
|
value_minutes: '.clock-minutes .val',
|
|
canvas_minutes: 'canvas-minutes',
|
|
value_hours: '.clock-hours .val',
|
|
canvas_hours: 'canvas-hours',
|
|
value_days: '.clock-days .val',
|
|
canvas_days: 'canvas-days'
|
|
},
|
|
seconds: {
|
|
borderColor: '#7accdf',
|
|
borderWidth: '3'
|
|
},
|
|
minutes: {
|
|
borderColor: '#ef9021',
|
|
borderWidth: '3'
|
|
},
|
|
hours: {
|
|
borderColor: '#fff',
|
|
borderWidth: '3'
|
|
},
|
|
days: {
|
|
borderColor: '#ed7b7b',
|
|
borderWidth: '3'
|
|
}
|
|
}, options);
|
|
|
|
settings = $.extend({}, defaults, options);
|
|
|
|
if (settings.start === undefined) {
|
|
settings.start = element.data('start');
|
|
}
|
|
|
|
if (settings.end === undefined) {
|
|
settings.end = element.data('end');
|
|
}
|
|
|
|
if (settings.now === undefined) {
|
|
settings.now = element.data('now');
|
|
}
|
|
|
|
if (element.data('border-color')) {
|
|
settings.seconds.borderColor = settings.minutes.borderColor = settings.hours.borderColor = settings.days.borderColor = element.data('border-color');
|
|
}
|
|
|
|
if (settings.now < settings.start ) {
|
|
settings.start = settings.now;
|
|
settings.end = settings.now;
|
|
}
|
|
|
|
if (settings.now > settings.end) {
|
|
settings.start = settings.now;
|
|
settings.end = settings.now;
|
|
}
|
|
|
|
if (typeof callback == 'function') { // make sure the callback is a function
|
|
callbackFunction = callback;
|
|
}
|
|
|
|
responsive();
|
|
dispatchTimer();
|
|
prepareCounters();
|
|
startCounters();
|
|
};
|
|
|
|
function responsive() {
|
|
$(window).load(updateCircles);
|
|
|
|
$(window).on('redraw', function() {
|
|
switched = false;
|
|
updateCircles();
|
|
});
|
|
$(window).on('resize', updateCircles);
|
|
}
|
|
|
|
function updateCircles() {
|
|
layerSeconds.draw();
|
|
layerMinutes.draw();
|
|
layerHours.draw();
|
|
layerDays.draw();
|
|
}
|
|
|
|
function convertToDeg(degree) {
|
|
return (Math.PI/180)*degree - (Math.PI/180)*90
|
|
}
|
|
|
|
function dispatchTimer() {
|
|
timer = {
|
|
total: Math.floor((settings.end - settings.start) / 86400),
|
|
days: Math.floor((settings.end - settings.now ) / 86400),
|
|
hours: 24 - Math.floor(((settings.end - settings.now) % 86400) / 3600),
|
|
minutes: 60 - Math.floor((((settings.end - settings.now) % 86400) % 3600) / 60),
|
|
seconds: 60 - Math.floor((((settings.end - settings.now) % 86400) % 3600) % 60 )
|
|
}
|
|
}
|
|
|
|
function prepareCounters() {
|
|
// Seconds
|
|
var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
|
|
var secondsStage = new Kinetic.Stage({
|
|
container: settings.selectors.canvas_seconds,
|
|
width: seconds_width,
|
|
height: seconds_width
|
|
});
|
|
|
|
circleSeconds = new Kinetic.Shape({
|
|
drawFunc: function(context) {
|
|
var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
|
|
var radius = seconds_width / 2 - settings.seconds.borderWidth / 2;
|
|
var x = seconds_width / 2;
|
|
var y = seconds_width / 2;
|
|
|
|
context.beginPath();
|
|
context.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.seconds * 6));
|
|
context.fillStrokeShape(this);
|
|
|
|
$(settings.selectors.value_seconds).html(60 - timer.seconds);
|
|
},
|
|
stroke: settings.seconds.borderColor,
|
|
strokeWidth: settings.seconds.borderWidth
|
|
});
|
|
|
|
layerSeconds = new Kinetic.Layer();
|
|
layerSeconds.add(circleSeconds);
|
|
secondsStage.add(layerSeconds);
|
|
|
|
// Minutes
|
|
var minutes_width = $('#' + settings.selectors.canvas_minutes).width();
|
|
var minutesStage = new Kinetic.Stage({
|
|
container: settings.selectors.canvas_minutes,
|
|
width: minutes_width,
|
|
height: minutes_width
|
|
});
|
|
|
|
circleMinutes = new Kinetic.Shape({
|
|
drawFunc: function(context) {
|
|
var minutes_width = $('#' + settings.selectors.canvas_minutes).width();
|
|
var radius = minutes_width / 2 - settings.minutes.borderWidth / 2;
|
|
var x = minutes_width / 2;
|
|
var y = minutes_width / 2;
|
|
|
|
context.beginPath();
|
|
context.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.minutes * 6));
|
|
context.fillStrokeShape(this);
|
|
|
|
$(settings.selectors.value_minutes).html(60 - timer.minutes);
|
|
|
|
},
|
|
stroke: settings.minutes.borderColor,
|
|
strokeWidth: settings.minutes.borderWidth
|
|
});
|
|
|
|
layerMinutes = new Kinetic.Layer();
|
|
layerMinutes.add(circleMinutes);
|
|
minutesStage.add(layerMinutes);
|
|
|
|
// Hours
|
|
var hours_width = $('#' + settings.selectors.canvas_hours).width();
|
|
var hoursStage = new Kinetic.Stage({
|
|
container: settings.selectors.canvas_hours,
|
|
width: hours_width,
|
|
height: hours_width
|
|
});
|
|
|
|
circleHours = new Kinetic.Shape({
|
|
drawFunc: function(context) {
|
|
var hours_width = $('#' + settings.selectors.canvas_hours).width();
|
|
var radius = hours_width / 2 - settings.hours.borderWidth/2;
|
|
var x = hours_width / 2;
|
|
var y = hours_width / 2;
|
|
|
|
context.beginPath();
|
|
context.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.hours * 360 / 24));
|
|
context.fillStrokeShape(this);
|
|
|
|
$(settings.selectors.value_hours).html(24 - timer.hours);
|
|
|
|
},
|
|
stroke: settings.hours.borderColor,
|
|
strokeWidth: settings.hours.borderWidth
|
|
});
|
|
|
|
layerHours = new Kinetic.Layer();
|
|
layerHours.add(circleHours);
|
|
hoursStage.add(layerHours);
|
|
|
|
// Days
|
|
var days_width = $('#' + settings.selectors.canvas_days).width();
|
|
var daysStage = new Kinetic.Stage({
|
|
container: settings.selectors.canvas_days,
|
|
width: days_width,
|
|
height: days_width
|
|
});
|
|
|
|
circleDays = new Kinetic.Shape({
|
|
drawFunc: function(context) {
|
|
var days_width = $('#' + settings.selectors.canvas_days).width();
|
|
var radius = days_width/2 - settings.days.borderWidth/2;
|
|
var x = days_width / 2;
|
|
var y = days_width / 2;
|
|
|
|
|
|
context.beginPath();
|
|
if (timer.total == 0) {
|
|
context.arc(x, y, radius, convertToDeg(0), convertToDeg(360));
|
|
} else {
|
|
context.arc(x, y, radius, convertToDeg(0), convertToDeg((360 / timer.total) * (timer.total - timer.days)));
|
|
}
|
|
context.fillStrokeShape(this);
|
|
|
|
$(settings.selectors.value_days).html(timer.days);
|
|
|
|
},
|
|
stroke: settings.days.borderColor,
|
|
strokeWidth: settings.days.borderWidth
|
|
});
|
|
|
|
layerDays = new Kinetic.Layer();
|
|
layerDays.add(circleDays);
|
|
daysStage.add(layerDays);
|
|
}
|
|
|
|
function startCounters() {
|
|
var interval = setInterval( function() {
|
|
if (timer.seconds > 59 ) {
|
|
if (60 - timer.minutes == 0 && 24 - timer.hours == 0 && timer.days == 0) {
|
|
clearInterval(interval);
|
|
if (callbackFunction !== undefined) {
|
|
callbackFunction.call(this); // brings the scope to the callback
|
|
}
|
|
return;
|
|
}
|
|
|
|
timer.seconds = 1;
|
|
|
|
if (timer.minutes > 59) {
|
|
timer.minutes = 1;
|
|
layerMinutes.draw();
|
|
if (timer.hours > 23) {
|
|
timer.hours = 1;
|
|
if (timer.days > 0) {
|
|
timer.days--;
|
|
layerDays.draw();
|
|
}
|
|
} else {
|
|
timer.hours++;
|
|
}
|
|
layerHours.draw()
|
|
} else {
|
|
timer.minutes++;
|
|
}
|
|
|
|
layerMinutes.draw();
|
|
} else {
|
|
timer.seconds++;
|
|
}
|
|
|
|
layerSeconds.draw();
|
|
}, 1000);
|
|
}
|
|
})(jQuery); |