MediaWiki:WMDE FR2016/Resources/ProgressBar

* 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' ).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 - $( '#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}}}", /*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 );</script> <style>

donationMeterWrapper {

   position: relative;
   margin: {{{margin}}};
   /* max-width: 1200px; */
   border: 2px solid {{{border-color}}};
   border-radius: 8px;

}

donationMeter {

   margin: 0 auto;
   height: {{{size}}}px;

}

donationFill {

   position: absolute;
   top: -1px;
   left: 0;
   width: 90px;
   height: Expression error: Unrecognized punctuation character "{".px;
   background: {{{fill-color}}};

border-radius: 5px 0 0 5px; }

pbarTip {

   position: absolute;
   right: 0;
   height: {{{size}}}px;

}

pbarTip img {

   vertical-align: baseline;

}

donationText {

   position: absolute;
   right: Expression error: Unrecognized punctuation character "{".px;
   height: 100%;
   width: 100%;
   text-align: right;
   line-height: Expression error: Unrecognized punctuation character "{".px;
   font-size: 15px;
   font-weight: bold;
   color: {{{text-color-inner}}};
   overflow: hidden;

}

donationRemaining {

   position: absolute;
   top: -1px;
   right: 10px;
   font-size: 15px;
   color: {{{text-color-outer}}};
   font-weight: bold;
   display: none;
   line-height: Expression error: Unrecognized punctuation character "{".px;

}

donationRemainingOuter {

   position: absolute;
   top: -1px;
   line-height: Expression error: Unrecognized punctuation character "{".px;
   right: -150px;
   font-size: 15px;
   color: {{{text-color-outer}}};
   font-weight:bold;
   display: none;

}

donationRemainingOuter .pointer-tip {

   width: 5px;
   height: 5px;
   background: {{{text-color-outer}}};
   float: left;
   border-radius: 100%;
   margin-top: Expression error: Unrecognized punctuation character "{".px;

}

donationRemainingOuter .pointer-line {

   float: left;
   width: 25px;
   background: {{{text-color-outer}}};
   margin: Expression error: Unrecognized punctuation character "{".px 2px 0 0;

}

daysLeft {

   display: none;
   font-size: 15px;
   color: {{{text-color-inner}}};
   font-weight: bold;
   line-height: Expression error: Unrecognized punctuation character "{".px;
   position: absolute;
   left: 5px;

}

donationMeterTip {

display: block;

   background: {{{background-color}}};
   border-bottom: Expression error: Unrecognized punctuation character "{".px solid transparent;
   border-left: Expression error: Unrecognized punctuation character "{".px solid {{{fill-color}}};
   border-top: Expression error: Unrecognized punctuation character "{".px solid transparent;
   height: 0;
   position: absolute;
   right: 0;
   width: 0;

}</style>

es fehlen 1,2 Mio. €