wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-27 09:30:02 +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 ) {
super( $container );
/** @property {Utils} utils - */
this.utils = new Utils();
this.formatter = new EmbedFileFormatter();
this.createDownloadSection( this.$container );
this.createAttributionButton( this.$container );
@ -94,7 +91,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
* @param {jQuery} $container
*/
createSizePulldownMenu( $container ) {
this.$downloadSizeMenu = this.utils.createSelectMenu(
this.$downloadSizeMenu = Utils.createSelectMenu(
[ 'original', 'small', 'medium', 'large', 'xl' ],
'original'
).appendTo( $container );
@ -114,7 +111,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
}
createAttributionButton( $container ) {
[ this.$attributionInput, this.$attributionInputDiv ] = this.utils.createInputWithCopy(
[ this.$attributionInput, this.$attributionInputDiv ] = Utils.createInputWithCopy(
mw.message( 'multimediaviewer-download-attribution-copy' ).text(), ''
);
@ -208,7 +205,7 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
} else {
// Disable download while we get the image
this.$downloadButton.addClass( 'disabledLink' );
this.utils.getThumbnailUrlPromise( value.width ).done( ( thumbnail ) => {
Utils.getThumbnailUrlPromise( value.width ).done( ( thumbnail ) => {
this.setDownloadUrl( thumbnail.url );
} );
}
@ -259,11 +256,11 @@ const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencie
*/
set( image, repo ) {
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.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
this.imageExtension = image.title.getExtension().toLowerCase();

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

@ -27,7 +27,7 @@
* @param {string} text
* @return {jQuery}
*/
createHeader( text ) {
static createHeader( text ) {
const $header = $( '<div>' ).addClass( 'cdx-dialog__header' );
$( '<p>' )
.addClass( 'cdx-dialog__header__title' )
@ -43,7 +43,7 @@
* @param {string} placeholder
* @return {jQuery[]} [$input, $div]
*/
createInputWithCopy( title, placeholder ) {
static createInputWithCopy( title, placeholder ) {
const $input = $( '<input>' )
.addClass( 'cdx-text-input__input' )
.attr( 'placeholder', placeholder );
@ -79,13 +79,13 @@
* @param {string} def
* @return {jQuery}
*/
createSelectMenu( options, def ) {
static createSelectMenu( options, def ) {
const $select = $( '<select>' ).addClass( 'cdx-select mw-mmv-flex-grow-1' );
options.forEach( ( size ) =>
$( '<option>' )
.attr( 'value', size )
.data( 'name', size )
.text( this.getDimensionsMessageHtml( size ) )
.text( Utils.getDimensionsMessageHtml( size ) )
.appendTo( $select )
);
$select.val( def );
@ -104,7 +104,7 @@
* @fires MultimediaViewer#mmv-request-thumbnail
* @return {jQuery.Promise.<string>}
*/
getThumbnailUrlPromise( width ) {
static getThumbnailUrlPromise( width ) {
return $( document ).triggerHandler( 'mmv-request-thumbnail', width ) ||
$.Deferred().reject();
}
@ -116,7 +116,7 @@
* @param {Object} sizes
* @param {jQuery} options
*/
updateSelectOptions( sizes, options ) {
static updateSelectOptions( sizes, options ) {
for ( let i = 0; i < options.length; i++ ) {
const $option = $( options[ i ] );
const name = $option.data( 'name' );
@ -127,10 +127,10 @@
$option.data( 'width', sizes[ name ].width );
$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 {
$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.original
*/
getPossibleImageSizesForHtml( width, height ) {
static getPossibleImageSizesForHtml( width, height ) {
const buckets = {
small: { width: 640, height: 480 },
medium: { width: 1280, height: 720 }, // HD ready = 720p
@ -205,7 +205,7 @@
* @param {number} height
* @return {string} i18n label html
*/
getDimensionsMessageHtml( sizeLabel, width, height ) {
static getDimensionsMessageHtml( sizeLabel, width, height ) {
const dimensions = !width || !height ? '' : mw.message(
'multimediaviewer-embed-dimensions-separated',
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();
/** @property {Utils} utils - */
this.utils = new Utils();
this.utils.createHeader( mw.message( 'multimediaviewer-embed-tab' ).text() )
Utils.createHeader( mw.message( 'multimediaviewer-embed-tab' ).text() )
.appendTo( $container );
const $body = $( '<div>' )
@ -59,13 +56,13 @@ const { UiElement } = require( 'mmv' );
* @param {jQuery} $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-loading-placeholder' ).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-loading-placeholder' ).text()
);
@ -103,13 +100,13 @@ const { UiElement } = require( 'mmv' );
*/
createSizePulldownMenus( $container ) {
// Wikitext sizes pulldown menu
this.$embedSizeSwitchWikitext = this.utils.createSelectMenu(
this.$embedSizeSwitchWikitext = Utils.createSelectMenu(
[ 'default', 'small', 'medium', 'large' ],
'default'
);
// Html sizes pulldown menu
this.$embedSizeSwitchHtml = this.utils.createSelectMenu(
this.$embedSizeSwitchHtml = Utils.createSelectMenu(
[ 'small', 'medium', 'large', 'original' ],
'original'
);
@ -240,7 +237,7 @@ const { UiElement } = require( 'mmv' );
getSizeOptions( width, height ) {
const sizes = {};
sizes.html = this.utils.getPossibleImageSizesForHtml( width, height );
sizes.html = Utils.getPossibleImageSizesForHtml( width, height );
sizes.wikitext = this.getPossibleImageSizesForWikitext( width, height );
return sizes;
@ -265,13 +262,13 @@ const { UiElement } = require( 'mmv' );
this.embedFileInfo.alt = alt;
}
this.utils.updateSelectOptions( sizes.html, this.$embedSizeSwitchHtml.children() );
this.utils.updateSelectOptions( sizes.wikitext, this.$embedSizeSwitchWikitext.children() );
Utils.updateSelectOptions( sizes.html, this.$embedSizeSwitchHtml.children() );
Utils.updateSelectOptions( sizes.wikitext, this.$embedSizeSwitchWikitext.children() );
// Reset defaults
this.resetCurrentSizeMenuToDefault();
this.utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD )
Utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD )
.done( ( 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 ) {
super( $container );
this.utils = new Utils();
this.utils.createHeader( mw.message( 'multimediaviewer-share-tab' ).text() )
Utils.createHeader( mw.message( 'multimediaviewer-share-tab' ).text() )
.appendTo( $container );
const $body = $( '<div>' )
.addClass( 'cdx-dialog__body mw-mmv-pt-0' )
.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-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 { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () {
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.' );
download.utils.updateMenuOptions = function () {
const updateMenuOptions = Utils.updateMenuOptions;
Utils.updateMenuOptions = function () {
assert.true( true, 'Menu options updated.' );
};
@ -54,13 +56,16 @@ const DownloadPane = require( 'mmv.ui.download.pane' );
download.empty();
assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' );
Utils.updateMenuOptions = updateMenuOptions;
} );
QUnit.test( 'handleSizeSwitch():', function ( assert ) {
const download = new DownloadPane( $( '#qunit-fixture' ) );
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();
};
@ -72,11 +77,13 @@ const DownloadPane = require( 'mmv.ui.download.pane' );
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.' );
};
download.handleSizeSwitch();
Utils.getThumbnailUrlPromise = getThumbnailUrlPromise;
} );
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 { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () {
const $qf = $( '#qunit-fixture' );
@ -242,13 +243,15 @@ const { Embed } = require( 'mmv.ui.reuse.shareembed' );
const width = 15;
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.' );
};
embed.resetCurrentSizeMenuToDefault = function () {
assert.true( true, 'resetCurrentSizeMenuToDefault() is called.' );
};
embed.utils.getThumbnailUrlPromise = function () {
const getThumbnailUrlPromise = Utils.getThumbnailUrlPromise;
Utils.getThumbnailUrlPromise = function () {
return $.Deferred().resolve().promise();
};
embed.updateEmbedHtml = function () {
@ -260,6 +263,9 @@ const { Embed } = require( 'mmv.ui.reuse.shareembed' );
embed.set( { width: width, height: height }, embedFileInfo );
assert.true( $.isPlainObject( embed.embedFileInfo ), 'embedFileInfo set.' );
Utils.updateMenuOptions = updateMenuOptions;
Utils.getThumbnailUrlPromise = getThumbnailUrlPromise;
} );
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 () {
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 ) {
const utils = new Utils();
const menuItems = [ 'original', 'small', 'medium', 'large' ];
const def = 'large';
const $select = utils.createSelectMenu(
const $select = Utils.createSelectMenu(
menuItems,
def
);
@ -48,15 +41,14 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
} );
QUnit.test( 'updateSelectOptions():', function ( assert ) {
const utils = new Utils();
const $select = utils.createSelectMenu(
const $select = Utils.createSelectMenu(
[ 'original', 'small', 'medium', 'large' ],
'original'
);
const $options = $select.children();
const width = 700;
const height = 500;
const sizes = utils.getPossibleImageSizesForHtml( width, height );
const sizes = Utils.getPossibleImageSizesForHtml( width, height );
const oldMessage = mw.message;
mw.message = function ( messageKey ) {
@ -65,13 +57,12 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
return { text: function () {} };
};
utils.updateSelectOptions( sizes, $options );
Utils.updateSelectOptions( sizes, $options );
mw.message = oldMessage;
} );
QUnit.test( 'getPossibleImageSizesForHtml()', function ( assert ) {
const utils = new Utils();
const exampleSizes = [
{
test: 'Extra large wide image',
@ -117,7 +108,7 @@ const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
];
for ( let i = 0; i < exampleSizes.length; 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' );
}
} );