Merge "Load moment.js on demand"

MultimediaViewer.php

@@ -429,7 +429,6 @@ $wgResourceModules += array(
 			'mmv.ui.permission',
 			'mmv.ui.reuse.dialog',
 			'mmv.ui.truncatableTextField',
-			'moment',
 			'oojs',
 		),
 

MultimediaViewerHooks.php

@@ -228,6 +228,7 @@ class MultimediaViewerHooks {
 				'mmv.ui.reuse.share',
 				'mmv.ui.reuse.embed',
 				'mmv.ui.reuse.download',
+				'moment',
 			),
 			'localBasePath' => __DIR__,
 			'remoteExtPath' => 'MultimediaViewer',

resources/mmv/mmv.js

@@ -721,7 +721,7 @@
 	 * Preloads JS and CSS dependencies that aren't needed to display the first image, but could be needed later
 	 */
 	MMVP.preloadDependencies = function () {
-		mw.loader.load( [ 'mmv.ui.reuse.share', 'mmv.ui.reuse.embed', 'mmv.ui.reuse.download' ] );
+		mw.loader.load( [ 'mmv.ui.reuse.share', 'mmv.ui.reuse.embed', 'mmv.ui.reuse.download', 'moment' ] );
 	};
 
 	mw.mmv.MultimediaViewer = MultimediaViewer;

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

@@ -15,7 +15,7 @@
  * along with MultimediaViewer.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-( function ( mw, $, oo, moment ) {
+( function ( mw, $, oo ) {
 	// Shortcut for prototype later
 	var MPP;
 
@@ -654,6 +654,7 @@
 	 */
 	MPP.setImageInfo = function ( image, imageData, repoData, localUsage, globalUsage, user ) {
 		var msgname,
+			panel = this,
 			fileTitle = image.filePageTitle;
 
 		this.setFileTitle( fileTitle.getNameText() );
@@ -661,9 +662,19 @@
 		this.setFilePageLink( imageData.descriptionUrl );
 
 		if ( imageData.creationDateTime ) {
-			this.setDateTime( this.formatDate( imageData.creationDateTime ), true );
+			// Use the raw date until moment can try to interpret it
+			panel.setDateTime( imageData.creationDateTime );
+
+			this.formatDate( imageData.creationDateTime ).then( function ( formattedDate ) {
+				panel.setDateTime( formattedDate, true );
+			} );
 		} else if ( imageData.uploadDateTime ) {
-			this.setDateTime( this.formatDate( imageData.uploadDateTime ) );
+			// Use the raw date until moment can try to interpret it
+			panel.setDateTime( imageData.uploadDateTime );
+
+			this.formatDate( imageData.uploadDateTime ).then( function ( formattedDate ) {
+				panel.setDateTime( formattedDate );
+			} );
 		}
 
 		if ( imageData.source ) {
@@ -721,14 +732,28 @@
 	 * Transforms a date string into localized, human-readable format.
 	 * Unrecognized strings are returned unchanged.
 	 * @param {string} dateString
-	 * @return {string}
+	 * @return {jQuery.Deferred}
 	 */
 	MPP.formatDate = function ( dateString ) {
-		var date = moment( dateString );
-		if ( !date.isValid() ) {
-			return dateString;
-		}
-		return date.format( 'LL' );
+		var deferred = $.Deferred(),
+			date;
+
+		mw.loader.using( 'moment', function () {
+			date = moment( dateString );
+
+			if ( date.isValid() ) {
+				deferred.resolve( date.format( 'LL' ) );
+			} else {
+				deferred.resolve( dateString );
+			}
+		}, function ( error ) {
+			deferred.reject( error );
+			if ( window.console && window.console.error ) {
+				window.console.error( 'mw.loader.using error when trying to load moment', error );
+			}
+		} );
+
+		return deferred.promise();
 	};
 
 	/**
@@ -852,4 +877,4 @@
 	};
 
 	mw.mmv.ui.MetadataPanel = MetadataPanel;
-}( mediaWiki, jQuery, OO, moment ) );
+}( mediaWiki, jQuery, OO ) );

tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js

@@ -196,9 +196,14 @@
 		var $qf = $( '#qunit-fixture' ),
 			panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ),
 			date1 = 'Garbage',
-			result = panel.formatDate( date1 );
+			promise = panel.formatDate( date1 );
 
-		assert.strictEqual( result, date1, 'Invalid date is correctly ignored' );
+		QUnit.stop();
+
+		promise.then( function ( result ) {
+			assert.strictEqual( result, date1, 'Invalid date is correctly ignored' );
+			QUnit.start();
+		} );
 	} );
 
 	QUnit.test( 'Progress bar', 10, function ( assert ) {