From 7d5a82c571562f71b6b1e1748113dd3be00ef7d0 Mon Sep 17 00:00:00 2001
From: Gilles Dubuc <gdubuc@wikimedia.org>
Date: Wed, 14 May 2014 12:02:39 +0200
Subject: [PATCH] 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
---
 resources/mmv/mmv.bootstrap.js           |  3 ++-
 resources/mmv/mmv.js                     |  2 +-
 resources/mmv/ui/mmv.ui.canvas.js        | 13 ++++++++++---
 tests/qunit/mmv/ui/mmv.ui.canvas.test.js |  4 +++-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/resources/mmv/mmv.bootstrap.js b/resources/mmv/mmv.bootstrap.js
index 46c604966..02dbb1c67 100755
--- a/resources/mmv/mmv.bootstrap.js
+++ b/resources/mmv/mmv.bootstrap.js
@@ -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
diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js
index b561267c3..7d572894d 100755
--- a/resources/mmv/mmv.js
+++ b/resources/mmv/mmv.js
@@ -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();
diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js
index 2d04c27ba..d8ece569b 100644
--- a/resources/mmv/ui/mmv.ui.canvas.js
+++ b/resources/mmv/ui/mmv.ui.canvas.js
@@ -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 );
 	};
 
 	/**
diff --git a/tests/qunit/mmv/ui/mmv.ui.canvas.test.js b/tests/qunit/mmv/ui/mmv.ui.canvas.test.js
index a6875e3f1..f04e26ce8 100644
--- a/tests/qunit/mmv/ui/mmv.ui.canvas.test.js
+++ b/tests/qunit/mmv/ui/mmv.ui.canvas.test.js
@@ -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' );