third_party/polymer/v1_0/components-chromium/paper-input/paper-input-behavior-extracted.js

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