jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/360566 )
Change subject: Exclude noviewer and metadata images from media viewer
......................................................................
Exclude noviewer and metadata images from media viewer
Bug: T163847
Change-Id: Iebe56bc9ae0ce2c4725e3e5d9d5ce055aa9ace57
---
M resources/mobile.startup/Page.js
M tests/qunit/mobile.startup/test_Page.js
2 files changed, 60 insertions(+), 7 deletions(-)
Approvals:
Bmansurov: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mobile.startup/Page.js b/resources/mobile.startup/Page.js
index 9a9d8bf..2063082 100644
--- a/resources/mobile.startup/Page.js
+++ b/resources/mobile.startup/Page.js
@@ -3,7 +3,8 @@
var time = M.require( 'mobile.startup/time' ),
View = M.require( 'mobile.startup/View' ),
Section = M.require( 'mobile.startup/Section' ),
- Thumbnail = M.require( 'mobile.startup/Thumbnail' );
+ Thumbnail = M.require( 'mobile.startup/Thumbnail' ),
+ BLACKLISTED_THUMBNAIL_CLASS_SELECTORS = [ 'noviewer',
'metadata' ];
/**
* Mobile page view object
@@ -241,20 +242,39 @@
},
/**
- * Return all the thumbnails in the article
+ * Return all the thumbnails in the article. Images which have
a class or link container (.image|.thumbimage)
+ * that matches one of the items of the constant
BLACKLISTED_THUMBNAIL_CLASS_SELECTORS will be excluded.
+ * A thumbnail nested inside one of these classes will still be
returned.
+ * e.g. `<div class="noviewer"><a
class="image"><img></a></div>` is a valid thumbnail
+ * `<a class="image noviewer"><img></a>` is not a valid
thumbnail
+ * `<a class="image"><img class="noviewer"></a>` is not a valid
thumbnail
* @method
* @return {Thumbnail[]}
*/
getThumbnails: function () {
- var thumbs = [];
+ var $thumbs,
+ blacklistSelector = '.' +
BLACKLISTED_THUMBNAIL_CLASS_SELECTORS.join( ',.' ),
+ thumbs = [];
if ( !this._thumbs ) {
- this.$el.find( 'a.image, a.thumbimage' ).each(
function () {
+ $thumbs = this.$el.find( 'a.image,
a.thumbimage' )
+ .not( blacklistSelector );
+
+ $thumbs.each( function () {
var $a = $( this ),
+ $lazyImage = $a.find(
'.lazy-image-placeholder' ),
+ valid = $a.find(
blacklistSelector ).length === 0,
legacyMatch = $a.attr( 'href'
).match( /title=([^\/&]+)/ ),
match = $a.attr( 'href'
).match( /[^\/]+$/ );
- if ( legacyMatch || match ) {
+ // filter out invalid lazy loaded
images if so far image is valid
+ if ( $lazyImage.length && valid ) {
+ // if the regex matches it
means the image has one of the classes - so we must invert the result
+ valid = !new RegExp( '\\b(' +
BLACKLISTED_THUMBNAIL_CLASS_SELECTORS.join( '|' ) + ')\\b' )
+ .test( $lazyImage.data(
'class' ) );
+ }
+
+ if ( valid && ( legacyMatch || match )
) {
thumbs.push(
new Thumbnail( {
el: $a,
diff --git a/tests/qunit/mobile.startup/test_Page.js
b/tests/qunit/mobile.startup/test_Page.js
index a7c6606..521bb9d 100644
--- a/tests/qunit/mobile.startup/test_Page.js
+++ b/tests/qunit/mobile.startup/test_Page.js
@@ -15,8 +15,9 @@
assert.strictEqual( p2.isMainPage(), false, 'check not marked
as main page' );
} );
- QUnit.test( '#getThumbnails', 5, function ( assert ) {
- var p, textPage, pLegacyUrls, thumbs;
+ QUnit.test( '#getThumbnails', 10, function ( assert ) {
+ var p, textPage, pLegacyUrls, thumbs, pNoViewer, pMetadata,
pLazyImages,
+ pLazyImagesTypo, pMetadataNested;
p = new Page( {
el: $( '<div><a
href="/wiki/File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg" class="image
view-border-box"><img alt="Cyanolimnas cerverai by Allan Brooks cropped.jpg"
src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg/300px-Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
width="300" height="303" data-file-width="454"
data-file-height="459"></a></div>' )
@@ -28,6 +29,21 @@
el: $( '<div><a
href="/wikpa/index.php?title=File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
class="image view-border-box"><img alt="Cyanolimnas cerverai by Allan Brooks
cropped.jpg"
src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg/300px-Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
width="300" height="303" data-file-width="454"
data-file-height="459"></a></div>' )
} );
thumbs = p.getThumbnails();
+ pNoViewer = new Page( {
+ el: $( '<div><a
href="/wikpa/index.php?title=File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
class="image view-border-box noviewer"><img alt="Cyanolimnas cerverai by Allan
Brooks cropped.jpg"
src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg/300px-Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
width="300" height="303" data-file-width="454"
data-file-height="459"></a></div>' )
+ } );
+ pMetadata = new Page( {
+ el: $( '<div><a
href="/wikpa/index.php?title=File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
class="image view-border-box"><img alt="Cyanolimnas cerverai by Allan Brooks
cropped.jpg" class="metadata"
src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg/300px-Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
width="300" height="303" data-file-width="454"
data-file-height="459"></a></div>' )
+ } );
+ pMetadataNested = new Page( {
+ el: $( '<div class="noviewer"><a
href="/wikpa/index.php?title=File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
class="image view-border-box"><img alt="Cyanolimnas cerverai by Allan Brooks
cropped.jpg"
src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg/300px-Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg"
width="300" height="303" data-file-width="454"
data-file-height="459"></a></div>' )
+ } );
+ pLazyImages = new Page( {
+ el: $( '<div><a
href="/wiki/File:Design_portal_logo.jpg" class="image"><noscript><img
alt="icon"
src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Design_portal_logo.jpg/28px-Design_portal_logo.jpg"
width="28" height="28" class="noviewer" data-file-width="151"
data-file-height="151"></noscript><span class="lazy-image-placeholder"
style="width: 28px;height: 28px;"
data-src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Design_portal_logo.jpg/28px-Design_portal_logo.jpg"
data-alt="icon" data-width="28" data-height="28"
data-class="noviewer"> </span></a></div>' )
+ } );
+ pLazyImagesTypo = new Page( {
+ el: $( '<div><a
href="/wiki/File:Design_portal_logo.jpg" class="image"><noscript><img
alt="icon"
src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Design_portal_logo.jpg/28px-Design_portal_logo.jpg"
width="28" height="28" class="noviewer" data-file-width="151"
data-file-height="151"></noscript><span class="lazy-image-placeholder"
style="width: 28px;height: 28px;"
data-src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Design_portal_logo.jpg/28px-Design_portal_logo.jpg"
data-alt="icon" data-width="28" data-height="28" data-class="wot noviewerz
bar"> </span></a></div>' )
+ } );
assert.strictEqual( thumbs.length, 1, 'Found expected number of
thumbnails.' );
assert.strictEqual( thumbs[0].getFileName(),
'File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg',
@@ -41,6 +57,23 @@
assert.strictEqual( thumbs[0].getFileName(),
'File:Cyanolimnas_cerverai_by_Allan_Brooks_cropped.jpg',
'Found expected filename.' );
+ thumbs = pNoViewer.getThumbnails();
+ assert.strictEqual( thumbs.length, 0, 'This page has no
thumbnails.' );
+
+ thumbs = pMetadata.getThumbnails();
+ assert.strictEqual( thumbs.length, 0, 'This page has no
thumbnails.' );
+
+ thumbs = pMetadataNested.getThumbnails();
+ assert.strictEqual( thumbs.length, 1,
+ 'Images inside a container with the class are included.
To be revisited later if needed by community.' );
+
+ thumbs = pLazyImages.getThumbnails();
+ assert.strictEqual( thumbs.length, 0,
+ 'Consider whether the class is on an image which has
not been lazy loaded.' );
+
+ thumbs = pLazyImagesTypo.getThumbnails();
+ assert.strictEqual( thumbs.length, 1,
+ 'Thumbnail found if there is a typo.' );
} );
QUnit.test( '#getNamespaceId', 8, function ( assert ) {
--
To view, visit https://gerrit.wikimedia.org/r/360566
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iebe56bc9ae0ce2c4725e3e5d9d5ce055aa9ace57
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
