Merge e368356 into 85aa464

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
         "App": false,
         "appConfig": false,
         "OO": false,
+        "L": false,
         "$": false,
         "window": false,
         "global": false,

assets/translate.js

@@ -116,7 +116,7 @@ $( function () {
 					url: appConfig.baseUrl + 'api/translate/' + $imgElement.data( 'filename' ) + '/' + targetLangCode,
 					data: requestParams,
 					success: function ( result ) {
-						$imgElement.attr( 'src', result.imageSrc );
+						appConfig.imageMapLayer.setUrl( result.imageSrc );
 					},
 					error: function () {
 						OO.ui.alert( $.i18n( 'preview-error-occurred' ) );
@@ -134,3 +134,28 @@ $( function () {
 	// on page load (to catch browser-cached input values).
 	$( '.translation-fields .oo-ui-fieldLayout .oo-ui-inputWidget input:first' ).trigger( 'blur' );
 } );
+
+/**
+ * Add LeafletJS to image, for zooming and panning.
+ */
+$( function () {
+	var imagemap, $imageElement,
+		$imageWrapper = $( '#translation-image' );
+	if ( $imageWrapper.length !== 1 ) {
+		// Don't do anything if the translation image isn't present.
+		return;
+	}
+	$imageElement = $imageWrapper.find( 'img' );
+	$imageElement.css( 'visibility', 'hidden' );
+	$imageWrapper.css( {
+		height: '80vh',
+		width: 'auto'
+	} );
+	imagemap = L.map( $imageWrapper.attr( 'id' ), {
+		crs: L.CRS.Simple,
+		center: [ $imageElement.height() / 2, $imageElement.width() / 2 ],
+		zoom: 0
+	} );
+	appConfig.imageMapLayer = L.imageOverlay( $imageElement.attr( 'src' ), [ [ 0, 0 ], [ $imageElement.height(), $imageElement.width() ] ] );
+	appConfig.imageMapLayer.addTo( imagemap );
+} );

assets/translate.less

@@ -82,6 +82,11 @@ body.translate {
             margin: 0 1rem 0 0.8rem;
           }
         }
+        .leaflet-container,
+        .image {
+          border: 1px solid @wmui-color-base50;
+          background-color: white;
+        }
         img {
           margin-top: 1rem;
           max-width: 100%;