Merge "Remove unused core JavaScript modules that ship with MediaWiki core"

extension.json

@@ -102,8 +102,6 @@
 				"mediawiki.user",
 				"mediawiki.util",
 				"oojs",
-				"jquery.fullscreen",
-				"jquery.color",
 				"mmv.bootstrap",
 				"mmv.head"
 			],

resources/mmv/mmv.lightboxinterface.js

@@ -100,7 +100,6 @@ const UiElement = require( './ui/mmv.ui.js' );
 			this.fileReuse = new ReuseDialog( this.$innerWrapper, this.buttons.$reuse, this.config );
 			this.downloadDialog = new DownloadDialog( this.$innerWrapper, this.buttons.$download, this.config );
 			this.optionsDialog = new OptionsDialog( this.$innerWrapper, this.buttons.$options, this.config );
-
 		}
 
 		/**
@@ -172,8 +171,8 @@ const UiElement = require( './ui/mmv.ui.js' );
 				}
 			} );
 
-			this.handleEvent( 'jq-fullscreen-change.lip', ( e ) => {
-				this.fullscreenChange( e );
+			this.handleEvent( 'fullscreenchange.lip', () => {
+				this.fullscreenChange();
 			} );
 
 			this.handleEvent( 'keydown', ( e ) => {
@@ -199,9 +198,7 @@ const UiElement = require( './ui/mmv.ui.js' );
 
 			const $parent = $( parentId || document.body );
 
-			// Clean up fullscreen data because hard-existing fullscreen might have left
-			// jquery.fullscreen unable to remove the class and attribute, since $main wasn't
-			// attached to the DOM anymore at the time the jq-fullscreen-change event triggered
+			// Clean up fullscreen data left attached to the DOM
 			this.$main.data( 'isFullscreened', false ).removeClass( 'jq-fullscreened' );
 			this.isFullscreen = false;
 
@@ -255,7 +252,7 @@ const UiElement = require( './ui/mmv.ui.js' );
 			// appears to have an impact on automatic scroll restoration (which
 			// might happen as a result of this being closed) in FF
 			$( document ).trigger( $.Event( 'mmv-close' ) )
-				.off( 'jq-fullscreen-change.lip' );
+				.off( 'fullscreenchange.lip' );
 
 			// Has to happen first so that the scroller can freeze with visible elements
 			this.panel.unattach();
@@ -296,29 +293,36 @@ const UiElement = require( './ui/mmv.ui.js' );
 		 */
 		exitFullscreen() {
 			this.fullscreenButtonJustPressed = true;
-			this.$main.exitFullscreen();
+			if ( this.$main.get( 0 ) === document.fullscreenElement ) {
+				if ( document.exitFullscreen ) {
+					document.exitFullscreen();
+				}
+			}
+			this.isFullscreen = false;
+			this.$main.data( 'isFullscreened', false ).removeClass( 'jq-fullscreened' );
 		}
 
 		/**
 		 * Enters fullscreen mode.
 		 */
 		enterFullscreen() {
-			this.$main.enterFullscreen();
+			var el = this.$main.get( 0 );
+			if ( el.requestFullscreen ) {
+				el.requestFullscreen();
+			}
+			this.isFullscreen = true;
+			this.$main.addClass( 'jq-fullscreened' ).data( 'isFullscreened', true );
 		}
 
 		/**
 		 * Setup for canvas navigation buttons
 		 */
 		setupCanvasButtons() {
-
 			this.$closeButton = $( '<button>' )
 				.text( ' ' )
 				.addClass( 'mw-mmv-close' )
 				.prop( 'title', mw.message( 'multimediaviewer-close-popup-text' ).text() )
 				.on( 'click', () => {
-					if ( this.isFullscreen ) {
-						this.$main.trigger( $.Event( 'jq-fullscreen-change.lip' ) );
-					}
 					this.unattach();
 				} );
 
@@ -342,24 +346,14 @@ const UiElement = require( './ui/mmv.ui.js' );
 						this.enterFullscreen();
 					}
 				} );
-
-			// If the browser doesn't support fullscreen mode, hide the fullscreen button
-			// This horrendous hack comes from jquery.fullscreen.js
-			if ( $.support.fullscreen ) {
-				this.$fullscreenButton.show();
-			} else {
-				this.$fullscreenButton.hide();
-			}
 		}
 
 		/**
 		 * Handle a fullscreen change event.
-		 *
-		 * @param {jQuery.Event} e The fullscreen change event.
 		 */
