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

Move dialog/reuse dialog code to mmv.ui.reuse module

Browse source 
Initialise the corresponding dialogs upon first use by deferred loading of the mmv.ui.reuse module. Reduces code size of the main mmv module.

Bug: T77349
Change-Id: I672419e1a8af47d192843f7e7a4a038c0d8da2a3
This commit is contained in:
Simon Legner 2024-05-23 22:13:50 +02:00
parent 584b7f63ed
commit 5bee6274e0
11 changed files with 78 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bundlesize.config.json
View file

@ -2,7 +2,7 @@
"modules": [
{
"resourceModule": "mmv",
"maxSize": "28.0 kB"
"maxSize": "27.6 kB"
},
{
"resourceModule": "mmv.ui.restriction",
@ -14,7 +14,7 @@
},
{
"resourceModule": "mmv.ui.reuse",
"maxSize": "4.8 kB"
"maxSize": "5.7 kB"
},
{
"resourceModule": "mmv.bootstrap",

10
extension.json
View file

@ -60,8 +60,6 @@
"mmv/mmv.ThumbnailWidthCalculator.js",
"mmv/ui/mmv.ui.js",
"mmv/ui/mmv.ui.dialog.js",
"mmv/ui/mmv.ui.reuse.dialog.js",
"mmv/ui/mmv.ui.download.dialog.js",
"mmv/ui/mmv.ui.description.js",
"mmv/ui/mmv.ui.viewingOptions.js",
"mmv/ui/mmv.ui.canvas.js",
@ -76,8 +74,6 @@
],
"styles": [
"mmv/ui/mmv.ui.dialog.less",
"mmv/ui/mmv.ui.reuse.dialog.less",
"mmv/ui/mmv.ui.download.dialog.less",
"mmv/ui/mmv.ui.viewingOptions.less",
"mmv/ui/mmv.ui.canvas.less",
"mmv/ui/mmv.ui.canvasButtons.less",
@ -219,12 +215,18 @@
"mmv.ui.reuse": {
"packageFiles": [
"mmv.ui.reuse/index.js",
"mmv.ui.reuse/mmv.ui.reuse.dialog.js",
"mmv.ui.reuse/mmv.ui.download.dialog.js",
"mmv.ui.reuse/mmv.ui.download.pane.js",
"mmv.ui.reuse/mmv.ui.reuse.share.js",
"mmv.ui.reuse/mmv.ui.reuse.embed.js",
"mmv.ui.reuse/mmv.EmbedFileFormatter.js",
"mmv.ui.reuse/mmv.ui.utils.js"
],
"styles": [
"mmv.ui.reuse/mmv.ui.reuse.dialog.less",
"mmv.ui.reuse/mmv.ui.download.dialog.less"
],
"dependencies": [
"mmv.codex",
"mediawiki.user",

4
resources/mmv.ui.reuse/index.js
View file

@ -15,10 +15,12 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const DownloadDialog = require( './mmv.ui.download.dialog.js' );
const ReuseDialog = require( './mmv.ui.reuse.dialog.js' );
const Download = require( './mmv.ui.download.pane.js' );
const Embed = require( './mmv.ui.reuse.embed.js' );
const EmbedFileFormatter = require( './mmv.EmbedFileFormatter.js' );
const Share = require( './mmv.ui.reuse.share.js' );
const Utils = require( './mmv.ui.utils.js' );
module.exports = { Download, Embed, EmbedFileFormatter, Share, Utils };
module.exports = { DownloadDialog, ReuseDialog, Download, Embed, EmbedFileFormatter, Share, Utils };

31
resources/mmv/ui/mmv.ui.download.dialog.js → resources/mmv.ui.reuse/mmv.ui.download.dialog.js
View file

@ -15,7 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Dialog = require( './mmv.ui.dialog.js' );
const { Dialog } = require( 'mmv' );
const DownloadPane = require( './mmv.ui.download.pane.js' );
/**
* Represents the file download dialog and the link to open it.
@ -29,8 +30,7 @@ class DownloadDialog extends Dialog {
constructor( $container, $openButton, config ) {
super( $container, $openButton, config );
this.loadDependencies.push( 'mmv.ui.reuse' );
this.download = new DownloadPane( this.$dialog );
this.$dialog.addClass( 'mw-mmv-download-dialog' );
this.eventPrefix = 'download';
@ -40,6 +40,8 @@ class DownloadDialog extends Dialog {
* Registers listeners.
*/
attach() {
this.download.attach();
this.handleEvent( 'mmv-download-open', this.handleOpenCloseClick.bind( this ) );
this.handleEvent( 'mmv-reuse-open', this.closeDialog.bind( this ) );
@ -53,15 +55,8 @@ class DownloadDialog extends Dialog {
* @param {Repo} repo
*/
set( image, repo ) {
if ( this.download ) {
this.download.set( image, repo );
this.showImageWarnings( image );
} else {
this.setValues = {
image: image,
repo: repo
};
}
this.download.set( image, repo );
this.showImageWarnings( image );
}
/**
@ -74,18 +69,6 @@ class DownloadDialog extends Dialog {
* Opens a dialog with information about file download.
*/
openDialog() {
if ( !this.download ) {
const { Download } = require( 'mmv.ui.reuse' );
this.download = new Download( this.$dialog );
this.download.attach();
}
if ( this.setValues ) {
this.download.set( this.setValues.image, this.setValues.repo );
this.showImageWarnings( this.setValues.image );
this.setValues = undefined;
}
super.openDialog();
$( document ).trigger( 'mmv-download-opened' );

4
resources/mmv/ui/mmv.ui.download.dialog.less → resources/mmv.ui.reuse/mmv.ui.download.dialog.less
View file

@ -1,6 +1,6 @@
@import 'mediawiki.skin.variables.less';
@import '../mmv.variables.less';
@import '../mmv.mixins.less';
@import '../mmv/mmv.variables.less';
@import '../mmv/mmv.mixins.less';
.mw-mmv-download-dialog {
// resetting height (to overwrite .mw-mmv-dialog's bigger height), since the

39
resources/mmv/ui/mmv.ui.reuse.dialog.js → resources/mmv.ui.reuse/mmv.ui.reuse.dialog.js
View file

@ -15,7 +15,9 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Dialog = require( './mmv.ui.dialog.js' );
const { Dialog } = require( 'mmv' );
const Embed = require( './mmv.ui.reuse.embed.js' );
const Share = require( './mmv.ui.reuse.share.js' );
/**
* Represents the file reuse dialog and the link to open it.
@ -29,8 +31,8 @@ class ReuseDialog extends Dialog {
constructor( $container, $openButton, config ) {
super( $container, $openButton, config );
this.loadDependencies.push( 'mmv.ui.reuse' );
this.share = new Share( this.$dialog );
this.embed = new Embed( this.$dialog );
this.$dialog.addClass( 'mw-mmv-reuse-dialog' );
this.eventPrefix = 'use-this-file';
@ -40,6 +42,9 @@ class ReuseDialog extends Dialog {
* Registers listeners.
*/
attach() {
this.share.attach();
this.embed.attach();
this.handleEvent( 'mmv-reuse-open', this.handleOpenCloseClick.bind( this ) );
this.handleEvent( 'mmv-download-open', this.closeDialog.bind( this ) );
@ -55,14 +60,10 @@ class ReuseDialog extends Dialog {
* @param {string} alt
*/
set( image, repo, caption, alt ) {
if ( this.share && this.embed ) {
this.share.set( image );
this.embed.set( image, repo, caption, alt );
this.embed.set( image, repo, caption );
this.showImageWarnings( image );
} else {
this.setValues = [ image, repo, caption, alt ];
}
this.share.set( image );
this.embed.set( image, repo, caption, alt );
this.embed.set( image, repo, caption );
this.showImageWarnings( image );
}
/**
@ -75,22 +76,6 @@ class ReuseDialog extends Dialog {
* Opens a dialog with information about file reuse.
*/
openDialog() {
const { Embed, Share } = require( 'mmv.ui.reuse' );
if ( !this.share ) {
this.share = new Share( this.$dialog );
this.share.attach();
}
if ( !this.embed ) {
this.embed = new Embed( this.$dialog );
this.embed.attach();
}
if ( this.setValues ) {
this.set( ...this.setValues );
this.setValues = undefined;
}
super.openDialog();
this.$warning.insertAfter( this.$container );

4
resources/mmv/ui/mmv.ui.reuse.dialog.less → resources/mmv.ui.reuse/mmv.ui.reuse.dialog.less
View file

@ -1,6 +1,6 @@
@import 'mediawiki.skin.variables.less';
@import '../mmv.variables.less';
@import '../mmv.mixins.less';
@import '../mmv/mmv.variables.less';
@import '../mmv/mmv.mixins.less';
.mw-mmv-reuse-dialog {
// resetting height (to overwrite .mw-mmv-dialog's bigger height), since the

4
resources/mmv/mmv.js
View file

@ -34,13 +34,11 @@ const Canvas = require( './ui/mmv.ui.canvas.js' );
const CanvasButtons = require( './ui/mmv.ui.canvasButtons.js' );
const Description = require( './ui/mmv.ui.description.js' );
const Dialog = require( './ui/mmv.ui.dialog.js' );
const DownloadDialog = require( './ui/mmv.ui.download.dialog.js' );
const UiElement = require( './ui/mmv.ui.js' );
const MetadataPanel = require( './ui/mmv.ui.metadataPanel.js' );
const MetadataPanelScroller = require( './ui/mmv.ui.metadataPanelScroller.js' );
const Permission = require( './ui/mmv.ui.permission.js' );
const ProgressBar = require( './ui/mmv.ui.progressBar.js' );
const ReuseDialog = require( './ui/mmv.ui.reuse.dialog.js' );
const StripeButtons = require( './ui/mmv.ui.stripeButtons.js' );
const TruncatableTextField = require( './ui/mmv.ui.truncatableTextField.js' );
const OptionsDialog = require( './ui/mmv.ui.viewingOptions.js' );
@ -937,7 +935,6 @@ module.exports = {
CanvasButtons,
Description,
Dialog,
DownloadDialog,
FileRepoInfo,
ForeignApiRepo,
ForeignDbRepo,
@ -955,7 +952,6 @@ module.exports = {
Permission,
ProgressBar,
Repo,
ReuseDialog,
StripeButtons,
TaskQueue,
Thumbnail,

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

@ -18,13 +18,40 @@
const { Config } = require( 'mmv.bootstrap' );
const Canvas = require( './ui/mmv.ui.canvas.js' );
const CanvasButtons = require( './ui/mmv.ui.canvasButtons.js' );
const DownloadDialog = require( './ui/mmv.ui.download.dialog.js' );
const MetadataPanel = require( './ui/mmv.ui.metadataPanel.js' );
const OptionsDialog = require( './ui/mmv.ui.viewingOptions.js' );
const ReuseDialog = require( './ui/mmv.ui.reuse.dialog.js' );
const ThumbnailWidthCalculator = require( './mmv.ThumbnailWidthCalculator.js' );
const UiElement = require( './ui/mmv.ui.js' );
/** Proxy for a Dialog. Initialises and attaches the dialog upon first use. */
class DialogProxy extends UiElement {
constructor( eventName, initDialog ) {
super();
this.eventName = eventName;
this.initDialog = initDialog;
}
attach() {
this.handleEvent( this.eventName, this.handleOpenCloseClick.bind( this ) );
}
set( ...setValues ) {
this.setValues = setValues;
}
handleOpenCloseClick() {
mw.loader.using( 'mmv.ui.reuse', ( req ) => {
this.unattach();
const dialog = this.initDialog( req );
dialog.attach();
dialog.set( ...this.setValues );
dialog.handleOpenCloseClick();
} );
}
closeDialog() {}
}
/**
* Represents the main interface of the lightbox
*/
@ -91,8 +118,16 @@ class LightboxInterface extends UiElement {
this.buttons = new CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton );
this.canvas = new Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper );
this.fileReuse = new ReuseDialog( this.$innerWrapper, this.buttons.$reuse, this.config );
this.downloadDialog = new DownloadDialog( this.$innerWrapper, this.buttons.$download, this.config );
this.fileReuse = new DialogProxy( 'mmv-reuse-open', ( req ) => {
const { ReuseDialog } = req( 'mmv.ui.reuse' );
this.fileReuse = new ReuseDialog( this.$innerWrapper, this.buttons.$download, this.config );
return this.fileReuse;
} );
this.downloadDialog = new DialogProxy( 'mmv-download-open', ( req ) => {
const { DownloadDialog } = req( 'mmv.ui.reuse' );
this.downloadDialog = new DownloadDialog( this.$innerWrapper, this.buttons.$download, this.config );
return this.downloadDialog;
} );
this.optionsDialog = new OptionsDialog( this.$innerWrapper, this.buttons.$options, this.config );
}

13
resources/mmv/ui/mmv.ui.dialog.js
View file

@ -32,11 +32,6 @@ class Dialog extends UiElement {
/** @property {boolean} isOpen Whether or not the dialog is open. */
this.isOpen = false;
/**
* @property {string[]} loadDependencies Dependencies to load before showing the dialog.
*/
this.loadDependencies = [];
/**
* @property {string} eventPrefix Prefix specific to the class to be applied to events.
*/
@ -88,13 +83,7 @@ class Dialog extends UiElement {
* @return {boolean} False to cancel the default event
*/
handleOpenCloseClick( openEvent, e ) {
mw.loader.using( this.loadDependencies, () => {
this.dependenciesLoaded = true;
this.toggleDialog( e );
}, ( error ) => {
mw.log.error( 'mw.loader.using error when trying to load dialog dependencies', error );
} );
this.toggleDialog( e );
return false;
}

5
tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js
View file

@ -15,7 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { ReuseDialog, Repo } = require( 'mmv' );
const { Repo } = require( 'mmv' );
const { ReuseDialog } = require( 'mmv.ui.reuse' );
( function () {
function makeReuseDialog( sandbox ) {
@ -132,6 +133,7 @@ const { ReuseDialog, Repo } = require( 'mmv' );
QUnit.test( 'set()/empty() sense check:', function ( assert ) {
const reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.embed.resetCurrentSizeMenuToDefault = () => {};
const title = mw.Title.newFromText( 'File:Foobar.jpg' );
const src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg';
const url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg';
@ -156,6 +158,7 @@ const { ReuseDialog, Repo } = require( 'mmv' );
QUnit.test( 'openDialog()/closeDialog():', function ( assert ) {
const reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.embed.resetCurrentSizeMenuToDefault = () => {};
const title = mw.Title.newFromText( 'File:Foobar.jpg' );
const src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg';
const url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg';