update components

This commit is contained in:
Luke Pulverenti 2015-06-25 21:13:51 -04:00
parent c4dadd58bd
commit cee4794cd3
64 changed files with 1378 additions and 297 deletions

View file

@ -0,0 +1,31 @@
{
"name": "font-roboto",
"version": "1.0.0",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
],
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "1.0.0",
"commit": "b85b217e5f4b31f9c03b588e25c977b8104a40cd"
},
"_source": "git://github.com/PolymerElements/font-roboto.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/font-roboto"
}

View file

@ -0,0 +1,22 @@
{
"name": "font-roboto",
"version": "1.0.0",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
]
}

View file

@ -0,0 +1,10 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">

View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.3",
"version": "1.0.5",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
@ -14,7 +14,7 @@
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-behavior.git"
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
@ -30,11 +30,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.0.3",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "85609bfee93654cfe7be0bcf4cde169411ba535f"
"tag": "v1.0.5",
"commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
},
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.0.3",
"version": "1.0.5",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
@ -14,7 +14,7 @@
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-behavior.git"
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",

View file

@ -94,10 +94,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
* in a KeyboardEvent instance.
*/
var MODIFIER_KEYS = {
shift: 'shiftKey',
ctrl: 'ctrlKey',
alt: 'altKey',
meta: 'metaKey'
'shift': 'shiftKey',
'ctrl': 'ctrlKey',
'alt': 'altKey',
'meta': 'metaKey'
};
/**

View file

@ -27,14 +27,14 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"homepage": "https://github.com/polymerelements/iron-behaviors",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "8792edd457de697a74f398c09b67df30adf7d866"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_source": "git://github.com/polymerelements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors"
"_originalSource": "polymerelements/iron-behaviors"
}

View file

@ -1,6 +1,6 @@
{
"name": "iron-fit-behavior",
"version": "1.0.0",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
@ -23,17 +23,18 @@
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-fit-behavior",
"_release": "1.0.0",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.0",
"commit": "971104a539e356fc9f8d5c640fced7f1af653c15"
"tag": "v1.0.3",
"commit": "df9fd83577ea6ebd98f5cad8333daa73dd0f34ba"
},
"_source": "git://github.com/PolymerElements/iron-fit-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-fit-behavior",
"version": "1.0.0",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Fits an element inside another element",
"private": true,
@ -23,6 +23,7 @@
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",

View file

@ -18,7 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link rel="import" href="simple-fit.html">
<style>
@ -31,12 +31,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</style>
</head>
<body>
<body unresolved>
<simple-fit auto-fit-on-attach class="sized">
centered in window
</simple-fit>
</body>
</html>

View file

@ -9,15 +9,23 @@ 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="../iron-fit-behavior.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<dom-module id="simple-fit">
<style>
:host {
display: block;
background: black;
@apply(--layout);
background-color: var(--paper-light-blue-500);
color: white;
padding: 8px;
text-align: center;
align-items:center;
-webkit-align-items: center;
justify-content:center;
-webkit-justify-content:center;
}
</style>

View file

@ -39,6 +39,7 @@ CSS properties | Action
* The element that will receive a `max-height`/`width`. By default it is the same as `this`,
* but it can be set to a child element. This is useful, for example, for implementing a
* scrolling region inside the element.
* @type {!Element}
*/
sizingTarget: {
type: Object,
@ -63,6 +64,7 @@ CSS properties | Action
value: false
},
/** @type {?Object} */
_fitInfo: {
type: Object
}
@ -89,6 +91,26 @@ CSS properties | Action
return fitHeight;
},
get _fitLeft() {
var fitLeft;
if (this.fitInto === window) {
fitLeft = 0;
} else {
fitLeft = this.fitInto.getBoundingClientRect().left;
}
return fitLeft;
},
get _fitTop() {
var fitTop;
if (this.fitInto === window) {
fitTop = 0;
} else {
fitTop = this.fitInto.getBoundingClientRect().top;
}
return fitTop;
},
attached: function() {
if (this.autoFitOnAttach) {
if (window.getComputedStyle(this).display === 'none') {
@ -120,6 +142,10 @@ CSS properties | Action
var target = window.getComputedStyle(this);
var sizer = window.getComputedStyle(this.sizingTarget);
this._fitInfo = {
inlineStyle: {
top: this.style.top || '',
left: this.style.left || ''
},
positionedBy: {
vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
'bottom' : null),
@ -147,11 +173,11 @@ CSS properties | Action
resetFit: function() {
if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
this.sizingTarget.style.maxHeight = '';
this.style.top = '';
this.style.top = this._fitInfo ? this._fitInfo.inlineStyle.top : '';
}
if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
this.sizingTarget.style.maxWidth = '';
this.style.left = '';
this.style.left = this._fitInfo ? this._fitInfo.inlineStyle.left : '';
}
if (this._fitInfo) {
this.style.position = this._fitInfo.positionedBy.css;
@ -214,12 +240,12 @@ CSS properties | Action
this.style.position = 'fixed';
}
if (!this._fitInfo.positionedBy.vertically) {
var top = (this._fitHeight - this.offsetHeight) / 2;
var top = (this._fitHeight - this.offsetHeight) / 2 + this._fitTop;
top -= this._fitInfo.margin.top;
this.style.top = top + 'px';
}
if (!this._fitInfo.positionedBy.horizontally) {
var left = (this._fitWidth - this.offsetWidth) / 2;
var left = (this._fitWidth - this.offsetWidth) / 2 + this._fitLeft;
left -= this._fitInfo.margin.left;
this.style.left = left + 'px';
}

View file

@ -120,7 +120,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="inline-positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;right:100px;bottom:100px;">
<test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;left:100px;top:100px;">
Sized (x/y), positioned/positioned
</test-fit>
</template>
@ -139,7 +139,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="constrain-target">
<template>
<div class="constrain" style="position: fixed; top: 0; left: 0; width: 50vw; height: 50vh; border: 1px solid black;">
<div class="constrain" style="position: fixed; top: 20px; left: 100px; width: 50vw; height: 50vh; border: 1px solid black;">
<test-fit auto-fit-on-attach class="el">
<div>
Auto center/center to parent element
@ -170,6 +170,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var rect = el.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset');
assert.equal(rect.left, 100, 'left is unset');
});
test('inline positioned element is not re-positioned', function() {
@ -178,15 +179,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// need to measure document.body here because mocha sets a min-width on html,body, and
// the element is positioned wrt to that by css
var bodyRect = document.body.getBoundingClientRect();
assert.equal(rect.top, bodyRect.height - rect.height - 100, 'top is unset');
assert.equal(rect.left, bodyRect.width - rect.width - 100, 'left is unset');
assert.equal(rect.top, 100, 'top is unset');
assert.equal(rect.left, 100, 'left is unset');
el.refit();
rect = el.getBoundingClientRect();
assert.equal(rect.top, 100, 'top is unset after refit');
assert.equal(rect.left, 100, 'left is unset after refit');
});
test('position property is preserved after', function() {
var el = fixture('absolute');
assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
})
});
});
suite('fit to window', function() {
@ -324,6 +331,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
});
test('element centers in another element', function() {
var constrain = fixture('constrain-target');
var el = Polymer.dom(constrain).querySelector('.el')
makeScrolling(el);
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
var crect = constrain.getBoundingClientRect();
assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
});
});
</script>

View file

