Merge 1a8c8f5 into 208cf6d

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.",