mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 13:17:35 +00:00
Remember last reuse tab selection
Change-Id: Ic9b5d0ecc49b6361bfaa0e83b7340648ea2e6a72 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/660
This commit is contained in:
parent
2a5b519d7a
commit
f7ae77e79e
|
@ -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 )
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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 );
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue