wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-30 10:54:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

MMV: Set body background and theme-color

Browse source 
When opening the viewer set the body background and the theme-color
to match the background of the viewer. This provides a better
experience for (esp. mobile) browsers.

theme-color has to be overriden, as it can be inferred from the top
of the browser window, but images can be all kinds of colors, so it
is better to be explicit.

Bug: T368659
Change-Id: I313745a31bf17eef612dd89630b1bbc4cb57fd45
This commit is contained in:
Derk-Jan Hartman 2024-06-27 21:03:48 +02:00
parent 2a8b140ed3
commit 1b12172bb0
3 changed files with 34 additions and 1 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": "26.4 kB"
"maxSize": "26.6 kB"
},
{
"resourceModule": "mmv.ui.restriction",

4
resources/mmv.bootstrap/mmv.bootstrap.less
View file

@ -24,6 +24,10 @@
body.mw-mmv-lightbox-open {
overflow-y: auto;
// This is to ensure the background area for the safe areas (notch) is black in fullscreen mode
// Separate from above as not all browsers that we support, support has().
background-color: #000;
// Stop the article from scrolling in the background
> *:not( .mw-notification-area-overlay ) {
display: none;

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

@ -65,6 +65,10 @@ class LightboxInterface extends UiElement {
this.localStorage = mw.storage;
// When opening we might override the theme-color, so remember the original value
const metaElement = document.querySelector( 'meta[name="theme-color"]' );
this.originalThemeColor = metaElement ? metaElement.getAttribute( 'content' ) : null;
/** @property {Config} config - */
this.config = new Config(
mw.config.get( 'wgMultimediaViewer', {} ),
@ -192,6 +196,9 @@ class LightboxInterface extends UiElement {
return;
}
// Make sure devices set their theming to dark to match the background of the viewer
this.setThemeColor( '#000000' );
this.handleEvent( 'keyup', ( e ) => {
if ( e.keyCode === 27 && !( e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
// Escape button pressed
@ -303,6 +310,8 @@ class LightboxInterface extends UiElement {
prev: [ 'emit', 'prev' ]
} );
this.setThemeColor( this.originalThemeColor );
this.attached = false;
}
@ -500,6 +509,26 @@ class LightboxInterface extends UiElement {
this.buttons.setOffset( prevNextTop );
this.buttons.toggle( showPrevButton, showNextButton );
}
/**
* Update the theme-color of the document
*
* @param {string|null} color to set as theme-color or null to remove the theme-color
*/
setThemeColor( color ) {
let metaElement = document.querySelector( 'meta[name="theme-color"]' );
if ( !metaElement ) {
metaElement = document.createElement( 'meta' );
metaElement.setAttribute( 'name', 'theme-color' );
document.head.appendChild( metaElement );
}
if ( color === null ) {
metaElement.remove();
} else {
this.originalThemeColor = metaElement.getAttribute( 'content' );
metaElement.setAttribute( 'content', color );
}
}
}
module.exports = LightboxInterface;