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
	 });
 	
 })