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.
130 lines
3.7 KiB
130 lines
3.7 KiB
(function (factory) { |
|
if (typeof define === 'function' && define.amd) { |
|
// AMD |
|
define(['jquery'], factory); |
|
} else if (typeof exports === 'object') { |
|
// CommonJS |
|
factory(require('jquery')); |
|
} else { |
|
// Browser globals |
|
factory(jQuery); |
|
} |
|
}(function ($) { |
|
var CountTo = function (element, options) { |
|
this.$element = $(element); |
|
this.options = $.extend({}, CountTo.DEFAULTS, this.dataOptions(), options); |
|
this.init(); |
|
}; |
|
|
|
CountTo.DEFAULTS = { |
|
from: 0, // the number the element should start at |
|
to: 0, // the number the element should end at |
|
speed: 1000, // how long it should take to count between the target numbers |
|
refreshInterval: 100, // how often the element should be updated |
|
decimals: 0, // the number of decimal places to show |
|
formatter: formatter, // handler for formatting the value before rendering |
|
onUpdate: null, // callback method for every time the element is updated |
|
onComplete: null // callback method for when the element finishes updating |
|
}; |
|
|
|
CountTo.prototype.init = function () { |
|
this.value = this.options.from; |
|
this.loops = Math.ceil(this.options.speed / this.options.refreshInterval); |
|
this.loopCount = 0; |
|
this.increment = (this.options.to - this.options.from) / this.loops; |
|
}; |
|
|
|
CountTo.prototype.dataOptions = function () { |
|
var options = { |
|
from: this.$element.data('from'), |
|
to: this.$element.data('to'), |
|
speed: this.$element.data('speed'), |
|
refreshInterval: this.$element.data('refresh-interval'), |
|
decimals: this.$element.data('decimals') |
|
}; |
|
|
|
var keys = Object.keys(options); |
|
|
|
for (var i in keys) { |
|
var key = keys[i]; |
|
|
|
if (typeof(options[key]) === 'undefined') { |
|
delete options[key]; |
|
} |
|
} |
|
|
|
return options; |
|
}; |
|
|
|
CountTo.prototype.update = function () { |
|
this.value += this.increment; |
|
this.loopCount++; |
|
|
|
this.render(); |
|
|
|
if (typeof(this.options.onUpdate) == 'function') { |
|
this.options.onUpdate.call(this.$element, this.value); |
|
} |
|
|
|
if (this.loopCount >= this.loops) { |
|
clearInterval(this.interval); |
|
this.value = this.options.to; |
|
|
|
if (typeof(this.options.onComplete) == 'function') { |
|
this.options.onComplete.call(this.$element, this.value); |
|
} |
|
} |
|
}; |
|
|
|
CountTo.prototype.render = function () { |
|
var formattedValue = this.options.formatter.call(this.$element, this.value, this.options); |
|
this.$element.text(formattedValue); |
|
}; |
|
|
|
CountTo.prototype.restart = function () { |
|
this.stop(); |
|
this.init(); |
|
this.start(); |
|
}; |
|
|
|
CountTo.prototype.start = function () { |
|
this.stop(); |
|
this.render(); |
|
this.interval = setInterval(this.update.bind(this), this.options.refreshInterval); |
|
}; |
|
|
|
CountTo.prototype.stop = function () { |
|
if (this.interval) { |
|
clearInterval(this.interval); |
|
} |
|
}; |
|
|
|
CountTo.prototype.toggle = function () { |
|
if (this.interval) { |
|
this.stop(); |
|
} else { |
|
this.start(); |
|
} |
|
}; |
|
|
|
function formatter(value, options) { |
|
return value.toFixed(options.decimals); |
|
} |
|
|
|
$.fn.countTo = function (option) { |
|
return this.each(function () { |
|
var $this = $(this); |
|
var data = $this.data('countTo'); |
|
var init = !data || typeof(option) === 'object'; |
|
var options = typeof(option) === 'object' ? option : {}; |
|
var method = typeof(option) === 'string' ? option : 'start'; |
|
|
|
if (init) { |
|
if (data) data.stop(); |
|
$this.data('countTo', data = new CountTo(this, options)); |
|
} |
|
|
|
data[method].call(data); |
|
}); |
|
}; |
|
})); |