# all files / src/layouts/ FormLayout.js

83.33% Statements 15/18
50% Branches 5/10
50% Functions 1/2
83.33% Lines 15/18

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132

    1×
    24×

    24×

    24×

    24×

    24×

    24×
    24×

    24×

    24×
    18×

    1×
    1×

    1×

    1×

     /**
     * FormLayouts are used to wrap {@link OO.ui.FieldsetLayout FieldsetLayouts} when you intend to use browser-based
     * form submission for the fields instead of handling them in JavaScript. Form layouts can be configured with an
     * HTML form action, an encoding type, and a method using the #action, #enctype, and #method configs, respectively.
     * See the [OOjs UI documentation on MediaWiki] [1] for more information and examples.
     *
     * Only widgets from the {@link OO.ui.InputWidget InputWidget} family support form submission. It
     * includes standard form elements like {@link OO.ui.CheckboxInputWidget checkboxes}, {@link
     * OO.ui.RadioInputWidget radio buttons} and {@link OO.ui.TextInputWidget text fields}, as well as
     * some fancier controls. Some controls have both regular and InputWidget variants, for example
     * OO.ui.DropdownWidget and OO.ui.DropdownInputWidget – only the latter support form submission and
     * often have simplified APIs to match the capabilities of HTML forms.
     * See the [OOjs UI Inputs documentation on MediaWiki] [2] for more information about InputWidgets.
     *
     * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Layouts/Forms
     * [2]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs
     *
     *     @example
     *     // Example of a form layout that wraps a fieldset layout
     *     var input1 = new OO.ui.TextInputWidget( {
     *         placeholder: 'Username'
     *     } );
     *     var input2 = new OO.ui.TextInputWidget( {
     *         placeholder: 'Password',
     *         type: 'password'
     *     } );
     *     var submit = new OO.ui.ButtonInputWidget( {
     *         label: 'Submit'
     *     } );
     *
     *     var fieldset = new OO.ui.FieldsetLayout( {
     *         label: 'A form layout'
     *     } );
     *     fieldset.addItems( [
     *         new OO.ui.FieldLayout( input1, {
     *             label: 'Username',
     *             align: 'top'
     *         } ),
     *         new OO.ui.FieldLayout( input2, {
     *             label: 'Password',
     *             align: 'top'
     *         } ),
     *         new OO.ui.FieldLayout( submit )
     *     ] );
     *     var form = new OO.ui.FormLayout( {
     *         items: [ fieldset ],
     *         action: '/api/formhandler',
     *         method: 'get'
     *     } )
     *     $( 'body' ).append( form.$element );
     *
     * @class
     * @extends OO.ui.Layout
     * @mixins OO.ui.mixin.GroupElement
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {string} [method] HTML form `method` attribute
     * @cfg {string} [action] HTML form `action` attribute
     * @cfg {string} [enctype] HTML form `enctype` attribute
     * @cfg {OO.ui.FieldsetLayout[]} [items] Fieldset layouts to add to the form layout.
     */
    OO.ui.FormLayout = function OoUiFormLayout( config ) {
    	var action;

    	// Configuration initialization
    	config = config || {};

    	// Parent constructor
    	OO.ui.FormLayout.parent.call( this, config );

    	// Mixin constructors
    	OO.ui.mixin.GroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );

    	// Events
    	this.$element.on( 'submit', this.onFormSubmit.bind( this ) );

    	// Make sure the action is safe
    	action = config.action;
    	Iif ( action !== undefined && !OO.ui.isSafeUrl( action ) ) {
    		action = './' + action;
    	}

    	// Initialization
    	this.$element
    		.addClass( 'oo-ui-formLayout' )
    		.attr( {
    			method: config.method,
    			action: action,
    			enctype: config.enctype
    		} );
    	if ( Array.isArray( config.items ) ) {
    		this.addItems( config.items );
    	}
    };

    /* Setup */

    OO.inheritClass( OO.ui.FormLayout, OO.ui.Layout );
    OO.mixinClass( OO.ui.FormLayout, OO.ui.mixin.GroupElement );

    /* Events */

    /**
     * A 'submit' event is emitted when the form is submitted.
     *
     * @event submit
     */

    /* Static Properties */

    /**
     * @static
     * @inheritdoc
     */
    OO.ui.FormLayout.static.tagName = 'form';

    /* Methods */

    /**
     * Handle form submit events.
     *
     * @private
     * @param {jQuery.Event} e Submit event
     * @fires submit
     */
    OO.ui.FormLayout.prototype.onFormSubmit = function () {
    	if ( this.emit( 'submit' ) ) {
    		return false;
    	}
    };