Fix IE9 support

- Fix JS error on pushState
- Fix blur issue where blur(0px) filter would blur anyway
- Fix wrapper sizing issue where its size would be 0 when measured

Bug: 65225
Change-Id: If9279cd56f55f71f261ec54dda8228194988b9ae
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/597
This commit is contained in:
Gilles Dubuc 2014-05-14 12:02:39 +02:00
parent 468a249497
commit 7d5a82c571
4 changed files with 16 additions and 6 deletions

View file

@ -321,11 +321,12 @@
// The advantage of using pushState when it's available is that it has to ability to truly
// clear the hash, not leaving "#" in the history
// An entry with "#" in the history has the side-effect of resetting the scroll position when navigating the history
if ( this.browserHistory ) {
if ( this.browserHistory && this.browserHistory.pushState ) {
// In order to truly clear the hash, we need to reconstruct the hash-free URL
if ( hash === '#' ) {
hash = window.location.href.replace( /#.*$/, '' );
}
this.browserHistory.pushState( null, null, hash );
} else {
// Since we voluntarily changed the hash, we don't want MMVB.hash (which will trigger on hashchange event) to treat it

View file

@ -198,7 +198,7 @@
*/
MMVP.resize = function ( ui ) {
var viewer = this,
image = this.thumbs[ this.currentIndex].image,
image = this.thumbs[ this.currentIndex ].image,
imageWidths;
this.preloadThumbnails();

View file

@ -260,7 +260,7 @@
C.unblur = function() {
// We apply empty CSS values to remove the inline styles applied by jQuery
// so that they don't get in the way of styles defined in CSS
this.$image.css( { '-webkit-filter' : '', 'opacity' : '' } )
this.$image.css( { '-webkit-filter' : '', 'opacity' : '', 'filter' : '' } )
.removeClass( 'blurred' );
};
@ -284,10 +284,17 @@
* @returns {mw.mmv.model.ThumbnailWidth}
*/
C.getLightboxImageWidths = function ( image ) {
var thumb = image.thumbnail;
var thumb = image.thumbnail,
$window = $( window ),
availableWidth = $window.width(),
availableHeight = $window.height() - $( '.mw-mmv-controls' ).height();
// For the above don't rely on this.$imageWrapper's sizing anymore because it's fragile
// Depending on what the wrapper contains, its size can be 0 on some browsers.
// Therefore, we calculate the available space manually
return this.thumbnailWidthCalculator.calculateWidths(
this.$imageWrapper.width(), this.$imageWrapper.height(), thumb.width, thumb.height );
availableWidth, availableHeight, thumb.width, thumb.height );
};
/**

View file

@ -261,7 +261,7 @@
assert.ok( ! blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'Unblur', 3, function ( assert ) {
QUnit.test( 'Unblur', 4, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
canvas = new mw.mmv.ui.Canvas( $qf ),
oldAnimate = $.fn.animate;
@ -290,6 +290,8 @@
canvas.unblurWithAnimation();
assert.ok( ! canvas.$image.css( '-webkit-filter' ) || !canvas.$image.css( '-webkit-filter' ).length,
'Image has no -webkit-filter left' );
assert.ok( ! canvas.$image.css( 'filter' ) || !canvas.$image.css( 'filter' ).length || canvas.$image.css( 'filter' ) === 'none',
'Image has no filter left' );
assert.strictEqual( parseInt( canvas.$image.css( 'opacity' ), 10 ), 1,
'Image is fully opaque' );