| 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153 |
1×
2992×
2992×
1616×
2992×
2992×
2992×
2992×
2992×
2992×
2992×
2992×
2860×
2992×
132×
2992×
1×
1×
1×
1×
1×
1×
1×
1×
1376×
1376×
1×
2992×
2992×
132×
120×
132×
2992×
1×
3004×
2860×
3004×
1×
| /**
* ButtonInputWidget is used to submit HTML forms and is intended to be used within
* a OO.ui.FormLayout. If you do not need the button to work with HTML forms, you probably
* want to use OO.ui.ButtonWidget instead. Button input widgets can be rendered as either an
* HTML `<button>` (the default) or an HTML `<input>` tags. See the
* [OOUI documentation on MediaWiki][1] for more information.
*
* [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Inputs#Button_inputs
*
* @example
* // A ButtonInputWidget rendered as an HTML button, the default.
* const button = new OO.ui.ButtonInputWidget( {
* label: 'Input button',
* icon: 'check',
* value: 'check'
* } );
* $( document.body ).append( button.$element );
*
* @class
* @extends OO.ui.InputWidget
* @mixes OO.ui.mixin.ButtonElement
* @mixes OO.ui.mixin.IconElement
* @mixes OO.ui.mixin.IndicatorElement
* @mixes OO.ui.mixin.LabelElement
* @mixes OO.ui.mixin.FlaggedElement
*
* @constructor
* @param {Object} [config] Configuration options
* @param {string} [config.type='button'] The value of the HTML `'type'` attribute:
* 'button', 'submit' or 'reset'.
* @param {boolean} [config.useInputTag=false] Use an `<input>` tag instead of a `<button>` tag, the
* default. Widgets configured to be an `<input>` do not support {@link OO.ui.ButtonInputWidget#icon icons} and
* {@link OO.ui.ButtonInputWidget#indicator indicators}, non-plaintext {@link OO.ui.ButtonInputWidget#label labels}, or {@link OO.ui.ButtonInputWidget#value values}. In
* general, useInputTag should only be set to `true` when there’s need to support IE 6 in a form
* with multiple buttons.
* @param {boolean} [config.formNoValidate=false] Whether to use `formnovalidate` attribute.
*/
OO.ui.ButtonInputWidget = function OoUiButtonInputWidget( config ) {
// Configuration initialization
config = $.extend( { type: 'button', useInputTag: false, formNoValidate: false }, config );
// See InputWidget#reusePreInfuseDOM about config.$input
if ( config.$input ) {
config.$input.empty();
}
// Properties (must be set before parent constructor, which calls #setValue)
this.useInputTag = config.useInputTag;
// Parent constructor
OO.ui.ButtonInputWidget.super.call( this, config );
// Mixin constructors
OO.ui.mixin.ButtonElement.call( this, $.extend( {
$button: this.$input
}, config ) );
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.LabelElement.call( this, config );
OO.ui.mixin.FlaggedElement.call( this, config );
// Initialization
if ( !config.useInputTag ) {
this.$input.append( this.$icon, this.$label, this.$indicator );
}
if ( config.formNoValidate ) {
this.$input.attr( 'formnovalidate', 'formnovalidate' );
}
this.$element.addClass( 'oo-ui-buttonInputWidget' );
};
/* Setup */
OO.inheritClass( OO.ui.ButtonInputWidget, OO.ui.InputWidget );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.ButtonElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.LabelElement );
OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.FlaggedElement );
/* Static Properties */
/**
* @static
* @inheritdoc
*/
OO.ui.ButtonInputWidget.static.tagName = 'span';
/* Methods */
/**
* @inheritdoc
* @protected
*/
OO.ui.ButtonInputWidget.prototype.getInputElement = function ( config ) {
const type = config.type === 'submit' || config.type === 'reset' ? config.type : 'button';
return $( '<' + ( config.useInputTag ? 'input' : 'button' ) + ' type="' + type + '">' );
};
/**
* Set label value.
*
* If #useInputTag is `true`, the label is set as the `value` of the `<input>` tag.
*
* @param {jQuery|string|Function|null} label Label nodes, text, a function that returns nodes or
* text, or `null` for no label
* @chainable
* @return {OO.ui.Widget} The widget, for chaining
*/
OO.ui.ButtonInputWidget.prototype.setLabel = function ( label ) {
label = OO.ui.resolveMsg( label );
if ( this.useInputTag ) {
// Discard non-plaintext labels
if ( typeof label !== 'string' ) {
label = '';
}
this.$input.val( label );
}
return OO.ui.mixin.LabelElement.prototype.setLabel.call( this, label );
};
/**
* Set the value of the input.
*
* This method is disabled for button inputs configured as {@link OO.ui.ButtonInputWidget#useInputTag <input> tags}, as
* they do not support {@link OO.ui.ButtonInputWidget#value values}.
*
* @param {string} value New value
* @chainable
* @return {OO.ui.Widget} The widget, for chaining
*/
OO.ui.ButtonInputWidget.prototype.setValue = function ( value ) {
if ( !this.useInputTag ) {
OO.ui.ButtonInputWidget.super.prototype.setValue.call( this, value );
}
return this;
};
/**
* @inheritdoc
*/
OO.ui.ButtonInputWidget.prototype.getInputId = function () {
// Disable generating `<label>` elements for buttons. One would very rarely need additional
// label for a button, and it's already a big clickable target, and it causes
// unexpected rendering.
return null;
};
|