Use Preact for wikipedia.de banner (#249)

Updated dependencies for Babel 7 Added jsx plugin Change shared banner modules to ES modules Babel 7 and the `useBuiltIns: 'usage'` setting injects ES6 imports into the CommonJS-based banners. This leads to the error message TypeError: "exports" is read-only` in the compiled banners (See also webpack/webpack#3997 and babel/babel#6980 ). Changed `getSkin` in "BannerFunctions" to preload all skin manipulating classes. Add Preact desktop banner 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
wmde · Oct 23, 2019 · e8a16c5 · e8a16c5
1 parent 8ee6660
commit e8a16c5
Show file tree

Hide file tree

Showing 70 changed files with 3,480 additions and 3,760 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				// debug: true,
+				useBuiltIns: 'usage',
+				corejs: { version: 3, proposals: true }
+			}
+		]
+	],
+	plugins: [
+		[ '@babel/plugin-transform-react-jsx', {
+			pragma: 'h',
+			pragmaFrag: 'Fragment'
+		} ],
+		'@babel/plugin-proposal-class-properties'
+	],
+	exclude: /webpack/
+};
diff --git a/campaign_info.toml b/campaign_info.toml
@@ -84,34 +84,15 @@ tracking = "org-en-ipad-181221-ipad"
 
 # Wikipedia.de Campaign
 [wikipediade]
-campaign_tracking = "wpde-04-181214"
+campaign_tracking = "wpde-01-191111"
 preview_link = "/wikipedia.de?banner=dev-mode-wpde&devbanner={{banner}}"
 wrapper_template = "wikipedia_de"
 
-[wikipediade.banners.fulltop-ctrl]
-filename = "./wikipedia.de/banner_large_ctrl.js"
-pagename = "B18WPDE_04-181214_fixed_large_ctrl"
-tracking = "wpde-04-181214-fixed-large-ctrl"
-
-[wikipediade.banners.top-ctrl]
-filename = "./wikipedia.de/banner_small_ctrl.js"
-pagename = "B18WPDE_04-181214_fixed_small_ctrl"
-tracking = "wpde-04-181214-fixed-small-ctrl"
-
-[wikipediade.banners.fulltop-var]
-filename = "./wikipedia.de/banner_large_var.js"
-pagename = "B18WPDE_04-181214_fixed_large_var"
-tracking = "wpde-04-181214-fixed-large-var"
-
-[wikipediade.banners.top-var]
-filename = "./wikipedia.de/banner_small_var.js"
-pagename = "B18WPDE_04-181214_fixed_small_var"
-tracking = "wpde-04-181214-fixed-small-var"
-
-[wikipediade.banners.featurebox]
-filename = "./wikipedia.de_featurebox/banner.js"
-pagename = "B19WPDE_00-190523_featurebox"
-tracking = "wpde-00-190523_featurebox"
+[wikipediade.banners.ctrl]
+filename = "./wikipedia.de/banner_ctrl.js"
+pagename = "B19WPDE_01-191111_ctrl"
+tracking = "wpde-01-191111-ctrl"
+
 
 # English Campaign
 [english]

diff --git a/desktop/banner_ctrl.js b/desktop/banner_ctrl.js
@@ -18,20 +18,21 @@ import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
 import Translations from '../shared/messages/de';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const campaignDays = new CampaignDays(
 	startOfDay( CampaignParameters.startDate ),
 	endOfDay( CampaignParameters.endDate )
 );
 const campaignDaySentence = new CampaignDaySentence( campaignDays, LANGUAGE );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const campaignProjection = new CampaignProjection(
 	new CampaignDays(
 		startOfDay( CampaignParameters.donationProjection.baseDate ),

diff --git a/desktop/banner_var.js b/desktop/banner_var.js
@@ -18,20 +18,21 @@ import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
 import Translations from '../shared/messages/de';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const campaignDays = new CampaignDays(
 	startOfDay( CampaignParameters.startDate ),
 	endOfDay( CampaignParameters.endDate )
 );
 const campaignDaySentence = new CampaignDaySentence( campaignDays, LANGUAGE );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const campaignProjection = new CampaignProjection(
 	new CampaignDays(
 		startOfDay( CampaignParameters.donationProjection.baseDate ),

diff --git a/english/banner_ctrl.js b/english/banner_ctrl.js
@@ -15,22 +15,24 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import ProgressBar from '../shared/progress_bar/progress_bar';
 import Translations from '../shared/messages/en';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const campaignDays = new CampaignDays(
 	startOfDay( CampaignParameters.startDate ),
 	endOfDay( CampaignParameters.endDate )
 );
 const campaignDaySentence = new CampaignDaySentence( campaignDays, LANGUAGE, 20 );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const campaignProjection = new CampaignProjection(
 	new CampaignDays(
 		startOfDay( CampaignParameters.donationProjection.baseDate ),
@@ -54,7 +56,6 @@ const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
 const sizeIssueIndicator = new SizeIssueIndicator( sizeIssueThreshold );
-const ProgressBar = require( '../shared/progress_bar/progress_bar' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextInnerLeft = [
 	Translations[ 'prefix-days-left' ],

diff --git a/english/banner_var.js b/english/banner_var.js
@@ -16,22 +16,24 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import ProgressBar from '../shared/progress_bar/progress_bar';
 import Translations from '../shared/messages/en';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const campaignDays = new CampaignDays(
 	startOfDay( CampaignParameters.startDate ),
 	endOfDay( CampaignParameters.endDate )
 );
 const campaignDaySentence = new CampaignDaySentence( campaignDays, LANGUAGE, 20 );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const campaignProjection = new CampaignProjection(
 	new CampaignDays(
 		startOfDay( CampaignParameters.donationProjection.baseDate ),
@@ -55,7 +57,6 @@ const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
 const sizeIssueIndicator = new SizeIssueIndicator( sizeIssueThreshold );
-const ProgressBar = require( '../shared/progress_bar/progress_bar' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextInnerLeft = [
 	Translations[ 'prefix-days-left' ],

diff --git a/mobile/banner_ctrl.js b/mobile/banner_ctrl.js
@@ -8,18 +8,22 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import animateHighlight from '../shared/animate_highlight';
+import ProgressBar from '../shared/progress_bar/progress_bar_mobile';
 import Translations from '../shared/messages/de';
 import { Slider } from './banner_slider';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
+
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 const $ = require( 'jquery' );
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const formatNumber = require( 'format-number' );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const bannerTemplate = require( './templates/banner_html.hbs' );
 
 // BEGIN Banner-Specific configuration
@@ -56,12 +60,9 @@ const dayName = new DayName( new Date() );
 const currentDayName = Translations[ dayName.getDayNameMessageKey() ];
 const weekdayPrepPhrase = dayName.isSpecialDayName() ? Translations[ 'day-name-prefix-todays' ] : Translations[ 'day-name-prefix-this' ];
 
-const animateHighlight = require( '../shared/animate_highlight' );
-
 const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
-const ProgressBar = require( '../shared/progress_bar/progress_bar_mobile' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextInnerLeft = [
 	'noch',

diff --git a/mobile/banner_var.js b/mobile/banner_var.js
@@ -9,18 +9,22 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import animateHighlight from '../shared/animate_highlight';
+import ProgressBar from '../shared/progress_bar/progress_bar_mobile';
 import Translations from '../shared/messages/de';
 import { Slider } from './banner_slider';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
+
 const Handlebars = require( 'handlebars/runtime' );
 Handlebars.registerHelper( 'capitalizeFirstLetter', function ( message ) {
 	return message.charAt( 0 ).toUpperCase() + message.slice( 1 );
 } );
 const $ = require( 'jquery' );
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const formatNumber = require( 'format-number' );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const bannerTemplate = require( './templates/banner_html_var.hbs' );
 
 // BEGIN Banner-Specific configuration
@@ -57,12 +61,9 @@ const dayName = new DayName( new Date() );
 const currentDayName = Translations[ dayName.getDayNameMessageKey() ];
 const weekdayPrepPhrase = dayName.isSpecialDayName() ? Translations[ 'day-name-prefix-todays' ] : Translations[ 'day-name-prefix-this' ];
 
-const animateHighlight = require( '../shared/animate_highlight' );
-
 const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
-const ProgressBar = require( '../shared/progress_bar/progress_bar_mobile' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextInnerLeft = [
 	'noch',

diff --git a/mobile_english/banner_ctrl.js b/mobile_english/banner_ctrl.js
@@ -8,15 +8,17 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import ProgressBar from '../shared/progress_bar/progress_bar_mobile';
 import Translations from '../shared/messages/en';
 import { Slider } from './banner_slider';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const $ = require( 'jquery' );
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const formatNumber = require( 'format-number' );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const bannerTemplate = require( './templates/banner_html.hbs' );
 
 // BEGIN Banner-Specific configuration
@@ -57,7 +59,6 @@ const animateHighlight = require( '../shared/animate_highlight' );
 const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
-const ProgressBar = require( '../shared/progress_bar/progress_bar_mobile' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextRight = 'Still missing: € <span class="js-value_remaining">1,2</span>M';
 const progressBarTextInnerRight = '€ <span class="js-donation_value">1.2</span>M';

diff --git a/mobile_english/banner_var.js b/mobile_english/banner_var.js
@@ -8,15 +8,17 @@ import CampaignDays, { startOfDay, endOfDay } from '../shared/campaign_days';
 import CampaignDaySentence from '../shared/campaign_day_sentence';
 import InterruptibleTimeout from '../shared/interruptible_timeout';
 import DayName from '../shared/day_name';
+import ProgressBar from '../shared/progress_bar/progress_bar_mobile';
 import Translations from '../shared/messages/en';
 import { Slider } from './banner_slider';
 import { createCampaignParameters } from '../shared/campaign_parameters';
+import { BannerFunctions as BannerFunctionsFactory } from '../shared/banner_functions';
+import { CampaignProjection } from '../shared/campaign_projection';
 
 const $ = require( 'jquery' );
 const CampaignParameters = createCampaignParameters();
-const BannerFunctions = require( '../shared/banner_functions' )( null, Translations );
+const BannerFunctions = BannerFunctionsFactory( null, Translations );
 const formatNumber = require( 'format-number' );
-const CampaignProjection = require( '../shared/campaign_projection' );
 const bannerTemplate = require( './templates/banner_html_var.hbs' );
 
 // BEGIN Banner-Specific configuration
@@ -58,7 +60,6 @@ const animateHighlight = require( '../shared/animate_highlight' );
 const $bannerContainer = $( '#WMDE-Banner-Container' );
 const CampaignName = $bannerContainer.data( 'campaign-tracking' );
 const BannerName = $bannerContainer.data( 'tracking' );
-const ProgressBar = require( '../shared/progress_bar/progress_bar_mobile' );
 const numberOfDaysUntilCampaignEnd = campaignDays.getNumberOfDaysUntilCampaignEnd();
 const progressBarTextRight = 'Still missing: € <span class="js-value_remaining">1,2</span>M';
 const progressBarTextInnerRight = '€ <span class="js-donation_value">1.2</span>M';