Add auto-preview of image as labels are changed

This adds functionality to be able to live-preview translations as
they're changed in the form. To do this, it updates the API to be
able to first receive (via POST) a new set of translations, which
are then added to the SVG file and a PNG rendered out to the
filesystem. Then, when a 2nd request (GET this time) is received
for that rendered PNG file, it's returned. This is done by creating
a temporary unique identifier for the file (based on the submitted
translations).

The front-end is modified to make this first request, and when it
receives the response all it has to do is update the image's src
attribute and the 2nd request happens.

The process of adding these strings back into SvgFile was a bit
cumbersome, so a new method SvgFile::setTranslations() was
added, which handles adding the new text and tspan node info.

Tests were updated, but the broken controller test remains for
the time being.

Bug: https://phabricator.wikimedia.org/T207203

assets/translate.js

@@ -9,22 +9,29 @@ $( function () {
 		return;
 	}
 	function onSelectTargetLang( language ) {
-		// Save the language name and code in the widget.
+		var $imgElement, newImageUrl;
+		// 1. Save the language name and code in the widget.
 		this.setLabel( $.uls.data.languages[ language ][ 2 ] );
 		this.setData( language );
-		// Also switch what's displayed in the form when a new language is selected in the ULS.
+		this.setValue( language );
+		// 2. Switch what's displayed in the form when a new language is selected in the ULS.
 		$( '.translation-fields .oo-ui-fieldLayout' ).each( function () {
-			var field = OO.ui.infuse( $( this ) ).getField();
-			if ( appConfig.translations[ field.data.nodeId ] &&
-				appConfig.translations[ field.data.nodeId ][ language ]
+			var field = OO.ui.infuse( $( this ) ).getField(),
+				tspanId = field.data[ 'tspan-id' ];
+			if ( appConfig.translations[ tspanId ] &&
+				appConfig.translations[ tspanId ][ language ]
 			) {
 				// If there's a translation available, set the field's value.
-				field.setValue( appConfig.translations[ field.data.nodeId ][ language ].text );
+				field.setValue( appConfig.translations[ tspanId ][ language ].text );
 			} else {
 				// Otherwise, blank the field.
 				field.setValue( '' );
 			}
 		} );
+		// 3. Update the image.
+		$imgElement = $( '.image img' );
+		newImageUrl = $imgElement.attr( 'src' ).replace( /[a-z_-]*\.png.*$/, language + '.png' );
+		$imgElement.attr( 'src', newImageUrl );
 	}
 	targetLangButton = OO.ui.infuse( $targetLangButton );
 	targetLangButton.$element.uls( {
@@ -68,3 +75,39 @@ $( function () {
 		} );
 	} );
 } );
+
+/**
+ * When a translation field is changed, update the image preview.
+ */
+$( function () {
+	$( '.translation-fields .oo-ui-fieldLayout .oo-ui-inputWidget' ).each( function () {
+		var inputWiget = OO.ui.infuse( $( this ) ),
+			$imgElement = $( '.image img' ),
+			targetLangWidget = OO.ui.infuse( $( '.target-lang-widget' ) ),
+			targetLangCode = targetLangWidget.getValue(),
+			requestParams = {},
+			updatePreviewImage = function () {
+				// Go through all fields and construct the request parameters.
+				$( '.translation-fields .oo-ui-fieldLayout' ).each( function () {
+					var fieldLayout = OO.ui.infuse( $( this ) ),
+						tspanId = fieldLayout.getField().data[ 'tspan-id' ];
+					requestParams[ tspanId ] = fieldLayout.getField().getValue();
+				} );
+				// Update the image.
+				$.ajax( {
+					type: 'POST',
+					url: appConfig.baseUrl + 'api/translate/' + $imgElement.data( 'filename' ) + '/' + targetLangCode,
+					data: requestParams,
+					success: function ( result ) {
+						$imgElement.attr( 'src', result.imageSrc );
+					},
+					error: function () {
+						OO.ui.alert( $.i18n( 'preview-error-occurred' ) );
+					}
+				} );
+			};
+		// Update the preview image on field blur and after two seconds of no typing.
+		inputWiget.$input.on( 'blur', updatePreviewImage );
+		inputWiget.on( 'change', OO.ui.debounce( updatePreviewImage, 2000 ) );
+	} );
+} );

i18n/en.json

@@ -33,6 +33,7 @@
   "download-button-label": "Download",
   "download-or-upload": "or",
   "translation-image-alt": "The image that's currently being translated. No description available.",
+  "preview-error-occurred": "An error occurred when fetching the preview. Please continue translating, but if this error persists do report a bug (via the link in the footer below).",
 
   "download-icon-alt": "An icon indicating file-download",
   "pick-an-image-title": "Pick an image",

i18n/qqq.json

@@ -33,6 +33,7 @@
   "download-button-label": "Label for the button that downloads the translated SVG to the user's local computer.",
   "download-or-upload": "Label positioned between the download and the upload buttons.",
   "translation-image-alt": "Alt text for the image that's currently being translated. Doesn't explain the image, just explains that we don't explain it.",
+  "preview-error-occurred": "Error message displayed in a popup when fetching a preview failed. The only option is 'OK' to close the popup.",
 
   "download-icon-alt": "Alt text for the download icon.",
   "pick-an-image-title": "The title of the 'pick an image' step of the tutorial box.",