From 85eb742277a0ecfb4d9a3f00dbbb52542cd05ea4 Mon Sep 17 00:00:00 2001 From: Mark Holmquist Date: Mon, 25 Nov 2013 19:37:01 -0800 Subject: [PATCH] Previous and next functionality! Adds buttons on the side, disabled at the start and end of the list of images, that let you browse through the images on the page! Also arrow keys! EXCITING! Change-Id: Ie514cd4b16bdee8a384a89d4bd1d755a24c5cdb4 --- .../ext.multimediaViewer.css | 29 +++++- .../ext.multimediaViewer.js | 94 ++++++++++++------- .../ext.multimediaViewer.lightboxinterface.js | 44 +++++++++ .../ext.multimediaViewer/img/next-ltr.svg | 1 + .../ext.multimediaViewer/img/next-rtl.svg | 1 + .../ext.multimediaViewer/img/prev-ltr.svg | 1 + .../ext.multimediaViewer/img/prev-rtl.svg | 1 + 7 files changed, 137 insertions(+), 34 deletions(-) create mode 100644 resources/ext.multimediaViewer/img/next-ltr.svg create mode 100644 resources/ext.multimediaViewer/img/next-rtl.svg create mode 100644 resources/ext.multimediaViewer/img/prev-ltr.svg create mode 100644 resources/ext.multimediaViewer/img/prev-rtl.svg diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css b/resources/ext.multimediaViewer/ext.multimediaViewer.css index 89b40c398..1dfa2037e 100644 --- a/resources/ext.multimediaViewer/ext.multimediaViewer.css +++ b/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; +} diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.js b/resources/ext.multimediaViewer/ext.multimediaViewer.js index f9a2567c0..9b306e1b7 100755 --- a/resources/ext.multimediaViewer/ext.multimediaViewer.js +++ b/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 ); diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js index 9cb2bf281..c8b0322b8 100644 --- a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js +++ b/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 = $( '
' ) + .addClass( 'mw-mlb-next-image disabled' ) + .html( ' ' ) + .click( function () { + mw.mediaViewer.nextImage(); + } ) + .appendTo( this.$main ); + + this.$prevButton = $( '
' ) + .addClass( 'mw-mlb-prev-image disabled' ) + .html( ' ' ) + .click( function () { + mw.mediaViewer.prevImage(); + } ) + .appendTo( this.$main ); + + $( document ).off( 'keydown', handleKeyDown ).on( 'keydown', handleKeyDown ); + }; + window.LightboxInterface = LightboxInterface; }( mediaWiki, jQuery, OO, LightboxInterface ) ); diff --git a/resources/ext.multimediaViewer/img/next-ltr.svg b/resources/ext.multimediaViewer/img/next-ltr.svg new file mode 100644 index 000000000..574e43c3c --- /dev/null +++ b/resources/ext.multimediaViewer/img/next-ltr.svg @@ -0,0 +1 @@ + diff --git a/resources/ext.multimediaViewer/img/next-rtl.svg b/resources/ext.multimediaViewer/img/next-rtl.svg new file mode 100644 index 000000000..ce7276977 --- /dev/null +++ b/resources/ext.multimediaViewer/img/next-rtl.svg @@ -0,0 +1 @@ + diff --git a/resources/ext.multimediaViewer/img/prev-ltr.svg b/resources/ext.multimediaViewer/img/prev-ltr.svg new file mode 100644 index 000000000..ce7276977 --- /dev/null +++ b/resources/ext.multimediaViewer/img/prev-ltr.svg @@ -0,0 +1 @@ + diff --git a/resources/ext.multimediaViewer/img/prev-rtl.svg b/resources/ext.multimediaViewer/img/prev-rtl.svg new file mode 100644 index 000000000..574e43c3c --- /dev/null +++ b/resources/ext.multimediaViewer/img/prev-rtl.svg @@ -0,0 +1 @@ +