MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/97673
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(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/73/97673/1
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 e3e8dec..a8bf71c 100755
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.js
@@ -122,43 +122,14 @@
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'
);
history.pushState( {}, '', '#' );
} );
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;
} );
@@ -203,11 +174,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;
@@ -269,6 +275,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 () {
@@ -649,6 +662,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 3501de3..9cb9bd7 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
@@ -49,6 +49,7 @@
this.initializeImage();
this.initializeImageMetadata();
this.initializeAboutLinks();
+ this.initializeNavigation();
};
LIP.initializeHeader = function () {
@@ -342,5 +343,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: newchange
Gerrit-Change-Id: Ie514cd4b16bdee8a384a89d4bd1d755a24c5cdb4
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
