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

Remember last reuse tab selection

Browse source 
Change-Id: Ic9b5d0ecc49b6361bfaa0e83b7340648ea2e6a72
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/660
This commit is contained in:
Gergő Tisza 2014-06-25 02:15:56 +00:00 committed by Gergő Tisza
parent 2a5b519d7a
commit f7ae77e79e
4 changed files with 70 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/mmv/ui/mmv.ui.metadataPanel.js
View file

@ -246,7 +246,7 @@
this.initializeCategories();
this.initializeRepoLink();
this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$container, this.buttons.buttons.$reuse );
this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$container, this.buttons.buttons.$reuse, this.config );
this.fileUsage = new mw.mmv.ui.FileUsage(
$( '<div>' ).appendTo( this.$imageMetadataRight )

54
resources/mmv/ui/mmv.ui.reuse.dialog.js
View file

@ -25,10 +25,14 @@
* @extends mw.mmv.ui.Element
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function Dialog( $container, $openButton ) {
function Dialog( $container, $openButton, config ) {
mw.mmv.ui.Element.call( this, $container );
/** @property {mw.mmv.Config} config - */
this.config = config;
this.$openButton = $openButton;
this.$reuseDialog = $( '<div>' )
@ -44,16 +48,25 @@
this.isOpen = false;
/**
* @property {Object.<string, mw.mmv.ui.Element>} List of tab ui objects.
* @property {Object.<string, mw.mmv.ui.Element>} tabs List of tab ui objects.
*/
this.tabs = null;
/**
* @property {Object.<string, OO.ui.MenuItemWidget>} ooTabs List of tab OOJS UI objects.
*/
this.ooTabs = null;
}
oo.inheritClass( Dialog, mw.mmv.ui.Element );
DP = Dialog.prototype;
// FIXME this should happen outside the dialog and the tabs, but we need to improve
DP.initTabs = function () {
var shareTab, embedTab, downloadTab;
function makeTab( type ) {
return new oo.ui.MenuItemWidget( type, {
label: mw.message( 'multimediaviewer-' + type + '-tab' ).text()
} );
}
this.reuseTabs = new oo.ui.MenuWidget( {
classes: [ 'mw-mmv-reuse-tabs' ]
@ -69,22 +82,20 @@
embed: new mw.mmv.ui.reuse.Embed( this.$reuseDialog )
};
shareTab = new oo.ui.MenuItemWidget(
'share', { label: mw.message( 'multimediaviewer-share-tab' ).text() } );
downloadTab = new oo.ui.MenuItemWidget(
'download', { label: mw.message( 'multimediaviewer-download-tab' ).text() } );
embedTab = new oo.ui.MenuItemWidget(
'embed', { label: mw.message( 'multimediaviewer-embed-tab' ).text() } );
this.ooTabs = {
share: makeTab( 'share' ),
download: makeTab( 'download' ),
embed: makeTab( 'embed' )
};
this.reuseTabs.addItems( [
downloadTab,
shareTab,
embedTab
this.ooTabs.download,
this.ooTabs.share,
this.ooTabs.embed
] );
// Default to 'share' tab
this.selectedTab = 'download';
this.reuseTabs.selectItem( downloadTab );
this.selectedTab = this.getLastUsedTab() || 'download';
this.reuseTabs.selectItem( this.ooTabs[this.selectedTab] );
if ( this.dependenciesNeedToBeAttached ) {
this.attachDependencies();
@ -137,7 +148,7 @@
/**
* Handles tab selection.
*/
DP.handleTabSelection = function ( option ) {
DP.handleTabSelection = function ( option ) {
var tab;
this.selectedTab = option.getData();
@ -149,7 +160,16 @@
this.tabs[tab].hide();
}
}
};
this.config.setInLocalStorage( 'mmv-lastUsedTab', this.selectedTab );
};
/**
*
*/
DP.getLastUsedTab = function () {
return this.config.getFromLocalStorage( 'mmv-lastUsedTab' );
};
/**
* Registers listeners.

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

@ -33,7 +33,7 @@
/** @property {mw.mmv.ui.reuse.Utils} utils - */
this.utils = new mw.mmv.ui.reuse.Utils();
this.$pane.addClass( 'mw-mlb-download-pane active' );
this.$pane.addClass( 'mw-mlb-download-pane' );
this.$pane.appendTo( this.$container );
this.createDownloadButton( this.$pane );

56
tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js
View file

@ -16,22 +16,23 @@
*/
( function ( mw, $ ) {
function makeReuseDialog() {
var $fixture = $( '#qunit-fixture' );
return new mw.mmv.ui.reuse.Dialog( $fixture, $( '<div>' ).appendTo( $fixture ) );
function makeReuseDialog( sandbox ) {
var $fixture = $( '#qunit-fixture'),
config = { getFromLocalStorage: sandbox.stub(), setInLocalStorage: sandbox.stub() };
return new mw.mmv.ui.reuse.Dialog( $fixture, $( '<div>' ).appendTo( $fixture ), config );
}
QUnit.module( 'mmv.ui.reuse.Dialog', QUnit.newMwEnvironment() );
QUnit.test( 'Sanity test, object creation and UI construction', 2, function ( assert ) {
var reuseDialog = makeReuseDialog();
var reuseDialog = makeReuseDialog( this.sandbox );
assert.ok( reuseDialog, 'Reuse UI element is created.' );
assert.strictEqual( reuseDialog.$reuseDialog.length, 1, 'Reuse dialog div created.' );
} );
QUnit.test( 'handleOpenCloseClick():', 2, function ( assert ) {
var reuseDialog = makeReuseDialog();
var reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.openDialog = function () {
assert.ok( true, 'openDialog called.' );
@ -55,34 +56,39 @@
reuseDialog.handleOpenCloseClick();
} );
QUnit.test( 'handleTabSelection():', 4, function ( assert ) {
var reuseDialog = makeReuseDialog();
QUnit.test( 'handleTabSelection():', 5, function ( assert ) {
var reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.initTabs();
reuseDialog.tabs.share.show = function () {
assert.ok( true, 'Share tab shown.' );
};
reuseDialog.tabs.embed.hide = function () {
assert.ok( true, 'Embed tab hidden.' );
};
// Share pane is selected
reuseDialog.handleTabSelection( { getData: function () { return 'share'; } } );
reuseDialog.tabs.share.hide = function () {
assert.ok( true, 'Share tab hidden.' );
};
reuseDialog.tabs.embed.show = function () {
assert.ok( true, 'Embed tab shown.' );
};
assert.ok( reuseDialog.tabs.share.$pane.hasClass( 'active' ), 'Share tab shown.' );
assert.ok( !reuseDialog.tabs.embed.$pane.hasClass( 'active' ), 'Embed tab hidden.' );
assert.ok( reuseDialog.config.setInLocalStorage.calledWith( 'mmv-lastUsedTab', 'share' ),
'Tab state saved in local storage.' );
// Embed pane is selected
reuseDialog.handleTabSelection( { getData: function () { return 'embed'; } } );
assert.ok( !reuseDialog.tabs.share.$pane.hasClass( 'active' ), 'Share tab hidden.' );
assert.ok( reuseDialog.tabs.embed.$pane.hasClass( 'active' ), 'Embed tab shown.' );
} );
QUnit.test( 'default tab:', 2, function ( assert ) {
var reuseDialog;
reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.initTabs();
assert.strictEqual( reuseDialog.selectedTab, 'download', 'Download tab is default' );
reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.config.getFromLocalStorage.withArgs( 'mmv-lastUsedTab' ).returns( 'share' );
reuseDialog.initTabs();
assert.strictEqual( reuseDialog.selectedTab, 'share', 'Default can be overridden' );
} );
QUnit.test( 'attach()/unattach():', 2, function ( assert ) {
var reuseDialog = makeReuseDialog();
var reuseDialog = makeReuseDialog( this.sandbox );
reuseDialog.initTabs();
@ -126,7 +132,7 @@
} );
QUnit.test( 'start/stopListeningToOutsideClick():', 11, function ( assert ) {
var reuseDialog = makeReuseDialog(),
var reuseDialog = makeReuseDialog( this.sandbox ),
realCloseDialog = reuseDialog.closeDialog;
reuseDialog.initTabs();
@ -172,7 +178,7 @@
} );
QUnit.test( 'set()/empty() sanity check:', 1, function ( assert ) {
var reuseDialog = makeReuseDialog(),
var reuseDialog = makeReuseDialog( this.sandbox ),
title = mw.Title.newFromText( 'File:Foobar.jpg' ),
src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg',
@ -192,7 +198,7 @@
} );
QUnit.test( 'openDialog()/closeDialog():', 3, function ( assert ) {
var reuseDialog = makeReuseDialog(),
var reuseDialog = makeReuseDialog( this.sandbox ),
title = mw.Title.newFromText( 'File:Foobar.jpg' ),
src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
url = 'https://commons.wikimedia.org/wiki/File:Foobar.jpg',