-		fullscreenChange( e ) {
-			this.isFullscreen = e.fullscreen;
-
+		fullscreenChange() {
+			// eslint-disable-next-line compat/compat
+			this.isFullscreen = !!document.fullscreenElement;
 			if ( this.isFullscreen ) {
 				this.$fullscreenButton
 					.prop( 'title', mw.message( 'multimediaviewer-defullscreen-popup-text' ).text() )
@@ -370,7 +364,7 @@ const UiElement = require( './ui/mmv.ui.js' );
 					.attr( 'alt', mw.message( 'multimediaviewer-fullscreen-popup-text' ).text() );
 			}
 
-			if ( !this.fullscreenButtonJustPressed && !e.fullscreen ) {
+			if ( !this.fullscreenButtonJustPressed && !this.isFullscreen ) {
 				// Close the interface all the way if the user pressed 'esc'
 				this.unattach();
 			} else if ( this.fullscreenButtonJustPressed ) {

resources/mmv/ui/mmv.ui.metadataPanel.js

@@ -111,7 +111,7 @@ const TruncatableTextField = require( './mmv.ui.truncatableTextField.js' );
 					.text( mw.message( 'multimediaviewer-permission-link' ).text() );
 			} );
 
-			this.handleEvent( 'jq-fullscreen-change.lip', () => {
+			this.handleEvent( 'fullscreenchange.lip', () => {
 				this.hideTruncatedText();
 			} );
 		}

resources/mmv/ui/mmv.ui.permission.js

@@ -149,12 +149,7 @@ const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' );
 		 * @fires Permission#mmv-permission-grow
 		 */
 		grow() {
-			// FIXME: Use CSS transition
-			// eslint-disable-next-line no-jquery/no-animate
-			this.$box.addClass( 'full-size' )
-				.stop( true )
-				.animate( { backgroundColor: '#FFFFA0' }, 500 )
-				.animate( { backgroundColor: '#FFFFFF' }, 500 );
+			this.$box.addClass( 'full-size' );
 			this.$container.trigger( 'mmv-permission-grow' );
 		}
 

tests/qunit/mmv/mmv.lightboxinterface.test.js

@@ -1,5 +1,5 @@
 const { LightboxInterface } = require( 'mmv' );
-const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require( './mmv.testhelpers.js' );
+const { getMultimediaViewer } = require( './mmv.testhelpers.js' );
 
 ( function () {
 	var oldScrollTo;
@@ -84,15 +84,12 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 
 	QUnit.test( 'Fullscreen mode init', function ( assert ) {
 		var lightbox = new LightboxInterface(),
-			oldFnEnterFullscreen = $.fn.enterFullscreen,
-			oldFnExitFullscreen = $.fn.exitFullscreen,
-			oldSupportFullscreen = $.support.fullscreen;
+			enterFullscreen = Element.prototype.requestFullscreen;
 
 		// Since we don't want these tests to really open fullscreen
 		// which is subject to user security confirmation,
 		// we use a mock that pretends regular jquery.fullscreen behavior happened
-		$.fn.enterFullscreen = enterFullscreenMock;
-		$.fn.exitFullscreen = exitFullscreenMock;
+		Element.prototype.requestFullscreen = function () {};
 
 		stubScrollTo();
 
@@ -101,18 +98,8 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 		// Attach lightbox to testing fixture to avoid interference with other tests.
 		lightbox.attach( '#qunit-fixture' );
 
-		$.support.fullscreen = false;
 		lightbox.setupCanvasButtons();
 
-		assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'none',
-			'Fullscreen button is hidden when fullscreen mode is unavailable' );
-
-		$.support.fullscreen = true;
-		lightbox.setupCanvasButtons();
-
-		assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), '',
-			'Fullscreen button is visible when fullscreen mode is available' );
-
 		// Entering fullscreen
 		lightbox.$fullscreenButton.trigger( 'click' );
 
@@ -143,9 +130,7 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 		// Unattach lightbox from document
 		lightbox.unattach();
 
-		$.fn.enterFullscreen = oldFnEnterFullscreen;
-		$.fn.exitFullscreen = oldFnExitFullscreen;
-		$.support.fullscreen = oldSupportFullscreen;
+		Element.prototype.requestFullscreen = enterFullscreen;
 		restoreScrollTo();
 	} );
 
@@ -154,8 +139,7 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 			oldRevealButtonsAndFadeIfNeeded,
 			lightbox = new LightboxInterface(),
 			viewer = getMultimediaViewer(),
-			oldFnEnterFullscreen = $.fn.enterFullscreen,
-			oldFnExitFullscreen = $.fn.exitFullscreen;
+			enterFullscreen = Element.prototype.requestFullscreen;
 
 		stubScrollTo();
 
@@ -165,8 +149,7 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 		// Since we don't want these tests to really open fullscreen
 		// which is subject to user security confirmation,
 		// we use a mock that pretends regular jquery.fullscreen behavior happened
-		$.fn.enterFullscreen = enterFullscreenMock;
-		$.fn.exitFullscreen = exitFullscreenMock;
+		Element.prototype.requestFullscreen = function () {};
 
 		// Attach lightbox to testing fixture to avoid interference with other tests.
 		lightbox.attach( '#qunit-fixture' );
@@ -228,8 +211,7 @@ const { enterFullscreenMock, exitFullscreenMock, getMultimediaViewer } = require
 		// Unattach lightbox from document
 		lightbox.unattach();
 
-		$.fn.enterFullscreen = oldFnEnterFullscreen;
-		$.fn.exitFullscreen = oldFnExitFullscreen;
+		Element.prototype.requestFullscreen = enterFullscreen;
 		restoreScrollTo();
 	} );
 

tests/qunit/mmv/mmv.testhelpers.js

@@ -3,18 +3,6 @@ const { MultimediaViewer } = require( 'mmv' );
 ( function () {
 	var MTH = {};
 
-	MTH.enterFullscreenMock = function () {
-		this.first().addClass( 'jq-fullscreened' ).data( 'isFullscreened', true );
-
-		$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: true } ) );
-	};
-
-	MTH.exitFullscreenMock = function () {
-		this.first().removeClass( 'jq-fullscreened' ).data( 'isFullscreened', false );
-
-		$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: false } ) );
-	};
-
 	/**
 	 * Returns the exception thrown by callback, or undefined if no exception was thrown.
 	 *