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)...") |
|||
(4 intermediate revisions by the same user not shown) | |||
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); | ||
+ | }); | ||
+ | }; | ||
+ | })); | ||
+ | |||
+ | $('#caseno').countTo(); | ||
+ | $('#artno').countTo(); |
Latest revision as of 14:26, 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); }); }; })); $('#caseno').countTo(); $('#artno').countTo();