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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<?php
namespace OOUI;
/**
* Input widget with a text field.
*/
class TextInputWidget extends InputWidget {
use IconElement;
use IndicatorElement;
use FlaggedElement;
use RequiredElement;
/* Properties */
/**
* Input field type.
*
* @var string
*/
protected $type = null;
/**
* Prevent changes.
*
* @var bool
*/
protected $readOnly = false;
/**
* @param array $config Configuration options
* - string $config['type'] HTML tag `type` attribute: 'text', 'password', 'email',
* 'url' or 'number'. (default: 'text')
* - string $config['placeholder'] Placeholder text
* - bool $config['autofocus'] Ask the browser to focus this widget, using the 'autofocus'
* HTML attribute (default: false)
* - bool $config['readOnly'] Prevent changes (default: false)
* - int $config['maxLength'] Maximum allowed number of characters to input
* For unfortunate historical reasons, this counts the number of UTF-16 code units rather
* than Unicode codepoints, which means that codepoints outside the Basic Multilingual
* Plane (e.g. many emojis) count as 2 characters each.
* - bool|string $config['autocomplete'] If the field should support autocomplete
* or not (default: true). Can also be an autocomplete type hint.
* - bool $config['spellcheck'] If the field should support spellcheck
* or not (default: browser-dependent)
*/
public function __construct( array $config = [] ) {
// Config initialization
if ( is_bool( $config['autocomplete'] ?? null ) ) {
$config['autocomplete'] = $config['autocomplete'] ? 'on' : 'off';
}
// Parent constructor
parent::__construct( $config );
// Properties
$this->type = $this->getSaneType( $config );
// Traits
$this->initializeIconElement( $config );
$this->initializeIndicatorElement( $config );
$this->initializeFlaggedElement(
array_merge( [ 'flagged' => $this ], $config )
);
$this->initializeRequiredElement( $config );
// Initialization
$this
->addClasses( [
'oo-ui-textInputWidget',
'oo-ui-textInputWidget-type-' . $this->type,
'oo-ui-textInputWidget-php',
] )
->appendContent( $this->icon, $this->indicator );
$this->setReadOnly( $config['readOnly'] ?? false );
if ( isset( $config['placeholder'] ) ) {
$this->input->setAttributes( [ 'placeholder' => $config['placeholder'] ] );
}
if ( isset( $config['maxLength'] ) ) {
$this->input->setAttributes( [ 'maxlength' => $config['maxLength'] ] );
}
if ( $config['autofocus'] ?? false ) {
$this->input->setAttributes( [ 'autofocus' => 'autofocus' ] );
}
if ( isset( $config['autocomplete'] ) ) {
$this->input->setAttributes( [ 'autocomplete' => $config['autocomplete'] ] );
}
if ( isset( $config['spellcheck'] ) ) {
$this->input->setAttributes( [ 'spellcheck' => $config['spellcheck'] ? 'true' : 'false' ] );
}
}
/**
* Check if the widget is read-only.
*
* @return bool
*/
public function isReadOnly() {
return $this->readOnly;
}
/**
* Set the read-only state of the widget. This should probably change the widget's appearance and
* prevent it from being used.
*
* @param bool $state Make input read-only
* @return $this
*/
public function setReadOnly( $state ) {
$this->readOnly = (bool)$state;
if ( $this->readOnly ) {
$this->input->setAttributes( [ 'readonly' => 'readonly' ] );
} else {
$this->input->removeAttributes( [ 'readonly' ] );
}
return $this;
}
/** @inheritDoc */
protected function getInputElement( $config ) {
if ( $this->getSaneType( $config ) === 'number' ) {
return ( new Tag( 'input' ) )->setAttributes( [
'step' => 'any',
'type' => 'number',
] );
} else {
return ( new Tag( 'input' ) )->setAttributes( [ 'type' => $this->getSaneType( $config ) ] );
}
}
/**
* @param array $config
* @return string
*/
protected function getSaneType( $config ) {
$allowedTypes = [
'password',
'email',
'url',
'number'
];
return isset( $config['type'] ) && in_array( $config['type'], $allowedTypes ) ? $config['type'] : 'text';
}
/** @inheritDoc */
public function getConfig( &$config ) {
if ( $this->type !== 'text' ) {
$config['type'] = $this->type;
}
if ( $this->isReadOnly() ) {
$config['readOnly'] = true;
}
$placeholder = $this->input->getAttribute( 'placeholder' );
if ( $placeholder !== null ) {
$config['placeholder'] = $placeholder;
}
$maxlength = $this->input->getAttribute( 'maxlength' );
if ( $maxlength !== null ) {
$config['maxLength'] = $maxlength;
}
$autofocus = $this->input->getAttribute( 'autofocus' );
if ( $autofocus !== null ) {
$config['autofocus'] = true;
}
$autocomplete = $this->input->getAttribute( 'autocomplete' );
if ( $autocomplete !== null ) {
$config['autocomplete'] = $autocomplete;
}
return parent::getConfig( $config );
}
}
|
