diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/layouts/FieldLayout.js')
| -rw-r--r-- | vendor/oojs/oojs-ui/src/layouts/FieldLayout.js | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js b/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js new file mode 100644 index 00000000..86385741 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js @@ -0,0 +1,160 @@ +/** + * FieldLayouts are used with OO.ui.FieldsetLayout. Each FieldLayout requires a field-widget, + * which is a widget that is specified by reference before any optional configuration settings. + * + * Field layouts can be configured with help text and/or labels. Labels are aligned in one of four ways: + * + * - **left**: The label is placed before the field-widget and aligned with the left margin. + * A left-alignment is used for forms with many fields. + * - **right**: The label is placed before the field-widget and aligned to the right margin. + * A right-alignment is used for long but familiar forms which users tab through, + * verifying the current field with a quick glance at the label. + * - **top**: The label is placed above the field-widget. A top-alignment is used for brief forms + * that users fill out from top to bottom. + * - **inline**: The label is placed after the field-widget and aligned to the left. + * An inline-alignment is best used with checkboxes or radio buttons. + * + * Help text is accessed via a help icon that appears in the upper right corner of the rendered field layout. + * Please see the [OOjs UI documentation on MediaWiki] [1] for examples and more information. + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Layouts/Fields_and_Fieldsets + * @class + * @extends OO.ui.Layout + * @mixins OO.ui.LabelElement + * + * @constructor + * @param {OO.ui.Widget} fieldWidget Field widget + * @param {Object} [config] Configuration options + * @cfg {string} [align='left'] Alignment of the label: 'left', 'right', 'top' or 'inline' + * @cfg {string} [help] Help text. When help text is specified, a help icon will appear + * in the upper-right corner of the rendered field. + */ +OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) { + // Allow passing positional parameters inside the config object + if ( OO.isPlainObject( fieldWidget ) && config === undefined ) { + config = fieldWidget; + fieldWidget = config.fieldWidget; + } + + var hasInputWidget = fieldWidget instanceof OO.ui.InputWidget; + + // Configuration initialization + config = $.extend( { align: 'left' }, config ); + + // Parent constructor + OO.ui.FieldLayout.super.call( this, config ); + + // Mixin constructors + OO.ui.LabelElement.call( this, config ); + + // Properties + this.fieldWidget = fieldWidget; + this.$field = $( '<div>' ); + this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' ); + this.align = null; + if ( config.help ) { + this.popupButtonWidget = new OO.ui.PopupButtonWidget( { + classes: [ 'oo-ui-fieldLayout-help' ], + framed: false, + icon: 'info' + } ); + + this.popupButtonWidget.getPopup().$body.append( + $( '<div>' ) + .text( config.help ) + .addClass( 'oo-ui-fieldLayout-help-content' ) + ); + this.$help = this.popupButtonWidget.$element; + } else { + this.$help = $( [] ); + } + + // Events + if ( hasInputWidget ) { + this.$label.on( 'click', this.onLabelClick.bind( this ) ); + } + this.fieldWidget.connect( this, { disable: 'onFieldDisable' } ); + + // Initialization + this.$element + .addClass( 'oo-ui-fieldLayout' ) + .append( this.$help, this.$body ); + this.$body.addClass( 'oo-ui-fieldLayout-body' ); + this.$field + .addClass( 'oo-ui-fieldLayout-field' ) + .toggleClass( 'oo-ui-fieldLayout-disable', this.fieldWidget.isDisabled() ) + .append( this.fieldWidget.$element ); + + this.setAlignment( config.align ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout ); +OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabelElement ); + +/* Methods */ + +/** + * Handle field disable events. + * + * @private + * @param {boolean} value Field is disabled + */ +OO.ui.FieldLayout.prototype.onFieldDisable = function ( value ) { + this.$element.toggleClass( 'oo-ui-fieldLayout-disabled', value ); +}; + +/** + * Handle label mouse click events. + * + * @private + * @param {jQuery.Event} e Mouse click event + */ +OO.ui.FieldLayout.prototype.onLabelClick = function () { + this.fieldWidget.simulateLabelClick(); + return false; +}; + +/** + * Get the widget contained by the field. + * + * @return {OO.ui.Widget} Field widget + */ +OO.ui.FieldLayout.prototype.getField = function () { + return this.fieldWidget; +}; + +/** + * Set the field alignment mode. + * + * @private + * @param {string} value Alignment mode, either 'left', 'right', 'top' or 'inline' + * @chainable + */ +OO.ui.FieldLayout.prototype.setAlignment = function ( value ) { + if ( value !== this.align ) { + // Default to 'left' + if ( [ 'left', 'right', 'top', 'inline' ].indexOf( value ) === -1 ) { + value = 'left'; + } + // Reorder elements + if ( value === 'inline' ) { + this.$body.append( this.$field, this.$label ); + } else { + this.$body.append( this.$label, this.$field ); + } + // Set classes. The following classes can be used here: + // * oo-ui-fieldLayout-align-left + // * oo-ui-fieldLayout-align-right + // * oo-ui-fieldLayout-align-top + // * oo-ui-fieldLayout-align-inline + if ( this.align ) { + this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align ); + } + this.$element.addClass( 'oo-ui-fieldLayout-align-' + value ); + this.align = value; + } + + return this; +}; |