mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-24 00:03:56 +00:00
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
This commit is contained in:
Mark Holmquist
MarkTraceur
parent
a4c0617b1f
commit
85eb742277
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ) );
|
||||
|
|
|
|||
1
resources/ext.multimediaViewer/img/next-ltr.svg
Normal file
1
resources/ext.multimediaViewer/img/next-ltr.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 257 B |
1
resources/ext.multimediaViewer/img/next-rtl.svg
Normal file
1
resources/ext.multimediaViewer/img/next-rtl.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 256 B |
1
resources/ext.multimediaViewer/img/prev-ltr.svg
Normal file
1
resources/ext.multimediaViewer/img/prev-ltr.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 256 B |
1
resources/ext.multimediaViewer/img/prev-rtl.svg
Normal file
1
resources/ext.multimediaViewer/img/prev-rtl.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 257 B |
Loading…
Reference in a new issue