Use native JavaScript to build thumbnail clip path

Change-Id: Ib5d734fde88eaa20ec866722af3de37abe694add

src/ui/thumbnail.js

@@ -126,6 +126,18 @@ function createThumbnailImg( url ) {
 	return img;
 }
 
+/**
+ * Sets multiple attributes on a node.
+ *
+ * @param {HTMLElement} node
+ * @param {Record<String, String>} attrs
+ */
+const addAttributes = ( node, attrs ) => {
+	Object.keys( attrs ).forEach( ( key ) => {
+		node.setAttribute( key, attrs[ key ] );
+	} );
+};
+
 /**
  * Creates the SVG image element that represents the thumbnail.
  *
@@ -141,7 +153,7 @@ function createThumbnailImg( url ) {
  * @param {number} thumbnailHeight
  * @param {number} width
  * @param {number} height
- * @return {JQuery}
+ * @return {HTMLElement}
  */
 
 export function createThumbnailSVG(
@@ -162,28 +174,31 @@ export function createThumbnailSVG(
 	line.setAttribute( 'points', points.join( ' ' ) );
 	line.setAttribute( 'stroke-width', 1 );
 
-	const $thumbnailSVGImage = $( document.createElementNS( nsSvg, 'image' ) );
+	const thumbnailSVGImage = document.createElementNS( nsSvg, 'image' );
-	$thumbnailSVGImage[ 0 ].setAttributeNS( nsXlink, 'href', url );
+	thumbnailSVGImage.setAttributeNS( nsXlink, 'href', url );
 	// The following classes are used here:
 	// * mwe-popups-is-not-tall
 	// * mwe-popups-is-tall
-	$thumbnailSVGImage
+	thumbnailSVGImage.classList.add( className );
-		.addClass( className )
+	addAttributes(
-		.attr( {
+		thumbnailSVGImage,
+		{
 			x,
 			y,
 			width: thumbnailWidth,
 			height: thumbnailHeight
-		} );
+		}
+	);
 
-	const $thumbnail = $( document.createElementNS( nsSvg, 'svg' ) )
+	const thumbnail = document.createElementNS( nsSvg, 'svg' );
-		.attr( {
+	addAttributes(
+		thumbnail, {
 			xmlns: nsSvg,
 			width,
 			height
-		} )
+		}
-		.append( $thumbnailSVGImage );
+	);
-
+	thumbnail.appendChild( thumbnailSVGImage );
-	$thumbnail.append( line );
+	thumbnail.appendChild( line );
-	return $thumbnail;
+	return thumbnail;
 }

tests/node-qunit/ui/renderer.test.js

@@ -135,8 +135,8 @@ QUnit.test( 'createPagePreview', ( assert ) => {
 
 	assert.strictEqual( preview.hasThumbnail, true, 'Preview has thumbnail.' );
 	assert.deepEqual(
-		preview.thumbnail.el.html(),
+		$( preview.thumbnail.el ).html(),
-		createThumbnail( model.thumbnail ).el.html(),
+		$( createThumbnail( model.thumbnail ).el ).html(),
 		'Preview thumbnail is the correct one.'
 	);
 	assert.strictEqual(

tests/node-qunit/ui/thumbnail.test.js

@@ -86,32 +86,32 @@ QUnit.test( 'createThumbnail - tall image element', ( assert ) => {
 		} );
 
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'x' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'x' ),
 			case_.expectedX,
 			`Image element x coordinate is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'y' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'y' ),
 			case_.expectedY,
 			`Image element y coordinate is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'width' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'width' ),
 			case_.width,
 			`Image element width is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'height' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'height' ),
 			case_.height,
 			`Image element height is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.attr( 'width' ),
+			+$( thumbnail.el ).attr( 'width' ),
 			case_.expectedSVGWidth,
 			`Image SVG width is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.attr( 'height' ),
+			+$( thumbnail.el ).attr( 'height' ),
 			case_.expectedSVGHeight,
 			`Image SVG height is correct. ${case_.message}`
 		);
@@ -208,32 +208,32 @@ QUnit.test( 'createThumbnail - landscape image element', ( assert ) => {
 		} );
 
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'x' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'x' ),
 			case_.expectedX,
 			`Image x coordinate is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'y' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'y' ),
 			case_.expectedY,
 			`Image y coordinate is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'width' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'width' ),
 			case_.width,
 			`Image element width is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.find( 'image' ).attr( 'height' ),
+			+$( thumbnail.el ).find( 'image' ).attr( 'height' ),
 			case_.height,
 			`Image element height is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.attr( 'width' ),
+			+$( thumbnail.el ).attr( 'width' ),
 			case_.expectedSVGWidth,
 			`Image SVG width is correct. ${case_.message}`
 		);
 		assert.strictEqual(
-			+thumbnail.el.attr( 'height' ),
+			+$( thumbnail.el ).attr( 'height' ),
 			case_.expectedSVGHeight,
 			`Image SVG height is correct. ${case_.message}`
 		);
@@ -318,9 +318,10 @@ QUnit.test( 'createThumbnailSVG', ( assert ) => {
 			expectedPoints: '0 0 0 300'
 		}
 	].forEach( ( { className, expectedPoints, expectedHTML }, i ) => {
-		const $thumbnail = createThumbnailSVG(
+		const thumbnail = createThumbnailSVG(
 			className, url, x, y, thumbnailWidth, thumbnailHeight,
 			width, height );
+		const $thumbnail = $( thumbnail );
 
 		// Simplify HTML image test
 		const points = $thumbnail.find( 'polyline' ).attr( 'points' );