Completed
Push — master ( a8d4f8...8bb334 )
by Alexander
220:03 queued 217:16
created

MaskedInput   A

Complexity

Total Complexity 16

Size/Duplication

Total Lines 145
Duplicated Lines 0 %

Test Coverage

Coverage 10%

Importance

Changes 0
Metric Value
eloc 42
dl 0
loc 145
ccs 4
cts 40
cp 0.1
rs 10
c 0
b 0
f 0
wmc 16

5 Methods

Rating   Name   Duplication   Size   Complexity  
A run() 0 4 1
A initClientOptions() 0 15 4
A hashPluginOptions() 0 6 2
A registerClientScript() 0 19 6
A init() 0 5 3
1
<?php
2
/**
3
 * @link http://www.yiiframework.com/
4
 * @copyright Copyright (c) 2008 Yii Software LLC
5
 * @license http://www.yiiframework.com/license/
6
 */
7
8
namespace yii\widgets;
9
10
use yii\base\InvalidConfigException;
11
use yii\helpers\Html;
12
use yii\helpers\Json;
13
use yii\web\JsExpression;
14
use yii\web\View;
15
16
/**
17
 * MaskedInput generates a masked text input.
18
 *
19
 * MaskedInput is similar to [[Html::textInput()]] except that an input mask will be used to force users to enter
20
 * properly formatted data, such as phone numbers, social security numbers.
21
 *
22
 * To use MaskedInput, you must set the [[mask]] property. The following example
23
 * shows how to use MaskedInput to collect phone numbers:
24
 *
25
 * ```php
26
 * echo MaskedInput::widget([
27
 *     'name' => 'phone',
28
 *     'mask' => '999-999-9999',
29
 * ]);
30
 * ```
31
 *
32
 * You can also use this widget in an [[ActiveForm]] using the [[ActiveField::widget()|widget()]]
33
 * method, for example like this:
34
 *
35
 * ```php
36
 * <?= $form->field($model, 'from_date')->widget(\yii\widgets\MaskedInput::className(), [
37
 *     'mask' => '999-999-9999',
38
 * ]) ?>
39
 * ```
40
 *
41
 * The masked text field is implemented based on the
42
 * [jQuery input masked plugin](https://github.com/RobinHerbots/Inputmask).
43
 *
44
 * @author Kartik Visweswaran <[email protected]>
45
 * @since 2.0
46
 */
47
class MaskedInput extends InputWidget
48
{
49
    /**
50
     * The name of the jQuery plugin to use for this widget.
51
     */
52
    const PLUGIN_NAME = 'inputmask';
53
54
    /**
55
     * @var string|array|JsExpression the input mask (e.g. '99/99/9999' for date input). The following characters
56
     * can be used in the mask and are predefined:
57
     *
58
     * - `a`: represents an alpha character (A-Z, a-z)
59
     * - `9`: represents a numeric character (0-9)
60
     * - `*`: represents an alphanumeric character (A-Z, a-z, 0-9)
61
     * - `[` and `]`: anything entered between the square brackets is considered optional user input. This is
62
     *   based on the `optionalmarker` setting in [[clientOptions]].
63
     *
64
     * Additional definitions can be set through the [[definitions]] property.
65
     */
66
    public $mask;
67
    /**
68
     * @var array custom mask definitions to use. Should be configured as `maskSymbol => settings`, where
69
     *
70
     * - `maskSymbol` is a string, containing a character to identify your mask definition and
71
     * - `settings` is an array, consisting of the following entries:
72
     *   - `validator`: string, a JS regular expression or a JS function.
73
     *   - `cardinality`: int, specifies how many characters are represented and validated for the definition.
74
     *   - `prevalidator`: array, validate the characters before the definition cardinality is reached.
75
     *   - `definitionSymbol`: string, allows shifting values from other definitions, with this `definitionSymbol`.
76
     */
77
    public $definitions;
78
    /**
79
     * @var array custom aliases to use. Should be configured as `maskAlias => settings`, where
80
     *
81
     * - `maskAlias` is a string containing a text to identify your mask alias definition (e.g. 'phone') and
82
     * - `settings` is an array containing settings for the mask symbol, exactly similar to parameters as passed in [[clientOptions]].
83
     */
84
    public $aliases;
85
    /**
86
     * @var array the JQuery plugin options for the input mask plugin.
87
     * @see https://github.com/RobinHerbots/Inputmask
88
     */
89
    public $clientOptions = [];
90
    /**
91
     * @var array the HTML attributes for the input tag.
92
     * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
93
     */
94
    public $options = ['class' => 'form-control'];
95
    /**
96
     * @var string the type of the input tag. Currently only 'text' and 'tel' are supported.
97
     * @see https://github.com/RobinHerbots/Inputmask
98
     * @since 2.0.6
99
     */
100
    public $type = 'text';
101
102
    /**
103
     * @var string the hashed variable to store the pluginOptions
104
     */
105
    protected $_hashVar;
106
107
108
    /**
109
     * Initializes the widget.
110
     *
111
     * @throws InvalidConfigException if the "mask" property is not set.
112
     */
113 1
    public function init()
114
    {
115 1
        parent::init();
116 1
        if (empty($this->mask) && empty($this->clientOptions['alias'])) {
117
            throw new InvalidConfigException("Either the 'mask' property or the 'clientOptions[\"alias\"]' property must be set.");
118
        }
119 1
    }
120
121
    /**
122
     * {@inheritdoc}
123
     */
124
    public function run()
125
    {
126
        $this->registerClientScript();
127
        echo $this->renderInputHtml($this->type);
128
    }
129
130
    /**
131
     * Generates a hashed variable to store the plugin `clientOptions`.
132
     *
133
     * Helps in reusing the variable for similar
134
     * options passed for other widgets on the same page. The following special data attribute will also be
135
     * added to the input field to allow accessing the client options via javascript:
136
     *
137
     * - 'data-plugin-inputmask' will store the hashed variable storing the plugin options.
138
     *
139
     * @param View $view the view instance
140
     * @author [Thiago Talma](https://github.com/thiagotalma)
141
     */
142
    protected function hashPluginOptions($view)
143
    {
144
        $encOptions = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
145
        $this->_hashVar = self::PLUGIN_NAME . '_' . hash('crc32', $encOptions);
146
        $this->options['data-plugin-' . self::PLUGIN_NAME] = $this->_hashVar;
147
        $view->registerJs("var {$this->_hashVar} = {$encOptions};", View::POS_HEAD);
148
    }
149
150
    /**
151
     * Initializes client options.
152
     */
153
    protected function initClientOptions()
154
    {
155
        $options = $this->clientOptions;
156
        foreach ($options as $key => $value) {
157
            if (
158
                !$value instanceof JsExpression
159
                && in_array($key, [
160
                    'oncomplete', 'onincomplete', 'oncleared', 'onKeyUp', 'onKeyDown', 'onBeforeMask',
161
                    'onBeforePaste', 'onUnMask', 'isComplete', 'determineActiveMasksetIndex',
162
                ], true)
163
            ) {
164
                $options[$key] = new JsExpression($value);
165
            }
166
        }
167
        $this->clientOptions = $options;
168
    }
169
170
    /**
171
     * Registers the needed client script and options.
172
     */
173
    public function registerClientScript()
174
    {
175
        $js = '';
176
        $view = $this->getView();
177
        $this->initClientOptions();
178
        if (!empty($this->mask)) {
179
            $this->clientOptions['mask'] = $this->mask;
180
        }
181
        $this->hashPluginOptions($view);
182
        if (is_array($this->definitions) && !empty($this->definitions)) {
183
            $js .= ucfirst(self::PLUGIN_NAME) . '.extendDefinitions(' . Json::htmlEncode($this->definitions) . ');';
184
        }
185
        if (is_array($this->aliases) && !empty($this->aliases)) {
186
            $js .= ucfirst(self::PLUGIN_NAME) . '.extendAliases(' . Json::htmlEncode($this->aliases) . ');';
187
        }
188
        $id = $this->options['id'];
189
        $js .= 'jQuery("#' . $id . '").' . self::PLUGIN_NAME . '(' . $this->_hashVar . ');';
190
        MaskedInputAsset::register($view);
191
        $view->registerJs($js);
192
    }
193
}
194