Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/125707
Change subject: [wip] different thumbnail for small images
......................................................................
[wip] different thumbnail for small images
Bug: 62947
Change-Id: I81c523d444b89961ceb95b16690e44310e35a562
---
M resources/ext.popups.core.js
1 file changed, 46 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups
refs/changes/07/125707/1
diff --git a/resources/ext.popups.core.js b/resources/ext.popups.core.js
index 8fca1e3..17ad02e 100644
--- a/resources/ext.popups.core.js
+++ b/resources/ext.popups.core.js
@@ -57,14 +57,13 @@
curRequest.done( function ( re ) {
curRequest = undefined;
- var $a,
+ var $a, $thumbnail, sampleImage, realWidth,
page = re.query.pages[
re.query.pageids[ 0 ] ],
$contentbox = $( '<div>' )
.addClass( 'mwe-popups-extract'
)
.text( page.extract ),
thumbnail = page.thumbnail,
tall = thumbnail && thumbnail.height >
thumbnail.width,
- $thumbnail = createThumbnail(
thumbnail, tall ),
timestamp = new Date( page.revisions[ 0
].timestamp ),
timediff = new Date() - timestamp,
oneDay = 1000 * 60 * 60 * 24,
@@ -77,6 +76,14 @@
$( '<span>' ).text(
mw.message( 'popups-last-edited',
moment(
timestamp ).fromNow() ).text() )
);
+
+ // If the image is smaller than 300px,
thumbnail.source still returns 300
+ // This is the way to find its real width
+ sampleImage = new Image();
+ sampleImage.src = thumbnail.source;
+ realWidth = sampleImage.width;
+ tall = ( realWidth < 300 ) ? true : tall;
+ $thumbnail = createThumbnail( thumbnail, tall,
(realWidth < 300) );
$a = $( '<a>' )
.append( $thumbnail, $contentbox,
$timestamp )
@@ -122,13 +129,49 @@
* @param {boolean} tall
* @return {Object} jQuery DOM element of the thumbnail
*/
- function createThumbnail( thumbnail, tall ) {
+ function createThumbnail( thumbnail, tall, small ) {
if ( !thumbnail ) {
return $( '<span>' );
}
var $thumbnail;
+ if ( small ) {
+ var sampleImage, realWidth, realHeight;
+ sampleImage = new Image();
+ sampleImage.src = thumbnail.source;
+ realWidth = sampleImage.width;
+ realHeight = sampleImage.height;
+
+
+ if ( supportsSVG() ) {
+ $thumbnail = $( createSVGTag( 'image' )
);
+ $thumbnail
+ .addClass(
'mwe-popups-is-not-tall' )
+ .attr( {
+ 'xlink:href':
thumbnail.source,
+ x: (
SIZES.portraitImage.w - realWidth ) / 2,
+ y: (
SIZES.portraitImage.h - realHeight ) / 2,
+ width: realWidth,
+ height: realHeight
+ } );
+
+ $thumbnail = $( '<svg>' )
+ .attr( {
+ xmlns:
'http://www.w3.org/2000/svg',
+ viewBox: '0 0 ' +
SIZES.portraitImage.w + ' ' + SIZES.portraitImage.h,
+ width:
SIZES.portraitImage.w,
+ height:
SIZES.portraitImage.h
+ } )
+ .append( $thumbnail );
+ } else {
+ $thumbnail = $( '<div>' )
+ .addClass( 'mwe-popups-is-tall'
)
+ .css( 'background-image',
'url(' + thumbnail.source + ')' );
+ }
+ return $thumbnail;
+ }
+
if ( tall ) {
if ( supportsSVG() ) {
$thumbnail = $( createSVGTag( 'image' )
);
--
To view, visit https://gerrit.wikimedia.org/r/125707
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I81c523d444b89961ceb95b16690e44310e35a562
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Popups
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
