jenkins-bot has submitted this change and it was merged. Change subject: ListToolGroup: Implement collapsible/expandable tools ......................................................................
ListToolGroup: Implement collapsible/expandable tools Collapsible tools are shown when the user clicks the "More" option at the bottom of the list. * Added some configuration options to ListToolGroup to allow marking certain tools as collapsible (either using a blacklist or whitelist). * The collapsible tools are not automatically positioned at the bottom of the list; you may want to use the 'promote' and 'demote' options to achieve this. * Following the design at [1]. This could really use a slide up / slide down transition, but it's not clear to me how exactly one should behave. * The code is somewhat ugly, since toolbars are somewhat inflexible. It should, however, be easily extensible for other tool group types. * Converted one of the lists in toolbar demo to use this. [1] https://commons.wikimedia.org/wiki/File:Editing_Team_-_2014–15_Q1_quarterly_review.pdf?page=19 Bug: 70568 Change-Id: Ide5bb5e14eff305ca40d9f62fb42b7efab648b6f --- M demos/pages/toolbars.js M i18n/en.json M i18n/qqq.json M src/core.js M src/toolgroups/ListToolGroup.js 5 files changed, 115 insertions(+), 1 deletion(-) Approvals: Jforrester: Looks good to me, but someone else must approve Trevor Parscal: Looks good to me, approved jenkins-bot: Verified diff --git a/demos/pages/toolbars.js b/demos/pages/toolbars.js index 4aafc22..04ac8b8 100644 --- a/demos/pages/toolbars.js +++ b/demos/pages/toolbars.js @@ -88,7 +88,8 @@ indicator: 'down', label: 'List', icon: 'picture', - include: [ { group: 'listTools' } ] + include: [ { group: 'listTools' } ], + allowCollapse: [ 'listTool4', 'listTool5', 'listTool6' ] }, { type: 'disabledList', diff --git a/i18n/en.json b/i18n/en.json index 9e99440..d1abd47 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -20,6 +20,8 @@ "ooui-outline-control-move-up": "Move item up", "ooui-outline-control-remove": "Remove item", "ooui-toolbar-more": "More", + "ooui-toolgroup-expand": "More", + "ooui-toolgroup-collapse": "Fewer", "ooui-dialog-message-accept": "OK", "ooui-dialog-message-reject": "Cancel", "ooui-dialog-process-error": "Something went wrong", diff --git a/i18n/qqq.json b/i18n/qqq.json index 9b3bb60..733e7a6 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -24,6 +24,8 @@ "ooui-outline-control-move-up": "Tool tip for a button that moves items in a list up one place", "ooui-outline-control-remove": "Tool tip for a button that removes items from a list.\n{{Identical|Remove item}}", "ooui-toolbar-more": "Label for the toolbar group that contains a list of all other available tools.\n{{Identical|More}}", + "ooui-toolgroup-expand": "Label for the fake tool that expands the full list of tools in a toolbar group\n{{Identical|More}}", + "ooui-toolgroup-collapse": "Label for the fake tool that collapses the full list of tools in a toolbar group", "ooui-dialog-message-accept": "Default label for the accept button of a message dialog\n{{Identical|OK}}", "ooui-dialog-message-reject": "Default label for the reject button of a message dialog\n{{Identical|Cancel}}", "ooui-dialog-process-error": "Title for process dialog error description", diff --git a/src/core.js b/src/core.js index f4ed366..839f717 100644 --- a/src/core.js +++ b/src/core.js @@ -97,6 +97,10 @@ 'ooui-outline-control-remove': 'Remove item', // Label for the toolbar group that contains a list of all other available tools 'ooui-toolbar-more': 'More', + // Label for the fake tool that expands the full list of tools in a toolbar group + 'ooui-toolgroup-expand': 'More', + // Label for the fake tool that collapses the full list of tools in a toolbar group + 'ooui-toolgroup-collapse': 'Fewer', // Default label for the accept button of a confirmation dialog 'ooui-dialog-message-accept': 'OK', // Default label for the reject button of a confirmation dialog diff --git a/src/toolgroups/ListToolGroup.js b/src/toolgroups/ListToolGroup.js index 19413e4..7a0ec6c 100644 --- a/src/toolgroups/ListToolGroup.js +++ b/src/toolgroups/ListToolGroup.js @@ -1,14 +1,29 @@ /** * Drop down list layout of tools as labeled icon buttons. * + * This layout allows some tools to be collapsible, controlled by a "More" / "Fewer" option at the + * bottom of the main list. These are not automatically positioned at the bottom of the list; you + * may want to use the 'promote' and 'demote' configuration options to achieve this. + * * @class * @extends OO.ui.PopupToolGroup * * @constructor * @param {OO.ui.Toolbar} toolbar * @param {Object} [config] Configuration options + * @cfg {Array} [allowCollapse] List of tools that can be collapsed. Remaining tools will be always + * shown. + * @cfg {Array} [forceExpand] List of tools that *may not* be collapsed. All remaining tools will be + * allowed to be collapsed. + * @cfg {boolean} [expanded=false] Whether the collapsible tools are expanded by default */ OO.ui.ListToolGroup = function OoUiListToolGroup( toolbar, config ) { + // Properties (must be set before parent constructor, which calls #populate) + this.allowCollapse = config.allowCollapse; + this.forceExpand = config.forceExpand; + this.expanded = config.expanded !== undefined ? config.expanded : false; + this.collapsibleTools = []; + // Parent constructor OO.ui.ListToolGroup.super.call( this, toolbar, config ); @@ -25,3 +40,93 @@ OO.ui.ListToolGroup.static.accelTooltips = true; OO.ui.ListToolGroup.static.name = 'list'; + +/* Methods */ + +/** + * @inheritdoc + */ +OO.ui.ListToolGroup.prototype.populate = function () { + var i, len, allowCollapse = []; + + OO.ui.ListToolGroup.super.prototype.populate.call( this ); + + // Update the list of collapsible tools + if ( this.allowCollapse !== undefined ) { + allowCollapse = this.allowCollapse; + } else if ( this.forceExpand !== undefined ) { + allowCollapse = OO.simpleArrayDifference( Object.keys( this.tools ), this.forceExpand ); + } + + this.collapsibleTools = []; + for ( i = 0, len = allowCollapse.length; i < len; i++ ) { + if ( this.tools[ allowCollapse[i] ] !== undefined ) { + this.collapsibleTools.push( this.tools[ allowCollapse[i] ] ); + } + } + + // Keep at the end, even when tools are added + this.$group.append( this.getExpandCollapseTool().$element ); + + this.getExpandCollapseTool().toggle( this.collapsibleTools.length !== 0 ); + + // Calling jQuery's .hide() and then .show() on a detached element caches the default value of its + // 'display' attribute and restores it, and the tool uses a <span> and can be hidden and re-shown. + // Is this a jQuery bug? http://jsfiddle.net/gtj4hu3h/ + if ( this.getExpandCollapseTool().$element.css( 'display' ) === 'inline' ) { + this.getExpandCollapseTool().$element.css( 'display', 'inline-block' ); + } + + this.updateCollapsibleState(); +}; + +OO.ui.ListToolGroup.prototype.getExpandCollapseTool = function () { + if ( this.expandCollapseTool === undefined ) { + var ExpandCollapseTool = function () { + ExpandCollapseTool.super.apply( this, arguments ); + }; + + OO.inheritClass( ExpandCollapseTool, OO.ui.Tool ); + + ExpandCollapseTool.prototype.onSelect = function () { + this.toolGroup.expanded = !this.toolGroup.expanded; + this.toolGroup.updateCollapsibleState(); + this.setActive( false ); + }; + ExpandCollapseTool.prototype.onUpdateState = function () { + // Do nothing. Tool interface requires an implementation of this function. + }; + + ExpandCollapseTool.static.name = 'more-fewer'; + + this.expandCollapseTool = new ExpandCollapseTool( this ); + } + return this.expandCollapseTool; +}; + +/** + * @inheritdoc + */ +OO.ui.ListToolGroup.prototype.onPointerUp = function ( e ) { + var ret = OO.ui.ListToolGroup.super.prototype.onPointerUp.call( this, e ); + + // Do not close the popup when the user wants to show more/fewer tools + if ( this.$( e.target ).closest( '.oo-ui-tool-name-more-fewer' ).length ) { + // Prevent the popup list from being hidden + this.setActive( true ); + } + + return ret; +}; + +OO.ui.ListToolGroup.prototype.updateCollapsibleState = function () { + var i, len; + + this.getExpandCollapseTool() + .setIcon( this.expanded ? 'collapse' : 'expand' ) + .setTitle( OO.ui.msg( this.expanded ? 'ooui-toolgroup-collapse' : 'ooui-toolgroup-expand' ) ); + + for ( i = 0, len = this.collapsibleTools.length; i < len; i++ ) { + this.collapsibleTools[i].toggle( this.expanded ); + } +}; -- To view, visit https://gerrit.wikimedia.org/r/164590 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ide5bb5e14eff305ca40d9f62fb42b7efab648b6f Gerrit-PatchSet: 7 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
