diff options
author | Pierre Schmitz <pierre@archlinux.de> | 2015-12-20 09:00:55 +0100 |
---|---|---|
committer | Pierre Schmitz <pierre@archlinux.de> | 2015-12-20 09:00:55 +0100 |
commit | a2190ac74dd4d7080b12bab90e552d7aa81209ef (patch) | |
tree | 8b31f38de9882d18df54cf8d9e0de74167a094eb /vendor/oojs/oojs-ui/src/layouts/FieldLayout.js | |
parent | 15e69f7b20b6596b9148030acce5b59993b95a45 (diff) | |
parent | 257401d8b2cf661adf36c84b0e3fd1cf85e33c22 (diff) |
Merge branch 'mw-1.26'
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, 0 insertions, 160 deletions
diff --git a/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js b/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js deleted file mode 100644 index 86385741..00000000 --- a/vendor/oojs/oojs-ui/src/layouts/FieldLayout.js +++ /dev/null @@ -1,160 +0,0 @@ -/** - * 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; -}; |