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

Fix problems with size menus for embed and download

Browse source 
I think this takes care of all the different mutations of
weird states that happen when going from a small to large
images and transitions in the middle, see card/386.

Change-Id: I80527d746614c0bbda7a1084061d292e5d6394a8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/386
This commit is contained in:
Aaron Arcos 2014-04-01 19:22:16 -07:00 committed by MarkTraceur
parent 961d47432b
commit 10a4fbef14
5 changed files with 106 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/mmv/ui/mmv.ui.reuse.download.js
View file

@ -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 );
};
/**

61
resources/mmv/ui/mmv.ui.reuse.embed.js
View file

@ -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'
);
$( '<p>' )
@ -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;
};

10
resources/mmv/ui/mmv.ui.reuse.utils.js
View file

@ -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 = $( '<span>' ).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;
}
}
};

7
tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js
View file

@ -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 );

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

@ -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.' );
} );