Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Galleries on mobile

Browse source 
1) Improve the transition from non-JS to JS - space is reserved
to avoid reflow.
3) Improve experience for non-JS users - a CSS slideshow is
used to allow jumping between images
4) Enable the loading of galleries on mobile
5) Fire a hook mediawiki.gallery.init when initialized to
support mobile's lazy loaded images use case (will be used in
Ia71b674eb7f6456cacd24f3ebfdd1315be840603)

Bug: T242143
Bug: T194887
Change-Id: I58e18924c02fe12baba820f25b7a6f0c437a206b
This commit is contained in:
Jon Robson 2022-12-14 12:54:37 -08:00 committed by Jdlrobson
parent 1ea798726a
commit d94a164509
3 changed files with 62 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/Resources.php
View file

@ -1646,7 +1646,8 @@ return [
'dependencies' => [
'mediawiki.page.gallery.styles',
'mediawiki.util'
]
],
'targets' => [ 'desktop', 'mobile' ],
],
'mediawiki.page.gallery.styles' => [
'styles' => [
@ -1669,7 +1670,8 @@ return [
],
'messages' => [
'gallery-slideshow-toggle'
]
],
'targets' => [ 'desktop', 'mobile' ],
],
'mediawiki.page.ready' => [
'localBasePath' => "$wgBaseDirectory/resources/src/mediawiki.page.ready",

7
resources/src/mediawiki.page.gallery.slideshow.js
View file

@ -41,6 +41,9 @@
this.showCurrentImage();
return false;
}.bind( this ) );
this.$gallery.addClass( 'mw-gallery-slideshow-ooui' );
// Allow others to extend
mw.hook( 'mediawiki.gallery.init' ).fire( this.$gallery[ 0 ] );
};
/* Properties */
@ -262,8 +265,8 @@
this.$imgContainer.empty().append( $imgLink );
} else {
// 2b. No image found (e.g. file doesn't exist)
this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
// 2b. No image found (e.g. file doesn't exist or mobile lazy loading thumbnail)
this.$imgContainer.html( $imageLi.find( '.thumb' ).html() );
}
// 3. Copy caption

59
resources/src/mediawiki.page.gallery.styles/gallery.less
View file

@ -124,8 +124,59 @@ ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapp
/* Slideshow */
ul.gallery.mw-gallery-slideshow {
display: block;
margin: 4em 0;
display: flex;
margin: auto;
width: 100%;
// Should be synced with mediawiki.page.gallery.slideshow.js
height: 75vh;
text-align: center;
overflow: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
li {
scroll-snap-align: start;
flex-shrink: 0;
height: 100%;
text-align: center;
display: flex;
flex-flow: column;
// override inline style
// stylelint-disable-next-line declaration-no-important
width: 100% !important;
> div {
max-width: none;
margin: auto;
}
}
&:not( .mw-gallery-slideshow-ooui ) {
// Reserve space at top of gallery while OOUI loads.
li:before {
.client-js & {
content: '';
width: 100%;
display: block;
padding: 1.3em 0;
// equivalent to the OOUI icon button height:
height: 32px;
}
}
.thumb {
height: 100%;
// override inline style
// stylelint-disable-next-line declaration-no-important
width: 100% !important;
}
img {
height: 100%;
width: auto;
}
}
.gallerycaption {
font-size: 1.3em;
@ -165,10 +216,6 @@ ul.gallery.mw-gallery-slideshow {
background: #efefef;
}
> div {
max-width: 120px;
}
div.thumb {
border: 0;
background: transparent;