Add trigger callback for highlight animation

Pass the callback to the child method up the component hierarchy, via a
"trigger method", so the mobile banner can call the method for the
animation when it shows the fullpage banner.

Add explicitly evaluated spaces to TextHighlight child text to
circumvent [JSX space-eating behavior][1].

[1]: facebook/react#4134

wikipedia.de_prototype/TODO.md

@@ -1,13 +1,14 @@
 # TODOs
 
-- [ ] Highlight animation only in mobile banner
-- [ ] Scroll in from top
-- [ ] Lightbox
+- [ ] Lightbox for Application of Funds (on Desktop)
+- [ ] Adjust mobile slides accoring to the criteria for CTRL in https://phabricator.wikimedia.org/T235728 
 
 ## For Usage on wp.org:
 - [ ] Make CSS localized by prepending all CSS with ID, or using 
-    [newfangled stuff](https://github.com/css-modules/css-modules),
+    [CSS modules](https://github.com/css-modules/css-modules),
     see [this article](https://medium.com/trabe/using-bem-conventions-in-css-modules-leveraging-custom-webpack-loaders-fd985f72bcb2)
     to learn how to combine BEM notation and CSS modules  
-- [ ] Progress bar
-- [ ] Mediawiki-Skin dependent banner space reservation (see `shared/skin` classes)
+- [ ] Mediawiki-Skin dependent banner space reservation (see `shared/skin` classes)
+- [ ] initial delay and scroll-in. For that, maybe the `bannerVisible` property needs to be split in two: One for actual visibility and one for when the banner is "ready" (i.e. completely scrolled down). This will become important for when animations should start when the banner is fully in view (e.g. progress bar)
+- [ ] Progress bar. (starting only when `bannerVisible` property switches from false to true)
+

wikipedia.de_prototype/banners/MobileBanner.jsx

@@ -8,7 +8,8 @@ import MobileBannerFullpage from './MobileBannerFullpage';
 export default class MobileBanner extends Component {
 	constructor(props) {
 		super(props);
-		this.state = { isFullPageVisible: false }
+		this.state = { isFullPageVisible: false };
+		this.animateHighLight = null;
 	}
 
 	componentDidMount() {
@@ -19,9 +20,14 @@ export default class MobileBanner extends Component {
 
 	showForm = e => {
 		this.props.trackingData.eventTracker.trackEvent( 'mobile-mini-banner-expanded', this.props.trackingData.bannerClickTrackRatio );
-		this.setState( { isFullPageVisible: true } )
+		this.setState( { isFullPageVisible: true } );
+		if ( this.animateHighLight ) {
+			this.animateHighLight();
+		}
 	};
 
+	animateHighlightTrigger = cb => { this.animateHighLight = cb };
+
 	render( props, state, context ) {
 		return <Fragment>
 			<div className={ classNames('mini-banner', { 'is-hidden': this.state.isFullPageVisible || !props.bannerVisible } ) }>
@@ -67,7 +73,7 @@ export default class MobileBanner extends Component {
 					</div>
 				</div>
 			</div>
-			<MobileBannerFullpage {...props} isFullPageVisible={this.state.isFullPageVisible}/>
+			<MobileBannerFullpage {...props} isFullPageVisible={this.state.isFullPageVisible} animateHighlightTrigger={ this.animateHighlightTrigger }/>
 		</Fragment>
 	}
 

wikipedia.de_prototype/banners/MobileBannerFullpage.jsx

@@ -18,7 +18,9 @@ export default function MobileBannerFullpage( props ) {
 						  numberOfDonors={props.numberOfDonors}
 						  campaignDaySentence={props.campaignDaySentence}
 						  weekdayPrepPhrase={props.weekdayPrepPhrase}
-						  currentDayName={props.currentDayName}/>
+						  currentDayName={props.currentDayName}
+						  animateHighlightTrigger={props.animateHighlightTrigger}
+					/>
 					<div className="call-to-action">
 						Jetzt sind Sie <span className="call-to-action__optional-text">in Deutschland</span> gefragt.
 					</div>

wikipedia.de_prototype/components/Infobox.jsx

@@ -6,7 +6,8 @@ function capitalizeFirstLetter( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 }
 
-export default function Infobox( { weekdayPrepPhrase, currentDayName, amountBannerImpressionsInMillion, numberOfDonors, campaignDaySentence } ) {
+export default function Infobox( props ) {
+	const { weekdayPrepPhrase, currentDayName, amountBannerImpressionsInMillion, numberOfDonors, campaignDaySentence, animateHighlightTrigger } = props;
 	return <div className="infobox__text">
 		<p className="text__headline">
 			<span className="text__headline--bold">Liebe Leserinnen und Leser,</span>
@@ -19,7 +20,9 @@ export default function Infobox( { weekdayPrepPhrase, currentDayName, amountBann
 			{campaignDaySentence} Wikipedia wird durch Spenden von durchschnittlich 21,48&nbsp;€ finanziert, aber
 			99&nbsp;% der Leserinnen und Leser spenden nicht.
 
-			<TextHighlight>Wenn alle, die das jetzt lesen, einen kleinen Beitrag leisten, wäre unser Spendenziel bereits am heutigen { currentDayName } erreicht.</TextHighlight>
+			<TextHighlight animateHighlightTrigger={animateHighlightTrigger}>
+				{' '}Wenn alle, die das jetzt lesen, einen kleinen Beitrag leisten, wäre unser Spendenziel bereits am heutigen { currentDayName } erreicht.{' '}
+			</TextHighlight>
 
 			Schon der Preis einer Tasse Kaffee würde genügen.
 			Über {amountBannerImpressionsInMillion} Millionen Mal wird unser Spendenaufruf täglich angezeigt,

wikipedia.de_prototype/components/Infobox.pcss

@@ -106,17 +106,14 @@
 		margin: 0;
 		padding: 0;
 		display: inline;
+		/* TODO move to highlight.pcss and make it responsive */
 		&--highlight {
 			font-weight: bold;
-			padding: 0 .3em;
 			.marked {
 				border: 0 none;
 				background: $color-text-highlight;
 				font-weight: bold;
 				color: $color-dark;
-				margin: 0 -0.3em;
-				padding: 0 0.3em;
-
 			}
 		}
 		&--italic {

wikipedia.de_prototype/components/TextHighlight.jsx

@@ -6,8 +6,14 @@ export default class TextHighlight extends Component {
 	componentDidMount() {
 		const plainText = toChildArray( this.props.children ).reduce( ( t, child ) => typeof child === 'string' ? t + child : t, '' );
 		this.setState( { highlightedText: '', plainText } );
+		if ( this.props.animateHighlightTrigger ) {
+			this.props.animateHighlightTrigger( this.animateHighlight.bind(this) );
+		}
+	}
 
-		// TODO watch bannerIsVisible property and start animation when banner is visible (instead of when it's mounted)
+	animateHighlight() {
+		const plainText = this.state.plainText;
+		const initialDelay = 1000; // should be synchronized with the CSS animation that drops down the banner
 		const duration = 1500;
 		const millisecondsPerChar = Math.max( 10, duration / plainText.length );
 		// TODO When duration / plainTextlength < 10, find slice size based on millisecondsPerChar
@@ -19,8 +25,8 @@ export default class TextHighlight extends Component {
 			if ( plainText ) {
 				this.highlightAnimation = setTimeout( animateSlice, millisecondsPerChar );
 			}
-		}
-		this.highlightAnimation = setTimeout( animateSlice, millisecondsPerChar )
+		};
+		this.highlightAnimation = setTimeout( animateSlice, initialDelay )
 	}
 
 	componentWillUnmount() {