MediaWiki:WMDE FR2016/Resources/ProgressBar/script.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/**
 * JavaScript library for general banner functionalities
 *
 * @licence GNU GPL v2+
 * @author Kai Nissen <kai.nissen@wikimedia.de>
 */
var Banner;

( function () {
	'use strict';

	if ( typeof Banner !== 'object' ) {
		Banner = {};
	}

} )();

/**
 * JavaScript library for the progress bar
 *
 * @licence GNU GPL v2+
 * @author Kai Nissen <kai.nissen@wikimedia.de>
 */
( function ( Banner, $ ) {
	'use strict';

	function ProgressBar() {}

	ProgressBar.prototype.animateProgressBar = function () {
		var self = this,
			donationFillElement = $( '#donationFill' ),
			daysLeftElement = $( '#daysLeft' ),
			donationValueElement = $( '#donationValue' ),
			remainingValueElement = $( '#valRem' ),
			preFillValue = 0,
			barWidth, dTarget, dCollected, dRemaining, fWidth, widthToFill,
			donationSumNeededElementWidth = $( '#donationRemainingOuter' ).width();

		$( '#donationMeterWrapper' ).css( { marginRight: donationSumNeededElementWidth + 10 } );
		$( '#donationRemainingOuter' ).css( { right: 0 - donationSumNeededElementWidth + 10 } );

		donationFillElement.clearQueue();
		donationFillElement.stop();
		donationFillElement.width( preFillValue + 'px' );

		daysLeftElement.hide();

		barWidth = $( '#donationMeter' ).width();

		dTarget = GlobalBannerSettings.goalSum;

		// TODO: call `Banner.Calculations.getApprDonationsRaw()`
		dCollected = getApprDonationsRaw();
		if ( dCollected > dTarget ) {
			dCollected  = dTarget;
		}
		dRemaining = dTarget - dCollected;
		fWidth = dCollected / dTarget * barWidth;
		widthToFill = this.getFillWidth( barWidth, dTarget, dCollected );

		donationFillElement.animate( { width: widthToFill + 'px' }, {
			duration: 3000,
			progress: function () {
				var dFill = donationFillElement.width() / widthToFill * fWidth,
					pFill = dFill / barWidth;

				remainingValueElement.html( self._formatMillion( dTarget - ( dTarget * pFill ) ) );
				donationValueElement.html( self._formatMillion( dTarget * pFill ) );
			},
			complete: function () {
				remainingValueElement.html( self._formatMillion( dRemaining ) );
				donationValueElement.html( self._formatMillion( dCollected ) );
				$( '#donationText' ).show();
				$( '#donationRemaining{{#ifeq: {{{position-needed-sum}}} | outer | Outer }}' ).show();
				daysLeftElement.show();
			}
		} );
	};
	
	// called on window resize
	ProgressBar.prototype.setProgressBarSize = function () {
		var donationFillElement = $( '#donationFill' ),
			barWidth, dCollected;
		barWidth = $( '#donationMeter' ).width();
		dCollected = getApprDonationsRaw();
		donationFillElement.width( this.getFillWidth( barWidth, GlobalBannerSettings.goalSum, dCollected ) + 'px' );
	};

	ProgressBar.prototype.getFillWidth = function ( donationBarWidth, donationTarget, donationsCollected ) {
		var widthToFill,
			maxFillWidth = donationBarWidth {{#ifeq: {{{position-needed-sum|inner}}} | inner | - $( '#donationRemaining' ).width() }} - 16,
			fWidth = donationsCollected / donationTarget * donationBarWidth;

		widthToFill = Math.min( maxFillWidth, fWidth );
		// Fill at least 100px or 15% (in case 15% fill is lower than 100px)
		widthToFill = Math.max( "{{{minFillWidth|100}}}", /*0.15 * donationBarWidth,*/ widthToFill );
		return widthToFill;
	};

	ProgressBar.prototype._formatMillion = function( value ) {
		return ( value / 1000000 ).toFixed( 1 ).replace( '.', this._getDecimalSeparator );
	};

	ProgressBar.prototype._getDecimalSeparator = function () {
		switch ( mw.config.get( 'wgContentLanguage' ) ) {
			case 'de':
				return ',';
			case 'en':
				return '.';
			default:
				return ',';
		}
	};

	Banner.progressBar = new ProgressBar();

} )( Banner, jQuery );