wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 23:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use native JavaScript to build thumbnail clip path

Browse source 
Change-Id: Ib5d734fde88eaa20ec866722af3de37abe694add
This commit is contained in:
Jon Robson 2023-05-12 14:01:23 -07:00
parent 1ee66bbf72
commit 323d770d66
5 changed files with 45 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/dist/index.js vendored
View file

Binary file not shown.

BIN
resources/dist/index.js.map.json vendored
View file

Binary file not shown.

43
src/ui/thumbnail.js
View file

@ -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' ) );
$thumbnailSVGImage[ 0 ].setAttributeNS( nsXlink, 'href', url );
const thumbnailSVGImage = document.createElementNS( nsSvg, 'image' );
thumbnailSVGImage.setAttributeNS( nsXlink, 'href', url );
// The following classes are used here:
// * mwe-popups-is-not-tall
// * mwe-popups-is-tall
$thumbnailSVGImage
.addClass( className )
.attr( {
thumbnailSVGImage.classList.add( className );
addAttributes(
thumbnailSVGImage,
{
x,
y,
width: thumbnailWidth,
height: thumbnailHeight
} );
}
);
const $thumbnail = $( document.createElementNS( nsSvg, 'svg' ) )
.attr( {
const thumbnail = document.createElementNS( nsSvg, 'svg' );
addAttributes(
thumbnail, {
xmlns: nsSvg,
width,
height
} )
.append( $thumbnailSVGImage );
$thumbnail.append( line );
return $thumbnail;
}
);
thumbnail.appendChild( thumbnailSVGImage );
thumbnail.appendChild( line );
return thumbnail;
}

4
tests/node-qunit/ui/renderer.test.js
View file

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

27
tests/node-qunit/ui/thumbnail.test.js
View file

@ -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' );