diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/toolgroups')
-rw-r--r-- | vendor/oojs/oojs-ui/src/toolgroups/BarToolGroup.js | 35 | ||||
-rw-r--r-- | vendor/oojs/oojs-ui/src/toolgroups/ListToolGroup.js | 133 | ||||
-rw-r--r-- | vendor/oojs/oojs-ui/src/toolgroups/MenuToolGroup.js | 58 | ||||
-rw-r--r-- | vendor/oojs/oojs-ui/src/toolgroups/PopupToolGroup.js | 187 |
4 files changed, 413 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/toolgroups/BarToolGroup.js b/vendor/oojs/oojs-ui/src/toolgroups/BarToolGroup.js new file mode 100644 index 00000000..038894d6 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/toolgroups/BarToolGroup.js @@ -0,0 +1,35 @@ +/** + * Horizontal bar layout of tools as icon buttons. + * + * @class + * @extends OO.ui.ToolGroup + * + * @constructor + * @param {OO.ui.Toolbar} toolbar + * @param {Object} [config] Configuration options + */ +OO.ui.BarToolGroup = function OoUiBarToolGroup( toolbar, config ) { + // Allow passing positional parameters inside the config object + if ( OO.isPlainObject( toolbar ) && config === undefined ) { + config = toolbar; + toolbar = config.toolbar; + } + + // Parent constructor + OO.ui.BarToolGroup.super.call( this, toolbar, config ); + + // Initialization + this.$element.addClass( 'oo-ui-barToolGroup' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.BarToolGroup, OO.ui.ToolGroup ); + +/* Static Properties */ + +OO.ui.BarToolGroup.static.titleTooltips = true; + +OO.ui.BarToolGroup.static.accelTooltips = true; + +OO.ui.BarToolGroup.static.name = 'bar'; diff --git a/vendor/oojs/oojs-ui/src/toolgroups/ListToolGroup.js b/vendor/oojs/oojs-ui/src/toolgroups/ListToolGroup.js new file mode 100644 index 00000000..e78f507e --- /dev/null +++ b/vendor/oojs/oojs-ui/src/toolgroups/ListToolGroup.js @@ -0,0 +1,133 @@ +/** + * 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 ) { + // Allow passing positional parameters inside the config object + if ( OO.isPlainObject( toolbar ) && config === undefined ) { + config = toolbar; + toolbar = config.toolbar; + } + + // Configuration initialization + config = 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 ); + + // Initialization + this.$element.addClass( 'oo-ui-listToolGroup' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.ListToolGroup, OO.ui.PopupToolGroup ); + +/* Static Properties */ + +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 ); + 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.onMouseKeyUp = function ( e ) { + // Do not close the popup when the user wants to show more/fewer tools + if ( + $( e.target ).closest( '.oo-ui-tool-name-more-fewer' ).length && + ( e.which === 1 || e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) + ) { + // HACK: Prevent the popup list from being hidden. Skip the PopupToolGroup implementation (which + // hides the popup list when a tool is selected) and call ToolGroup's implementation directly. + return OO.ui.ListToolGroup.super.super.prototype.onMouseKeyUp.call( this, e ); + } else { + return OO.ui.ListToolGroup.super.prototype.onMouseKeyUp.call( this, e ); + } +}; + +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 ); + } +}; diff --git a/vendor/oojs/oojs-ui/src/toolgroups/MenuToolGroup.js b/vendor/oojs/oojs-ui/src/toolgroups/MenuToolGroup.js new file mode 100644 index 00000000..aef69a93 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/toolgroups/MenuToolGroup.js @@ -0,0 +1,58 @@ +/** + * Drop down menu layout of tools as selectable menu items. + * + * @class + * @extends OO.ui.PopupToolGroup + * + * @constructor + * @param {OO.ui.Toolbar} toolbar + * @param {Object} [config] Configuration options + */ +OO.ui.MenuToolGroup = function OoUiMenuToolGroup( toolbar, config ) { + // Allow passing positional parameters inside the config object + if ( OO.isPlainObject( toolbar ) && config === undefined ) { + config = toolbar; + toolbar = config.toolbar; + } + + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.MenuToolGroup.super.call( this, toolbar, config ); + + // Events + this.toolbar.connect( this, { updateState: 'onUpdateState' } ); + + // Initialization + this.$element.addClass( 'oo-ui-menuToolGroup' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.MenuToolGroup, OO.ui.PopupToolGroup ); + +/* Static Properties */ + +OO.ui.MenuToolGroup.static.name = 'menu'; + +/* Methods */ + +/** + * Handle the toolbar state being updated. + * + * When the state changes, the title of each active item in the menu will be joined together and + * used as a label for the group. The label will be empty if none of the items are active. + */ +OO.ui.MenuToolGroup.prototype.onUpdateState = function () { + var name, + labelTexts = []; + + for ( name in this.tools ) { + if ( this.tools[ name ].isActive() ) { + labelTexts.push( this.tools[ name ].getTitle() ); + } + } + + this.setLabel( labelTexts.join( ', ' ) || ' ' ); +}; diff --git a/vendor/oojs/oojs-ui/src/toolgroups/PopupToolGroup.js b/vendor/oojs/oojs-ui/src/toolgroups/PopupToolGroup.js new file mode 100644 index 00000000..0fbdf4fc --- /dev/null +++ b/vendor/oojs/oojs-ui/src/toolgroups/PopupToolGroup.js @@ -0,0 +1,187 @@ +/** + * Popup list of tools with an icon and optional label. + * + * @abstract + * @class + * @extends OO.ui.ToolGroup + * @mixins OO.ui.IconElement + * @mixins OO.ui.IndicatorElement + * @mixins OO.ui.LabelElement + * @mixins OO.ui.TitledElement + * @mixins OO.ui.ClippableElement + * @mixins OO.ui.TabIndexedElement + * + * @constructor + * @param {OO.ui.Toolbar} toolbar + * @param {Object} [config] Configuration options + * @cfg {string} [header] Text to display at the top of the pop-up + */ +OO.ui.PopupToolGroup = function OoUiPopupToolGroup( toolbar, config ) { + // Allow passing positional parameters inside the config object + if ( OO.isPlainObject( toolbar ) && config === undefined ) { + config = toolbar; + toolbar = config.toolbar; + } + + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.PopupToolGroup.super.call( this, toolbar, config ); + + // Properties + this.active = false; + this.dragging = false; + this.onBlurHandler = this.onBlur.bind( this ); + this.$handle = $( '<span>' ); + + // Mixin constructors + OO.ui.IconElement.call( this, config ); + OO.ui.IndicatorElement.call( this, config ); + OO.ui.LabelElement.call( this, config ); + OO.ui.TitledElement.call( this, config ); + OO.ui.ClippableElement.call( this, $.extend( {}, config, { $clippable: this.$group } ) ); + OO.ui.TabIndexedElement.call( this, $.extend( {}, config, { $tabIndexed: this.$handle } ) ); + + // Events + this.$handle.on( { + keydown: this.onHandleMouseKeyDown.bind( this ), + keyup: this.onHandleMouseKeyUp.bind( this ), + mousedown: this.onHandleMouseKeyDown.bind( this ), + mouseup: this.onHandleMouseKeyUp.bind( this ) + } ); + + // Initialization + this.$handle + .addClass( 'oo-ui-popupToolGroup-handle' ) + .append( this.$icon, this.$label, this.$indicator ); + // If the pop-up should have a header, add it to the top of the toolGroup. + // Note: If this feature is useful for other widgets, we could abstract it into an + // OO.ui.HeaderedElement mixin constructor. + if ( config.header !== undefined ) { + this.$group + .prepend( $( '<span>' ) + .addClass( 'oo-ui-popupToolGroup-header' ) + .text( config.header ) + ); + } + this.$element + .addClass( 'oo-ui-popupToolGroup' ) + .prepend( this.$handle ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.PopupToolGroup, OO.ui.ToolGroup ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.IconElement ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.IndicatorElement ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.LabelElement ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.TitledElement ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.ClippableElement ); +OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.TabIndexedElement ); + +/* Methods */ + +/** + * @inheritdoc + */ +OO.ui.PopupToolGroup.prototype.setDisabled = function () { + // Parent method + OO.ui.PopupToolGroup.super.prototype.setDisabled.apply( this, arguments ); + + if ( this.isDisabled() && this.isElementAttached() ) { + this.setActive( false ); + } +}; + +/** + * Handle focus being lost. + * + * The event is actually generated from a mouseup/keyup, so it is not a normal blur event object. + * + * @param {jQuery.Event} e Mouse up or key up event + */ +OO.ui.PopupToolGroup.prototype.onBlur = function ( e ) { + // Only deactivate when clicking outside the dropdown element + if ( $( e.target ).closest( '.oo-ui-popupToolGroup' )[ 0 ] !== this.$element[ 0 ] ) { + this.setActive( false ); + } +}; + +/** + * @inheritdoc + */ +OO.ui.PopupToolGroup.prototype.onMouseKeyUp = function ( e ) { + // Only close toolgroup when a tool was actually selected + if ( + !this.isDisabled() && this.pressed && this.pressed === this.getTargetTool( e ) && + ( e.which === 1 || e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) + ) { + this.setActive( false ); + } + return OO.ui.PopupToolGroup.super.prototype.onMouseKeyUp.call( this, e ); +}; + +/** + * Handle mouse up and key up events. + * + * @param {jQuery.Event} e Mouse up or key up event + */ +OO.ui.PopupToolGroup.prototype.onHandleMouseKeyUp = function ( e ) { + if ( + !this.isDisabled() && + ( e.which === 1 || e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) + ) { + return false; + } +}; + +/** + * Handle mouse down and key down events. + * + * @param {jQuery.Event} e Mouse down or key down event + */ +OO.ui.PopupToolGroup.prototype.onHandleMouseKeyDown = function ( e ) { + if ( + !this.isDisabled() && + ( e.which === 1 || e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) + ) { + this.setActive( !this.active ); + return false; + } +}; + +/** + * Switch into active mode. + * + * When active, mouseup events anywhere in the document will trigger deactivation. + */ +OO.ui.PopupToolGroup.prototype.setActive = function ( value ) { + value = !!value; + if ( this.active !== value ) { + this.active = value; + if ( value ) { + this.getElementDocument().addEventListener( 'mouseup', this.onBlurHandler, true ); + this.getElementDocument().addEventListener( 'keyup', this.onBlurHandler, true ); + + // Try anchoring the popup to the left first + this.$element.addClass( 'oo-ui-popupToolGroup-active oo-ui-popupToolGroup-left' ); + this.toggleClipping( true ); + if ( this.isClippedHorizontally() ) { + // Anchoring to the left caused the popup to clip, so anchor it to the right instead + this.toggleClipping( false ); + this.$element + .removeClass( 'oo-ui-popupToolGroup-left' ) + .addClass( 'oo-ui-popupToolGroup-right' ); + this.toggleClipping( true ); + } + } else { + this.getElementDocument().removeEventListener( 'mouseup', this.onBlurHandler, true ); + this.getElementDocument().removeEventListener( 'keyup', this.onBlurHandler, true ); + this.$element.removeClass( + 'oo-ui-popupToolGroup-active oo-ui-popupToolGroup-left oo-ui-popupToolGroup-right' + ); + this.toggleClipping( false ); + } + } +}; |