/** * ButtonSelectWidget is a {@link OO.ui.SelectWidget select widget} that contains * button options and is used together with * OO.ui.ButtonOptionWidget. The ButtonSelectWidget provides an interface for * highlighting, choosing, and selecting mutually exclusive options. Please see * the [OOjs UI documentation on MediaWiki] [1] for more information. * * @example * // Example: A ButtonSelectWidget that contains three ButtonOptionWidgets * var option1 = new OO.ui.ButtonOptionWidget( { * data: 1, * label: 'Option 1', * title: 'Button option 1' * } ); * * var option2 = new OO.ui.ButtonOptionWidget( { * data: 2, * label: 'Option 2', * title: 'Button option 2' * } ); * * var option3 = new OO.ui.ButtonOptionWidget( { * data: 3, * label: 'Option 3', * title: 'Button option 3' * } ); * * var buttonSelect=new OO.ui.ButtonSelectWidget( { * items: [ option1, option2, option3 ] * } ); * $( 'body' ).append( buttonSelect.$element ); * * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options * * @class * @extends OO.ui.SelectWidget * @mixins OO.ui.TabIndexedElement * * @constructor * @param {Object} [config] Configuration options */ OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) { // Parent constructor OO.ui.ButtonSelectWidget.super.call( this, config ); // Mixin constructors OO.ui.TabIndexedElement.call( this, config ); // Events this.$element.on( { focus: this.bindKeyDownListener.bind( this ), blur: this.unbindKeyDownListener.bind( this ) } ); // Initialization this.$element.addClass( 'oo-ui-buttonSelectWidget' ); }; /* Setup */ OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget ); OO.mixinClass( OO.ui.ButtonSelectWidget, OO.ui.TabIndexedElement );