Add zoom and pan to image (with Leaflet)

Add the image as a Leaflet layer as an easy way to get zooming
and panning, and perhaps at some future point to have highlight
of current field.

Bug: T211373

.eslintrc.js

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

assets/translate.js

@@ -99,7 +99,7 @@ $( function () {
 $( function () {
 	$( '.translation-fields .oo-ui-fieldLayout .oo-ui-inputWidget' ).each( function () {
 		var inputWiget = OO.ui.infuse( $( this ) ),
-			$imgElement = $( '.image img' ),
+			$imgElement = $( '#translation-image' ),
 			targetLangWidget = OO.ui.infuse( $( '.target-lang-widget' ) ),
 			targetLangCode = targetLangWidget.getValue(),
 			requestParams = {},
@@ -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%;

package.json

@@ -7,6 +7,7 @@
     "jquery": "3.3",
     "jquery.uls": "0.1",
     "js-cookie": "2.2",
+    "leaflet": "1.4.0",
     "less": "3.9",
     "less-loader": "4.1",
     "oojs-ui": "0.30.2",