wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-23 15:56:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make next/prev buttons jump to first/last image when viewing last/first image

Browse source 
Bug: T77877
Change-Id: I10f4d1b51b909ac8683afbd21f9529254a25ff37
This commit is contained in:
Simon Legner 2024-10-08 20:32:23 +02:00
parent 683ca2a2dd
commit f3786ff249
4 changed files with 17 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
resources/mmv/mmv.js
View file

@ -160,18 +160,7 @@ class MultimediaViewer {
} );
}
this.updateControls();
}
/**
* Updates positioning of controls, usually after a resize event.
*/
updateControls() {
const numImages = this.thumbs ? this.thumbs.length : 0;
const showNextButton = this.currentIndex < ( numImages - 1 );
const showPreviousButton = this.currentIndex > 0;
this.ui.updateControls( showNextButton, showPreviousButton );
this.ui.updateControls();
}
/**
@ -184,7 +173,7 @@ class MultimediaViewer {
*/
setImage( ui, thumbnail, imageElement, imageWidths ) {
ui.canvas.setImageAndMaxDimensions( thumbnail, imageElement, imageWidths );
this.updateControls();
this.ui.updateControls();
}
/**
@ -675,14 +664,22 @@ class MultimediaViewer {
* Opens the next image
*/
nextImage() {
this.loadIndex( this.currentIndex + 1 );
if ( this.currentIndex === this.thumbs.length - 1 ) {
this.firstImage();
} else {
this.loadIndex( this.currentIndex + 1 );
}
}
/**
* Opens the previous image
*/
prevImage() {
this.loadIndex( this.currentIndex - 1 );
if ( this.currentIndex === 0 ) {
this.lastImage();
} else {
this.loadIndex( this.currentIndex - 1 );
}
}
/**

6
resources/mmv/mmv.lightboxinterface.js
View file

@ -483,11 +483,8 @@ class LightboxInterface extends UiElement {
/**
* Updates the next and prev buttons
*
* @param {boolean} showPrevButton Whether the prev button should be revealed or not
* @param {boolean} showNextButton Whether the next button should be revealed or not
*/
updateControls( showPrevButton, showNextButton ) {
updateControls() {
const prevNextTop = `${ ( this.$imageWrapper.height() - 60 ) / 2 }px`;
if ( this.isFullscreen ) {
@ -497,7 +494,6 @@ class LightboxInterface extends UiElement {
}
this.buttons.setOffset( prevNextTop );
this.buttons.toggle( showPrevButton, showNextButton );
}
/**

15
resources/mmv/ui/mmv.ui.canvasButtons.js
View file

@ -54,12 +54,12 @@ class CanvasButtons extends UiElement {
this.$next = $( '<button>' )
.prop( 'title', mw.msg( 'multimediaviewer-next-image-alt-text' ) )
.addClass( 'cdx-button cdx-button--icon-only cdx-button--size-large mw-mmv-button mw-mmv-next-image disabled' )
.addClass( 'cdx-button cdx-button--icon-only cdx-button--size-large mw-mmv-button mw-mmv-next-image' )
.append( $( '<span>' ).addClass( 'mw-mmv-icon' ) );
this.$prev = $( '<button>' )
.prop( 'title', mw.msg( 'multimediaviewer-prev-image-alt-text' ) )
.addClass( 'cdx-button cdx-button--icon-only cdx-button--size-large mw-mmv-button mw-mmv-prev-image disabled' )
.addClass( 'cdx-button cdx-button--icon-only cdx-button--size-large mw-mmv-button mw-mmv-prev-image' )
.append( $( '<span>' ).addClass( 'mw-mmv-icon' ) );
this.$nav = this.$next
@ -103,17 +103,6 @@ class CanvasButtons extends UiElement {
} );
}
/**
* Toggles buttons being disabled or not
*
* @param {boolean} showPrevButton
* @param {boolean} showNextButton
*/
toggle( showPrevButton, showNextButton ) {
this.$next.toggleClass( 'disabled', !showPrevButton );
this.$prev.toggleClass( 'disabled', !showNextButton );
}
/**
* Registers listeners.
*

15
resources/mmv/ui/mmv.ui.canvasButtons.less
View file

@ -60,19 +60,6 @@
min-height: @buttons-size;
}
// Vertical positioning of left/right button
.mw-mmv-next-image,
.mw-mmv-prev-image {
&.disabled {
display: none;
cursor: none;
}
.mw-mmv-icon {
mask-size: @buttons-icon-size-large;
}
}
// Per button positioning and providing icons
.mw-mmv-close {
top: @buttons-offset-edge;
@ -106,6 +93,7 @@
right: @size-icon-medium;
.mw-mmv-icon {
mask-size: @buttons-icon-size-large;
.cdx-mixin-css-icon( @cdx-icon-next, @param-fill-color: @color-inverted-fixed, @param-size-icon: @size-icon-medium );
}
}
@ -114,6 +102,7 @@
left: @size-icon-medium;
.mw-mmv-icon {
mask-size: @buttons-icon-size-large;
.cdx-mixin-css-icon( @cdx-icon-previous, @param-fill-color: @color-inverted-fixed, @param-size-icon: @size-icon-medium );
}
}