mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
feb5e91986
commit
4da1e38cc5
26 changed files with 320 additions and 125 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-autogrow-textarea",
|
"name": "iron-autogrow-textarea",
|
||||||
"version": "1.0.11",
|
"version": "1.0.12",
|
||||||
"description": "A textarea element that automatically grows with input",
|
"description": "A textarea element that automatically grows with input",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -36,11 +36,11 @@
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.11",
|
"_release": "1.0.12",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.11",
|
"tag": "v1.0.12",
|
||||||
"commit": "8fe629c9fecb14b76319ab4fbeef7f0237d93004"
|
"commit": "86f8fd61b412bcea6bc7b8feaee9b24bc2ad48ea"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
|
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-autogrow-textarea",
|
"name": "iron-autogrow-textarea",
|
||||||
"version": "1.0.11",
|
"version": "1.0.12",
|
||||||
"description": "A textarea element that automatically grows with input",
|
"description": "A textarea element that automatically grows with input",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
|
@ -23,9 +23,6 @@ Example:
|
||||||
|
|
||||||
<iron-autogrow-textarea></iron-autogrow-textarea>
|
<iron-autogrow-textarea></iron-autogrow-textarea>
|
||||||
|
|
||||||
Because the `textarea`'s `value` property is not observable, you should use
|
|
||||||
this element's `bind-value` instead for imperative updates.
|
|
||||||
|
|
||||||
### Styling
|
### Styling
|
||||||
|
|
||||||
The following custom properties and mixins are available for styling:
|
The following custom properties and mixins are available for styling:
|
||||||
|
@ -108,6 +105,7 @@ Custom property | Description | Default
|
||||||
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
|
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
|
||||||
<div class="textarea-container fit">
|
<div class="textarea-container fit">
|
||||||
<textarea id="textarea"
|
<textarea id="textarea"
|
||||||
|
name$="[[name]]"
|
||||||
autocomplete$="[[autocomplete]]"
|
autocomplete$="[[autocomplete]]"
|
||||||
autofocus$="[[autofocus]]"
|
autofocus$="[[autofocus]]"
|
||||||
inputmode$="[[inputmode]]"
|
inputmode$="[[inputmode]]"
|
||||||
|
@ -137,6 +135,8 @@ Custom property | Description | Default
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Use this property instead of `value` for two-way data binding.
|
* Use this property instead of `value` for two-way data binding.
|
||||||
|
* This property will be deprecated in the future. Use `value` instead.
|
||||||
|
* @type {string|number}
|
||||||
*/
|
*/
|
||||||
bindValue: {
|
bindValue: {
|
||||||
observer: '_bindValueChanged',
|
observer: '_bindValueChanged',
|
||||||
|
@ -193,23 +193,6 @@ Custom property | Description | Default
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Bound to the textarea's `name` attribute.
|
|
||||||
*/
|
|
||||||
name: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The value for this input, same as `bindValue`
|
|
||||||
*/
|
|
||||||
value: {
|
|
||||||
notify: true,
|
|
||||||
type: String,
|
|
||||||
value: '',
|
|
||||||
computed: '_computeValue(bindValue)'
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bound to the textarea's `placeholder` attribute.
|
* Bound to the textarea's `placeholder` attribute.
|
||||||
*/
|
*/
|
||||||
|
@ -244,6 +227,10 @@ Custom property | Description | Default
|
||||||
'input': '_onInput'
|
'input': '_onInput'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
observers: [
|
||||||
|
'_onValueChanged(value)'
|
||||||
|
],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the underlying textarea.
|
* Returns the underlying textarea.
|
||||||
* @type HTMLTextAreaElement
|
* @type HTMLTextAreaElement
|
||||||
|
@ -281,10 +268,6 @@ Custom property | Description | Default
|
||||||
set selectionEnd(value) {
|
set selectionEnd(value) {
|
||||||
this.$.textarea.selectionEnd = value;
|
this.$.textarea.selectionEnd = value;
|
||||||
},
|
},
|
||||||
|
|
||||||
ready: function() {
|
|
||||||
this.bindValue = this.value;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns true if `value` is valid. The validator provided in `validator`
|
* Returns true if `value` is valid. The validator provided in `validator`
|
||||||
|
@ -324,6 +307,7 @@ Custom property | Description | Default
|
||||||
textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.value = this.bindValue;
|
||||||
this.$.mirror.innerHTML = this._valueForMirror();
|
this.$.mirror.innerHTML = this._valueForMirror();
|
||||||
// manually notify because we don't want to notify until after setting value
|
// manually notify because we don't want to notify until after setting value
|
||||||
this.fire('bind-value-changed', {value: this.bindValue});
|
this.fire('bind-value-changed', {value: this.bindValue});
|
||||||
|
@ -362,8 +346,8 @@ Custom property | Description | Default
|
||||||
this.$.mirror.innerHTML = this._constrain(this.tokens);
|
this.$.mirror.innerHTML = this._constrain(this.tokens);
|
||||||
},
|
},
|
||||||
|
|
||||||
_computeValue: function() {
|
_onValueChanged: function() {
|
||||||
return this.bindValue;
|
this.bindValue = this.value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -38,6 +38,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-fixture id="has-value">
|
||||||
|
<template>
|
||||||
|
<iron-autogrow-textarea value="foobar"></iron-autogrow-textarea>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
<test-fixture id="rows">
|
<test-fixture id="rows">
|
||||||
<template>
|
<template>
|
||||||
<iron-autogrow-textarea rows="3"></iron-autogrow-textarea>
|
<iron-autogrow-textarea rows="3"></iron-autogrow-textarea>
|
||||||
|
@ -59,6 +65,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
test('can set an initial bindValue', function() {
|
test('can set an initial bindValue', function() {
|
||||||
var autogrow = fixture('has-bindValue');
|
var autogrow = fixture('has-bindValue');
|
||||||
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
|
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
|
||||||
|
assert.equal(autogrow.value, 'foobar', 'value equals to initial bindValue');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('can set an initial value', function() {
|
||||||
|
var autogrow = fixture('has-value');
|
||||||
|
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
|
||||||
|
assert.equal(autogrow.bindValue, 'foobar', 'textarea bindValue equals to initial value');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('can update the value', function() {
|
||||||
|
var autogrow = fixture('has-bindValue');
|
||||||
|
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
|
||||||
|
autogrow.value = 'batman';
|
||||||
|
assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated');
|
||||||
|
assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated');
|
||||||
|
assert.equal(autogrow.value, 'batman', 'value is updated');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('can update the bindValue', function() {
|
||||||
|
var autogrow = fixture('has-bindValue');
|
||||||
|
assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
|
||||||
|
autogrow.bindValue = 'batman';
|
||||||
|
assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated');
|
||||||
|
assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated');
|
||||||
|
assert.equal(autogrow.value, 'batman', 'value is updated');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('can set an initial number of rows', function() {
|
test('can set an initial number of rows', function() {
|
||||||
|
|
|
@ -29,14 +29,14 @@
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/polymerelements/iron-behaviors",
|
"homepage": "https://github.com/PolymerElements/iron-behaviors",
|
||||||
"_release": "1.0.13",
|
"_release": "1.0.13",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.13",
|
"tag": "v1.0.13",
|
||||||
"commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
|
"commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-behaviors.git",
|
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-behaviors"
|
"_originalSource": "PolymerElements/iron-behaviors"
|
||||||
}
|
}
|
|
@ -31,14 +31,14 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/polymerelements/iron-icon",
|
"homepage": "https://github.com/PolymerElements/iron-icon",
|
||||||
"_release": "1.0.7",
|
"_release": "1.0.7",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.7",
|
"tag": "v1.0.7",
|
||||||
"commit": "6f4d152dc3998a6cc12a5a585a654f893dc99381"
|
"commit": "6f4d152dc3998a6cc12a5a585a654f893dc99381"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-icon.git",
|
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-icon"
|
"_originalSource": "PolymerElements/iron-icon"
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-menu-behavior",
|
"name": "iron-menu-behavior",
|
||||||
"version": "1.1.2",
|
"version": "1.1.3",
|
||||||
"description": "Provides accessible menu behavior",
|
"description": "Provides accessible menu behavior",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
@ -34,11 +34,11 @@
|
||||||
"web-component-tester": "^4.0.0",
|
"web-component-tester": "^4.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"_release": "1.1.2",
|
"_release": "1.1.3",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.1.2",
|
"tag": "v1.1.3",
|
||||||
"commit": "8b09b6187b748499a0b8e9ddc789391d26e1d5d1"
|
"commit": "9372abaa7925669fd1a34e9e73c973ed70a05f2f"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
|
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-menu-behavior",
|
"name": "iron-menu-behavior",
|
||||||
"version": "1.1.2",
|
"version": "1.1.3",
|
||||||
"description": "Provides accessible menu behavior",
|
"description": "Provides accessible menu behavior",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
|
@ -64,10 +64,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<h3>Simple menu</h3>
|
<h3>Simple menu</h3>
|
||||||
<div class="horizontal-section">
|
<div class="horizontal-section">
|
||||||
<simple-menu>
|
<simple-menu>
|
||||||
<a href="javascript:void(0)">Item 0</a>
|
<a href="javascript:void(0)" role="menuitem">Item 0</a>
|
||||||
<a href="javascript:void(0)">Item 1</a>
|
<a href="javascript:void(0)" role="menuitem">Item 1</a>
|
||||||
<a href="javascript:void(0)" disabled>Item 2</a>
|
<a href="javascript:void(0)" role="menuitem" disabled>Item 2</a>
|
||||||
<a href="javascript:void(0)">Item 3</a>
|
<a href="javascript:void(0)" role="menuitem">Item 3</a>
|
||||||
</simple-menu>
|
</simple-menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -76,10 +76,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<h3>Multi-select menu</h3>
|
<h3>Multi-select menu</h3>
|
||||||
<div class="horizontal-section">
|
<div class="horizontal-section">
|
||||||
<simple-menu multi>
|
<simple-menu multi>
|
||||||
<a href="javascript:void(0)">Item 0</a>
|
<a href="javascript:void(0)" role="menuitem">Item 0</a>
|
||||||
<a href="javascript:void(0)">Item 1</a>
|
<a href="javascript:void(0)" role="menuitem">Item 1</a>
|
||||||
<a href="javascript:void(0)">Item 2</a>
|
<a href="javascript:void(0)" role="menuitem">Item 2</a>
|
||||||
<a href="javascript:void(0)">Item 3</a>
|
<a href="javascript:void(0)" role="menuitem">Item 3</a>
|
||||||
</simple-menu>
|
</simple-menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,10 +89,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<h3>Simple menubar</h3>
|
<h3>Simple menubar</h3>
|
||||||
<div class="horizontal-section">
|
<div class="horizontal-section">
|
||||||
<simple-menubar>
|
<simple-menubar>
|
||||||
<a href="javascript:void(0)">Item 0</a>
|
<a href="javascript:void(0)" role="menuitem">Item 0</a>
|
||||||
<a href="javascript:void(0)">Item 1</a>
|
<a href="javascript:void(0)" role="menuitem">Item 1</a>
|
||||||
<a href="javascript:void(0)" disabled>Item 2</a>
|
<a href="javascript:void(0)" role="menuitem" disabled>Item 2</a>
|
||||||
<a href="javascript:void(0)">Item 3</a>
|
<a href="javascript:void(0)" role="menuitem">Item 3</a>
|
||||||
</simple-menubar>
|
</simple-menubar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -100,10 +100,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<h3>Multi-select menubar</h3>
|
<h3>Multi-select menubar</h3>
|
||||||
<div class="horizontal-section">
|
<div class="horizontal-section">
|
||||||
<simple-menubar multi>
|
<simple-menubar multi>
|
||||||
<a href="javascript:void(0)">Item 0</a>
|
<a href="javascript:void(0)" role="menuitem">Item 0</a>
|
||||||
<a href="javascript:void(0)">Item 1</a>
|
<a href="javascript:void(0)" role="menuitem">Item 1</a>
|
||||||
<a href="javascript:void(0)">Item 2</a>
|
<a href="javascript:void(0)" role="menuitem">Item 2</a>
|
||||||
<a href="javascript:void(0)">Item 3</a>
|
<a href="javascript:void(0)" role="menuitem">Item 3</a>
|
||||||
</simple-menubar>
|
</simple-menubar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-overlay-behavior",
|
"name": "iron-overlay-behavior",
|
||||||
"version": "1.4.0",
|
"version": "1.4.1",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "Provides a behavior for making an element an overlay",
|
"description": "Provides a behavior for making an element an overlay",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
@ -35,11 +35,11 @@
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||||
"_release": "1.4.0",
|
"_release": "1.4.1",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.4.0",
|
"tag": "v1.4.1",
|
||||||
"commit": "9731850e81b004723f0c1878a85479f7aa9cfda1"
|
"commit": "4aefb7bc41aecef69022d6435133c430fc52d3ba"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-overlay-behavior",
|
"name": "iron-overlay-behavior",
|
||||||
"version": "1.4.0",
|
"version": "1.4.1",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "Provides a behavior for making an element an overlay",
|
"description": "Provides a behavior for making an element an overlay",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
|
@ -61,6 +61,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</template>
|
</template>
|
||||||
</demo-snippet>
|
</demo-snippet>
|
||||||
|
|
||||||
|
<h3>Use <code>restore-focus-on-close</code> to return the focus to the element that opened the overlay when it gets closed.</h3>
|
||||||
|
<demo-snippet>
|
||||||
|
<template>
|
||||||
|
<button onclick="returnFocus.open()">Overlay that restores focus</button>
|
||||||
|
<simple-overlay id="returnFocus" restore-focus-on-close>
|
||||||
|
<p>Hello world!</p>
|
||||||
|
<button onclick="returnFocus.close()">Close</button>
|
||||||
|
</simple-overlay>
|
||||||
|
</template>
|
||||||
|
</demo-snippet>
|
||||||
|
|
||||||
<h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
|
<h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
|
||||||
<demo-snippet>
|
<demo-snippet>
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -128,6 +128,14 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
value: document
|
value: document
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to true to enable restoring of focus when overlay is closed.
|
||||||
|
*/
|
||||||
|
restoreFocusOnClose: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
|
||||||
_manager: {
|
_manager: {
|
||||||
type: Object,
|
type: Object,
|
||||||
value: Polymer.IronOverlayManager
|
value: Polymer.IronOverlayManager
|
||||||
|
@ -179,7 +187,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
* @type {Node}
|
* @type {Node}
|
||||||
*/
|
*/
|
||||||
get _focusNode() {
|
get _focusNode() {
|
||||||
return this._focusedChild || Polymer.dom(this).querySelector('[autofocus]') || this.__firstFocusableNode || this;
|
return this._focusedChild || Polymer.dom(this).querySelector('[autofocus]') || this;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -235,7 +243,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
},
|
},
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
// with-backdrop need tabindex to be set in order to trap the focus.
|
// with-backdrop needs tabindex to be set in order to trap the focus.
|
||||||
// If it is not set, IronOverlayBehavior will set it, and remove it if with-backdrop = false.
|
// If it is not set, IronOverlayBehavior will set it, and remove it if with-backdrop = false.
|
||||||
this.__shouldRemoveTabIndex = false;
|
this.__shouldRemoveTabIndex = false;
|
||||||
// Used for wrapping the focus on TAB / Shift+TAB.
|
// Used for wrapping the focus on TAB / Shift+TAB.
|
||||||
|
@ -245,7 +253,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
|
|
||||||
attached: function() {
|
attached: function() {
|
||||||
// Call _openedChanged here so that position can be computed correctly.
|
// Call _openedChanged here so that position can be computed correctly.
|
||||||
if (this._callOpenedWhenReady) {
|
if (this.opened) {
|
||||||
this._openedChanged();
|
this._openedChanged();
|
||||||
}
|
}
|
||||||
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
|
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
|
||||||
|
@ -315,7 +323,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
|
|
||||||
// wait to call after ready only if we're initially open
|
// wait to call after ready only if we're initially open
|
||||||
if (!this._overlaySetup) {
|
if (!this._overlaySetup) {
|
||||||
this._callOpenedWhenReady = this.opened;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -552,28 +559,29 @@ context. You should place this element as a child of `<body>` whenever possible.
|
||||||
this._focusedChild = nodeToSet;
|
this._focusedChild = nodeToSet;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Fired after the `iron-overlay` opens.
|
|
||||||
* @event iron-overlay-opened
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fired when the `iron-overlay` is canceled, but before it is closed.
|
|
||||||
* Cancel the event to prevent the `iron-overlay` from closing.
|
|
||||||
* @event iron-overlay-canceled
|
|
||||||
* @param {?Event} event The event in case the user pressed ESC or clicked outside the overlay
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fired after the `iron-overlay` closes.
|
|
||||||
* @event iron-overlay-closed
|
|
||||||
* @param {{canceled: (boolean|undefined)}} set to the `closingReason` attribute
|
|
||||||
*/
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @polymerBehavior */
|
/** @polymerBehavior */
|
||||||
Polymer.IronOverlayBehavior = [Polymer.IronA11yKeysBehavior, Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
|
Polymer.IronOverlayBehavior = [Polymer.IronA11yKeysBehavior, Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired after the `iron-overlay` opens.
|
||||||
|
* @event iron-overlay-opened
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired when the `iron-overlay` is canceled, but before it is closed.
|
||||||
|
* Cancel the event to prevent the `iron-overlay` from closing.
|
||||||
|
* @event iron-overlay-canceled
|
||||||
|
* @param {Event} event The closing of the `iron-overlay` can be prevented
|
||||||
|
* by calling `event.preventDefault()`. The `event.detail` is the original event that originated
|
||||||
|
* the canceling (e.g. ESC keyboard event or click event outside the `iron-overlay`).
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired after the `iron-overlay` closes.
|
||||||
|
* @event iron-overlay-closed
|
||||||
|
* @param {{canceled: (boolean|undefined)}} closingReason Contains `canceled` (whether the overlay was canceled).
|
||||||
|
*/
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -18,6 +18,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
*/
|
*/
|
||||||
Polymer.IronOverlayManagerClass = function() {
|
Polymer.IronOverlayManagerClass = function() {
|
||||||
this._overlays = [];
|
this._overlays = [];
|
||||||
|
// Used to keep track of the last focused node before an overlay gets opened.
|
||||||
|
this._lastFocusedNodes = [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* iframes have a default z-index of 100, so this default should be at least
|
* iframes have a default z-index of 100, so this default should be at least
|
||||||
* that.
|
* that.
|
||||||
|
@ -36,7 +39,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
return this._backdropElement;
|
return this._backdropElement;
|
||||||
}.bind(this)
|
}.bind(this)
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
/**
|
||||||
|
* The deepest active element.
|
||||||
|
* returns {?Node} element the active element
|
||||||
|
*/
|
||||||
|
this.deepActiveElement = null;
|
||||||
|
Object.defineProperty(this, 'deepActiveElement', {
|
||||||
|
get: function() {
|
||||||
|
var active = document.activeElement;
|
||||||
|
// document.activeElement can be null
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
|
||||||
|
while (active && active.root && Polymer.dom(active.root).activeElement) {
|
||||||
|
active = Polymer.dom(active.root).activeElement;
|
||||||
|
}
|
||||||
|
return active;
|
||||||
|
}.bind(this)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If a node is contained in an overlay.
|
||||||
|
* @private
|
||||||
|
* @param {Node} node
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
Polymer.IronOverlayManagerClass.prototype._isChildOfOverlay = function(node) {
|
||||||
|
while (node && node !== document.body) {
|
||||||
|
// Use logical parentNode, or native ShadowRoot host.
|
||||||
|
node = Polymer.dom(node).parentNode || node.host;
|
||||||
|
// Check if it is an overlay.
|
||||||
|
if (node && node.behaviors && node.behaviors.indexOf(Polymer.IronOverlayBehaviorImpl) !== -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
Polymer.IronOverlayManagerClass.prototype._applyOverlayZ = function(overlay, aboveZ) {
|
Polymer.IronOverlayManagerClass.prototype._applyOverlayZ = function(overlay, aboveZ) {
|
||||||
this._setZ(overlay, aboveZ + 2);
|
this._setZ(overlay, aboveZ + 2);
|
||||||
|
@ -56,6 +94,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
if (newZ <= minimumZ) {
|
if (newZ <= minimumZ) {
|
||||||
this._applyOverlayZ(overlay, minimumZ);
|
this._applyOverlayZ(overlay, minimumZ);
|
||||||
}
|
}
|
||||||
|
var element = this.deepActiveElement;
|
||||||
|
// If already in other overlay, don't reset focus there.
|
||||||
|
if (this._isChildOfOverlay(element)) {
|
||||||
|
element = null;
|
||||||
|
}
|
||||||
|
this._lastFocusedNodes.push(element);
|
||||||
};
|
};
|
||||||
|
|
||||||
Polymer.IronOverlayManagerClass.prototype.removeOverlay = function(overlay) {
|
Polymer.IronOverlayManagerClass.prototype.removeOverlay = function(overlay) {
|
||||||
|
@ -63,6 +107,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
if (i >= 0) {
|
if (i >= 0) {
|
||||||
this._overlays.splice(i, 1);
|
this._overlays.splice(i, 1);
|
||||||
this._setZ(overlay, '');
|
this._setZ(overlay, '');
|
||||||
|
|
||||||
|
var node = this._lastFocusedNodes[i];
|
||||||
|
// Focus only if still contained in document.body
|
||||||
|
if (overlay.restoreFocusOnClose && node && Polymer.dom(document.body).deepContains(node)) {
|
||||||
|
node.focus();
|
||||||
|
}
|
||||||
|
this._lastFocusedNodes.splice(i, 1);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
||||||
<link rel="import" href="test-overlay.html">
|
<link rel="import" href="test-overlay.html">
|
||||||
<link rel="import" href="test-overlay2.html">
|
<link rel="import" href="test-overlay2.html">
|
||||||
|
<link rel="import" href="test-buttons.html">
|
||||||
|
|
||||||
<style is="custom-style">
|
<style is="custom-style">
|
||||||
iron-overlay-backdrop {
|
iron-overlay-backdrop {
|
||||||
|
@ -112,6 +113,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-buttons id="buttons"></test-buttons>
|
||||||
|
<input id="focusInput" placeholder="focus input">
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function runAfterOpen(overlay, callback) {
|
function runAfterOpen(overlay, callback) {
|
||||||
overlay.addEventListener('iron-overlay-opened', function() {
|
overlay.addEventListener('iron-overlay-opened', function() {
|
||||||
|
@ -453,13 +457,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6'));
|
assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6'));
|
||||||
});
|
});
|
||||||
|
|
||||||
test('first focusable is focused if no [autofocus] node is present', function(done) {
|
|
||||||
runAfterOpen(overlay, function() {
|
|
||||||
assert.equal(Polymer.dom(overlay).querySelector('.focusable1'), document.activeElement, 'focusable1 is focused');
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('with-backdrop: TAB & Shift+TAB wrap focus', function(done) {
|
test('with-backdrop: TAB & Shift+TAB wrap focus', function(done) {
|
||||||
overlay.withBackdrop = true;
|
overlay.withBackdrop = true;
|
||||||
var focusableNodes = overlay._focusableNodes;
|
var focusableNodes = overlay._focusableNodes;
|
||||||
|
@ -498,6 +495,109 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
suite('Polymer.IronOverlayManager.deepActiveElement', function() {
|
||||||
|
|
||||||
|
test('handles document.body', function () {
|
||||||
|
document.body.focus();
|
||||||
|
assert.equal(Polymer.IronOverlayManager.deepActiveElement, document.body);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handles light dom', function () {
|
||||||
|
var focusable = document.getElementById('focusInput');
|
||||||
|
focusable.focus();
|
||||||
|
assert.equal(Polymer.IronOverlayManager.deepActiveElement, focusable, 'input is handled');
|
||||||
|
focusable.blur();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handles shadow dom', function () {
|
||||||
|
var focusable = document.getElementById('buttons').$.button0;
|
||||||
|
focusable.focus();
|
||||||
|
assert.equal(Polymer.IronOverlayManager.deepActiveElement, focusable);
|
||||||
|
focusable.blur();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
suite('restore-focus-on-close', function() {
|
||||||
|
|
||||||
|
var overlay;
|
||||||
|
setup(function () {
|
||||||
|
overlay = fixture('autofocus');
|
||||||
|
overlay.restoreFocusOnClose = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
teardown(function () {
|
||||||
|
// No matter what, return the focus to body!
|
||||||
|
document.body.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('does not return focus on close by default (restore-focus-on-close=false)', function(done) {
|
||||||
|
overlay.restoreFocusOnClose = false;
|
||||||
|
var focusable = document.getElementById('focusInput');
|
||||||
|
focusable.focus();
|
||||||
|
runAfterOpen(overlay, function() {
|
||||||
|
runAfterClose(overlay, function() {
|
||||||
|
assert.notEqual(Polymer.IronOverlayManager.deepActiveElement, focusable, 'focus is not restored to focusable');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('overlay returns focus on close', function(done) {
|
||||||
|
var focusable = document.getElementById('focusInput');
|
||||||
|
focusable.focus();
|
||||||
|
runAfterOpen(overlay, function() {
|
||||||
|
runAfterClose(overlay, function() {
|
||||||
|
assert.equal(Polymer.IronOverlayManager.deepActiveElement, focusable, 'focus restored to focusable');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('overlay returns focus on close (ShadowDOM)', function(done) {
|
||||||
|
var focusable = document.getElementById('buttons').$.button0;
|
||||||
|
focusable.focus();
|
||||||
|
runAfterOpen(overlay, function() {
|
||||||
|
runAfterClose(overlay, function() {
|
||||||
|
assert.equal(Polymer.IronOverlayManager.deepActiveElement, focusable, 'focus restored to focusable');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('overlay does not return focus to elements contained in another overlay', function(done) {
|
||||||
|
var overlay2 = fixture('basic');
|
||||||
|
// So it doesn't interfere with focus changes.
|
||||||
|
overlay2.noAutoFocus = true;
|
||||||
|
var focusable = document.createElement('input');
|
||||||
|
runAfterOpen(overlay2,function () {
|
||||||
|
Polymer.dom(overlay2).appendChild(focusable);
|
||||||
|
focusable.focus();
|
||||||
|
runAfterOpen(overlay, function() {
|
||||||
|
runAfterClose(overlay, function() {
|
||||||
|
assert.notEqual(Polymer.IronOverlayManager.deepActiveElement, focusable, 'focus not restored to focusable inside overlay2');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('overlay does not return focus to elements that are not in the body anymore', function(done) {
|
||||||
|
var focusable = document.createElement('input');
|
||||||
|
document.body.appendChild(focusable);
|
||||||
|
focusable.focus();
|
||||||
|
var focusSpy = sinon.spy(focusable, 'focus');
|
||||||
|
runAfterOpen(overlay, function() {
|
||||||
|
document.body.removeChild(focusable);
|
||||||
|
runAfterClose(overlay, function() {
|
||||||
|
assert.isFalse(focusSpy.called, 'focus not called');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
suite('overlay with backdrop', function() {
|
suite('overlay with backdrop', function() {
|
||||||
var overlay;
|
var overlay;
|
||||||
|
|
||||||
|
@ -548,9 +648,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
test('manager.getBackdrops() immediately updated on opened changes', function() {
|
test('manager.getBackdrops() immediately updated on opened changes', function() {
|
||||||
overlay.opened = true;
|
overlay.opened = true;
|
||||||
assert.equal(overlay._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
assert.equal(Polymer.IronOverlayManager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
||||||
overlay.opened = false;
|
overlay.opened = false;
|
||||||
assert.equal(overlay._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
assert.equal(Polymer.IronOverlayManager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('updating with-backdrop to false closes backdrop', function(done) {
|
test('updating with-backdrop to false closes backdrop', function(done) {
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
"tag": "v1.2.4",
|
"tag": "v1.2.4",
|
||||||
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
|
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
"_source": "git://github.com/polymerelements/iron-selector.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-selector"
|
"_originalSource": "polymerelements/iron-selector"
|
||||||
}
|
}
|
|
@ -45,7 +45,7 @@
|
||||||
"tag": "v1.0.11",
|
"tag": "v1.0.11",
|
||||||
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
|
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
|
"_source": "git://github.com/polymerelements/paper-behaviors.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/paper-behaviors"
|
"_originalSource": "polymerelements/paper-behaviors"
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-input",
|
"name": "paper-input",
|
||||||
"version": "1.1.7",
|
"version": "1.1.8",
|
||||||
"description": "Material design text fields",
|
"description": "Material design text fields",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -47,11 +47,11 @@
|
||||||
"web-component-tester": "^4.0.0",
|
"web-component-tester": "^4.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"_release": "1.1.7",
|
"_release": "1.1.8",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.1.7",
|
"tag": "v1.1.8",
|
||||||
"commit": "209012f7e45990bc0ec1d863b0b9ce515266827e"
|
"commit": "96efaa0f707870d5a5999120467d67b8da806704"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||||
"_target": "^1.0.9",
|
"_target": "^1.0.9",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-input",
|
"name": "paper-input",
|
||||||
"version": "1.1.7",
|
"version": "1.1.8",
|
||||||
"description": "Material design text fields",
|
"description": "Material design text fields",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
|
@ -10,6 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
<link rel="import" href="../polymer/polymer.html">
|
||||||
<link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
|
<link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||||
|
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
||||||
<link rel="import" href="paper-input-behavior.html">
|
<link rel="import" href="paper-input-behavior.html">
|
||||||
<link rel="import" href="paper-input-char-counter.html">
|
<link rel="import" href="paper-input-char-counter.html">
|
||||||
<link rel="import" href="paper-input-container.html">
|
<link rel="import" href="paper-input-container.html">
|
||||||
|
@ -77,7 +78,8 @@ style this element.
|
||||||
is: 'paper-textarea',
|
is: 'paper-textarea',
|
||||||
|
|
||||||
behaviors: [
|
behaviors: [
|
||||||
Polymer.PaperInputBehavior
|
Polymer.PaperInputBehavior,
|
||||||
|
Polymer.IronFormElementBehavior
|
||||||
],
|
],
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
|
|
@ -32,14 +32,14 @@
|
||||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/PolymerElements/paper-ripple",
|
"homepage": "https://github.com/polymerelements/paper-ripple",
|
||||||
"_release": "1.0.5",
|
"_release": "1.0.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.5",
|
||||||
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
|
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-ripple.git",
|
"_source": "git://github.com/polymerelements/paper-ripple.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/paper-ripple"
|
"_originalSource": "polymerelements/paper-ripple"
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-styles",
|
"name": "paper-styles",
|
||||||
"version": "1.1.3",
|
"version": "1.1.4",
|
||||||
"description": "Common (global) styles for Material Design elements.",
|
"description": "Common (global) styles for Material Design elements.",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -30,11 +30,11 @@
|
||||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||||
"web-component-tester": "^4.0.0"
|
"web-component-tester": "^4.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.1.3",
|
"_release": "1.1.4",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.1.3",
|
"tag": "v1.1.4",
|
||||||
"commit": "6239484bc25ca1f56e7263ac952c63edd8298853"
|
"commit": "885bbd74db88dab4fb5dc229cdf994c55fb2b31b"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||||
|
|
||||||
If you edit that file, it will get updated everywhere else.
|
If you edit that file, it will get updated everywhere else.
|
||||||
If you edit this file, your changes will get overridden :)
|
If you edit this file, your changes will get overridden :)
|
||||||
|
|
||||||
|
You can however override the jsbin link with one that's customized to this
|
||||||
|
specific element:
|
||||||
|
|
||||||
|
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||||
-->
|
-->
|
||||||
# Polymer Elements
|
# Polymer Elements
|
||||||
## Guide for Contributors
|
## Guide for Contributors
|
||||||
|
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||||
3. Click the `paper-foo` element.
|
3. Click the `paper-foo` element.
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||||
|
|
||||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||||
|
|
||||||
|
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
||||||
|
|
||||||
When submitting pull requests, please provide:
|
When submitting pull requests, please provide:
|
||||||
|
|
||||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
(For a single issue)
|
(For a single issue)
|
||||||
Fixes #20
|
Fixes #20
|
||||||
|
|
||||||
(For multiple issues)
|
(For multiple issues)
|
||||||
Fixes #32, #40
|
Fixes #32, fixes #40
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-styles",
|
"name": "paper-styles",
|
||||||
"version": "1.1.3",
|
"version": "1.1.4",
|
||||||
"description": "Common (global) styles for Material Design elements.",
|
"description": "Common (global) styles for Material Design elements.",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
|
@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
<link rel="import" href="../polymer/polymer.html">
|
||||||
|
<link rel="import" href="color.html">
|
||||||
|
|
||||||
<!-- Taken from https://www.google.com/design/spec/style/color.html#color-ui-color-application -->
|
<!-- Taken from https://www.google.com/design/spec/style/color.html#color-ui-color-application -->
|
||||||
|
|
||||||
|
@ -26,24 +27,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
--secondary-text-color: var(--light-theme-secondary-color);
|
--secondary-text-color: var(--light-theme-secondary-color);
|
||||||
--disabled-text-color: var(--light-theme-disabled-color);
|
--disabled-text-color: var(--light-theme-disabled-color);
|
||||||
--divider-color: var(--light-theme-divider-color);
|
--divider-color: var(--light-theme-divider-color);
|
||||||
|
--error-color: var(--paper-deep-orange-a700);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Primary and accent colors. Also see color.html for more colors.
|
* Primary and accent colors. Also see color.html for more colors.
|
||||||
*/
|
*/
|
||||||
--primary-color: #3f51b5; /* --paper-indigo-500 */
|
--primary-color: var(--paper-indigo-500);
|
||||||
--light-primary-color: #c5cae9; /* --paper-indigo-100 */
|
--light-primary-color: var(--paper-indigo-100);
|
||||||
--dark-primary-color: #303f9f; /* --paper-indigo-700 */
|
--dark-primary-color: var(--paper-indigo-700);
|
||||||
|
|
||||||
|
--accent-color: var(--paper-pink-a200);
|
||||||
|
--light-accent-color: var(--paper-pink-a100);
|
||||||
|
--dark-accent-color: var(--paper-pink-a400);
|
||||||
|
|
||||||
--accent-color: #ff4081; /* --paper-pink-a200 */
|
|
||||||
--light-accent-color: #ff80ab; /* --paper-pink-a100 */
|
|
||||||
--dark-accent-color: #f50057; /* --paper-pink-a400 */
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Material Design Light background theme
|
* Material Design Light background theme
|
||||||
*/
|
*/
|
||||||
--light-theme-background-color: #ffffff;
|
--light-theme-background-color: #ffffff;
|
||||||
--light-theme-base-color: #000000;
|
--light-theme-base-color: #000000;
|
||||||
--light-theme-text-color: #212121;
|
--light-theme-text-color: var(--paper-grey-900);
|
||||||
--light-theme-secondary-color: #737373; /* for secondary text and icons */
|
--light-theme-secondary-color: #737373; /* for secondary text and icons */
|
||||||
--light-theme-disabled-color: #9b9b9b; /* disabled/hint text */
|
--light-theme-disabled-color: #9b9b9b; /* disabled/hint text */
|
||||||
--light-theme-divider-color: #dbdbdb;
|
--light-theme-divider-color: #dbdbdb;
|
||||||
|
@ -51,7 +54,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
/*
|
/*
|
||||||
* Material Design Dark background theme
|
* Material Design Dark background theme
|
||||||
*/
|
*/
|
||||||
--dark-theme-background-color: #212121;
|
--dark-theme-background-color: var(--paper-grey-900);
|
||||||
--dark-theme-base-color: #ffffff;
|
--dark-theme-base-color: #ffffff;
|
||||||
--dark-theme-text-color: #ffffff;
|
--dark-theme-text-color: #ffffff;
|
||||||
--dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */
|
--dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */
|
||||||
|
|
|
@ -34,6 +34,6 @@
|
||||||
"commit": "77504bc2092eed3ad631eff04b186b22e3affb6e"
|
"commit": "77504bc2092eed3ad631eff04b186b22e3affb6e"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/Polymer/polymer.git",
|
"_source": "git://github.com/Polymer/polymer.git",
|
||||||
"_target": "^1.1.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "Polymer/polymer"
|
"_originalSource": "Polymer/polymer"
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue