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

Do not clone CSS class names as well

Browse source 
What MultiMediaViewer does is re-using the small thumbnail <img> that
is already present on the page, cloning it, blowing the size up, and
using it as a "placeholder thumbnail". The moment the bigger image
finished loading, it replaces the placeholder.

The issue here is that the cloning includes class names like the
<img class="thumbimage"> on every [[File:…|thumb]] image. This shows a
gray border. The cloned DOM node in MultiMediaViewer shows this gray
border around the placeholder for a short time. This can be distracting.

Change-Id: Ie83427fab478b6568731b9a0b1f7dbbcc6d5b0fb
This commit is contained in:
Thiemo Kreuz 2019-05-18 18:52:00 +02:00 committed by Thiemo Kreuz (WMDE)
parent 8251aa89b7
commit 26fbcd6095
2 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/mmv/mmv.js
View file

@ -275,9 +275,10 @@
// know what size it should be. We still assign it to allow for
// size calculations in getCurrentImageWidths, which needs to know
// the aspect ratio
$initialImage.hide();
$initialImage.addClass( 'mw-mmv-placeholder-image' );
$initialImage.addClass( image.filePageTitle.ext.toLowerCase() );
$initialImage.hide()
.removeAttr( 'style' )
.removeClass()
.addClass( 'mw-mmv-placeholder-image ' + image.filePageTitle.ext.toLowerCase() );
this.ui.canvas.set( image, $initialImage );

9
tests/qunit/mmv/mmv.bootstrap.test.js
View file

@ -550,16 +550,13 @@
$container.addClass( 'metadata' );
assert.strictEqual( bootstrap.isAllowedThumb( $thumb ), false, 'Image in a metadata container is disallowed.' );
$container.prop( 'class', '' );
$container.addClass( 'noviewer' );
$container.removeClass().addClass( 'noviewer' );
assert.strictEqual( bootstrap.isAllowedThumb( $thumb ), false, 'Image in a noviewer container is disallowed.' );
$container.prop( 'class', '' );
$container.addClass( 'noarticletext' );
$container.removeClass().addClass( 'noarticletext' );
assert.strictEqual( bootstrap.isAllowedThumb( $thumb ), false, 'Image in an empty article is disallowed.' );
$container.prop( 'class', '' );
$thumb.addClass( 'noviewer' );
$container.removeClass().addClass( 'noviewer' );
assert.strictEqual( bootstrap.isAllowedThumb( $thumb ), false, 'Image with a noviewer class is disallowed.' );
} );