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

Merge "Make functions in Utils class static"

Browse source
This commit is contained in:
jenkins-bot 2024-05-16 23:30:30 +00:00 committed by Gerrit Code Review
parent c33efb3919 cfb250a57e
commit 9ac1994cf8
7 changed files with 49 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/mmv.ui.download.pane/mmv.ui.download.pane.js
View file

@ -30,9 +30,6 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
constructor( $container ) { constructor( $container ) {
super( $container ); super( $container );
/** @property {Utils} utils - */
this.utils = new Utils();
this.formatter = new EmbedFileFormatter(); this.formatter = new EmbedFileFormatter();
this.createDownloadSection( this.$container ); this.createDownloadSection( this.$container );
this.createAttributionButton( this.$container ); this.createAttributionButton( this.$container );
@ -94,7 +91,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
* @param {jQuery} $container * @param {jQuery} $container
*/ */
createSizePulldownMenu( $container ) { createSizePulldownMenu( $container ) {
this.$downloadSizeMenu = this.utils.createSelectMenu( this.$downloadSizeMenu = Utils.createSelectMenu(
[ 'original', 'small', 'medium', 'large', 'xl' ], [ 'original', 'small', 'medium', 'large', 'xl' ],
'original' 'original'
).appendTo( $container ); ).appendTo( $container );
@ -114,7 +111,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
} }
createAttributionButton( $container ) { createAttributionButton( $container ) {
[ this.$attributionInput, this.$attributionInputDiv ] = this.utils.createInputWithCopy( [ this.$attributionInput, this.$attributionInputDiv ] = Utils.createInputWithCopy(
mw.message( 'multimediaviewer-download-attribution-copy' ).text(), '' mw.message( 'multimediaviewer-download-attribution-copy' ).text(), ''
); );
@ -208,7 +205,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
} else { } else {
// Disable download while we get the image // Disable download while we get the image
this.$downloadButton.addClass( 'disabledLink' ); this.$downloadButton.addClass( 'disabledLink' );
this.utils.getThumbnailUrlPromise( value.width ).done( ( thumbnail ) => { Utils.getThumbnailUrlPromise( value.width ).done( ( thumbnail ) => {
this.setDownloadUrl( thumbnail.url ); this.setDownloadUrl( thumbnail.url );
} ); } );
} }
@ -259,11 +256,11 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
*/ */
set( image, repo ) { set( image, repo ) {
const license = image && image.license; const license = image && image.license;
const sizes = this.utils.getPossibleImageSizesForHtml( image.width, image.height ); const sizes = Utils.getPossibleImageSizesForHtml( image.width, image.height );
this.image = image; this.image = image;
this.utils.updateSelectOptions( sizes, this.$downloadSizeMenu.children() ); Utils.updateSelectOptions( sizes, this.$downloadSizeMenu.children() );
// Note: This extension will not be the real one for file types other than: png/gif/jpg/jpeg // Note: This extension will not be the real one for file types other than: png/gif/jpg/jpeg
this.imageExtension = image.title.getExtension().toLowerCase(); this.imageExtension = image.title.getExtension().toLowerCase();

20
resources/mmv.ui.ondemandshareddependencies/mmv.ui.utils.js
View file

@ -27,7 +27,7 @@
* @param {string} text * @param {string} text
* @return {jQuery} * @return {jQuery}
*/ */
createHeader( text ) { static createHeader( text ) {
const $header = $( '<div>' ).addClass( 'cdx-dialog__header' ); const $header = $( '<div>' ).addClass( 'cdx-dialog__header' );
$( '<p>' ) $( '<p>' )
.addClass( 'cdx-dialog__header__title' ) .addClass( 'cdx-dialog__header__title' )
@ -43,7 +43,7 @@
* @param {string} placeholder * @param {string} placeholder
* @return {jQuery[]} [$input, $div] * @return {jQuery[]} [$input, $div]
*/ */
createInputWithCopy( title, placeholder ) { static createInputWithCopy( title, placeholder ) {
const $input = $( '<input>' ) const $input = $( '<input>' )
.addClass( 'cdx-text-input__input' ) .addClass( 'cdx-text-input__input' )
.attr( 'placeholder', placeholder ); .attr( 'placeholder', placeholder );
@ -79,13 +79,13 @@
* @param {string} def * @param {string} def
* @return {jQuery} * @return {jQuery}
*/ */
createSelectMenu( options, def ) { static createSelectMenu( options, def ) {
const $select = $( '<select>' ).addClass( 'cdx-select mw-mmv-flex-grow-1' ); const $select = $( '<select>' ).addClass( 'cdx-select mw-mmv-flex-grow-1' );
options.forEach( ( size ) => options.forEach( ( size ) =>
$( '<option>' ) $( '<option>' )
.attr( 'value', size ) .attr( 'value', size )
.data( 'name', size ) .data( 'name', size )
.text( this.getDimensionsMessageHtml( size ) ) .text( Utils.getDimensionsMessageHtml( size ) )
.appendTo( $select ) .appendTo( $select )
); );
$select.val( def ); $select.val( def );
@ -104,7 +104,7 @@
* @fires MultimediaViewer#mmv-request-thumbnail * @fires MultimediaViewer#mmv-request-thumbnail
* @return {jQuery.Promise.<string>} * @return {jQuery.Promise.<string>}
*/ */
getThumbnailUrlPromise( width ) { static getThumbnailUrlPromise( width ) {
return $( document ).triggerHandler( 'mmv-request-thumbnail', width ) || return $( document ).triggerHandler( 'mmv-request-thumbnail', width ) ||
$.Deferred().reject(); $.Deferred().reject();
} }
@ -116,7 +116,7 @@
* @param {Object} sizes * @param {Object} sizes
* @param {jQuery} options * @param {jQuery} options
*/ */
updateSelectOptions( sizes, options ) { static updateSelectOptions( sizes, options ) {
for ( let i = 0; i < options.length; i++ ) { for ( let i = 0; i < options.length; i++ ) {
const $option = $( options[ i ] ); const $option = $( options[ i ] );
const name = $option.data( 'name' ); const name = $option.data( 'name' );
@ -127,10 +127,10 @@
$option.data( 'width', sizes[ name ].width ); $option.data( 'width', sizes[ name ].width );
$option.data( 'height', sizes[ name ].height ); $option.data( 'height', sizes[ name ].height );
$option.text( this.getDimensionsMessageHtml( name, sizes[ name ].width, sizes[ name ].height ) ); $option.text( Utils.getDimensionsMessageHtml( name, sizes[ name ].width, sizes[ name ].height ) );
} else { } else {
$option.prop( 'disabled', true ); $option.prop( 'disabled', true );
$option.text( this.getDimensionsMessageHtml( name, undefined, undefined ) ); $option.text( Utils.getDimensionsMessageHtml( name, undefined, undefined ) );
} }
} }
} }
@ -149,7 +149,7 @@
* @return {Object} return.xl * @return {Object} return.xl
* @return {Object} return.original * @return {Object} return.original
*/ */
getPossibleImageSizesForHtml( width, height ) { static getPossibleImageSizesForHtml( width, height ) {
const buckets = { const buckets = {
small: { width: 640, height: 480 }, small: { width: 640, height: 480 },
medium: { width: 1280, height: 720 }, // HD ready = 720p medium: { width: 1280, height: 720 }, // HD ready = 720p
@ -205,7 +205,7 @@
* @param {number} height * @param {number} height
* @return {string} i18n label html * @return {string} i18n label html
*/ */
getDimensionsMessageHtml( sizeLabel, width, height ) { static getDimensionsMessageHtml( sizeLabel, width, height ) {
const dimensions = !width || !height ? '' : mw.message( const dimensions = !width || !height ? '' : mw.message(
'multimediaviewer-embed-dimensions-separated', 'multimediaviewer-embed-dimensions-separated',
mw.message( mw.message(

21
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js
View file

@ -38,10 +38,7 @@ const { UiElement } = require( 'mmv' );
*/ */
this.formatter = new EmbedFileFormatter(); this.formatter = new EmbedFileFormatter();
/** @property {Utils} utils - */ Utils.createHeader( mw.message( 'multimediaviewer-embed-tab' ).text() )
this.utils = new Utils();
this.utils.createHeader( mw.message( 'multimediaviewer-embed-tab' ).text() )
.appendTo( $container ); .appendTo( $container );
const $body = $( '<div>' ) const $body = $( '<div>' )
@ -59,13 +56,13 @@ const { UiElement } = require( 'mmv' );
* @param {jQuery} $container * @param {jQuery} $container
*/ */
createSnippetTextAreas( $container ) { createSnippetTextAreas( $container ) {
[ this.$embedTextHtml, this.$embedTextHtmlDiv ] = this.utils.createInputWithCopy( [ this.$embedTextHtml, this.$embedTextHtmlDiv ] = Utils.createInputWithCopy(
mw.message( 'multimediaviewer-reuse-copy-embed' ).text(), mw.message( 'multimediaviewer-reuse-copy-embed' ).text(),
mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text()
); );
this.$embedTextHtml.attr( 'title', mw.message( 'multimediaviewer-embed-explanation' ).text() ); this.$embedTextHtml.attr( 'title', mw.message( 'multimediaviewer-embed-explanation' ).text() );
[ this.$embedTextWikitext, this.$embedTextWikitextDiv ] = this.utils.createInputWithCopy( [ this.$embedTextWikitext, this.$embedTextWikitextDiv ] = Utils.createInputWithCopy(
mw.message( 'multimediaviewer-reuse-copy-embed' ).text(), mw.message( 'multimediaviewer-reuse-copy-embed' ).text(),
mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text()
); );
@ -103,13 +100,13 @@ const { UiElement } = require( 'mmv' );
*/ */
createSizePulldownMenus( $container ) { createSizePulldownMenus( $container ) {
// Wikitext sizes pulldown menu // Wikitext sizes pulldown menu
this.$embedSizeSwitchWikitext = this.utils.createSelectMenu( this.$embedSizeSwitchWikitext = Utils.createSelectMenu(
[ 'default', 'small', 'medium', 'large' ], [ 'default', 'small', 'medium', 'large' ],
'default' 'default'
); );
// Html sizes pulldown menu // Html sizes pulldown menu
this.$embedSizeSwitchHtml = this.utils.createSelectMenu( this.$embedSizeSwitchHtml = Utils.createSelectMenu(
[ 'small', 'medium', 'large', 'original' ], [ 'small', 'medium', 'large', 'original' ],
'original' 'original'
); );
@ -240,7 +237,7 @@ const { UiElement } = require( 'mmv' );
getSizeOptions( width, height ) { getSizeOptions( width, height ) {
const sizes = {}; const sizes = {};
sizes.html = this.utils.getPossibleImageSizesForHtml( width, height ); sizes.html = Utils.getPossibleImageSizesForHtml( width, height );
sizes.wikitext = this.getPossibleImageSizesForWikitext( width, height ); sizes.wikitext = this.getPossibleImageSizesForWikitext( width, height );
return sizes; return sizes;
@ -265,13 +262,13 @@ const { UiElement } = require( 'mmv' );
this.embedFileInfo.alt = alt; this.embedFileInfo.alt = alt;
} }
this.utils.updateSelectOptions( sizes.html, this.$embedSizeSwitchHtml.children() ); Utils.updateSelectOptions( sizes.html, this.$embedSizeSwitchHtml.children() );
this.utils.updateSelectOptions( sizes.wikitext, this.$embedSizeSwitchWikitext.children() ); Utils.updateSelectOptions( sizes.wikitext, this.$embedSizeSwitchWikitext.children() );
// Reset defaults // Reset defaults
this.resetCurrentSizeMenuToDefault(); this.resetCurrentSizeMenuToDefault();
this.utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD ) Utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD )
.done( ( thumbnail ) => { .done( ( thumbnail ) => {
this.updateEmbedHtml( thumbnail ); this.updateEmbedHtml( thumbnail );
} ); } );

5
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.share.js
View file

@ -31,15 +31,14 @@ const { UiElement } = require( 'mmv' );
constructor( $container ) { constructor( $container ) {
super( $container ); super( $container );
this.utils = new Utils(); Utils.createHeader( mw.message( 'multimediaviewer-share-tab' ).text() )
this.utils.createHeader( mw.message( 'multimediaviewer-share-tab' ).text() )
.appendTo( $container ); .appendTo( $container );
const $body = $( '<div>' ) const $body = $( '<div>' )
.addClass( 'cdx-dialog__body mw-mmv-pt-0' ) .addClass( 'cdx-dialog__body mw-mmv-pt-0' )
.appendTo( $container ); .appendTo( $container );
[ this.$pageInput, this.$pageInputDiv ] = this.utils.createInputWithCopy( [ this.$pageInput, this.$pageInputDiv ] = Utils.createInputWithCopy(
mw.message( 'multimediaviewer-reuse-copy-share' ).text(), mw.message( 'multimediaviewer-reuse-copy-share' ).text(),
mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text()
); );

13
tests/qunit/mmv/ui/mmv.ui.download.pane.test.js
View file

@ -16,6 +16,7 @@
*/ */
const DownloadPane = require( 'mmv.ui.download.pane' ); const DownloadPane = require( 'mmv.ui.download.pane' );
const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () { ( function () {
QUnit.module( 'mmv.ui.download.pane', QUnit.newMwEnvironment() ); QUnit.module( 'mmv.ui.download.pane', QUnit.newMwEnvironment() );
@ -43,7 +44,8 @@ const DownloadPane = require( 'mmv.ui.download.pane' );
assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' ); assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' );
download.utils.updateMenuOptions = function () { const updateMenuOptions = Utils.updateMenuOptions;
Utils.updateMenuOptions = function () {
assert.true( true, 'Menu options updated.' ); assert.true( true, 'Menu options updated.' );
}; };
@ -54,13 +56,16 @@ const DownloadPane = require( 'mmv.ui.download.pane' );
download.empty(); download.empty();
assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' ); assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' );
Utils.updateMenuOptions = updateMenuOptions;
} ); } );
QUnit.test( 'handleSizeSwitch():', function ( assert ) { QUnit.test( 'handleSizeSwitch():', function ( assert ) {
const download = new DownloadPane( $( '#qunit-fixture' ) ); const download = new DownloadPane( $( '#qunit-fixture' ) );
const newImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/NewFoobar.jpg'; const newImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/NewFoobar.jpg';
download.utils.getThumbnailUrlPromise = function () { const getThumbnailUrlPromise = Utils.getThumbnailUrlPromise;
Utils.getThumbnailUrlPromise = function () {
return $.Deferred().resolve( { url: newImageUrl } ).promise(); return $.Deferred().resolve( { url: newImageUrl } ).promise();
}; };
@ -72,11 +77,13 @@ const DownloadPane = require( 'mmv.ui.download.pane' );
download.image = { url: newImageUrl }; download.image = { url: newImageUrl };
download.utils.getThumbnailUrlPromise = function () { Utils.getThumbnailUrlPromise = function () {
assert.true( false, 'Should not fetch the thumbnail if the image is original size.' ); assert.true( false, 'Should not fetch the thumbnail if the image is original size.' );
}; };
download.handleSizeSwitch(); download.handleSizeSwitch();
Utils.getThumbnailUrlPromise = getThumbnailUrlPromise;
} ); } );
QUnit.test( 'getExtensionFromUrl():', function ( assert ) { QUnit.test( 'getExtensionFromUrl():', function ( assert ) {

10
tests/qunit/mmv/ui/mmv.ui.reuse.embed.test.js
View file

@ -16,6 +16,7 @@
*/ */
const { Embed } = require( 'mmv.ui.reuse.shareembed' ); const { Embed } = require( 'mmv.ui.reuse.shareembed' );
const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () { ( function () {
const $qf = $( '#qunit-fixture' ); const $qf = $( '#qunit-fixture' );
@ -242,13 +243,15 @@ const { Embed } = require( 'mmv.ui.reuse.shareembed' );
const width = 15; const width = 15;
const height = 20; const height = 20;
embed.utils.updateMenuOptions = function ( sizes, options ) { const updateMenuOptions = Utils.updateMenuOptions;
Utils.updateMenuOptions = function ( sizes, options ) {
assert.strictEqual( options.length, 4, 'Options passed correctly.' ); assert.strictEqual( options.length, 4, 'Options passed correctly.' );
}; };
embed.resetCurrentSizeMenuToDefault = function () { embed.resetCurrentSizeMenuToDefault = function () {
assert.true( true, 'resetCurrentSizeMenuToDefault() is called.' ); assert.true( true, 'resetCurrentSizeMenuToDefault() is called.' );
}; };
embed.utils.getThumbnailUrlPromise = function () { const getThumbnailUrlPromise = Utils.getThumbnailUrlPromise;
Utils.getThumbnailUrlPromise = function () {
return $.Deferred().resolve().promise(); return $.Deferred().resolve().promise();
}; };
embed.updateEmbedHtml = function () { embed.updateEmbedHtml = function () {
@ -260,6 +263,9 @@ const { Embed } = require( 'mmv.ui.reuse.shareembed' );
embed.set( { width: width, height: height }, embedFileInfo ); embed.set( { width: width, height: height }, embedFileInfo );
assert.true( $.isPlainObject( embed.embedFileInfo ), 'embedFileInfo set.' ); assert.true( $.isPlainObject( embed.embedFileInfo ), 'embedFileInfo set.' );
Utils.updateMenuOptions = updateMenuOptions;
Utils.getThumbnailUrlPromise = getThumbnailUrlPromise;
} ); } );
QUnit.test( 'empty():', function ( assert ) { QUnit.test( 'empty():', function ( assert ) {

19
tests/qunit/mmv/ui/mmv.ui.reuse.utils.test.js
View file

@ -20,17 +20,10 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () { ( function () {
QUnit.module( 'mmv.ui.reuse.utils', QUnit.newMwEnvironment() ); QUnit.module( 'mmv.ui.reuse.utils', QUnit.newMwEnvironment() );
QUnit.test( 'Sense test, object creation and UI construction', function ( assert ) {
const utils = new Utils();
assert.true( utils instanceof Utils, 'ReuseUtils object is created.' );
} );
QUnit.test( 'createSelectMenu():', function ( assert ) { QUnit.test( 'createSelectMenu():', function ( assert ) {
const utils = new Utils();
const menuItems = [ 'original', 'small', 'medium', 'large' ]; const menuItems = [ 'original', 'small', 'medium', 'large' ];
const def = 'large'; const def = 'large';
const $select = utils.createSelectMenu( const $select = Utils.createSelectMenu(
menuItems, menuItems,
def def
); );
@ -48,15 +41,14 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
} ); } );
QUnit.test( 'updateSelectOptions():', function ( assert ) { QUnit.test( 'updateSelectOptions():', function ( assert ) {
const utils = new Utils(); const $select = Utils.createSelectMenu(
const $select = utils.createSelectMenu(
[ 'original', 'small', 'medium', 'large' ], [ 'original', 'small', 'medium', 'large' ],
'original' 'original'
); );
const $options = $select.children(); const $options = $select.children();
const width = 700; const width = 700;
const height = 500; const height = 500;
const sizes = utils.getPossibleImageSizesForHtml( width, height ); const sizes = Utils.getPossibleImageSizesForHtml( width, height );
const oldMessage = mw.message; const oldMessage = mw.message;
mw.message = function ( messageKey ) { mw.message = function ( messageKey ) {
@ -65,13 +57,12 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
return { text: function () {} }; return { text: function () {} };
}; };
utils.updateSelectOptions( sizes, $options ); Utils.updateSelectOptions( sizes, $options );
mw.message = oldMessage; mw.message = oldMessage;
} ); } );
QUnit.test( 'getPossibleImageSizesForHtml()', function ( assert ) { QUnit.test( 'getPossibleImageSizesForHtml()', function ( assert ) {
const utils = new Utils();
const exampleSizes = [ const exampleSizes = [
{ {
test: 'Extra large wide image', test: 'Extra large wide image',
@ -117,7 +108,7 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
]; ];
for ( let i = 0; i < exampleSizes.length; i++ ) { for ( let i = 0; i < exampleSizes.length; i++ ) {
const cursize = exampleSizes[ i ]; const cursize = exampleSizes[ i ];
const opts = utils.getPossibleImageSizesForHtml( cursize.width, cursize.height ); const opts = Utils.getPossibleImageSizesForHtml( cursize.width, cursize.height );
assert.deepEqual( opts, cursize.expected, 'Size calculation for "' + cursize.test + '" gives expected results' ); assert.deepEqual( opts, cursize.expected, 'Size calculation for "' + cursize.test + '" gives expected results' );
} }
} ); } );