From f7ae77e79e24dddc403e4c9f511ae6e666685470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Wed, 25 Jun 2014 02:15:56 +0000 Subject: [PATCH] Remember last reuse tab selection Change-Id: Ic9b5d0ecc49b6361bfaa0e83b7340648ea2e6a72 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/660 --- resources/mmv/ui/mmv.ui.metadataPanel.js | 2 +- resources/mmv/ui/mmv.ui.reuse.dialog.js | 54 ++++++++++++------ resources/mmv/ui/mmv.ui.reuse.download.js | 2 +- .../qunit/mmv/ui/mmv.ui.reuse.dialog.test.js | 56 ++++++++++--------- 4 files changed, 70 insertions(+), 44 deletions(-) diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index bdce1753c..f2ce95fd4 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -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( $( '
' ).appendTo( this.$imageMetadataRight ) diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.js b/resources/mmv/ui/mmv.ui.reuse.dialog.js index 5b61afe54..c08449171 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.js +++ b/resources/mmv/ui/mmv.ui.reuse.dialog.js @@ -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 = $( '
' ) @@ -44,16 +48,25 @@ this.isOpen = false; /** - * @property {Object.} List of tab ui objects. + * @property {Object.} tabs List of tab ui objects. */ this.tabs = null; + + /** + * @property {Object.} 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. diff --git a/resources/mmv/ui/mmv.ui.reuse.download.js b/resources/mmv/ui/mmv.ui.reuse.download.js index 4b3453e3f..527903c1b 100644 --- a/resources/mmv/ui/mmv.ui.reuse.download.js +++ b/resources/mmv/ui/mmv.ui.reuse.download.js @@ -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 ); diff --git a/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js b/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js index a9fab308e..65fc48652 100644 --- a/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.reuse.dialog.test.js @@ -16,22 +16,23 @@ */ ( function ( mw, $ ) { - function makeReuseDialog() { - var $fixture = $( '#qunit-fixture' ); - return new mw.mmv.ui.reuse.Dialog( $fixture, $( '
' ).appendTo( $fixture ) ); + function makeReuseDialog( sandbox ) { + var $fixture = $( '#qunit-fixture'), + config = { getFromLocalStorage: sandbox.stub(), setInLocalStorage: sandbox.stub() }; + return new mw.mmv.ui.reuse.Dialog( $fixture, $( '
' ).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',