You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.3 KiB
112 lines
3.3 KiB
/**
|
|
* jQuery PieTimer Plugin v0.1
|
|
* Authors: Kus (http://blakek.us/css3-pie-graph-timer-with-jquery/)
|
|
* Connor Doyle (jQuery plugin)
|
|
*
|
|
* http://github.com/chikamichi/jquery.pietimer
|
|
*
|
|
* Licensed under the MIT licenses:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
*/
|
|
(function($){
|
|
var methods = {
|
|
init: function(options) {
|
|
var state = {
|
|
timer: null,
|
|
timerSeconds: 10,
|
|
callback: function() {},
|
|
timerCurrent: 0,
|
|
showPercentage: false,
|
|
fill: false,
|
|
color: '#CCC'
|
|
};
|
|
|
|
state = $.extend(state, options);
|
|
|
|
return this.each(function() {
|
|
var $this = $(this);
|
|
var data = $this.data('pietimer');
|
|
if (!data) {
|
|
$this.addClass('pietimer');
|
|
$this.css({fontSize: $this.width()});
|
|
$this.data('pietimer', state);
|
|
if (state.showPercentage) {
|
|
$this.find('.percent').show();
|
|
}
|
|
if (state.fill) {
|
|
$this.addClass('fill');
|
|
}
|
|
$this.pietimer('start');
|
|
}
|
|
});
|
|
},
|
|
|
|
stopWatch: function() {
|
|
var data = $(this).data('pietimer');
|
|
if (data) {
|
|
var seconds = (data.timerFinish-(new Date().getTime()))/1000;
|
|
if (seconds <= 0) {
|
|
clearInterval(data.timer);
|
|
$(this).pietimer('drawTimer', 100);
|
|
data.callback();
|
|
} else {
|
|
var percent = 100-((seconds/(data.timerSeconds))*100);
|
|
$(this).pietimer('drawTimer', percent);
|
|
}
|
|
}
|
|
},
|
|
|
|
drawTimer: function(percent) {
|
|
$this = $(this);
|
|
var data = $this.data('pietimer');
|
|
if (data) {
|
|
$this.html('<div class="percent"></div><div class="slice'+(percent > 50?' gt50"':'"')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
|
|
var deg = 360/100*percent;
|
|
$this.find('.slice .pie').css({
|
|
'-moz-transform':'rotate('+deg+'deg)',
|
|
'-webkit-transform':'rotate('+deg+'deg)',
|
|
'-o-transform':'rotate('+deg+'deg)',
|
|
'transform':'rotate('+deg+'deg)'
|
|
});
|
|
$this.find('.percent').html(Math.round(percent)+'%');
|
|
if (data.showPercentage) {
|
|
$this.find('.percent').show();
|
|
}
|
|
if ($this.hasClass('fill')) {
|
|
$this.find('.slice .pie').css({backgroundColor: data.color});
|
|
}
|
|
else {
|
|
$this.find('.slice .pie').css({borderColor: data.color});
|
|
}
|
|
}
|
|
},
|
|
|
|
start: function() {
|
|
var data = $(this).data('pietimer');
|
|
if (data) {
|
|
data.timerFinish = new Date().getTime()+(data.timerSeconds*1000);
|
|
$(this).pietimer('drawTimer', 0);
|
|
data.timer = setInterval("$this.pietimer('stopWatch')", 50);
|
|
}
|
|
},
|
|
|
|
reset: function() {
|
|
var data = $(this).data('pietimer');
|
|
if (data) {
|
|
clearInterval(data.timer);
|
|
$(this).pietimer('drawTimer', 0);
|
|
}
|
|
}
|
|
};
|
|
|
|
$.fn.pietimer = function(method) {
|
|
if (methods[method]) {
|
|
return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
|
|
} else if (typeof method === 'object' || !method) {
|
|
return methods.init.apply(this, arguments);
|
|
} else {
|
|
$.error('Method ' + method + ' does not exist on jQuery.pietimer');
|
|
}
|
|
};
|
|
})(jQuery);
|