Difference between revisions of "MediaWiki:Common.js"
From Oncopaedia
(Created page with "→Any JavaScript here will be loaded for all users on every page load.: $.getJSON('https://oncopaedia.net/w/api.php?action=query&list=astats&format=json', function (data)...") |
|||
| Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
| + | |||
| + | (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); | ||
| + | }); | ||
| + | }; | ||
| + | })); | ||
| + | |||
$.getJSON('https://oncopaedia.net/w/api.php?action=query&list=astats&format=json', function (data) { | $.getJSON('https://oncopaedia.net/w/api.php?action=query&list=astats&format=json', function (data) { | ||
arts =data['astats']['articles']['total'] | arts =data['astats']['articles']['total'] | ||
| − | + | cases =data['astats']['cases']['total'] | |
| + | |||
| + | $("#artno").countTo({ | ||
| + | from: 0, | ||
| + | to: Integer.parseInt(arts), | ||
| + | speed: 200, | ||
| + | refreshInterval: 50 | ||
| + | }); | ||
| + | $("#caseno").countTo({ | ||
| + | from: 0, | ||
| + | to: Integer.parseInt(cases), | ||
| + | speed: 200, | ||
| + | refreshInterval: 50 | ||
| + | }); | ||
| + | |||
}) | }) | ||
Revision as of 14:16, 1 May 2019
/* Any JavaScript here will be loaded for all users on every page load. */
(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);
});
};
}));
$.getJSON('https://oncopaedia.net/w/api.php?action=query&list=astats&format=json', function (data) {
arts =data['astats']['articles']['total']
cases =data['astats']['cases']['total']
$("#artno").countTo({
from: 0,
to: Integer.parseInt(arts),
speed: 200,
refreshInterval: 50
});
$("#caseno").countTo({
from: 0,
to: Integer.parseInt(cases),
speed: 200,
refreshInterval: 50
});
})