/** * OutlineControlsWidget is a set of controls for an {@link OO.ui.OutlineSelectWidget outline select widget}. * Controls include moving items up and down, removing items, and adding different kinds of items. * ####Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}.#### * * @class * @extends OO.ui.Widget * @mixins OO.ui.GroupElement * @mixins OO.ui.IconElement * * @constructor * @param {OO.ui.OutlineSelectWidget} outline Outline to control * @param {Object} [config] Configuration options * @cfg {Object} [abilities] List of abilties * @cfg {boolean} [abilities.move=true] Allow moving movable items * @cfg {boolean} [abilities.remove=true] Allow removing removable items */ OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) { // Allow passing positional parameters inside the config object if ( OO.isPlainObject( outline ) && config === undefined ) { config = outline; outline = config.outline; } // Configuration initialization config = $.extend( { icon: 'add' }, config ); // Parent constructor OO.ui.OutlineControlsWidget.super.call( this, config ); // Mixin constructors OO.ui.GroupElement.call( this, config ); OO.ui.IconElement.call( this, config ); // Properties this.outline = outline; this.$movers = $( '
' ); this.upButton = new OO.ui.ButtonWidget( { framed: false, icon: 'collapse', title: OO.ui.msg( 'ooui-outline-control-move-up' ) } ); this.downButton = new OO.ui.ButtonWidget( { framed: false, icon: 'expand', title: OO.ui.msg( 'ooui-outline-control-move-down' ) } ); this.removeButton = new OO.ui.ButtonWidget( { framed: false, icon: 'remove', title: OO.ui.msg( 'ooui-outline-control-remove' ) } ); this.abilities = { move: true, remove: true }; // Events outline.connect( this, { select: 'onOutlineChange', add: 'onOutlineChange', remove: 'onOutlineChange' } ); this.upButton.connect( this, { click: [ 'emit', 'move', -1 ] } ); this.downButton.connect( this, { click: [ 'emit', 'move', 1 ] } ); this.removeButton.connect( this, { click: [ 'emit', 'remove' ] } ); // Initialization this.$element.addClass( 'oo-ui-outlineControlsWidget' ); this.$group.addClass( 'oo-ui-outlineControlsWidget-items' ); this.$movers .addClass( 'oo-ui-outlineControlsWidget-movers' ) .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element ); this.$element.append( this.$icon, this.$group, this.$movers ); this.setAbilities( config.abilities || {} ); }; /* Setup */ OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget ); OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.GroupElement ); OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.IconElement ); /* Events */ /** * @event move * @param {number} places Number of places to move */ /** * @event remove */ /* Methods */ /** * Set abilities. * * @param {Object} abilities List of abilties * @param {boolean} [abilities.move] Allow moving movable items * @param {boolean} [abilities.remove] Allow removing removable items */ OO.ui.OutlineControlsWidget.prototype.setAbilities = function ( abilities ) { var ability; for ( ability in this.abilities ) { if ( abilities[ability] !== undefined ) { this.abilities[ability] = !!abilities[ability]; } } this.onOutlineChange(); }; /** * * @private * Handle outline change events. */ OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () { var i, len, firstMovable, lastMovable, items = this.outline.getItems(), selectedItem = this.outline.getSelectedItem(), movable = this.abilities.move && selectedItem && selectedItem.isMovable(), removable = this.abilities.remove && selectedItem && selectedItem.isRemovable(); if ( movable ) { i = -1; len = items.length; while ( ++i < len ) { if ( items[ i ].isMovable() ) { firstMovable = items[ i ]; break; } } i = len; while ( i-- ) { if ( items[ i ].isMovable() ) { lastMovable = items[ i ]; break; } } } this.upButton.setDisabled( !movable || selectedItem === firstMovable ); this.downButton.setDisabled( !movable || selectedItem === lastMovable ); this.removeButton.setDisabled( !removable ); };