diff --git a/resources/mmv/ui/mmv.ui.reuse.download.js b/resources/mmv/ui/mmv.ui.reuse.download.js index 3adb6f93e..74ca22c3c 100644 --- a/resources/mmv/ui/mmv.ui.reuse.download.js +++ b/resources/mmv/ui/mmv.ui.reuse.download.js @@ -39,6 +39,12 @@ this.createDownloadButton( this.$pane ); this.createSizePulldownMenu( this.$pane ); this.createPreviewLink( this.$pane ); + + /** + * Default item for the size menu. + * @property {OO.ui.MenuItemWidget} + */ + this.defaultItem = this.downloadSizeMenu.getMenu().getSelectedItem(); } oo.inheritClass( Download, mw.mmv.ui.reuse.Tab ); DP = Download.prototype; @@ -85,25 +91,12 @@ * @param {jQuery} $container */ DP.createSizePulldownMenu = function ( $container ) { - var sizeOptions; - this.downloadSizeMenu = this.utils.createPulldownMenu( [ 'original', 'small', 'medium', 'large' ], [ 'mw-mlb-download-size' ], 'original' ); - // FIXME: Initialize menu options so all entries are enabled, workaround for bug: cards/386 - sizeOptions = this.downloadSizeMenu.getMenu().getItems(); - this.utils.updateMenuOptions( - { - small: { width: 0, height: 0 }, - medium: { width: 0, height: 0 }, - large: { width: 0, height: 0 }, - original: { width: 0, height: 0 } - }, - sizeOptions ); - $container.append( this.downloadSizeMenu.$element ); }; @@ -145,6 +138,8 @@ /** * Handles size menu change events. + * + * @param {OO.ui.MenuItemWidget} */ DP.handleSizeSwitch = function ( item ) { var download = this, @@ -192,8 +187,9 @@ // Note: This extension will not be the real one for file types other than: png/gif/jpg/jpeg this.imageExtension = image.title.getExtension().toLowerCase(); - // Update the download button label now that we have the info - this.handleSizeSwitch( this.downloadSizeMenu.getMenu().getSelectedItem() ); + // Reset size menu to default item and update download button label now that we have the info + this.downloadSizeMenu.getMenu().intializeSelection( this.defaultItem ); + this.downloadSizeMenu.getMenu().selectItem( this.defaultItem ); }; /** diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.js b/resources/mmv/ui/mmv.ui.reuse.embed.js index 435377dbb..a2227c754 100644 --- a/resources/mmv/ui/mmv.ui.reuse.embed.js +++ b/resources/mmv/ui/mmv.ui.reuse.embed.js @@ -40,6 +40,12 @@ /** @property {mw.mmv.ui.reuse.Utils} utils - */ this.utils = new mw.mmv.ui.reuse.Utils(); + /** + * Indicates whether or not the default option has been reset for both size menus. + * @property {boolean} + */ + this.isSizeMenuDefaultReset = false; + this.$pane.addClass( 'mw-mmv-embed-pane' ); this.$pane.appendTo( this.$container ); @@ -60,11 +66,30 @@ */ this.$currentMainEmbedText = this.embedTextWikitext.$element; + /** + * Default item for the html size menu. + * @property {OO.ui.MenuItemWidget} + */ + this.defaultHtmlItem = this.embedSizeSwitchHtml.getMenu().getSelectedItem(); + + /** + * Default item for the wikitext size menu. + * @property {OO.ui.MenuItemWidget} + */ + this.defaultWikitextItem = this.embedSizeSwitchWikitext.getMenu().getSelectedItem(); + /** * Currently selected size menu. * @property {OO.ui.MenuWidget} */ this.currentSizeMenu = this.embedSizeSwitchWikitext.getMenu(); + + /** + * Current default item. + * @property {OO.ui.MenuItemWidget} + */ + this.currentDefaultItem = this.defaultWikitextItem; + } oo.inheritClass( Embed, mw.mmv.ui.reuse.Tab ); EP = Embed.prototype; @@ -157,7 +182,7 @@ this.embedSizeSwitchHtml = this.utils.createPulldownMenu( [ 'small', 'medium', 'large', 'original' ], [ 'mw-mmv-embed-size' ], - 'small' + 'original' ); $( '

' ) @@ -210,6 +235,8 @@ /** * Handles size menu change events. + * + * @param {OO.ui.MenuItemWidget} */ EP.handleSizeSwitch = function ( item ) { var value = item.getData(); @@ -219,18 +246,24 @@ /** * Handles snippet type switch. + * + * @param {OO.ui.MenuItemWidget} */ EP.handleTypeSwitch = function ( item ) { var value = item.getData(); if ( value === 'html' ) { this.$currentMainEmbedText = this.embedTextHtml.$element; - this.currentSizeMenu = this.embedSizeSwitchHtml.getMenu(); this.embedSizeSwitchWikitext.getMenu().hide(); + + this.currentSizeMenu = this.embedSizeSwitchHtml.getMenu(); + this.currentDefaultItem = this.defaultHtmlItem; } else if ( value === 'wikitext' ) { this.$currentMainEmbedText = this.embedTextWikitext.$element; - this.currentSizeMenu = this.embedSizeSwitchWikitext.getMenu(); this.embedSizeSwitchHtml.getMenu().hide(); + + this.currentSizeMenu = this.embedSizeSwitchWikitext.getMenu(); + this.currentDefaultItem = this.defaultWikitextItem; } this.embedTextHtml.$element @@ -241,9 +274,21 @@ .add( this.embedSizeSwitchWikitext.$element ) .toggleClass( 'active', value === 'wikitext' ); - this.select(); + // Reset current selection to default when switching the first time + if ( ! this.isSizeMenuDefaultReset ) { + this.resetCurrentSizeMenuToDefault(); + this.isSizeMenuDefaultReset = true; + } - this.currentSizeMenu.selectItem( this.currentSizeMenu.getSelectedItem() ); + this.select(); + }; + + /** + * Reset current menu selection to default item. + */ + EP.resetCurrentSizeMenuToDefault = function () { + this.currentSizeMenu.intializeSelection( this.currentDefaultItem ); + this.currentSizeMenu.selectItem( this.currentDefaultItem ); }; /** @@ -360,7 +405,9 @@ this.utils.updateMenuOptions( sizes.html, htmlSizeOptions ); this.utils.updateMenuOptions( sizes.wikitext, wikitextSizeOptions ); - this.currentSizeMenu.selectItem( this.currentSizeMenu.getSelectedItem() ); + // Reset defaults + this.isSizeMenuDefaultReset = false; + this.resetCurrentSizeMenuToDefault(); this.utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD ) .done( function ( thumbnail ) { @@ -422,6 +469,8 @@ } } + sizes['default'] = { width: null, height: null }; + return sizes; }; diff --git a/resources/mmv/ui/mmv.ui.reuse.utils.js b/resources/mmv/ui/mmv.ui.reuse.utils.js index e5137271a..a9f359f18 100644 --- a/resources/mmv/ui/mmv.ui.reuse.utils.js +++ b/resources/mmv/ui/mmv.ui.reuse.utils.js @@ -105,21 +105,15 @@ if ( sizes[data.name] ) { option.setDisabled( false ); - // These values are later used in the else if case below as flags - // to disable an option that is no longer pertinent. Ex: User went - // from a large image from which we have options(small, med, large) to - // a small image where the only pertinent option is small. + // These values are later used when the item is selected data.width = sizes[data.name].width; data.height = sizes[data.name].height; $label = $( '' ).html( this.getDimensionsMessageHtml( data.name, data.width, data.height ) ); option.setLabel( $label ); - } else if ( data.width && data.height ) { + } else { option.setDisabled( true ); - - data.width = null; - data.height = null; } } }; diff --git a/tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js b/tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js index 41a320f8e..df7e81a43 100644 --- a/tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js @@ -22,7 +22,7 @@ QUnit.module( 'mmv.ui.reuse.download', QUnit.newMwEnvironment() ); - QUnit.test( 'Sanity test, object creation and UI construction', 5, function ( assert ) { + QUnit.test( 'Sanity test, object creation and UI construction', 6, function ( assert ) { var download = makeDownload(); assert.ok( download, 'download UI element is created.' ); @@ -30,6 +30,7 @@ assert.ok( download.$downloadButton && download.$selectionArrow, 'Download button created.' ); assert.ok( download.downloadSizeMenu, 'Image size pulldown menu created.' ); assert.ok( download.$previewLink, 'Preview link created.' ); + assert.ok( download.defaultItem, 'Default item set.' ); } ); QUnit.test( 'set()/empty():', 5, function ( assert ) { @@ -45,8 +46,8 @@ download.utils.updateMenuOptions = function() { assert.ok( true, 'Menu options updated.' ); }; - download.handleSizeSwitch = function() { - assert.ok( true, 'handleSizeSwitch() called to update the labels.' ); + download.downloadSizeMenu.getMenu().selectItem = function() { + assert.ok( true, 'Default item selected to update the labels.' ); }; download.set( image ); diff --git a/tests/qunit/mmv/ui/mmv.ui.reuse.embed.test.js b/tests/qunit/mmv/ui/mmv.ui.reuse.embed.test.js index 365603ce9..7950cb30b 100644 --- a/tests/qunit/mmv/ui/mmv.ui.reuse.embed.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.reuse.embed.test.js @@ -20,7 +20,7 @@ QUnit.module( 'mmv.ui.reuse.Embed', QUnit.newMwEnvironment() ); - QUnit.test( 'Sanity test, object creation and UI construction', 9, function ( assert ) { + QUnit.test( 'Sanity test, object creation and UI construction', 13, function ( assert ) { var embed = new mw.mmv.ui.reuse.Embed( $qf ); assert.ok( embed, 'Embed UI element is created.' ); @@ -31,7 +31,11 @@ assert.ok( embed.embedSizeSwitchWikitext, 'Size selection menu for wikitext created.' ); assert.ok( embed.embedSizeSwitchHtml, 'Size selection menu for html created.' ); assert.strictEqual( embed.$currentMainEmbedText.length, 1, 'Size selection menu for html created.' ); - assert.ok( embed.currentSizeMenu, 'Size selection menu for html created.' ); + assert.strictEqual( embed.isSizeMenuDefaultReset, false, 'Reset flag intialized correctly.' ); + assert.ok( embed.defaultHtmlItem, 'Default item for html size selection intialized.' ); + assert.ok( embed.defaultWikitextItem, 'Default item for wikitext size selection intialized.' ); + assert.ok( embed.currentSizeMenu, 'Current size menu intialized.' ); + assert.ok( embed.currentDefaultItem, 'Current default item intialized.' ); } ); QUnit.test( 'changeSize(): Skip if no item selected.', 0, function ( assert ) { @@ -179,20 +183,25 @@ expected: { small: { width: 300, height: 225 }, medium: { width: 400, height: 300 }, - large: { width: 500, height: 375 } + large: { width: 500, height: 375 }, + 'default': { width: null, height: null } } }, // Big tall image { width: 201, height: 1536, - expected: { } + expected: { + 'default': { width: null, height: null } + } }, // Very small image { width: 15, height: 20, - expected: { } + expected: { + 'default': { width: null, height: null } + } } ], i, cursize, opts; @@ -203,7 +212,7 @@ } } ); - QUnit.test( 'set():', 6, function ( assert ) { + QUnit.test( 'set():', 8, function ( assert ) { var embed = new mw.mmv.ui.reuse.Embed( $qf ), title = mw.Title.newFromText( 'File:Foobar.jpg' ), src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg', @@ -217,6 +226,9 @@ embed.utils.updateMenuOptions = function( sizes, options ) { assert.strictEqual( options.length, 4, 'Options passed correctly.' ); }; + embed.resetCurrentSizeMenuToDefault = function() { + assert.ok( true, 'resetCurrentSizeMenuToDefault() is called.' ); + }; embed.utils.getThumbnailUrlPromise = function () { return $.Deferred().resolve().promise(); }; @@ -233,6 +245,7 @@ embed.set( { width: width, height: height }, embedFileInfo ); assert.ok( embed.embedFileInfo, 'embedFileInfo correctly set.' ); + assert.strictEqual( embed.isSizeMenuDefaultReset, false, 'Reset flag cleared.' ); } ); QUnit.test( 'empty():', 6, function ( assert ) { @@ -334,17 +347,29 @@ 'select', embed.embedSizeSwitchWikitext.getMenu().getSelectedItem() ); } ); - QUnit.test( 'handleTypeSwitch():', 2, function ( assert ) { + QUnit.test( 'handleTypeSwitch():', 6, function ( assert ) { var embed = new mw.mmv.ui.reuse.Embed( $qf ); + assert.strictEqual( embed.isSizeMenuDefaultReset, false, 'Reset flag intialized correctly.' ); + + embed.resetCurrentSizeMenuToDefault = function () { + assert.ok( true, 'resetCurrentSizeMenuToDefault() called.' ); + }; + // HTML selected embed.handleTypeSwitch( { getData: function() { return 'html'; } } ); + assert.strictEqual( embed.isSizeMenuDefaultReset, true, 'Reset flag updated correctly.' ); assert.ok( ! embed.embedSizeSwitchWikitext.getMenu().isVisible(), 'Wikitext size menu should be hidden.' ); - // Wikitext selected - embed.handleTypeSwitch( { getData: function() { return 'wikitext'; } } ); + embed.resetCurrentSizeMenuToDefault = function () { + assert.ok( false, 'resetCurrentSizeMenuToDefault() should not have been called.' ); + }; + // Wikitext selected, we are done resetting defaults + embed.handleTypeSwitch( { getData: function () { return 'wikitext'; } } ); + + assert.strictEqual( embed.isSizeMenuDefaultReset, true, 'Reset flag updated correctly.' ); assert.ok( ! embed.embedSizeSwitchHtml.getMenu().isVisible(), 'HTML size menu should be hidden.' ); } );