@ -1,6 +1,6 @@
{
"name": "iron-icons",
"version": "1.0.2",
"version": "1.0.3",
"description": "A set of icons for use with iron-icon",
"authors": [
"The Polymer Authors"
@ -14,7 +14,7 @@
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-icons"
"url": "git://github.com/PolymerElements/iron-icons"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-icons",
@ -34,11 +34,11 @@
"util",
"update-icons.sh"
],
"_release": "1.0.2",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "7340b4e26a0235ffdf2477299ccecd0c5d3d99e8"
"tag": "v1.0.3",
"commit": "036325be99c33c052ac807a705aacad70be1127f"
},
"_source": "git://github.com/polymerelements/iron-icons.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-icons",
"version": "1.0.2",
"version": "1.0.3",
"description": "A set of icons for use with iron-icon",
"authors": [
"The Polymer Authors"
@ -14,7 +14,7 @@
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-icons"
"url": "git://github.com/PolymerElements/iron-icons"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-icons",

View file

@ -35,7 +35,7 @@
"tag": "v1.0.1",
"commit": "3809f0eb7461c8ca63640aaa238775b3a25aa578"
},
"_source": "git://github.com/PolymerElements/iron-menu-behavior.git",
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-menu-behavior"
"_originalSource": "polymerelements/iron-menu-behavior"
}

View file

