mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-21 04:02:53 +00:00
7b35e6b1e8
Creates a dark mode launch banner, (copied from the MinervaNue skin) to
announce the launch of dark-mode for Vector 2022.
The banner itself is not invoked anywhere by default, but will be
invoked through CentralNotice as a banner as part of a launch campaign.
To invoke the banner manually, execute the following in the dev console:
```
mw.loader.using( 'skins.vector.DarkModeLaunchBanner', function( require ) {
require( 'skins.vector.DarkModeLaunchBanner')();
} );
```
Bug: T370303
Change-Id: I1ca4aab8c302ef418bc1d12dde0d80c96c3b8d4f
75 lines
2.9 KiB
JavaScript
75 lines
2.9 KiB
JavaScript
const makeTemplate = function () {
|
|
const templateString = `<div class="cdx-dialog-backdrop">
|
|
<div tabindex="0"></div>
|
|
<div class="cdx-dialog cdx-dialog--horizontal-actions" role="dialog" aria-labelledby="cdx-dialog-label-0" aria-modal="true">
|
|
<header class="cdx-dialog__header cdx-dialog__header--default">
|
|
<div class="cdx-dialog__header__title-group">
|
|
<h2 id="cdx-dialog-label-0" class="cdx-dialog__header__title">
|
|
${ mw.message( 'vector-night-mode-launch-title' ).escaped() }
|
|
</h2>
|
|
</div>
|
|
<button class="cdx-button cdx-button--action-default cdx-button--weight-quiet cdx-button--size-medium cdx-button--icon-only cdx-dialog__header__close-button" type="button" aria-label="${ mw.message( 'vector-night-mode-launch-close-label' ).escaped() }">
|
|
<span class="cdx-icon cdx-icon--medium">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><title>Close</title><g><path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"></path><path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"></path></g></svg>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
<div class="cdx-dialog-focus-trap" tabindex="-1"></div>
|
|
<div class="cdx-dialog__body">
|
|
<div class="skin-vector-launch-image"></div>
|
|
<h3>
|
|
${ mw.message( 'vector-night-mode-launch-subtitle' ).escaped() }
|
|
</h3>
|
|
<p>
|
|
${ mw.message( 'vector-night-mode-launch-description-day' ).escaped() }
|
|
</p>
|
|
</div>
|
|
<footer class="cdx-dialog__footer cdx-dialog__footer--default"></footer>
|
|
</div>
|
|
<div tabindex="0"></div>
|
|
</div>`;
|
|
|
|
const templateElement = document.createElement( 'div' );
|
|
templateElement.id = 'vector-dark-mode-launch-banner';
|
|
templateElement.innerHTML = templateString;
|
|
return templateElement;
|
|
};
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById( 'vector-dark-mode-launch-banner' );
|
|
if ( modal ) {
|
|
modal.remove();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
const mountElement = document.getElementById( 'mw-teleport-target' ),
|
|
isNotSkinVector2022 = mw.config.get( 'skin' ) !== 'vector-2022',
|
|
templateElement = makeTemplate(),
|
|
dialogOverlay = templateElement.querySelector( '.cdx-dialog-backdrop' ),
|
|
dialogCloseButton = templateElement.querySelector( '.cdx-dialog__header__close-button' );
|
|
|
|
// since this can module can run via centralNotice, ensuring the currect skin is Vector 2022
|
|
if ( isNotSkinVector2022 ) {
|
|
return;
|
|
}
|
|
|
|
if ( dialogOverlay ) {
|
|
dialogOverlay.addEventListener( 'click', ( e ) => {
|
|
if ( e.target === dialogOverlay ) {
|
|
closeModal();
|
|
}
|
|
} );
|
|
}
|
|
|
|
if ( dialogCloseButton ) {
|
|
dialogCloseButton.addEventListener( 'click', closeModal );
|
|
}
|
|
|
|
if ( mountElement ) {
|
|
mountElement.appendChild( templateElement );
|
|
}
|
|
}
|
|
|
|
module.exports = init;
|