third_party/polymer/v1_0/components/paper-input/paper-input-behavior.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  12
  13 <script>
  14
  15   /**
  16    * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
  17    * behavior is implemented by `<paper-input>`. It exposes a number of properties from
  18    * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
  19    * template.
  20    *
  21    * The input element can be accessed by the `inputElement` property if you need to access
  22    * properties or methods that are not exposed.
  23    * @polymerBehavior Polymer.PaperInputBehavior
  24    */
  25   Polymer.PaperInputBehaviorImpl = {
  26
  27     properties: {
  28
  29       /**
  30        * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
  31        */
  32       label: {
  33         type: String
  34       },
  35
  36       /**
  37        * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
  38        * property, or the value property of your input that is `notify:true`.
  39        */
  40       value: {
  41         notify: true,
  42         type: String
  43       },
  44
  45       /**
  46        * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
  47        * and the input's `disabled` property.
  48        */
  49       disabled: {
  50         type: Boolean,
  51         value: false
  52       },
  53
  54       /**
  55        * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
  56        * and the input's `invalid` property.
  57        */
  58       invalid: {
  59         type: Boolean,
  60         value: false
  61       },
  62
  63       /**
  64        * Set to true to prevent the user from entering invalid input. Bind this to the
  65        * `<input is="iron-input">`'s `preventInvalidInput` property.
  66        */
  67       preventInvalidInput: {
  68         type: Boolean
  69       },
  70
  71       /**
  72        * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
  73        * `<input is="iron-input">`'s `allowedPattern` property.
  74        */
  75       allowedPattern: {
  76         type: String
  77       },
  78
  79       /**
  80        * The type of the input. The supported types are `text`, `number` and `password`. Bind this
  81        * to the `<input is="iron-input">`'s `type` property.
  82        */
  83       type: {
  84         type: String
  85       },
  86
  87       /**
  88        * The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
  89        * to the `<input is="iron-input">`'s `list` property.
  90        */
  91       list: {
  92         type: String
  93       },
  94
  95       /**
  96        * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
  97        * `pattern` property.
  98        */
  99       pattern: {
 100         type: String
 101       },
 102
 103       /**
 104        * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
 105        * `required` property.
 106        */
 107       required: {
 108         type: Boolean,
 109         value: false
 110       },
 111
 112       /**
 113        * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
 114        * `maxlength` property.
 115        */
 116       maxlength: {
 117         type: Number
 118       },
 119
 120       /**
 121        * The error message to display when the input is invalid. Bind this to the
 122        * `<paper-input-error>`'s content, if using.
 123        */
 124       errorMessage: {
 125         type: String
 126       },
 127
 128       /**
 129        * Set to true to show a character counter.
 130        */
 131       charCounter: {
 132         type: Boolean,
 133         value: false
 134       },
 135
 136       /**
 137        * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
 138        * `noLabelFloat` property.
 139        */
 140       noLabelFloat: {
 141         type: Boolean,
 142         value: false
 143       },
 144
 145       /**
 146        * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
 147        * `alwaysFloatLabel` property.
 148        */
 149       alwaysFloatLabel: {
 150         type: Boolean,
 151         value: false
 152       },
 153
 154       /**
 155        * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
 156        * `autoValidate` property.
 157        */
 158       autoValidate: {
 159         type: Boolean,
 160         value: false
 161       },
 162
 163       /**
 164        * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
 165        * property.
 166        */
 167       validator: {
 168         type: String
 169       },
 170
 171       // HTMLInputElement attributes for binding if needed
 172
 173       /**
 174        * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
 175        */
 176       autocomplete: {
 177         type: String,
 178         value: 'off'
 179       },
 180
 181       /**
 182        * Bind this to the `<input is="iron-input">`'s `autofocus` property.
 183        */
 184       autofocus: {
 185         type: Boolean
 186       },
 187
 188       /**
 189        * Bind this to the `<input is="iron-input">`'s `inputmode` property.
 190        */
 191       inputmode: {
 192         type: String
 193       },
 194
 195       /**
 196        * Bind this to the `<input is="iron-input">`'s `minlength` property.
 197        */
 198       minlength: {
 199         type: Number
 200       },
 201
 202       /**
 203        * Bind this to the `<input is="iron-input">`'s `name` property.
 204        */
 205       name: {
 206         type: String
 207       },
 208
 209       /**
 210        * A placeholder string in addition to the label. If this is set, the label will always float.
 211        */
 212       placeholder: {
 213         type: String,
 214         // need to set a default so _computeAlwaysFloatLabel is run
 215         value: ''
 216       },
 217
 218       /**
 219        * Bind this to the `<input is="iron-input">`'s `readonly` property.
 220        */
 221       readonly: {
 222         type: Boolean,
 223         value: false
 224       },
 225
 226       /**
 227        * Bind this to the `<input is="iron-input">`'s `size` property.
 228        */
 229       size: {
 230         type: Number
 231       },
 232
 233       // Nonstandard attributes for binding if needed
 234
 235       /**
 236        * Bind this to the `<input is="iron-input">`'s `autocapitalize` property.
 237        */
 238       autocapitalize: {
 239         type: String,
 240         value: 'none'
 241       },
 242
 243       /**
 244        * Bind this to the `<input is="iron-input">`'s `autocorrect` property.
 245        */
 246       autocorrect: {
 247         type: String,
 248         value: 'off'
 249       },
 250
 251       _ariaDescribedBy: {
 252         type: String,
 253         value: ''
 254       }
 255
 256     },
 257
 258     listeners: {
 259       'addon-attached': '_onAddonAttached'
 260     },
 261
 262     observers: [
 263       '_focusedControlStateChanged(focused)'
 264     ],
 265
 266     /**
 267      * Returns a reference to the input element.
 268      */
 269     get inputElement() {
 270       return this.$.input;
 271     },
 272
 273     attached: function() {
 274       this._updateAriaLabelledBy();
 275     },
 276
 277     _appendStringWithSpace: function(str, more) {
 278       if (str) {
 279         str = str + ' ' + more;
 280       } else {
 281         str = more;
 282       }
 283       return str;
 284     },
 285
 286     _onAddonAttached: function(event) {
 287       var target = event.path ? event.path[0] : event.target;
 288       if (target.id) {
 289         this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
 290       } else {
 291         var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
 292         target.id = id;
 293         this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
 294       }
 295     },
 296
 297     /**
 298      * Validates the input element and sets an error style if needed.
 299      */
 300      validate: function() {
 301        return this.inputElement.validate();
 302      },
 303
 304     /**
 305      * Restores the cursor to its original position after updating the value.
 306      * @param {string} newValue The value that should be saved.
 307      */
 308     updateValueAndPreserveCaret: function(newValue) {
 309       // Not all elements might have selection, and even if they have the
 310       // right properties, accessing them might throw an exception (like for
 311       // <input type=number>)
 312       try {
 313         var start = this.inputElement.selectionStart;
 314         this.value = newValue;
 315
 316         // The cursor automatically jumps to the end after re-setting the value,
 317         // so restore it to its original position.
 318         this.inputElement.selectionStart = start;
 319         this.inputElement.selectionEnd = start;
 320       } catch (e) {
 321         // Just set the value and give up on the caret.
 322         this.value = newValue;
 323       }
 324     },
 325
 326     _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
 327       return placeholder || alwaysFloatLabel;
 328     },
 329
 330     _focusedControlStateChanged: function(focused) {
 331       // IronControlState stops the focus and blur events in order to redispatch them on the host
 332       // element, but paper-input-container listens to those events. Since there are more
 333       // pending work on focus/blur in IronControlState, I'm putting in this hack to get the
 334       // input focus state working for now.
 335       if (!this.$.container) {
 336         this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
 337         if (!this.$.container) {
 338           return;
 339         }
 340       }
 341       if (focused) {
 342         this.$.container._onFocus();
 343       } else {
 344         this.$.container._onBlur();
 345       }
 346     },
 347
 348     _updateAriaLabelledBy: function() {
 349       var label = Polymer.dom(this.root).querySelector('label');
 350       if (!label) {
 351         this._ariaLabelledBy = '';
 352         return;
 353       }
 354       var labelledBy;
 355       if (label.id) {
 356         labelledBy = label.id;
 357       } else {
 358         labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
 359         label.id = labelledBy;
 360       }
 361       this._ariaLabelledBy = labelledBy;
 362     }
 363
 364   };
 365
 366   /** @polymerBehavior */
 367   Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
 368
 369 </script>