diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/widgets/LabelWidget.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/widgets/LabelWidget.js | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/widgets/LabelWidget.js b/vendor/oojs/oojs-ui/src/widgets/LabelWidget.js new file mode 100644 index 00000000..e00990bb --- /dev/null +++ b/vendor/oojs/oojs-ui/src/widgets/LabelWidget.js @@ -0,0 +1,84 @@ +/** + * LabelWidgets help identify the function of interface elements. Each LabelWidget can + * be configured with a `label` option that is set to a string, a label node, or a function: + * + * - String: a plaintext string + * - jQuery selection: a jQuery selection, used for anything other than a plaintext label, e.g., a + * label that includes a link or special styling, such as a gray color or additional graphical elements. + * - Function: a function that will produce a string in the future. Functions are used + * in cases where the value of the label is not currently defined. + * + * In addition, the LabelWidget can be associated with an {@link OO.ui.InputWidget input widget}, which + * will come into focus when the label is clicked. + * + * @example + * // Examples of LabelWidgets + * var label1 = new OO.ui.LabelWidget( { + * label: 'plaintext label' + * } ); + * var label2 = new OO.ui.LabelWidget( { + * label: $( '<a href="default.html">jQuery label</a>' ) + * } ); + * // Create a fieldset layout with fields for each example + * var fieldset = new OO.ui.FieldsetLayout(); + * fieldset.addItems( [ + * new OO.ui.FieldLayout( label1 ), + * new OO.ui.FieldLayout( label2 ) + * ] ); + * $( 'body' ).append( fieldset.$element ); + * + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.LabelElement + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {OO.ui.InputWidget} [input] {@link OO.ui.InputWidget Input widget} that uses the label. + * Clicking the label will focus the specified input field. + */ +OO.ui.LabelWidget = function OoUiLabelWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.LabelWidget.super.call( this, config ); + + // Mixin constructors + OO.ui.LabelElement.call( this, $.extend( {}, config, { $label: this.$element } ) ); + OO.ui.TitledElement.call( this, config ); + + // Properties + this.input = config.input; + + // Events + if ( this.input instanceof OO.ui.InputWidget ) { + this.$element.on( 'click', this.onClick.bind( this ) ); + } + + // Initialization + this.$element.addClass( 'oo-ui-labelWidget' ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget ); +OO.mixinClass( OO.ui.LabelWidget, OO.ui.LabelElement ); +OO.mixinClass( OO.ui.LabelWidget, OO.ui.TitledElement ); + +/* Static Properties */ + +OO.ui.LabelWidget.static.tagName = 'span'; + +/* Methods */ + +/** + * Handles label mouse click events. + * + * @private + * @param {jQuery.Event} e Mouse click event + */ +OO.ui.LabelWidget.prototype.onClick = function () { + this.input.simulateLabelClick(); + return false; +}; |