use shared image loader
This commit is contained in:
Luke Pulverenti
parent
a08a1c37ec
commit
ad1f82dbaf
17 changed files with 570 additions and 347 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.4",
|
||||
"version": "1.1.5",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -44,14 +44,14 @@
|
|||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.4",
|
||||
"_release": "1.1.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.4",
|
||||
"commit": "8ca01ac3cafc61abd980d262875ffca0c79640fa"
|
||||
"tag": "v1.1.5",
|
||||
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.4",
|
||||
"version": "1.1.5",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
*/
|
||||
|
||||
/**
|
||||
* The label for this input. Bind this to `<label>`'s content and `hidden` property, e.g.
|
||||
* The label for this input. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* `<label>`'s content and `hidden` property, e.g.
|
||||
* `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
|
||||
*/
|
||||
label: {
|
||||
|
|
@ -40,7 +42,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
|
||||
* The value for this input. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<input is="iron-input">`'s `bindValue`
|
||||
* property, or the value property of your input that is `notify:true`.
|
||||
*/
|
||||
value: {
|
||||
|
|
@ -49,8 +53,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
|
||||
* and the input's `disabled` property.
|
||||
* Set to true to disable this input. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* both the `<paper-input-container>`'s and the input's `disabled` property.
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
|
|
@ -58,9 +63,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
|
||||
* and the input's `invalid` property.
|
||||
*
|
||||
* Returns true if the value is invalid. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to both the
|
||||
* `<paper-input-container>`'s and the input's `invalid` property.
|
||||
*
|
||||
* If `autoValidate` is true, the `invalid` attribute is managed automatically,
|
||||
* which can clobber attempts to manage it manually.
|
||||
*/
|
||||
|
|
@ -71,48 +77,55 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Set to true to prevent the user from entering invalid input. Bind this to the
|
||||
* `<input is="iron-input">`'s `preventInvalidInput` property.
|
||||
* Set to true to prevent the user from entering invalid input. If you're
|
||||
* using PaperInputBehavior to implement your own paper-input-like element,
|
||||
* bind this to `<input is="iron-input">`'s `preventInvalidInput` property.
|
||||
*/
|
||||
preventInvalidInput: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
|
||||
* `<input is="iron-input">`'s `allowedPattern` property.
|
||||
* Set this to specify the pattern allowed by `preventInvalidInput`. If
|
||||
* you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `allowedPattern`
|
||||
* property.
|
||||
*/
|
||||
allowedPattern: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The type of the input. The supported types are `text`, `number` and `password`. Bind this
|
||||
* to the `<input is="iron-input">`'s `type` property.
|
||||
* The type of the input. The supported types are `text`, `number` and `password`.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like element,
|
||||
* bind this to the `<input is="iron-input">`'s `type` property.
|
||||
*/
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The datalist of the input (if any). This should match the id of an existing `<datalist>`. Bind this
|
||||
* to the `<input is="iron-input">`'s `list` property.
|
||||
* The datalist of the input (if any). This should match the id of an existing `<datalist>`.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `list` property.
|
||||
*/
|
||||
list: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
|
||||
* `pattern` property.
|
||||
* A pattern to validate the `input` with. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<input is="iron-input">`'s `pattern` property.
|
||||
*/
|
||||
pattern: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
|
||||
* `required` property.
|
||||
* Set to true to mark the input as required. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<input is="iron-input">`'s `required` property.
|
||||
*/
|
||||
required: {
|
||||
type: Boolean,
|
||||
|
|
@ -120,8 +133,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* The error message to display when the input is invalid. Bind this to the
|
||||
* `<paper-input-error>`'s content, if using.
|
||||
* The error message to display when the input is invalid. If you're using
|
||||
* PaperInputBehavior to implement your own paper-input-like element,
|
||||
* bind this to the `<paper-input-error>`'s content, if using.
|
||||
*/
|
||||
errorMessage: {
|
||||
type: String
|
||||
|
|
@ -136,8 +150,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
|
||||
* `noLabelFloat` property.
|
||||
* Set to true to disable the floating label. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<paper-input-container>`'s `noLabelFloat` property.
|
||||
*/
|
||||
noLabelFloat: {
|
||||
type: Boolean,
|
||||
|
|
@ -145,8 +160,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Set to true to always float the label. Bind this to the `<paper-input-container>`'s
|
||||
* `alwaysFloatLabel` property.
|
||||
* Set to true to always float the label. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<paper-input-container>`'s `alwaysFloatLabel` property.
|
||||
*/
|
||||
alwaysFloatLabel: {
|
||||
type: Boolean,
|
||||
|
|
@ -154,8 +170,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
|
||||
* `autoValidate` property.
|
||||
* Set to true to auto-validate the input value. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<paper-input-container>`'s `autoValidate` property.
|
||||
*/
|
||||
autoValidate: {
|
||||
type: Boolean,
|
||||
|
|
@ -163,8 +180,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
|
||||
* property.
|
||||
* Name of the validator to use. If you're using PaperInputBehavior to
|
||||
* implement your own paper-input-like element, bind this to
|
||||
* the `<input is="iron-input">`'s `validator` property.
|
||||
*/
|
||||
validator: {
|
||||
type: String
|
||||
|
|
@ -173,7 +191,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
// HTMLInputElement attributes for binding if needed
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autocomplete` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `autocomplete` property.
|
||||
*/
|
||||
autocomplete: {
|
||||
type: String,
|
||||
|
|
@ -181,29 +200,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autofocus` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `autofocus` property.
|
||||
*/
|
||||
autofocus: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `inputmode` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `inputmode` property.
|
||||
*/
|
||||
inputmode: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `minlength` property.
|
||||
* The minimum length of the input value.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `minlength` property.
|
||||
*/
|
||||
minlength: {
|
||||
type: Number
|
||||
},
|
||||
|
||||
/**
|
||||
* The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
|
||||
* `maxlength` property.
|
||||
* The maximum length of the input value.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `maxlength` property.
|
||||
*/
|
||||
maxlength: {
|
||||
type: Number
|
||||
|
|
@ -211,7 +235,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
/**
|
||||
* The minimum (numeric or date-time) input value.
|
||||
* Bind this to the `<input is="iron-input">`'s `min` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `min` property.
|
||||
*/
|
||||
min: {
|
||||
type: String
|
||||
|
|
@ -220,7 +245,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
/**
|
||||
* The maximum (numeric or date-time) input value.
|
||||
* Can be a String (e.g. `"2000-1-1"`) or a Number (e.g. `2`).
|
||||
* Bind this to the `<input is="iron-input">`'s `max` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `max` property.
|
||||
*/
|
||||
max: {
|
||||
type: String
|
||||
|
|
@ -228,14 +254,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
/**
|
||||
* Limits the numeric or date-time increments.
|
||||
* Bind this to the `<input is="iron-input">`'s `step` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `step` property.
|
||||
*/
|
||||
step: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `name` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `name` property.
|
||||
*/
|
||||
name: {
|
||||
type: String
|
||||
|
|
@ -251,7 +279,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `readonly` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `readonly` property.
|
||||
*/
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
|
|
@ -259,7 +288,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `size` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `size` property.
|
||||
*/
|
||||
size: {
|
||||
type: Number
|
||||
|
|
@ -268,7 +298,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
// Nonstandard attributes for binding if needed
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autocapitalize` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `autocapitalize` property.
|
||||
*/
|
||||
autocapitalize: {
|
||||
type: String,
|
||||
|
|
@ -276,7 +307,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autocorrect` property.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `autocorrect` property.
|
||||
*/
|
||||
autocorrect: {
|
||||
type: String,
|
||||
|
|
@ -284,28 +316,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autosave` property, used with type=search.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `autosave` property,
|
||||
* used with type=search.
|
||||
*/
|
||||
autosave: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `results` property, used with type=search.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `results` property,
|
||||
* used with type=search.
|
||||
*/
|
||||
results: {
|
||||
type: Number
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `accept` property, used with type=file.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the `<input is="iron-input">`'s `accept` property,
|
||||
* used with type=file.
|
||||
*/
|
||||
accept: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `multiple` property, used with type=file.
|
||||
* If you're using PaperInputBehavior to implement your own paper-input-like
|
||||
* element, bind this to the`<input is="iron-input">`'s `multiple` property,
|
||||
* used with type=file.
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean
|
||||
|
|
@ -354,8 +394,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
return this.inputElement;
|
||||
},
|
||||
|
||||
registered: function() {
|
||||
// These types have some default placeholder text; overlapping
|
||||
// the label on top of it looks terrible. Auto-float the label in this case.
|
||||
this._typesThatHaveText = ["date", "datetime", "datetime-local", "month",
|
||||
"time", "week", "file"];
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._updateAriaLabelledBy();
|
||||
|
||||
if (this.inputElement &&
|
||||
this._typesThatHaveText.indexOf(this.inputElement.type) !== -1) {
|
||||
this.alwaysFloatLabel = true;
|
||||
}
|
||||
},
|
||||
|
||||
_appendStringWithSpace: function(str, more) {
|
||||
|
|
|
|||
|
|
@ -39,9 +39,10 @@ for `suffix`).
|
|||
</paper-input>
|
||||
|
||||
A `paper-input` can use the native `type=search` or `type=file` features.
|
||||
However, since we can't control the native styling of the input, in these cases
|
||||
it's recommended to use a placeholder text, or `always-float-label`,
|
||||
as to not overlap the native UI (search icon, file button, etc.).
|
||||
However, since we can't control the native styling of the input (search icon,
|
||||
file button, date placeholder, etc.), in these cases the label will be
|
||||
automatically floated. The `placeholder` attribute can still be used for
|
||||
additional informational text.
|
||||
|
||||
<paper-input label="search!" type="search"
|
||||
placeholder="search for cats" autosave="test" results="5">
|
||||
|
|
@ -100,6 +101,7 @@ style this element.
|
|||
aria-labelledby$="[[_ariaLabelledBy]]"
|
||||
aria-describedby$="[[_ariaDescribedBy]]"
|
||||
disabled$="[[disabled]]"
|
||||
title$="[[title]]"
|
||||
bind-value="{{value}}"
|
||||
invalid="{{invalid}}"
|
||||
prevent-invalid-input="[[preventInvalidInput]]"
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
|
||||
<test-fixture id="required-char-counter">
|
||||
<template>
|
||||
<paper-input auto-validate char-counter required error-message="error"></paper-input>
|
||||
|
|
@ -95,6 +94,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="date">
|
||||
<template>
|
||||
<paper-input label="foo" type="date"></paper-input>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<letters-only></letters-only>
|
||||
|
||||
<test-fixture id="validator">
|
||||
|
|
@ -121,6 +126,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.ok(floatingLabel);
|
||||
});
|
||||
|
||||
test('special types autofloat the label', function() {
|
||||
var input = fixture('date');
|
||||
// Browsers that don't support special <input> types like `date` fallback
|
||||
// to `text`, so make sure to only test if type is still preserved after
|
||||
// the element is attached.
|
||||
if (input.inputElement.type === "date") {
|
||||
assert.equal(input.alwaysFloatLabel, true);
|
||||
var floatingLabel = Polymer.dom(Polymer.dom(input.root).querySelector('paper-input-container').root).querySelector('.label-is-floating');
|
||||
assert.ok(floatingLabel);
|
||||
}
|
||||
});
|
||||
|
||||
test('always-float-label attribute works without placeholder', function() {
|
||||
var input = fixture('always-float-label');
|
||||
var container = Polymer.dom(input.root).querySelector('paper-input-container');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue