jenkins-bot has submitted this change and it was merged.
Change subject: Previous and next functionality!
......................................................................
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
---
M resources/ext.multimediaViewer/ext.multimediaViewer.css
M resources/ext.multimediaViewer/ext.multimediaViewer.js
M resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
A resources/ext.multimediaViewer/img/next-ltr.svg
A resources/ext.multimediaViewer/img/next-rtl.svg
A resources/ext.multimediaViewer/img/prev-ltr.svg
A resources/ext.multimediaViewer/img/prev-rtl.svg
7 files changed, 137 insertions(+), 34 deletions(-)
Approvals:
Gergő Tisza: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css
b/resources/ext.multimediaViewer/ext.multimediaViewer.css
index 89b40c3..1dfa203 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.css
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.css
@@ -84,7 +84,7 @@
}
.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 .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 f9a2567..9b306e1 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 9cb2bf2..c8b0322 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 = $( '<div>' )
+ .addClass( 'mw-mlb-next-image disabled' )
+ .html( ' ' )
+ .click( function () {
+ mw.mediaViewer.nextImage();
+ } )
+ .appendTo( this.$main );
+
+ this.$prevButton = $( '<div>' )
+ .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 0000000..574e43c
--- /dev/null
+++ b/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>
diff --git a/resources/ext.multimediaViewer/img/next-rtl.svg
b/resources/ext.multimediaViewer/img/next-rtl.svg
new file mode 100644
index 0000000..ce72769
--- /dev/null
+++ b/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>
diff --git a/resources/ext.multimediaViewer/img/prev-ltr.svg
b/resources/ext.multimediaViewer/img/prev-ltr.svg
new file mode 100644
index 0000000..ce72769
--- /dev/null
+++ b/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>
diff --git a/resources/ext.multimediaViewer/img/prev-rtl.svg
b/resources/ext.multimediaViewer/img/prev-rtl.svg
new file mode 100644
index 0000000..574e43c
--- /dev/null
+++ b/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>
--
To view, visit https://gerrit.wikimedia.org/r/97673
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie514cd4b16bdee8a384a89d4bd1d755a24c5cdb4
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
Gerrit-Reviewer: Gergő Tisza <[email protected]>
Gerrit-Reviewer: MarkTraceur <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
