Merge a593949 into 452f412

.eslintrc.js

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

assets/translate.js

@@ -68,3 +68,28 @@ $( function () {
 		} );
 	} );
 } );
+
+/**
+ * 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
+	} );
+	L.imageOverlay( $imageElement.attr( 'src' ), [ [ 0, 0 ], [ $imageElement.height(), $imageElement.width() ] ] )
+		.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%;