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

MMV should have an affordance for which image is being viewed in the article

Browse source 
Bug: T377791
Change-Id: I701632faa6890bd1577eb725ac4b25579fb510b8
This commit is contained in:
Simon Legner 2024-10-22 21:59:25 +02:00 committed by Jdlrobson
parent 995bb6da2b
commit 69e4e77044
5 changed files with 39 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -2,7 +2,7 @@
"modules": [
{
"resourceModule": "mmv",
"maxSize": "25.2 kB"
"maxSize": "25.3 kB"
},
{
"resourceModule": "mmv.ui.restriction",

4
resources/mmv/mmv.js
View file

@ -156,7 +156,7 @@ class MultimediaViewer {
} );
}
this.ui.updateControls( this.thumbs.length > 1 );
this.ui.updateControls( this.currentIndex, this.thumbs.length );
}
/**
@ -168,7 +168,7 @@ class MultimediaViewer {
*/
setImage( thumbnail, imageElement, imageWidths ) {
this.ui.canvas.setImageAndMaxDimensions( thumbnail, imageElement, imageWidths );
this.ui.updateControls( this.thumbs.length > 1 );
this.ui.updateControls( this.currentIndex, this.thumbs.length );
}
/**

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

@ -476,11 +476,12 @@ class LightboxInterface extends UiElement {
}
/**
* Updates the next and prev buttons
* Updates the next and prev buttons as well as the current image number indicator
*
* @param {boolean} showPrevNext Show prev/next button
* @param {number} currentIndex Current image index
* @param {number} imageCount Image count
*/
updateControls( showPrevNext ) {
updateControls( currentIndex, imageCount ) {
const prevNextTop = `${ ( this.$imageWrapper.height() - 60 ) / 2 }px`;
if ( this.isFullscreen ) {
@ -490,7 +491,8 @@ class LightboxInterface extends UiElement {
}
this.buttons.setOffset( prevNextTop );
this.buttons.$nav.toggle( showPrevNext );
this.buttons.$nav.toggle( imageCount > 1 );
this.buttons.$currentImageNumber.show().html( `${ currentIndex + 1 } ⁄ ${ imageCount }` );
}
/**

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

@ -56,11 +56,16 @@ class CanvasButtons extends UiElement {
.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.$currentImageNumber = $( '<div>' )
.addClass( 'mw-mmv-current-image-number' )
.hide();
this.$nav = this.$next
.add( this.$prev )
.hide();
this.$buttons = this.$close
.add( this.$currentImageNumber )
.add( this.$download )
.add( this.$reuse )
.add( this.$fullscreen )
@ -70,6 +75,7 @@ class CanvasButtons extends UiElement {
this.$buttons.appendTo( this.$container );
$( document ).on( 'mmv-close', () => {
this.$currentImageNumber.hide();
this.$nav.hide();
} );

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

@ -60,6 +60,30 @@
min-height: @buttons-size;
}
.mw-mmv-current-image-number {
align-items: center;
background-color: @buttons-background-color-faded;
color: @color-inverted-fixed;
display: inline-flex;
gap: 4px;
justify-content: center;
left: auto;
min-height: @buttons-size;
min-width: @buttons-size;
opacity: 0.8;
padding: 0 4px;
position: fixed;
right: ( @buttons-offset-edge + ( @buttons-offset-each ) );
top: @buttons-offset-edge;
transition-property: background-color, opacity;
&:hover {
background-color: @buttons-background-color;
opacity: 1;
transition: opacity 0.1s ease-in;
}
}
// Per button positioning and providing icons
.mw-mmv-close {
top: @buttons-offset-edge;