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

WIP Fix resize issues (Part I)

Browse source 
After a few false starts trying to fix LIP.autoResize(),
I noticed that it has become obsolete by our latest
improvements (bucketing and cashing), so I decided to
get rid of it and let the browser do the resizing.
I tested in Chrome/Safari/FF and this approach seems
to work fine.

Still work in progress and there are many things that should
be cleaned up regarding the image object logic but please take
a look and let me know if you have any objections if I go
this route.

Bug: 56454
Change-Id: I08207d0f1fcc9dcb69ec31c03e96cfd0c0a6c522
Mingle: 239
This commit is contained in:
Aaron Arcos 2014-02-25 19:14:44 -08:00 committed by Gilles Dubuc
parent 18a850869d
commit efaae84a4f
2 changed files with 13 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
resources/mmv/mmv.lightboximage.js
View file

@ -91,72 +91,5 @@
return $deferred;
};
/**
* Resizes the image.
* Assumes that the parent element's size is the maximum size.
* FIXME refactor and document better
*/
LIP.autoResize = function ( ele, $parent ) {
function updateRatios() {
if ( imgHeight ) {
imgHeightRatio = parentHeight / imgHeight;
}
if ( imgWidth ) {
imgWidthRatio = parentWidth / imgWidth;
}
}
var imgWidthRatio, imgHeightRatio, parentWidth, parentHeight,
$img = $( ele ),
imgWidth = $img.width(),
imgHeight = $img.height();
$parent = $parent || $img.parent();
parentWidth = $parent.width();
parentHeight = $parent.height();
if ( this.globalMaxWidth && parentWidth > this.globalMaxWidth ) {
parentWidth = this.globalMaxWidth;
}
if ( this.globalMaxHeight && parentHeight > this.globalMaxHeight ) {
parentHeight = this.globalMaxHeight;
}
updateRatios();
if ( imgWidth > parentWidth ) {
imgHeight *= imgWidthRatio || 1;
imgWidth = parentWidth;
updateRatios();
}
if ( imgHeight > parentHeight ) {
imgWidth *= imgHeightRatio || 1;
imgHeight = parentHeight;
updateRatios();
}
if ( imgWidth < parentWidth && imgHeight < parentHeight ) {
if ( imgWidth === 0 && imgHeight === 0 ) {
// Only set one
imgWidth = parentWidth;
imgHeight = null;
} else {
if ( imgHeightRatio > imgWidthRatio ) {
imgWidth *= imgHeightRatio;
imgHeight = parentHeight;
} else {
imgHeight *= imgWidthRatio;
imgWidth = parentWidth;
}
updateRatios();
}
}
$img.width( imgWidth ).height( imgHeight );
};
mw.mmv.LightboxImage = LightboxImage;
}( mediaWiki, jQuery ) );

33
resources/mmv/mmv.lightboxinterface.js
View file

@ -245,11 +245,9 @@
* Resize callback
* @protected
*/
LIP.resizeCallback = function() {
LIP.resizeCallback = function () {
if ( this.currentlyAttached ) {
this.$wrapper.trigger( $.Event( 'mmv-resize') );
this.autoResizeImage();
}
};
/**
@ -258,14 +256,11 @@
* @param {mw.mmv.LightboxImage} image
* @param {jQuery} $imageElement
*/
LIP.showImage = function( image, $imageElement ) {
LIP.showImage = function ( image, $imageElement ) {
var iface = this;
this.currentImage = image;
image.globalMaxWidth = $imageElement.width();
image.globalMaxHeight = $imageElement.height();
this.$image = $imageElement;
this.autoResizeImage();
@ -299,7 +294,7 @@
* FIXME A bunch of stuff ripped out of #load, because load tries to actually load the image
* and causes the small-thumbnail-for-a-moment bug in the process. Needs severe refactoring.
*/
LIP.setupForLoad = function() {
LIP.setupForLoad = function () {
var hashFragment = '#mediaviewer/' + this.viewer.currentImageFilename,
ui = this;
@ -325,7 +320,6 @@
*/
LIP.autoResizeImage = function () {
this.$staging.append( this.$image );
this.currentImage.autoResize( this.$image.get( 0 ), this.$imageDiv );
this.$imageDiv.append( this.$image );
};
@ -334,7 +328,16 @@
* @param {HTMLImageElement} imageEle
*/
LIP.replaceImageWith = function ( imageEle ) {
function makeMaxMatchParent ( $image ) {
$image.css( {
maxHeight : $image.parent().height(),
maxWidth : $image.parent().width()
} );
}
if ( this.$image.is( imageEle ) ) { // http://bugs.jquery.com/ticket/4087
// Update the max dimensions otherwise the image gets distorted
makeMaxMatchParent( this.$image );
return;
}
@ -344,17 +347,7 @@
this.currentImage.src = imageEle.src;
this.$image = $image;
this.$image.css( {
maxHeight: $image.parent().height(),
maxWidth: $image.parent().width()
} );
/*
FIXME MLB has this code but it was overridden and never invoked; kept for reference until resize bugs are fixed
this.currentImage.globalMaxWidth = this.$image.width();
this.currentImage.globalMaxHeight = this.$image.height();
this.currentImage.autoResize( imageEle );
*/
makeMaxMatchParent( this.$image );
};
/**