Merge "Previous and next functionality!"

resources/ext.multimediaViewer/ext.multimediaViewer.css

@@ -84,7 +84,7 @@ body.mobile .mw-mlb-controls,
 }
 
 .mlb-overlay {
-	background-color: rgba( 255, 255, 255, 0.9 );
+	background-color: rgb(0,0,0);
 }
 
 .mlb-close {
@@ -265,3 +265,30 @@ body.mw-mlb-lightbox-open {
 body.mw-mlb-lightbox-open .mlb-main {
 	overflow-y: auto;
 }
+
+.mw-mlb-next-image,
+.mw-mlb-prev-image {
+	position: absolute;
+	top: -999px;
+	width: 64px;
+	height: 64px;
+	cursor: pointer;
+}
+
+.mw-mlb-next-image {
+	/* @embed */
+	background-image: url(img/next-ltr.svg);
+	right: 0;
+}
+
+.mw-mlb-prev-image {
+	/* @embed */
+	background-image: url(img/prev-ltr.svg);
+	left: 0;
+}
+
+.mw-mlb-next-image.disabled,
+.mw-mlb-prev-image.disabled {
+	display: none;
+	cursor: none;
+}

resources/ext.multimediaViewer/ext.multimediaViewer.js

@@ -124,6 +124,7 @@
 
 		lightboxHooks.register( 'closeInterface', function () {
 			this.$mwControls.css( { top: '-999px', left: '-999px' } );
+			this.$nextButton.add( this.$prevButton ).css( 'top', '-999px' );
 			$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
 			if ( comingFromPopstate === false ) {
 				history.pushState( {}, '', '#' );
@@ -133,38 +134,8 @@
 		} );
 
 		lightboxHooks.register( 'imageResize', function () {
-			var api = new mw.Api(),
-				density = $.devicePixelRatio(),
-				filename = viewer.currentImageFilename,
-				ui = this;
-
-			api.get( {
-				action: 'query',
-				format: 'json',
-				titles: filename,
-				prop: 'imageinfo',
-				iiprop: 'url',
-				iiurlwidth: Math.floor( density * this.$imageWrapper.width() ),
-				iiurlheight: Math.floor( density * this.$imageWrapper.height() )
-			} ).done( function ( data ) {
-				var imageInfo, innerInfo,
-					image = new Image();
-
-				$.each( data.query.pages, function ( i, page ) {
-					imageInfo = page;
-					return false;
-				} );
-
-				innerInfo = imageInfo.imageinfo[0];
-
-				image.onload = function () {
-					ui.replaceImageWith( image );
-					viewer.updateControls();
-				};
-
-				image.src = innerInfo.thumburl || innerInfo.url;
-			} );
-
+			var ui = this;
+			viewer.resize( ui );
 			return false;
 		} );
 
@@ -209,11 +180,46 @@
 
 	MMVP = MultimediaViewer.prototype;
 
+	MMVP.resize = function ( ui ) {
+		var api = new mw.Api(),
+			viewer = this,
+			density = $.devicePixelRatio(),
+			filename = ui.currentImageFilename;
+
+		api.get( {
+			action: 'query',
+			format: 'json',
+			titles: filename,
+			prop: 'imageinfo',
+			iiprop: 'url',
+			iiurlwidth: Math.floor( density * ui.$imageWrapper.width() ),
+			iiurlheight: Math.floor( density * ui.$imageWrapper.height() )
+		} ).done( function ( data ) {
+			var imageInfo, innerInfo,
+				image = new Image();
+
+			$.each( data.query.pages, function ( i, page ) {
+				imageInfo = page;
+				return false;
+			} );
+
+			innerInfo = imageInfo.imageinfo[0];
+
+			image.onload = function () {
+				ui.replaceImageWith( image );
+				viewer.updateControls();
+			};
+
+			image.src = innerInfo.thumburl || innerInfo.url;
+		} );
+	};
+
 	MMVP.updateControls = function () {
 		var isOnButton = false,
 			isOnImage = false,
 			ui = this.ui,
-			pos = ui.$image.offset();
+			pos = ui.$image.offset(),
+			prevNextTop = ( ( ui.$imageWrapper.height() / 2 ) - 32 ) + 'px';
 
 		function fadeIn() {
 			isOnImage = true;
@@ -275,6 +281,13 @@
 			.off( 'mouseleave', detectLeaveButton )
 			.on( 'mouseenter', detectButton )
 			.on( 'mouseleave', detectLeaveButton );
+
+		ui.$nextButton.add( ui.$prevButton ).css( {
+			top: prevNextTop
+		} );
+
+		ui.$nextButton.toggleClass( 'disabled', this.lightbox.currentIndex >= ( this.lightbox.images.length - 1 ) );
+		ui.$prevButton.toggleClass( 'disabled', this.lightbox.currentIndex <= 0 );
 	};
 
 	MMVP.registerLogging = function () {
@@ -658,6 +671,21 @@
 		}
 	};
 
+	MMVP.loadIndex = function ( index ) {
+		if ( index < this.lightbox.images.length && index >= 0 ) {
+			this.loadImage( this.lightbox.images[index], $( imgsSelector ).eq( index ).prop( 'src' ) );
+			this.resize( this.lightbox.iface );
+		}
+	};
+
+	MMVP.nextImage = function () {
+		this.loadIndex( this.lightbox.currentIndex + 1 );
+	};
+
+	MMVP.prevImage = function () {
+		this.loadIndex( this.lightbox.currentIndex - 1 );
+	};
+
 	MMVP.log = function ( action ) {
 		mw.log( mmvLogActions[action] || action );
 

resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js

@@ -51,6 +51,7 @@
 		this.initializeImage();
 		this.initializeImageMetadata();
 		this.initializeAboutLinks();
+		this.initializeNavigation();
 	};
 
 	LIP.initializeHeader = function () {
@@ -344,5 +345,48 @@
 			.appendTo( this.$imageMetadata );
 	};
 
+	LIP.initializeNavigation = function () {
+		function handleKeyDown( e ) {
+			var isRtl = $( document.body ).hasClass( 'rtl' );
+
+			switch ( e.keyCode ) {
+				case 37:
+					// Left arrow
+					if ( isRtl ) {
+						mw.mediaViewer.nextImage();
+					} else {
+						mw.mediaViewer.prevImage();
+					}
+					break;
+				case 39:
+					// Right arrow
+					if ( isRtl ) {
+						mw.mediaViewer.prevImage();
+					} else {
+						mw.mediaViewer.nextImage();
+					}
+					break;
+			}
+		}
+
+		this.$nextButton = $( '<div>' )
+			.addClass( 'mw-mlb-next-image disabled' )
+			.html( '&nbsp;' )
+			.click( function () {
+				mw.mediaViewer.nextImage();
+			} )
+			.appendTo( this.$main );
+
+		this.$prevButton = $( '<div>' )
+			.addClass( 'mw-mlb-prev-image disabled' )
+			.html( '&nbsp;' )
+			.click( function () {
+				mw.mediaViewer.prevImage();
+			} )
+			.appendTo( this.$main );
+
+		$( document ).off( 'keydown', handleKeyDown ).on( 'keydown', handleKeyDown );
+	};
+
 	window.LightboxInterface = LightboxInterface;
 }( mediaWiki, jQuery, OO, LightboxInterface ) );

resources/ext.multimediaViewer/img/next-ltr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1"><path fill="none" stroke-width="5px" stroke="white" d="M32,5L59,32L32,59" /></svg>

resources/ext.multimediaViewer/img/next-rtl.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1"><path fill="none" stroke-width="5px" stroke="white" d="M32,5L5,32L32,59" /></svg>

resources/ext.multimediaViewer/img/prev-ltr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1"><path fill="none" stroke-width="5px" stroke="white" d="M32,5L5,32L32,59" /></svg>

resources/ext.multimediaViewer/img/prev-rtl.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1"><path fill="none" stroke-width="5px" stroke="white" d="M32,5L59,32L32,59" /></svg>