From 5bee6274e092ea5508e758c327cc339677430b92 Mon Sep 17 00:00:00 2001 From: Simon Legner Date: Thu, 23 May 2024 22:13:50 +0200 Subject: [PATCH] Move dialog/reuse dialog code to mmv.ui.reuse module 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 --- bundlesize.config.json | 4 +- extension.json | 10 +++-- resources/mmv.ui.reuse/index.js | 4 +- .../mmv.ui.download.dialog.js | 31 +++---------- .../mmv.ui.download.dialog.less | 4 +- .../mmv.ui.reuse.dialog.js | 39 ++++++----------- .../mmv.ui.reuse.dialog.less | 4 +- resources/mmv/mmv.js | 4 -- resources/mmv/mmv.lightboxinterface.js | 43 +++++++++++++++++-- resources/mmv/ui/mmv.ui.dialog.js | 13 +----- .../qunit/mmv/ui/mmv.ui.reuse.dialog.test.js | 5 ++- 11 files changed, 78 insertions(+), 83 deletions(-) rename resources/{mmv/ui => mmv.ui.reuse}/mmv.ui.download.dialog.js (78%) rename resources/{mmv/ui => mmv.ui.reuse}/mmv.ui.download.dialog.less (90%) rename resources/{mmv/ui => mmv.ui.reuse}/mmv.ui.reuse.dialog.js (76%) rename resources/{mmv/ui => mmv.ui.reuse}/mmv.ui.reuse.dialog.less (90%) diff --git a/bundlesize.config.json b/bundlesize.config.json index c96010e67..6c11b0ed0 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -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", diff --git a/extension.json b/extension.json index e8888e9bb..c1da858d0 100644 --- a/extension.json +++ b/extension.json @@ -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", diff --git a/resources/mmv.ui.reuse/index.js b/resources/mmv.ui.reuse/index.js index 0588ba4e7..6af57b163 100644 --- a/resources/mmv.ui.reuse/index.js +++ b/resources/mmv.ui.reuse/index.js @@ -15,10 +15,12 @@ * along with MediaViewer. If not, see . */ +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 }; diff --git a/resources/mmv/ui/mmv.ui.download.dialog.js b/resources/mmv.ui.reuse/mmv.ui.download.dialog.js similarity index 78% rename from resources/mmv/ui/mmv.ui.download.dialog.js rename to resources/mmv.ui.reuse/mmv.ui.download.dialog.js index 4f1ab7f28..9a36ee93b 100644 --- a/resources/mmv/ui/mmv.ui.download.dialog.js +++ b/resources/mmv.ui.reuse/mmv.ui.download.dialog.js @@ -15,7 +15,8 @@ * along with MultimediaViewer. If not, see . */ -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' ); diff --git a/resources/mmv/ui/mmv.ui.download.dialog.less b/resources/mmv.ui.reuse/mmv.ui.download.dialog.less similarity index 90% rename from resources/mmv/ui/mmv.ui.download.dialog.less rename to resources/mmv.ui.reuse/mmv.ui.download.dialog.less index a42d700d9..04492bd7a 100644 --- a/resources/mmv/ui/mmv.ui.download.dialog.less +++ b/resources/mmv.ui.reuse/mmv.ui.download.dialog.less @@ -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 diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.js b/resources/mmv.ui.reuse/mmv.ui.reuse.dialog.js similarity index 76% rename from resources/mmv/ui/mmv.ui.reuse.dialog.js rename to resources/mmv.ui.reuse/mmv.ui.reuse.dialog.js index 4458b8070..22620c405 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.js +++ b/resources/mmv.ui.reuse/mmv.ui.reuse.dialog.js @@ -15,7 +15,9 @@ * along with MultimediaViewer. If not, see . */ -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 ); diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.less b/resources/mmv.ui.reuse/mmv.ui.reuse.dialog.less similarity index 90% rename from resources/mmv/ui/mmv.ui.reuse.dialog.less rename to resources/mmv.ui.reuse/mmv.ui.reuse.dialog.less index 430511206..ee5b03e61 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.less +++ b/resources/mmv.ui.reuse/mmv.ui.reuse.dialog.less @@ -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 diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 296fb9f8f..56f81308f 100644 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -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, diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index e8ac6f736..3e9570d63 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -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 ); } diff --git a/resources/mmv/ui/mmv.ui.dialog.js b/resources/mmv/ui/mmv.ui.dialog.js index 372c36a95..15dfcdab9 100644 --- a/resources/mmv/ui/mmv.ui.dialog.js +++ b/resources/mmv/ui/mmv.ui.dialog.js @@ -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; } diff --git a/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js b/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js index 1bdc45dcd..40db74bc7 100644 --- a/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js @@ -15,7 +15,8 @@ * along with MultimediaViewer. If not, see . */ -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';