@ -1,6 +1,6 @@
{
"name": "iron-meta",
"version": "1.0.2",
"version": "1.0.3",
"keywords": [
"web-components",
"polymer"
@ -26,11 +26,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-meta",
"_release": "1.0.2",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "85d0258556a25a34dbe98657ce9f40d878d4c5bf"
"tag": "v1.0.3",
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
},
"_source": "git://github.com/polymerelements/iron-meta.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-meta",
"version": "1.0.2",
"version": "1.0.3",
"keywords": [
"web-components",
"polymer"

View file

@ -165,8 +165,8 @@ Or, in a Polymer element, you can include a meta in your template:
* Retrieves meta data value by key.
*
* @method byKey
* @param {String} key The key of the meta-data to be returned.
* @returns *
* @param {string} key The key of the meta-data to be returned.
* @return {*}
*/
byKey: function(key) {
return this._metaData && this._metaData[key];
@ -304,6 +304,8 @@ Or, in a Polymer element, you can include a meta in your template:
/**
* Retrieves meta data value by key.
* @param {string} key The key of the meta-data to be returned.
* @return {*}
*/
byKey: function(key) {
return this._metaData && this._metaData[key];

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.0.2",
"version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -35,11 +35,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
"_release": "1.0.2",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "e84965cddda459c9e4a24e8d442c56ba4d5823eb"
"tag": "v1.0.4",
"commit": "7939cabf4f23467a0d02b572094ef05d35ad0dcc"
},
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.0.2",
"version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,

View file

@ -61,7 +61,8 @@ context. You should place this element as a child of `<body>` whenever possible.
opened: {
observer: '_openedChanged',
type: Boolean,
value: false
value: false,
notify: true
},
/**
@ -369,7 +370,7 @@ context. You should place this element as a child of `<body>` whenever possible.
this.style.display = '';
},
_finishPositioning: function(target) {
_finishPositioning: function() {
this.style.display = 'none';
this.style.transform = this.style.webkitTransform = '';
// force layout to avoid application of transform

View file

@ -1,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.1",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,
@ -27,14 +27,14 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
"_release": "1.0.1",
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "fd3e34efaadba638c4d28af16061e4089f298c3a"
"tag": "v1.0.2",
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
},
"_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-resizable-behavior"
"_originalSource": "polymerelements/iron-resizable-behavior"
}

View file

@ -1,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.1",
"version": "1.0.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,

View file

@ -29,9 +29,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
**/
Polymer.IronResizableBehavior = {
properties: {
/**
* The closest ancestor element that implements `IronResizableBehavior`.
*/
_parentResizable: {
type: Object,
observer: '_parentResizableChanged'
},
/**
* True if this element is currently notifying its descedant elements of
* resize.
*/
_notifyingDescendant: {
type: Boolean,
value: false
}
},
@ -49,7 +61,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
attached: function() {
this.fire('iron-request-resize-notifications', null, {
node: this,
bubbles: true
bubbles: true,
cancelable: true
});
if (!this._parentResizable) {
@ -78,16 +91,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
this._interestedResizables.forEach(function(resizable) {
// TODO(cdata): Currently behaviors cannot define "abstract" methods..
if (!this.resizerShouldNotify || this.resizerShouldNotify(resizable)) {
resizable.notifyResize();
if (this.resizerShouldNotify(resizable)) {
this._notifyDescendant(resizable);
}
}, this);
this.fire('iron-resize', null, {
node: this,
bubbles: false
});
this._fireResize();
},
/**
@ -107,16 +116,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
if (index > -1) {
this._interestedResizables.splice(index, 1);
this.unlisten(target, 'iron-resize', '_onDescendantIronResize');
}
},
// TODO(cdata): Currently behaviors cannot define "abstract" methods.
// resizerShouldNotify: function(el) { return true; },
/**
* This method can be overridden to filter nested elements that should or
* should not be notified by the current element. Return true if an element
* should be notified, or false if it should not be notified.
*
* @param {HTMLElement} element A candidate descendant element that
* implements `IronResizableBehavior`.
* @return {boolean} True if the `element` should be notified of resize.
*/
resizerShouldNotify: function(element) { return true; },
_parentResizableChanged: function(parentResizable) {
if (parentResizable) {
window.removeEventListener('resize', this._boundNotifyResize);
_onDescendantIronResize: function(event) {
if (this._notifyingDescendant) {
event.stopPropagation();
return;
}
// NOTE(cdata): In ShadowDOM, event retargetting makes echoing of the
// otherwise non-bubbling event "just work." We do it manually here for
// the case where Polymer is not using shadow roots for whatever reason:
if (!Polymer.Settings.useShadow) {
this._fireResize();
}
},
_fireResize: function() {
this.fire('iron-resize', null, {
node: this,
bubbles: false
});
},
_onIronRequestResizeNotifications: function(event) {
@ -128,11 +161,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
if (this._interestedResizables.indexOf(target) === -1) {
this._interestedResizables.push(target);
this.listen(target, 'iron-resize', '_onDescendantIronResize');
}
target.assignParentResizable(this);
this._notifyDescendant(target);
event.stopPropagation();
},
_parentResizableChanged: function(parentResizable) {
if (parentResizable) {
window.removeEventListener('resize', this._boundNotifyResize);
}
},
_notifyDescendant: function(descendant) {
// NOTE(cdata): In IE10, attached is fired on children first, so it's
// important not to notify them if the parent is not attached yet (or
// else they will get redundantly notified when the parent attaches).
if (!this.isAttached) {
return;
}
this._notifyingDescendant = true;
descendant.notifyResize();
this._notifyingDescendant = false;
}
};
</script>

View file

@ -22,7 +22,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
WCT.loadSuites([
'basic.html'
'basic.html',
'iron-resizable-behavior.html'
]);
</script>

View file

@ -0,0 +1,87 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-resizable-behavior tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../iron-resizable-behavior.html">
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="ResizableAndShadowBoundaries">
<template>
<x-light-resizable></x-light-resizable>
</template>
</test-fixture>
<script>
suite('iron-resizable-behavior', function() {
var resizable;
suite('events across shadow boundaries', function() {
setup(function() {
resizable = fixture('ResizableAndShadowBoundaries');
});
suite('ancestor\'s iron-resize', function() {
test('only fires once for a notifying shadow descendent', function() {
resizable.$.childResizable1.notifyResize();
expect(resizable.ironResizeCount).to.be.equal(2);
});
test('only fires once when notifying descendent observables', function() {
resizable.notifyResize();
expect(resizable.ironResizeCount).to.be.equal(2);
});
});
suite('descendant\'s iron-resize', function() {
test('only fires once for a notifying shadow root', function() {
resizable.notifyResize();
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);
});
test('only fires once for a notifying descendent observable', function() {
resizable.$.childResizable1.notifyResize();
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
});
});
suite('window\'s resize', function() {
test('causes all iron-resize events to fire once', function() {
window.dispatchEvent(new CustomEvent('resize'));
expect(resizable.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);
});
});
});
});
</script>
</body>
</html>

View file

@ -141,3 +141,53 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
</script>
<script>
Polymer.ObserveIronResizeBehavior = {
properties: {
ironResizeCount: {
type: Number,
value: 0
}
},
listeners: {
'iron-resize': '_incrementIronResizeCount'
},
_incrementIronResizeCount: function() {
this.ironResizeCount++;
}
};
</script>
<dom-module id="x-shadow-resizable">
<template>
<div></div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-shadow-resizable',
behaviors: [
Polymer.IronResizableBehavior,
Polymer.ObserveIronResizeBehavior
]
});
</script>
<dom-module id="x-light-resizable">
<template>
<x-shadow-resizable id="childResizable1"></x-shadow-resizable>
<x-shadow-resizable id="childResizable2"></x-shadow-resizable>
</template>
</dom-module>
<script>
Polymer({
is: 'x-light-resizable',
behaviors: [
Polymer.IronResizableBehavior,
Polymer.ObserveIronResizeBehavior
]
});
</script>

View file

@ -1,6 +1,6 @@
{
"name": "neon-animation",
"version": "1.0.1",
"version": "1.0.4",
"authors": [
"The Polymer Authors"
],
@ -11,12 +11,12 @@
"web-animations"
],
"main": [
"neon-animated-pages.html",
"neon-animatable-behavior.html",
"neon-animation-behavior.html",
"neon-animation-runner-behavior.html",
"neon-shared-element-animatable-behavior.html",
"neon-shared-element-animation-behavior.html",
"neon-animated-pages.html",
"neon-animatable.html",
"neon-animations.html"
],
@ -48,11 +48,11 @@
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
},
"_release": "1.0.1",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "160f14c31b4692cc8073b67e8849e444b0695cde"
"tag": "v1.0.4",
"commit": "8016c4f082250af41a08d30c2b8eae295c24f874"
},
"_source": "git://github.com/PolymerElements/neon-animation.git",
"_target": "^1.0.0",

View file

@ -40,6 +40,7 @@ Configuration:
properties: {
/** @type {!Polymer.IronMeta} */
_animationMeta: {
type: Object,
value: function() {
@ -49,8 +50,17 @@ Configuration:
},
/**
* @param {{
* animation: string,
* nodes: !Array<!Element>,
* nodeDelay: (number|undefined),
* timing: (Object|undefined)
* }} config
*/
configure: function(config) {
var animationConstructor = this._animationMeta.byKey(config.animation);
var animationConstructor = /** @type {Function} */ (
this._animationMeta.byKey(config.animation));
if (!animationConstructor) {
console.warn(this.is + ':', 'constructor for', config.animation, 'not found!');
return;

View file

@ -46,7 +46,7 @@ Configuration:
configure: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return null;
return;
}
var fromRect = shared.from.getBoundingClientRect();

View file

@ -0,0 +1,87 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-shared-element-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either
a shared element, or a screen position.
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
animation in the source page and in an `entry` animation in the destination page. Also, define the
reverse-ripple elements in the `sharedElements` property (not a configuration property, see
`Polymer.NeonSharedElementAnimatableBehavior`).
If using a screen position, define the `gesture` property.
Configuration:
```
{
name: 'reverse-ripple-animation`.
id: <shared-element-id>, /* set this or gesture */
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
timing: <animation-timing>,
toPage: <node>, /* define for the destination page */
fromPage: <node>, /* define for the source page */
}
```
-->
<script>
Polymer({
is: 'reverse-ripple-animation',
behaviors: [
Polymer.NeonSharedElementAnimationBehavior
],
configure: function(config, fromPage, toPage) {
var shared = this.findSharedElements(config, fromPage, toPage);
if (!shared) {
return null;
}
var translateX, translateY;
var fromRect = shared.from.getBoundingClientRect();
if (config.gesture) {
translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2));
translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2));
} else {
var toRect = shared.to.getBoundingClientRect();
translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
}
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
var diameter = Math.sqrt(2 * size * size);
var scaleX = diameter / fromRect.width;
var scaleY = diameter / fromRect.height;
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');
shared.from.style.borderRadius = '50%';
this._effect = new KeyframeEffect(shared.from, [
{'transform': translate + ' ' + scale},
{'transform': translate + ' scale(0)'}
], this.timingFromConfig(config));
return this._effect;
},
complete: function() {
if (this.sharedElements) {
this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', '');
this.sharedElements.from.style.borderRadius = '';
}
}
});
</script>

View file

@ -46,8 +46,8 @@ Configuration:
Polymer.NeonSharedElementAnimationBehavior
],
configure: function(config, fromPage, toPage) {
var shared = this.findSharedElements(config, fromPage, toPage);
configure: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return null;
}
@ -56,11 +56,11 @@ Configuration:
var toRect = shared.to.getBoundingClientRect();
if (config.gesture) {
translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
translateY = config.gesture.y - (toRect.left + (toRect.height / 2));
translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
} else {
var fromRect = shared.from.getBoundingClientRect();
translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.left + (toRect.height / 2));
translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
}
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';

View file

@ -45,9 +45,16 @@ Configuration:
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
var scaleProperty = 'scale(0)';
if (config.axis === 'x') {
scaleProperty = 'scale(0, 1)';
} else if (config.axis === 'y') {
scaleProperty = 'scale(1, 0)';
}
this._effect = new KeyframeEffect(node, [
{'transform': 'scale(0)'},
{'transform': 'scale(1)'}
{'transform': scaleProperty},
{'transform': 'scale(1, 1)'}
], this.timingFromConfig(config));
return this._effect;

View file

@ -39,6 +39,15 @@ Configuration:
Polymer.NeonAnimationBehavior
],
/**
* @param {{
* node: !Element,
* transformOrigin: (string|undefined),
* transformFrom: (string|undefined),
* transformTo: (string|undefined),
* timing: (Object|undefined)
* }} config
*/
configure: function(config) {
var node = config.node;
var transformFrom = config.transformFrom || 'none';

View file

@ -1,6 +1,6 @@
{
"name": "neon-animation",
"version": "1.0.1",
"version": "1.0.4",
"authors": [
"The Polymer Authors"
],
@ -11,12 +11,12 @@
"web-animations"
],
"main": [
"neon-animated-pages.html",
"neon-animatable-behavior.html",
"neon-animation-behavior.html",
"neon-animation-runner-behavior.html",
"neon-shared-element-animatable-behavior.html",
"neon-shared-element-animation-behavior.html",
"neon-animated-pages.html",
"neon-animatable.html",
"neon-animations.html"
],

View file

@ -0,0 +1,166 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>neon-animated-pages demo: card</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="x-card.html">
<link rel="import" href="x-cards-list.html">
<style>
body {
padding: 15px;
}
neon-animated-pages {
height: 100%;
}
.large {
width: 100%
}
.button {
text-align: center;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
background-color: #fff;
color: #646464;
}
.button.blue {
background-color: #4285f4;
color: #fff;
}
.button.raised {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.back {
position: fixed;
top: 30px;
left: 30px;
}
</style>
</head>
<body class="fullbleed">
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<x-cards-list id="list">
<div class="fit layout vertical center-center">
<h2>Choose a subject</h2>
<div class="flex layout horizontal around-justified large">
<div class="blue raised button" on-click="_onPolymerClick">
POLYMER
</div>
<div class="blue raised button" on-click="_onAngularClick">
ANGULAR
</div>
</div>
</div>
</x-cards-list>
<x-card>
<div class="fit layout vertical center-center">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
<h2>Polymer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
<x-card>
<div class="fit layout vertical center-center">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
<h2>Angular</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onPolymerClick = function(event) {
this.$.list.sharedElements = {
'ripple': event.target,
'reverse-ripple': event.target
};
this.$.pages.selected = 1;
};
scope._onAngularClick = function(event) {
this.$.list.sharedElements = {
'ripple': event.target,
'reverse-ripple': event.target
};
this.$.pages.selected = 2;
};
scope._onBackClick = function(event) {
this.$.pages.selected = 0;
};
</script>
</body>
</html>

View file

@ -0,0 +1,99 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-card">
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
}
</style>
<template>
<div id="placeholder" class="fit"></div>
<div id="container">
<content select="div"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'x-card',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'ripple-animation',
id: 'ripple',
toPage: this
}, {
name: 'fade-out-animation',
node: this.$.placeholder,
timing: {
delay: 250
}
}, {
name: 'fade-in-animation',
node: this.$.container,
timing: {
delay: 50
}
}],
'exit': [{
name: 'opaque-animation',
node: this.$.placeholder
}, {
name: 'fade-out-animation',
node: this.$.container,
timing: {
duration: 0
}
}, {
name: 'reverse-ripple-animation',
id: 'reverse-ripple',
fromPage: this
}]
};
}
},
sharedElements: {
value: function() {
return {
'ripple': this.$.placeholder,
'reverse-ripple': this.$.placeholder
};
}
}
}
});
})();
</script>

View file

@ -0,0 +1,76 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-cards-list">
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
}
</style>
<template>
<div id="placeholder" class="fit"></div>
<div id="container">
<content select="div"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'x-cards-list',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'reverse-ripple-animation',
id: 'reverse-ripple',
toPage: this
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.container,
timing: {
delay: 150,
duration: 0
}
}, {
name: 'ripple-animation',
id: 'ripple',
fromPage: this
}]
};
}
}
}
});
})();
</script>

View file

@ -4,3 +4,4 @@
<a href="list/index.html">list</a><br>
<a href="load/index.html">load</a><br>
<a href="tiles/index.html">tiles</a><br>
<a href="card/index.html">card</a><br>

View file

@ -160,14 +160,14 @@ animations to be run when switching to or switching out of the page.
// on first load, ensure we run animations only after element is attached.
if (!this.isAttached) {
this.async(function () {
this.playAnimation(null, {
this.playAnimation(undefined, {
fromPage: null,
toPage: selectedPage
});
});
} else {
this.playAnimation(null, {
this.playAnimation(undefined, {
fromPage: oldPage,
toPage: selectedPage
});
@ -178,6 +178,10 @@ animations to be run when switching to or switching out of the page.
}
},
/**
* @param {Object=} oldPage
* @param {Object=} selectedPage
*/
_completeSelectedChanged: function(oldPage, selectedPage) {
if (selectedPage) {
selectedPage.classList.remove('neon-animating');
@ -191,7 +195,7 @@ animations to be run when switching to or switching out of the page.
node.classList && node.classList.remove('neon-animating');
}
}
this.async(this.notifyResize);
this.async(this._notifyPageResize);
},
_onNeonAnimationFinish: function(event) {
@ -200,6 +204,14 @@ animations to be run when switching to or switching out of the page.
return;
}
this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
},
_notifyPageResize: function() {
var selectedPage = this.selectedItem;
this.resizerShouldNotify = function(element) {
return element == selectedPage;
}
this.notifyResize();
}
})

View file

@ -78,10 +78,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* Called when the animation finishes.
*/
complete: function() {
// FIXME not sure about non-bubbling event
this.fire(this.animationEndEvent, null, {bubbles: false});
}
complete: function() {}
};

View file

@ -14,9 +14,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations.
* @polymerBehavior
*
* @polymerBehavior Polymer.NeonAnimationRunnerBehavior
*/
Polymer.NeonAnimationRunnerBehavior = [Polymer.NeonAnimatableBehavior, {
Polymer.NeonAnimationRunnerBehaviorImpl = {
properties: {
@ -27,6 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
},
/** @type {?Object} */
_player: {
type: Object
}
@ -57,7 +59,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_runAnimationEffects: function(allEffects) {
return player = document.timeline.play(new GroupEffect(allEffects));
return document.timeline.play(new GroupEffect(allEffects));
},
_completeAnimations: function(allAnimations) {
@ -68,6 +70,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* Plays an animation with an optional `type`.
* @param {string=} type
* @param {!Object=} cookie
*/
playAnimation: function(type, cookie) {
var allConfigs = this.getAnimationConfig(type);
@ -105,6 +109,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._player.cancel();
}
}
};
}];
/** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */
Polymer.NeonAnimationRunnerBehavior = [
Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehaviorImpl
];
</script>

View file

@ -13,6 +13,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="animations/hero-animation.html">
<link rel="import" href="animations/opaque-animation.html">
<link rel="import" href="animations/ripple-animation.html">
<link rel="import" href="animations/reverse-ripple-animation.html">
<link rel="import" href="animations/scale-down-animation.html">
<link rel="import" href="animations/scale-up-animation.html">
<link rel="import" href="animations/slide-from-left-animation.html">

View file

@ -16,9 +16,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements containing shared element
* animations.
* @polymerBehavior
* @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior
*/
Polymer.NeonSharedElementAnimatableBehavior = [Polymer.NeonAnimatableBehavior, {
Polymer.NeonSharedElementAnimatableBehaviorImpl = {
properties: {
@ -32,6 +32,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
}];
};
/** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */
Polymer.NeonSharedElementAnimatableBehavior = [
Polymer.NeonAnimatableBehavior,
Polymer.NeonSharedElementAnimatableBehaviorImpl
];
</script>

View file

@ -15,9 +15,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations.
* @polymerBehavior
* @polymerBehavior Polymer.NeonSharedElementAnimationBehavior
*/
Polymer.NeonSharedElementAnimationBehavior = [Polymer.NeonAnimationBehavior, {
Polymer.NeonSharedElementAnimationBehaviorImpl = {
properties: {
@ -61,6 +61,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return this.sharedElements;
}
}];
};
/** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */
Polymer.NeonSharedElementAnimationBehavior = [
Polymer.NeonAnimationBehavior,
Polymer.NeonSharedElementAnimationBehaviorImpl
];
</script>

View file

@ -0,0 +1,24 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>neon-animation tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'neon-animated-pages.html'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,74 @@
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>neon-animated-pages tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../neon-animated-pages.html">
<link rel="import" href="test-resizable-pages.html">
</head>
<body>
<test-fixture id="basic">
<template>
<neon-animated-pages>
</neon-animated-pages>
</template>
</test-fixture>
<test-fixture id="notify-resize">
<template>
<neon-animated-pages>
<a-resizable-page></a-resizable-page>
<b-resizable-page></b-resizable-page>
<c-resizable-page></c-resizable-page>
</neon-animated-pages>
</template>
</test-fixture>
<script>
suite('basic', function() {
});
suite('notify-resize', function() {
test('only a destination page recieves a resize event', function(done) {
var animatedPages = fixture('notify-resize');
var resizables = Polymer.dom(animatedPages).children;
var recieves = {};
resizables.forEach(function(page) {
page.addEventListener('iron-resize', function(event) {
var pageName = event.currentTarget.tagName;
recieves[pageName] = pageName in recieves ? recieves[pageName] + 1 : 1;
});
});
animatedPages.selected = 2;
setTimeout(function() {
assert.deepEqual(recieves, {
'C-RESIZABLE-PAGE': 1
});
done();
}, 50);
});
});
</script>
</body>
</html>

View file

@ -0,0 +1,59 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
<dom-module id="a-resizable-page">
<template>
</template>
</dom-module>
<dom-module id="b-resizable-page">
<template>
</template>
</dom-module>
<dom-module id="c-resizable-page">
<template>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'a-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
Polymer({
is: 'b-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
Polymer({
is: 'c-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
})();
</script>

View file

@ -1,6 +1,6 @@
{
"name": "paper-dialog-behavior",
"version": "1.0.2",
"version": "1.0.4",
"description": "Implements a behavior used for material design dialogs",
"authors": "The Polymer Authors",
"keywords": [
@ -34,11 +34,11 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.2",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "156945a20318c11bb65d0bc83ef402262c3071ca"
"tag": "v1.0.4",
"commit": "09662387b0bc55651dd7b9ef8d38b3b8f55ecf3c"
},
"_source": "git://github.com/PolymerElements/paper-dialog-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "paper-dialog-behavior",
"version": "1.0.2",
"version": "1.0.4",
"description": "Implements a behavior used for material design dialogs",
"authors": "The Polymer Authors",
"keywords": [

View file

@ -52,7 +52,7 @@ Custom property | Description | Default
### Accessibility
This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
to override this attribute with `role="alertdialog"`. The header (a `<h2>` element) will
to override this attribute with `role="alertdialog"`.
If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element.
It will also ensure that focus remains in the dialog.
@ -173,15 +173,17 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
_onDialogClick: function(event) {
var target = event.target;
while (target !== this) {
if (target.hasAttribute('dialog-dismiss')) {
this._updateClosingReasonConfirmed(false);
this.close();
break;
} else if (target.hasAttribute('dialog-confirm')) {
this._updateClosingReasonConfirmed(true);
this.close();
break;
while (target && target !== this) {
if (target.hasAttribute) {
if (target.hasAttribute('dialog-dismiss')) {
this._updateClosingReasonConfirmed(false);
this.close();
break;
} else if (target.hasAttribute('dialog-confirm')) {
this._updateClosingReasonConfirmed(true);
this.close();
break;
}
}
target = target.parentNode;
}

View file

@ -28,7 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
:host > ::content > .no-padding {
padding: 0;
};
}
:host > ::content > *:first-child {
margin-top: 24px;

View file

@ -33,6 +33,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-dialog>
<p>Dialog</p>
<div class="buttons">
<button extra>extra</button>
<button dialog-dismiss>dismiss</button>
<button dialog-confirm>confirm</button>
</div>
@ -164,6 +165,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('removing a child element on click does not cause an exception', function(done) {
var dialog = fixture('basic');
runAfterOpen(dialog, function() {
var button = Polymer.dom(dialog).querySelector('[extra]');
button.addEventListener('click', function(event) {
Polymer.dom(event.target.parentNode).removeChild(event.target);
// should not throw exception here
done();
});
button.click();
});
});
});
suite('a11y', function() {

View file

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.5",
"version": "1.0.7",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"
@ -21,17 +21,18 @@
"/.*"
],
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"font-roboto": "PolymerElements/font-roboto#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.5",
"_release": "1.0.7",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "4033dd288b9074febc4532b5ea11787422b9c378"
"tag": "v1.0.7",
"commit": "c65f5ce6b898bb756fca35cedaa53c3e8011abeb"
},
"_source": "git://github.com/polymerelements/paper-styles.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.5",
"version": "1.0.7",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"
@ -21,7 +21,8 @@
"/.*"
],
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"font-roboto": "PolymerElements/font-roboto#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {

View file

@ -13,27 +13,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.shadow-elevation-1 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
.shadow-elevation-2dp {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.shadow-elevation-2 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
0 6px 10px 0 rgba(0, 0, 0, 0.3);
.shadow-elevation-3dp {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 3px 3px -2px rgba(0, 0, 0, 0.4);
}
.shadow-elevation-3 {
box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19),
0 13px 25px 0 rgba(0, 0, 0, 0.3);
.shadow-elevation-4dp {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
.shadow-elevation-4 {
box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17),
0 20px 40px 0 rgba(0, 0, 0, 0.3);
.shadow-elevation-6dp {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.4);
}
.shadow-elevation-5 {
box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15),
0 27px 55px 0 rgba(0, 0, 0, 0.3);
.shadow-elevation-8dp {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.4);
}
.shadow-elevation-16dp {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.4);
}
</style>

View file

@ -18,6 +18,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
};
--shadow-none: {
box-shadow: none;
};
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
--shadow-elevation-2dp: {

View file

@ -7,10 +7,9 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->
<!--<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<style is="custom-style">
@ -19,9 +18,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* Shared Styles */
/*
Unfortunately, we can't make use of these yet - sibling properties aren't
evaluated. See https://github.com/Polymer/polymer/issues/1399
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
@ -41,7 +40,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overflow: hidden;
text-overflow: ellipsis;
};
*/
/* Material Font Styles */

View file

@ -1,6 +1,6 @@
{
"name": "polymer",
"version": "1.0.4",
"version": "1.0.5",
"main": [
"polymer.html"
],
@ -24,11 +24,11 @@
},
"private": true,
"homepage": "https://github.com/Polymer/polymer",
"_release": "1.0.4",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "cdabb91ad8ddf9bbefa308a25c5633d768501e7d"
"tag": "v1.0.5",
"commit": "b93f076d7b2606733d7166f311b77550deb98a39"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "polymer",
"version": "1.0.4",
"version": "1.0.5",
"main": [
"polymer.html"
],

View file

@ -125,6 +125,12 @@ this.copyOwnProperty(n, api, prototype);
}
return prototype || api;
},
mixin: function (target, source) {
for (var i in source) {
target[i] = source[i];
}
return target;
},
copyOwnProperty: function (name, source, target) {
var pd = Object.getOwnPropertyDescriptor(source, name);
if (pd) {
@ -500,7 +506,7 @@ debouncer.stop();
}
}
});
Polymer.version = '1.0.4';
Polymer.version = '1.0.5';
Polymer.Base._addFeature({
_registerFeatures: function () {
this._prepIs();

View file

@ -535,8 +535,8 @@ node._ownerShadyRoot = root;
return node._ownerShadyRoot;
},
_maybeDistribute: function (node, parent) {
var fragContent = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && node.querySelector(CONTENT);
var wrappedContent = fragContent && fragContent.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE;
var fragContent = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !node.__noContent && Polymer.dom(node).querySelector(CONTENT);
var wrappedContent = fragContent && Polymer.dom(fragContent).parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE;
var hasContent = fragContent || node.localName === CONTENT;
if (hasContent) {
var root = this._ownerShadyRootForNode(parent);
@ -598,7 +598,7 @@ if (this._contains(container, content)) {
var dc$ = factory(content).getDistributedNodes();
for (var j = 0; j < dc$.length; j++) {
hostNeedsDist = true;
var node = dc$[i];
var node = dc$[j];
var parent = node.parentNode;
if (parent) {
removeFromComposedParent(parent, node);
@ -764,6 +764,9 @@ this.domApi._distributeParent();
toggle: function () {
this.node.classList.toggle.apply(this.node.classList, arguments);
this.domApi._distributeParent();
},
contains: function () {
return this.node.classList.contains.apply(this.node.classList, arguments);
}
};
if (!Settings.useShadow) {
@ -1050,9 +1053,6 @@ factory: factory
Polymer.Base._addFeature({
_prepShady: function () {
this._useContent = this._useContent || Boolean(this._template);
if (this._useContent) {
this._template._hasInsertionPoint = this._template.content.querySelector('content');
}
},
_poolContent: function () {
if (this._useContent) {
@ -1072,7 +1072,7 @@ this.shadyRoot = this.root;
this.shadyRoot._distributionClean = false;
this.shadyRoot._isShadyRoot = true;
this.shadyRoot._dirtyRoots = [];
this.shadyRoot._insertionPoints = this._template._hasInsertionPoint ? this.shadyRoot.querySelectorAll('content') : [];
this.shadyRoot._insertionPoints = !this._notes || this._notes._hasContent ? this.shadyRoot.querySelectorAll('content') : [];
saveLightChildrenIfNeeded(this.shadyRoot);
this.shadyRoot.host = this;
},

View file

@ -54,6 +54,9 @@ var annote = {
bindings: [],
events: []
};
if (element.localName === 'content') {
list._hasContent = true;
}
this._parseChildNodesAnnotations(element, annote, list);
if (element.attributes) {
this._parseNodeAttributeAnnotations(element, annote, list);
@ -555,8 +558,7 @@ prevent = dy > dx;
prevent = dx > dy;
}
if (prevent) {
//This breaks scrolling in safari
//ev.preventDefault();
ev.preventDefault();
}
}
},
@ -890,50 +892,55 @@ Gestures.setTouchAction(node, DIRECTION_MAP[direction] || 'auto');
});
Polymer.Gestures = Gestures;
}());
Polymer.Async = function () {
var currVal = 0;
var lastVal = 0;
var callbacks = [];
var twiddle = document.createTextNode('');
function runAsync(callback, waitTime) {
Polymer.Async = {
_currVal: 0,
_lastVal: 0,
_callbacks: [],
_twiddleContent: 0,
_twiddle: document.createTextNode(''),
run: function (callback, waitTime) {
if (waitTime > 0) {
return ~setTimeout(callback, waitTime);
} else {
twiddle.textContent = currVal++;
callbacks.push(callback);
return currVal - 1;
this._twiddle.textContent = this._twiddleContent++;
this._callbacks.push(callback);
return this._currVal++;
}
}
function cancelAsync(handle) {
},
cancel: function (handle) {
if (handle < 0) {
clearTimeout(~handle);
} else {
var idx = handle - lastVal;
var idx = handle - this._lastVal;
if (idx >= 0) {
if (!callbacks[idx]) {
if (!this._callbacks[idx]) {
throw 'invalid async handle: ' + handle;
}
callbacks[idx] = null;
this._callbacks[idx] = null;
}
}
}
function atEndOfMicrotask() {
var len = callbacks.length;
},
_atEndOfMicrotask: function () {
var len = this._callbacks.length;
for (var i = 0; i < len; i++) {
var cb = callbacks[i];
var cb = this._callbacks[i];
if (cb) {
try {
cb();
} catch (e) {
i++;
this._callbacks.splice(0, i);
this._lastVal += i;
this._twiddle.textContent = this._twiddleContent++;
throw e;
}
}
callbacks.splice(0, len);
lastVal += len;
}
new (window.MutationObserver || JsMutationObserver)(atEndOfMicrotask).observe(twiddle, { characterData: true });
return {
run: runAsync,
cancel: cancelAsync
this._callbacks.splice(0, len);
this._lastVal += len;
}
};
}();
new (window.MutationObserver || JsMutationObserver)(Polymer.Async._atEndOfMicrotask.bind(Polymer.Async)).observe(Polymer.Async._twiddle, { characterData: true });
Polymer.Debounce = function () {
var Async = Polymer.Async;
var Debouncer = function (context) {
@ -1088,11 +1095,6 @@ elt[n] = props[n];
}
}
return elt;
},
mixin: function (target, source) {
for (var i in source) {
target[i] = source[i];
}
}
});
Polymer.Bind = {
@ -1109,7 +1111,7 @@ _notifyChange: function (property) {
var eventName = Polymer.CaseMap.camelToDashCase(property) + '-changed';
this.fire(eventName, { value: this[property] }, { bubbles: false });
},
_propertySet: function (property, value, effects) {
_propertySetter: function (property, value, effects, fromAbove) {
var old = this.__data__[property];
if (old !== value && (old === old || value === value)) {
this.__data__[property] = value;
@ -1120,16 +1122,25 @@ if (this._propertyChanged) {
this._propertyChanged(property, value, old);
}
if (effects) {
this._effectEffects(property, value, effects, old);
this._effectEffects(property, value, effects, old, fromAbove);
}
}
return old;
},
_effectEffects: function (property, value, effects, old) {
__setProperty: function (property, value, quiet, node) {
node = node || this;
var effects = node._propertyEffects && node._propertyEffects[property];
if (effects) {
node._propertySetter(property, value, effects, quiet);
} else {
node[property] = value;
}
},
_effectEffects: function (property, value, effects, old, fromAbove) {
effects.forEach(function (fx) {
var fn = Polymer.Bind['_' + fx.kind + 'Effect'];
if (fn) {
fn.call(this, property, value, fx.effect, old);
fn.call(this, property, value, fx.effect, old, fromAbove);
}
}, this);
},
@ -1187,7 +1198,7 @@ return this.__data__[property];
}
};
var setter = function (value) {
this._propertySet(property, value, effects);
this._propertySetter(property, value, effects);
};
if (model.getPropertyInfo && model.getPropertyInfo(property).readOnly) {
model['_set' + this.upper(property)] = setter;
@ -1261,11 +1272,13 @@ return this._applyEffectValue(calc, effect);
_reflectEffect: function (source) {
this.reflectPropertyToAttribute(source);
},
_notifyEffect: function (source) {
_notifyEffect: function (source, value, effect, old, fromAbove) {
if (!fromAbove) {
this._notifyChange(source);
}
},
_functionEffect: function (source, value, fn, old) {
fn.call(this, source, value, old);
_functionEffect: function (source, value, fn, old, fromAbove) {
fn.call(this, source, value, old, fromAbove);
},
_observerEffect: function (source, value, effect, old) {
var fn = this[effect.method];
@ -1291,7 +1304,7 @@ var args = Polymer.Bind._marshalArgs(this.__data__, effect, source, value);
if (args) {
var fn = this[effect.method];
if (fn) {
this[effect.property] = fn.apply(this, args);
this.__setProperty(effect.property, fn.apply(this, args));
} else {
this._warn(this._logf('_computeEffect', 'compute method `' + effect.method + '` not defined'));
}
@ -1364,6 +1377,7 @@ if (prop.observer) {
this._addObserverEffect(p, prop.observer);
}
if (prop.computed) {
prop.readOnly = true;
this._addComputedEffect(p, prop.computed);
}
if (prop.notify) {
@ -1554,12 +1568,13 @@ this._configure();
},
_configure: function () {
this._configureAnnotationReferences();
this._aboveConfig = this.mixin({}, this._config);
var config = {};
this.behaviors.forEach(function (b) {
this._configureProperties(b.properties, config);
}, this);
this._configureProperties(this.properties, config);
this._mixinConfigure(config, this._config);
this._mixinConfigure(config, this._aboveConfig);
this._config = config;
this._distributeConfig(this._config);
},
@ -1603,18 +1618,13 @@ node._configValue(x.effect.name, value);
},
_afterClientsReady: function () {
this._executeStaticEffects();
this._applyConfig(this._config);
this._applyConfig(this._config, this._aboveConfig);
this._flushHandlers();
},
_applyConfig: function (config) {
_applyConfig: function (config, aboveConfig) {
for (var n in config) {
if (this[n] === undefined) {
var effects = this._propertyEffects[n];
if (effects) {
this._propertySet(n, config[n], effects);
} else {
this[n] = config[n];
}
this.__setProperty(n, config[n], n in aboveConfig);
}
}
},
@ -1643,7 +1653,7 @@ h[0].call(this, h[1], h[2]);
'use strict';
Polymer.Base._addFeature({
notifyPath: function (path, value, fromAbove) {
var old = this._propertySet(path, value);
var old = this._propertySetter(path, value);
if (old !== value && (old === old || value === value)) {
this._pathEffector(path, value);
if (!fromAbove) {
@ -1681,6 +1691,15 @@ return;
}
array = Array.isArray(prop) ? prop : null;
}
if (array) {
var coll = Polymer.Collection.get(array);
var old = prop[last];
var key = coll.getKey(old);
if (key) {
parts[i] = key;
coll.setItem(key, value);
}
}
prop[last] = value;
if (!root) {
this.notifyPath(parts.join('.'), value);
@ -1834,9 +1853,8 @@ return ret;
splice: function (path, start, deleteCount) {
var array = this.get(path);
var args = Array.prototype.slice.call(arguments, 1);
var rem = array.slice(start, start + deleteCount);
var ret = array.splice.apply(array, args);
this._notifySplice(array, path, start, args.length - 2, rem);
this._notifySplice(array, path, start, args.length - 2, ret);
return ret;
},
shift: function (path) {
@ -1984,10 +2002,10 @@ var AT_START = '@';
var rx = {
comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
port: /@import[^;]*;/gim,
customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?;/gim,
mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?};?/gim,
mixinApply: /@apply[\s]*\([^)]*?\)[\s]*;/gim,
varApply: /[^;:]*?:[^;]*var[^;]*;/gim,
customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
varApply: /[^;:]*?:[^;]*var[^;]*(?:[;\n]|$)?/gim,
keyframesRule: /^@[^\s]*keyframes/
};
return api;
@ -2163,25 +2181,33 @@ rule.selector = p$.join(COMPLEX_SELECTOR_SEP);
},
_transformComplexSelector: function (selector, scope, hostScope) {
var stop = false;
var hostContext = false;
var self = this;
selector = selector.replace(SIMPLE_SELECTOR_SEP, function (m, c, s) {
if (!stop) {
var o = self._transformCompoundSelector(s, c, scope, hostScope);
if (o.stop) {
stop = true;
}
c = o.combinator;
s = o.value;
var info = self._transformCompoundSelector(s, c, scope, hostScope);
stop = stop || info.stop;
hostContext = hostContext || info.hostContext;
c = info.combinator;
s = info.value;
} else {
s = s.replace(SCOPE_JUMP, ' ');
}
return c + s;
});
if (hostContext) {
selector = selector.replace(HOST_CONTEXT_PAREN, function (m, pre, paren, post) {
return pre + paren + ' ' + hostScope + post + COMPLEX_SELECTOR_SEP + ' ' + pre + hostScope + paren + post;
});
}
return selector;
},
_transformCompoundSelector: function (selector, combinator, scope, hostScope) {
var jumpIndex = selector.search(SCOPE_JUMP);
if (selector.indexOf(HOST) >= 0) {
var hostContext = false;
if (selector.indexOf(HOST_CONTEXT) >= 0) {
hostContext = true;
} else if (selector.indexOf(HOST) >= 0) {
selector = selector.replace(HOST_PAREN, function (m, host, paren) {
return hostScope + paren;
});
@ -2200,7 +2226,8 @@ stop = true;
return {
value: selector,
combinator: combinator,
stop: stop
stop: stop,
hostContext: hostContext
};
},
_transformSimpleSelector: function (selector, scope) {
@ -2232,6 +2259,8 @@ var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)([^\s>+~]+)/g;
var HOST = ':host';
var ROOT = ':root';
var HOST_PAREN = /(\:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
var HOST_CONTEXT = ':host-context';
var HOST_CONTEXT_PAREN = /(.*)(?:\:host-context)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))(.*)/;
var CONTENT = '::content';
var SCOPE_JUMP = /\:\:content|\:\:shadow|\/deep\//;
var CSS_CLASS_PREFIX = '.';
@ -2612,7 +2641,7 @@ var cssText = style ? style.textContent || '' : this.transformStyles(element, pr
var s = element._customStyle;
if (s && !nativeShadow && s !== style) {
s._useCount--;
if (s._useCount <= 0) {
if (s._useCount <= 0 && s.parentNode) {
s.parentNode.removeChild(s);
}
}
@ -2633,14 +2662,23 @@ element._customStyle = style;
}
return style;
},
mixinCustomStyle: function (props, customStyle) {
var v;
for (var i in customStyle) {
v = customStyle[i];
if (v || v === 0) {
props[i] = v;
}
}
},
rx: {
VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim,
MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im,
VAR_ASSIGN: /(?:^|[;\n]\s*)(--[\w-]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?:(?=[;\n])|$)/gim,
MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\)/im,
VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim,
VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
IS_VAR: /^--/,
BRACKETED: /\{[^}]*\}/g,
HOST_PREFIX: '(?:^|[^.])',
HOST_PREFIX: '(?:^|[^.#[:])',
HOST_SUFFIX: '($|[.:[\\s>+~])'
},
HOST_SELECTORS: [':host'],
@ -2653,41 +2691,6 @@ var v = 1 << n % 32;
bits[o] = (bits[o] || 0) | v;
}
}();
Polymer.StyleDefaults = function () {
var styleProperties = Polymer.StyleProperties;
var styleUtil = Polymer.StyleUtil;
var api = {
_styles: [],
_properties: null,
addStyle: function (style) {
this._styles.push(style);
this._properties = null;
},
get _styleProperties() {
if (!this._properties) {
styleProperties.decorateStyles(this._styles);
this._styles._scopeStyleProperties = null;
this._properties = styleProperties.scopePropertiesFromStyles(this._styles);
styleProperties.reify(this._properties);
}
return this._properties;
},
_needsStyleProperties: function () {
},
_computeStyleProperties: function () {
return this._styleProperties;
},
updateStyles: function () {
this._styleCache.clear();
for (var i = 0, s; i < this._styles.length; i++) {
s = this._styles[i];
s = s.__importElement || s;
s._apply();
}
}
};
return api;
}();
(function () {
Polymer.StyleCache = function () {
this.cache = {};
@ -2718,8 +2721,10 @@ clear: function () {
this.cache = {};
},
_objectsEqual: function (target, source) {
var t, s;
for (var i in target) {
if (target[i] !== source[i]) {
t = target[i], s = source[i];
if (!(typeof t === 'object' && t ? this._objectsStrictlyEqual(t, s) : t === s)) {
return false;
}
}
@ -2727,9 +2732,55 @@ if (Array.isArray(target)) {
return target.length === source.length;
}
return true;
},
_objectsStrictlyEqual: function (target, source) {
return this._objectsEqual(target, source) && this._objectsEqual(source, target);
}
};
}());
Polymer.StyleDefaults = function () {
var styleProperties = Polymer.StyleProperties;
var styleUtil = Polymer.StyleUtil;
var StyleCache = Polymer.StyleCache;
var api = {
_styles: [],
_properties: null,
customStyle: {},
_styleCache: new StyleCache(),
addStyle: function (style) {
this._styles.push(style);
this._properties = null;
},
get _styleProperties() {
if (!this._properties) {
styleProperties.decorateStyles(this._styles);
this._styles._scopeStyleProperties = null;
this._properties = styleProperties.scopePropertiesFromStyles(this._styles);
styleProperties.mixinCustomStyle(this._properties, this.customStyle);
styleProperties.reify(this._properties);
}
return this._properties;
},
_needsStyleProperties: function () {
},
_computeStyleProperties: function () {
return this._styleProperties;
},
updateStyles: function (properties) {
this._properties = null;
if (properties) {
Polymer.Base.mixin(this.customStyle, properties);
}
this._styleCache.clear();
for (var i = 0, s; i < this._styles.length; i++) {
s = this._styles[i];
s = s.__importElement || s;
s._apply();
}
}
};
return api;
}();
(function () {
'use strict';
var serializeValueToAttribute = Polymer.Base.serializeValueToAttribute;
@ -2759,6 +2810,7 @@ if (!scope._styleCache) {
scope._styleCache = new Polymer.StyleCache();
}
var scopeData = propertyUtils.propertyDataFromStyles(scope._styles, this);
scopeData.key.customStyle = this.customStyle;
info = scope._styleCache.retrieve(this.is, scopeData.key, this._styles);
var scopeCached = Boolean(info);
if (scopeCached) {
@ -2773,15 +2825,14 @@ info = styleCache.retrieve(this.is, this._ownStyleProperties, this._styles);
var globalCached = Boolean(info) && !scopeCached;
var style = this._applyStyleProperties(info);
if (!scopeCached) {
var cacheableStyle = style;
if (nativeShadow) {
cacheableStyle = style.cloneNode ? style.cloneNode(true) : Object.create(style || null);
}
style = style && nativeShadow ? style.cloneNode(true) : style;
info = {
style: cacheableStyle,
style: style,
_scopeSelector: this._scopeSelector,
_styleProperties: this._styleProperties
};
scopeData.key.customStyle = {};
this.mixin(scopeData.key.customStyle, this.customStyle);
scope._styleCache.store(this.is, info, scopeData.key, this._styles);
if (!globalCached) {
styleCache.store(this.is, Object.create(info), this._ownStyleProperties, this._styles);
@ -2798,7 +2849,7 @@ this.mixin(props, propertyUtils.hostPropertiesFromStyles(this._styles));
scopeProps = scopeProps || propertyUtils.propertyDataFromStyles(scope._styles, this).properties;
this.mixin(props, scopeProps);
this.mixin(props, propertyUtils.scopePropertiesFromStyles(this._styles));
this.mixin(props, this.customStyle);
propertyUtils.mixinCustomStyle(props, this.customStyle);
propertyUtils.reify(props);
this._styleProperties = props;
},
@ -2815,10 +2866,10 @@ _applyStyleProperties: function (info) {
var oldScopeSelector = this._scopeSelector;
this._scopeSelector = info ? info._scopeSelector : this.is + '-' + this.__proto__._scopeCount++;
var style = propertyUtils.applyElementStyle(this, this._styleProperties, this._scopeSelector, info && info.style);
if ((style || oldScopeSelector) && !nativeShadow) {
if (!nativeShadow) {
propertyUtils.applyElementScopeSelector(this, this._scopeSelector, oldScopeSelector, this._scopeCssViaAttr);
}
return style || {};
return style;
},
serializeValueToAttribute: function (value, attribute, node) {
node = node || this;
@ -2837,8 +2888,11 @@ selector += (selector ? ' ' : '') + SCOPE_NAME + ' ' + this.is + (element._scope
}
return selector;
},
updateStyles: function () {
updateStyles: function (properties) {
if (this.isAttached) {
if (properties) {
this.mixin(this.customStyle, properties);
}
if (this._needsStyleProperties()) {
this._updateStyleProperties();
} else {
@ -2862,8 +2916,8 @@ c.updateStyles();
}
}
});
Polymer.updateStyles = function () {
styleDefaults.updateStyles();
Polymer.updateStyles = function (properties) {
styleDefaults.updateStyles(properties);
Polymer.Base._updateRootStyles(document);
};
var styleCache = new Polymer.StyleCache();
@ -3024,6 +3078,9 @@ var parentProps = archetype._parentProps;
for (var prop in parentProps) {
archetype._addPropertyEffect(prop, 'function', this._createHostPropEffector(prop));
}
for (var prop in this._instanceProps) {
archetype._addPropertyEffect(prop, 'function', this._createInstancePropEffector(prop));
}
},
_customPrepAnnotations: function (archetype, template) {
archetype._template = template;
@ -3082,18 +3139,27 @@ return function (source, value) {
this.dataHost['_parent_' + prop] = value;
};
},
_createInstancePropEffector: function (prop) {
return function (source, value, old, fromAbove) {
if (!fromAbove) {
this.dataHost._forwardInstanceProp(this, prop, value);
}
};
},
_extendTemplate: function (template, proto) {
Object.getOwnPropertyNames(proto).forEach(function (n) {
var val = template[n];
var pd = Object.getOwnPropertyDescriptor(proto, n);
Object.defineProperty(template, n, pd);
if (val !== undefined) {
template._propertySet(n, val);
template._propertySetter(n, val);
}
});
},
_forwardInstancePath: function (inst, path, value) {
},
_forwardInstanceProp: function (inst, prop, value) {
},
_notifyPathImpl: function (path, value) {
var dataHost = this.dataHost;
var dot = path.indexOf('.');
@ -3116,6 +3182,7 @@ this._rootDataHost = host._getRootDataHost();
this._setupConfigure(model);
this._pushHost(host);
this.root = this.instanceTemplate(this._template);
this.root.__noContent = !this._notes._hasContent;
this.root.__styleScoped = true;
this._popHost();
this._marshalAnnotatedNodes();
@ -3220,8 +3287,17 @@ return this.pmap[item];
getKeys: function () {
return Object.keys(this.store);
},
setItem: function (key, value) {
this.store[key] = value;
setItem: function (key, item) {
var old = this.store[key];
if (old) {
this._removeFromMap(old);
}
if (item && typeof item == 'object') {
this.omap.set(item, key);
} else {
this.pmap[item] = key;
}
this.store[key] = item;
},
getItem: function (key) {
return this.store[key];
@ -3383,7 +3459,7 @@ return;
},
render: function () {
this._fullRefresh = true;
this.debounce('render', this._render);
this._debounceTemplate(this._render);
this._flushTemplates();
},
_render: function () {
@ -3415,9 +3491,9 @@ rowForKey[key] = i;
if (!row) {
this.rows.push(row = this._insertRow(i, null, item));
}
row[this.as] = item;
row.__key__ = key;
row[this.indexAs] = i;
row.__setProperty(this.as, item, true);
row.__setProperty('__key__', key, true);
row.__setProperty(this.indexAs, i, true);
}
for (; i < this.rows.length; i++) {
this._detachRow(i);
@ -3582,16 +3658,26 @@ c._hideTemplateChildren = hidden;
}
}
},
_forwardInstanceProp: function (row, prop, value) {
if (prop == this.as) {
var idx;
if (this._sortFn || this._filterFn) {
idx = this.items.indexOf(this.collection.getItem(row.__key__));
} else {
idx = row[this.indexAs];
}
this.set('items.' + idx, value);
}
},
_forwardInstancePath: function (row, path, value) {
if (path.indexOf(this.as + '.') === 0) {
this.notifyPath('items.' + row.__key__ + '.' + path.slice(this.as.length + 1), value);
return true;
}
},
_forwardParentProp: function (prop, value) {
if (this.rows) {
this.rows.forEach(function (row) {
row[prop] = value;
row.__setProperty(prop, value, true);
}, this);
}
},
@ -3613,7 +3699,7 @@ if (dot >= 0) {
path = this.as + '.' + path.substring(dot + 1);
row.notifyPath(path, value, true);
} else {
row[this.as] = value;
row.__setProperty(this.as, value, true);
}
}
}
@ -3721,15 +3807,16 @@ extends: 'template',
properties: {
'if': {
type: Boolean,
value: false
value: false,
observer: '_queueRender'
},
restamp: {
type: Boolean,
value: false
value: false,
observer: '_queueRender'
}
},
behaviors: [Polymer.Templatizer],
observers: ['_queueRender(if, restamp)'],
_queueRender: function () {
this._debounceTemplate(this._render);
},