MediaWiki:WMDE FR2016/Resources/ProgressBar
<script type="text/javascript">/**
* 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>