diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/widgets/OptionWidget.js')
| -rw-r--r-- | vendor/oojs/oojs-ui/src/widgets/OptionWidget.js | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/widgets/OptionWidget.js b/vendor/oojs/oojs-ui/src/widgets/OptionWidget.js new file mode 100644 index 00000000..0bc2486e --- /dev/null +++ b/vendor/oojs/oojs-ui/src/widgets/OptionWidget.js @@ -0,0 +1,177 @@ +/** + * OptionWidgets are special elements that can be selected and configured with data. The + * data is often unique for each option, but it does not have to be. OptionWidgets are used + * with OO.ui.SelectWidget to create a selection of mutually exclusive options. For more information + * and examples, please see the [OOjs UI documentation on MediaWiki][1]. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.LabelElement + * @mixins OO.ui.FlaggedElement + * + * @constructor + * @param {Object} [config] Configuration options + */ +OO.ui.OptionWidget = function OoUiOptionWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.OptionWidget.super.call( this, config ); + + // Mixin constructors + OO.ui.ItemWidget.call( this ); + OO.ui.LabelElement.call( this, config ); + OO.ui.FlaggedElement.call( this, config ); + + // Properties + this.selected = false; + this.highlighted = false; + this.pressed = false; + + // Initialization + this.$element + .data( 'oo-ui-optionWidget', this ) + .attr( 'role', 'option' ) + .addClass( 'oo-ui-optionWidget' ) + .append( this.$label ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget ); +OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget ); +OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabelElement ); +OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggedElement ); + +/* Static Properties */ + +OO.ui.OptionWidget.static.selectable = true; + +OO.ui.OptionWidget.static.highlightable = true; + +OO.ui.OptionWidget.static.pressable = true; + +OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false; + +/* Methods */ + +/** + * Check if the option can be selected. + * + * @return {boolean} Item is selectable + */ +OO.ui.OptionWidget.prototype.isSelectable = function () { + return this.constructor.static.selectable && !this.isDisabled(); +}; + +/** + * Check if the option can be highlighted. A highlight indicates that the option + * may be selected when a user presses enter or clicks. Disabled items cannot + * be highlighted. + * + * @return {boolean} Item is highlightable + */ +OO.ui.OptionWidget.prototype.isHighlightable = function () { + return this.constructor.static.highlightable && !this.isDisabled(); +}; + +/** + * Check if the option can be pressed. The pressed state occurs when a user mouses + * down on an item, but has not yet let go of the mouse. + * + * @return {boolean} Item is pressable + */ +OO.ui.OptionWidget.prototype.isPressable = function () { + return this.constructor.static.pressable && !this.isDisabled(); +}; + +/** + * Check if the option is selected. + * + * @return {boolean} Item is selected + */ +OO.ui.OptionWidget.prototype.isSelected = function () { + return this.selected; +}; + +/** + * Check if the option is highlighted. A highlight indicates that the + * item may be selected when a user presses enter or clicks. + * + * @return {boolean} Item is highlighted + */ +OO.ui.OptionWidget.prototype.isHighlighted = function () { + return this.highlighted; +}; + +/** + * Check if the option is pressed. The pressed state occurs when a user mouses + * down on an item, but has not yet let go of the mouse. The item may appear + * selected, but it will not be selected until the user releases the mouse. + * + * @return {boolean} Item is pressed + */ +OO.ui.OptionWidget.prototype.isPressed = function () { + return this.pressed; +}; + +/** + * Set the option’s selected state. In general, all modifications to the selection + * should be handled by the SelectWidget’s {@link OO.ui.SelectWidget#selectItem selectItem( [item] )} + * method instead of this method. + * + * @param {boolean} [state=false] Select option + * @chainable + */ +OO.ui.OptionWidget.prototype.setSelected = function ( state ) { + if ( this.constructor.static.selectable ) { + this.selected = !!state; + this.$element + .toggleClass( 'oo-ui-optionWidget-selected', state ) + .attr( 'aria-selected', state.toString() ); + if ( state && this.constructor.static.scrollIntoViewOnSelect ) { + this.scrollElementIntoView(); + } + this.updateThemeClasses(); + } + return this; +}; + +/** + * Set the option’s highlighted state. In general, all programmatic + * modifications to the highlight should be handled by the + * SelectWidget’s {@link OO.ui.SelectWidget#highlightItem highlightItem( [item] )} + * method instead of this method. + * + * @param {boolean} [state=false] Highlight option + * @chainable + */ +OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) { + if ( this.constructor.static.highlightable ) { + this.highlighted = !!state; + this.$element.toggleClass( 'oo-ui-optionWidget-highlighted', state ); + this.updateThemeClasses(); + } + return this; +}; + +/** + * Set the option’s pressed state. In general, all + * programmatic modifications to the pressed state should be handled by the + * SelectWidget’s {@link OO.ui.SelectWidget#pressItem pressItem( [item] )} + * method instead of this method. + * + * @param {boolean} [state=false] Press option + * @chainable + */ +OO.ui.OptionWidget.prototype.setPressed = function ( state ) { + if ( this.constructor.static.pressable ) { + this.pressed = !!state; + this.$element.toggleClass( 'oo-ui-optionWidget-pressed', state ); + this.updateThemeClasses(); + } + return this; +}; |