Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/130300
Change subject: render.article: Break down the createThumbnail method
......................................................................
render.article: Break down the createThumbnail method
Change-Id: Id17bc6d19f044d6a4837eebb6b1a264ee104ea84
---
M resources/ext.popups.renderer.article.js
1 file changed, 80 insertions(+), 44 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups
refs/changes/00/130300/1
diff --git a/resources/ext.popups.renderer.article.js
b/resources/ext.popups.renderer.article.js
index 6633acf..c2814a6 100644
--- a/resources/ext.popups.renderer.article.js
+++ b/resources/ext.popups.renderer.article.js
@@ -152,62 +152,42 @@
if ( tall ) {
if ( mw.popups.supportsSVG ) {
- $thumbnailSVGImage = $( article.createSVGTag(
'image' ) );
- $thumbnailSVGImage
- .addClass( 'mwe-popups-is-not-tall' )
- .attr( {
- 'xlink:href': thumbnail.source,
- x: ( thumbnail.width >
article.SIZES.portraitImage.w ) ?
+ $thumbnail = article.createSvgImageThumbnail(
+ 'mwe-popups-is-not-tall',
+ thumbnail.source,
+ ( thumbnail.width >
article.SIZES.portraitImage.w ) ?
( ( thumbnail.width -
article.SIZES.portraitImage.w ) / -2 ) :
(
article.SIZES.portraitImage.w - thumbnail.width ),
- y: ( thumbnail.height >
article.SIZES.portraitImage.h ) ?
+ ( thumbnail.height >
article.SIZES.portraitImage.h ) ?
( ( thumbnail.height -
article.SIZES.portraitImage.h ) / -2 ) :
0,
- width: thumbnail.width,
- height: thumbnail.height
- } );
-
- $thumbnail = $( '<svg>' )
- .attr( {
- xmlns:
'http://www.w3.org/2000/svg',
- width:
article.SIZES.portraitImage.w,
- height:
article.SIZES.portraitImage.h
- } )
- .append( $thumbnailSVGImage );
+ thumbnail.width,
+ thumbnail.height,
+ article.SIZES.portraitImage.w,
+ article.SIZES.portraitImage.h
+ );
} else {
- $thumbnail = $( '<div>' )
- .addClass( 'mwe-popups-is-tall' )
- .css( 'background-image', 'url(' +
thumbnail.source + ')' );
+ $thumbnail = article.createImgThumbnail(
'mwe-popups-is-tall', thumbnail.source );
}
} else {
if ( mw.popups.supportsSVG ) {
- $thumbnailSVGImage = $( article.createSVGTag(
'image' ) );
- $thumbnailSVGImage
- .addClass( 'mwe-popups-is-not-tall' )
- .attr( {
- 'xlink:href': thumbnail.source,
- 'clip-path':
'url(#mwe-popups-mask)',
- x: 0,
- y: ( thumbnail.height >
article.SIZES.landscapeImage.h ) ?
+ $thumbnail = article.createSvgImageThumbnail(
+ 'mwe-popups-is-not-tall',
+ thumbnail.source,
+ 0,
+ ( thumbnail.height >
article.SIZES.landscapeImage.h ) ?
( ( thumbnail.height -
article.SIZES.landscapeImage.h ) / -2 ) :
0,
- width: thumbnail.width,
- height: thumbnail.height
- } );
-
- $thumbnail = $( '<svg>' )
- .attr( {
- xmlns:
'http://www.w3.org/2000/svg',
- width:
article.SIZES.landscapeImage.w + 3,
- height: ( thumbnail.height >
article.SIZES.landscapeImage.h ) ?
+ thumbnail.width,
+ thumbnail.height,
+ article.SIZES.landscapeImage.w + 3,
+ ( thumbnail.height >
article.SIZES.landscapeImage.h ) ?
article.SIZES.landscapeImage.h :
- thumbnail.height
- } )
- .append( $thumbnailSVGImage );
+ thumbnail.height,
+ 'mwe-popups-mask'
+ );
} else {
- $thumbnail = $( '<div>' )
- .addClass( 'mwe-popups-is-not-tall' )
- .css( 'background-image', 'url(' +
thumbnail.source + ')' );
+ $thumbnail = article.createImgThumbnail(
'mwe-popups-is-not-tall', thumbnail.source );
}
}
@@ -215,6 +195,62 @@
};
/**
+ * Returns the `svg:image` object for thumbnail
+ *
+ * @method createSvgImageThumbnail
+ * @param {String} className
+ * @param {String} url
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} thumbnail_width
+ * @param {Number} thumbnail_height
+ * @param {Number} width
+ * @param {Number} height
+ * @return {jQuery}
+ */
+ article.createSvgImageThumbnail = function (
+ className, url, x, y, thumbnail_width, thumbnail_height,
width, height, clipPath
+ ) {
+ var $thumbnailSVGImage, $thumbnail;
+
+ $thumbnailSVGImage = $( article.createSVGTag( 'image' ) );
+ $thumbnailSVGImage
+ .addClass( className )
+ .attr( {
+ 'xlink:href': url,
+ x: x,
+ y: y,
+ width: thumbnail_width,
+ height: thumbnail_height,
+ 'clip-path': 'url(#' + clipPath + ')'
+ } );
+
+ $thumbnail = $( '<svg>' )
+ .attr( {
+ xmlns: 'http://www.w3.org/2000/svg',
+ width: width,
+ height: height
+ } )
+ .append( $thumbnailSVGImage );
+
+ return $thumbnail;
+ }
+
+ /**
+ * Returns the `img` object for thumbnail
+ *
+ * @method createImgThumbnail
+ * @param {String} className
+ * @param {String} url
+ * @return {jQuery}
+ */
+ article.createImgThumbnail = function ( className, url ) {
+ return $( '<div>' )
+ .addClass( className )
+ .css( 'background-image', 'url(' + url + ')' );
+ }
+
+ /**
* Positions the popup based on the mouse position and popup size
*
* @method getOffset
--
To view, visit https://gerrit.wikimedia.org/r/130300
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id17bc6d19f044d6a4837eebb6b1a264ee104ea84
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
