1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-02-24 00:36:48 -05:00
parent feb5e91986
commit 4da1e38cc5
26 changed files with 320 additions and 125 deletions

View file

@ -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",

View file

@ -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"

View file

@ -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>

View file

@ -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() {

View file

@ -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"
} }

View file

@ -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"
} }

View file

@ -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",

View file

@ -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": [

View file

@ -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>

View file

@ -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",

View file

@ -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,

View file

@ -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>

View file

@ -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>

View file

@ -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);
} }
}; };

View file

@ -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) {

View file

@ -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"
} }

View file

@ -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"
} }

View file

@ -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",

View file

@ -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"

View file

@ -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: {

View file

@ -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"
} }

View file

@ -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",

View file

@ -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:

View file

@ -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"

View file

@ -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 */

View file

@ -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"
} }