diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/layouts/FieldsetLayout.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/layouts/FieldsetLayout.js | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/layouts/FieldsetLayout.js b/vendor/oojs/oojs-ui/src/layouts/FieldsetLayout.js new file mode 100644 index 00000000..1a21e8e1 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/layouts/FieldsetLayout.js @@ -0,0 +1,86 @@ +/** + * FieldsetLayouts are composed of one or more {@link OO.ui.FieldLayout FieldLayouts}, + * which each contain an individual widget and, optionally, a label. Each Fieldset can be + * configured with a label as well. For more information and examples, + * please see the [OOjs UI documentation on MediaWiki][1]. + * + * @example + * // Example of a fieldset layout + * var input1 = new OO.ui.TextInputWidget( { + * placeholder: 'A text input field' + * } ); + * + * var input2 = new OO.ui.TextInputWidget( { + * placeholder: 'A text input field' + * } ); + * + * var fieldset = new OO.ui.FieldsetLayout( { + * label: 'Example of a fieldset layout' + * } ); + * + * fieldset.addItems( [ + * new OO.ui.FieldLayout( input1, { + * label: 'Field One' + * } ), + * new OO.ui.FieldLayout( input2, { + * label: 'Field Two' + * } ) + * ] ); + * $( 'body' ).append( fieldset.$element ); + * + * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Layouts/Fields_and_Fieldsets + * + * @class + * @extends OO.ui.Layout + * @mixins OO.ui.IconElement + * @mixins OO.ui.LabelElement + * @mixins OO.ui.GroupElement + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {OO.ui.FieldLayout[]} [items] An array of fields to add to the fieldset. See OO.ui.FieldLayout for more information about fields. + */ +OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + OO.ui.FieldsetLayout.super.call( this, config ); + + // Mixin constructors + OO.ui.IconElement.call( this, config ); + OO.ui.LabelElement.call( this, config ); + OO.ui.GroupElement.call( this, config ); + + if ( config.help ) { + this.popupButtonWidget = new OO.ui.PopupButtonWidget( { + classes: [ 'oo-ui-fieldsetLayout-help' ], + framed: false, + icon: 'info' + } ); + + this.popupButtonWidget.getPopup().$body.append( + $( '<div>' ) + .text( config.help ) + .addClass( 'oo-ui-fieldsetLayout-help-content' ) + ); + this.$help = this.popupButtonWidget.$element; + } else { + this.$help = $( [] ); + } + + // Initialization + this.$element + .addClass( 'oo-ui-fieldsetLayout' ) + .prepend( this.$help, this.$icon, this.$label, this.$group ); + if ( Array.isArray( config.items ) ) { + this.addItems( config.items ); + } +}; + +/* Setup */ + +OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconElement ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabelElement ); +OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement ); |