Enable fullscreening with jquery.fullscreen

Depends on I58138afa05c43f5a24e74fa3a30a658428c39ce0
(core patch)

Change-Id: Ib972d453bdf8172439bf6195985fcf7e248b2b8a

MultimediaViewer.php

@@ -191,6 +191,7 @@ $wgResourceModules['mmv'] = array_merge( array(
 		'momentjs',
 		'jquery.scrollTo',
 		'mmv.lightboximage',
+		'jquery.fullscreen',
 		'mediawiki.Title',
 		'jquery.ui.dialog',
 		'jquery.hidpi',

resources/mmv/mmv.css

@@ -1,8 +1,8 @@
 /**
  * Override multilightbox styles that don't apply to us
  */
-.mlb-main.mlb-fullscreened {
-	background-color: white;
+.mlb-main .jq-fullscreened {
+	background-color: black;
 }
 
 .mlb-wrapper {
@@ -88,18 +88,33 @@ body.mobile .mw-mlb-controls,
 	background-color: rgb(0,0,0);
 }
 
-.mlb-close {
-	position: absolute;
-	top: 5px;
+.mlb-close,
+.mlb-fullscreen {
 	right: 5px;
 	left: auto;
-	/* @embed */
-	background-image: url(img/mw-close.svg);
 	transition: opacity 0.25s;
 	background-position: center;
 }
 
+.mlb-close {
+	top: 5px;
+	/* @embed */
+	background-image: url(img/mw-close.svg);
+}
+
+.mlb-fullscreen {
+	top: 42px;
+	/* @embed */
+	background-image: url(img/mw-fullscreen-ltr.svg);
+}
+
+.jq-fullscreened .mlb-fullscreen {
+	/* @embed */
+	background-image: url(img/mw-defullscreen-ltr.svg);
+}
+
 .mlb-close,
+.mlb-fullscreen,
 .mw-mlb-next-image,
 .mw-mlb-prev-image {
 	position: fixed;
@@ -114,22 +129,13 @@ body.mobile .mw-mlb-controls,
 }
 
 .mlb-close,
+.mlb-fullscreen,
 .mw-mlb-next-image,
 .mw-mlb-prev-image {
 	border: none;
 	z-index: 1003;
 }
 
-.mlb-fullscreen-div .mlb-fullscreen {
-	/* @embed */
-	background-image: url(img/mw-defullscreen-ltr.svg);
-}
-
-.mlb-fullscreen {
-	/* @embed */
-	background-image: url(img/mw-fullscreen-ltr.svg);
-}
-
 .mw-mlb-license,
 .mw-mlb-title-contain {
 	vertical-align: middle;

resources/mmv/mmv.js

@@ -193,15 +193,15 @@
 			return false;
 		} );
 
-		lightboxHooks.register( 'fullscreen', function () {
-			if ( this.$imageMetadata ) {
-				this.$imageMetadata.hide();
-			}
-		} );
+		lightboxHooks.register( 'fullscreen', function ( fullscreen ) {
+			viewer.ui.isFullscreen = fullscreen;
 
-		lightboxHooks.register( 'defullscreen', function () {
 			if ( this.$imageMetadata ) {
-				this.$imageMetadata.show();
+				if ( fullscreen ) {
+					this.$imageMetadata.hide();
+				} else {
+					this.$imageMetadata.show();
+				}
 			}
 		} );
 	}
@@ -395,7 +395,7 @@
 		} );
 
 		this.ui.$fullscreenButton.click( function () {
-			if ( viewer.ui.isFullScreen ) {
+			if ( viewer.ui.isFullscreen ) {
 				viewer.log( 'fullscreen-link-click' );
 			} else {
 				viewer.log( 'defullscreen-link-click' );

resources/mmv/mmv.lightboxinterface.js

@@ -154,8 +154,6 @@
 	LIP.initializeHeader = function () {
 		var ui = this;
 
-		this.$fullscreenButton.detach();
-
 		this.$dragBar = $( '<div>' )
 			.addClass( 'mw-mlb-drag-affordance' )
 			.appendTo( this.$controlBar )
@@ -228,7 +226,10 @@
 		// and we aren't sure why, but it's not really necessary
 		// with the new interface anyway - it's basically fullscreen
 		// already!
-		this.$closeButton.add( this.$nextButton ).add( this.$prevButton )
+		this.$closeButton
+			.add( this.$fullscreenButton )
+			.add( this.$nextButton )
+			.add( this.$prevButton )
 			.appendTo( this.$imageWrapper );
 	};
 

resources/multilightbox/hooks.txt

@@ -64,14 +64,10 @@ noPrevImage
 	Called: From MultiLightbox prev method when user tries to reach negative index
 
 fullscreen
-	Arguments: None
+	Arguments:
+		* fullscreen - Boolean - Represents the current fullscreen state
 	ThisArg: LightboxInterface
-	Called: From LightboxInterface fullscreen method when user is going to fullscreen interface.
-
-defullscreen
-	Arguments: None
-	ThisArg: LightboxInterface
-	Called: From LightboxInterface fullscreen method when user is leaving fullscreen interface.
+	Called: From LightboxInterface fullscreen method when user is going to fullscreen interface or leaving it.
 
 clearInterface
 	Arguments: None

resources/multilightbox/lightboxinterface.js

@@ -8,20 +8,6 @@
 	function LightboxInterface() {
 		lightboxHooks = window.lightboxHooks;
 
-		function handleFullscreenChange() {
-			// If we're no longer in fullscreen mode, make sure
-			if ( !lbinterface.fullscreenButtonJustPressed &&
-					!document.fullscreenElement &&
-					!document.mozFullScreenElement &&
-					!document.webkitFullScreenElement &&
-					!document.msFullScreenElement) {
-				lightboxHooks.callAll( 'defullscreen' );
-				lbinterface.$main.removeClass( 'mlb-fullscreened' );
-			} else if ( lbinterface.fullscreenButtonJustPressed ) {
-				lbinterface.fullscreenButtonJustPressed = false;
-			}
-		}
-
 		var result,
 			addToPre = [],
 			addToPost = [],
@@ -82,10 +68,16 @@
 			}
 		} );
 
-		window.addEventListener( 'fullscreenchange', handleFullscreenChange );
-		window.addEventListener( 'mozfullscreenchange', handleFullscreenChange );
-		window.addEventListener( 'webkitfullscreenchange', handleFullscreenChange );
-		window.addEventListener( 'msfullscreenchange', handleFullscreenChange );
+		$( document ).on( 'jq-fullscreen-change', function ( e ) {
+			lightboxHooks.callAll( 'fullscreen', this, e.fullscreen );
+
+			if ( !lbinterface.fullscreenButtonJustPressed && !e.fullscreen ) {
+				// Close the interface all the way if the user pressed 'esc'
+				lbinterface.unattach();
+			} else if ( lbinterface.fullscreenButtonJustPressed ) {
+				lbinterface.fullscreenButtonJustPressed = false;
+			}
+		} );
 	}
 
 	LIP = LightboxInterface.prototype;
@@ -135,42 +127,6 @@
 		this.currentlyAttached = false;
 	};
 
-	LIP.fullscreen = function () {
-		var fullscreen;
-
-		if ( document.fullscreenElement ||
-				document.mozFullScreenElement ||
-				document.webkitFullScreenElement ||
-				document.msFullScreenElement ) {
-			if ( document.cancelFullScreen ) {
-				document.cancelFullScreen();
-			} else if ( document.mozCancelFullScreen ) {
-				document.mozCancelFullScreen();
-			} else if ( document.webkitCancelFullScreen ) {
-				document.webkitCancelFullScreen();
-			} else if ( document.msCancelFullScreen ) {
-				document.msCancelFullScreen();
-			}
-
-			this.$main.removeClass( 'mlb-fullscreened' );
-			lightboxHooks.callAll( 'defullscreen', this );
-		} else {
-			fullscreen = this.$main.get( 0 );
-			if ( fullscreen.requestFullScreen ) {
-				fullscreen.requestFullScreen();
-			} else if ( fullscreen.mozRequestFullScreen ) {
-				fullscreen.mozRequestFullScreen();
-			} else if ( fullscreen.webkitRequestFullScreen ) {
-				fullscreen.webkitRequestFullScreen();
-			} else if ( fullscreen.msRequestFullscreen ) {
-				fullscreen.msRequestFullscreen();
-			}
-
-			this.$main.addClass( 'mlb-fullscreened' );
-			lightboxHooks.callAll( 'fullscreen', this );
-		}
-	};
-
 	/**
 	 * @protected
 	 */
@@ -258,8 +214,12 @@
 				.text( ' ' )
 				.addClass( 'mlb-fullscreen' )
 				.click( function () {
-					lbinterface.fullscreenButtonJustPressed = true;
-					lbinterface.fullscreen();
+					if ( lbinterface.isFullscreen ) {
+						lbinterface.fullscreenButtonJustPressed = true;
+						lbinterface.$main.exitFullscreen();
+					} else {
+						lbinterface.$main.enterFullscreen();
+					}
 				} );
 
 			this.$controlBar.append(

resources/multilightbox/multilightbox.css

@@ -103,10 +103,10 @@
 	height: 29px;
 }
 
-.mlb-main.mlb-fullscreened {
+.mlb-main.fullscreened {
 	background-color: black;
 }
 
-.mlb-fullscreen-div .mlb-fullscreen {
+.fullscreened .mlb-fullscreen {
 	background-image: url("../img/defullscreen.svg");
 }