diff options
Diffstat (limited to 'catapult/third_party/polymer/components/neon-animation')
70 files changed, 5876 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/neon-animation/.bower.json b/catapult/third_party/polymer/components/neon-animation/.bower.json new file mode 100644 index 00000000..3eeee660 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/.bower.json @@ -0,0 +1,61 @@ +{ + "name": "neon-animation", + "description": "A system for animating Polymer-based web components", + "version": "1.2.5", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "web-component", + "polymer", + "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-animatable.html", + "neon-animations.html" + ], + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/neon-animation" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/neon-animation", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-meta": "PolymerElements/iron-meta#^1.0.0", + "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", + "iron-selector": "PolymerElements/iron-selector#^1.0.0", + "web-animations-js": "web-animations/web-animations-js#^2.2.0" + }, + "devDependencies": { + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "paper-item": "PolymerElements/paper-item#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.0", + "iron-icons": "PolymerElements/iron-icons#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0" + }, + "_release": "1.2.5", + "_resolution": { + "type": "version", + "tag": "v1.2.5", + "commit": "9af00bc65118e0806cdfa5a5e1ea5fb155147016" + }, + "_source": "https://github.com/PolymerElements/neon-animation.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/neon-animation" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/neon-animation/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/neon-animation/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..08943a1e --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/neon-animation/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/neon-animation/.gitignore b/catapult/third_party/polymer/components/neon-animation/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/neon-animation/.travis.yml b/catapult/third_party/polymer/components/neon-animation/.travis.yml new file mode 100644 index 00000000..52ede66d --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +env: + global: + - secure: >- + coZBjQTrTsejOS2utVzo0hhyYRF40H2KoN30G44tRxVKV/0orSm1HJbvG2YDb/tmAFtEObJmNlYonu1I3G9RVncn9y69nRf8BjLHrpOIhNvesug7kPUuprj5KRoLo9O0UyIYmUh6i4YGt1aAeR/Wq/XVifSNIXnAVguzntbSmqvWJdqj8+FHmNzyo5269+tnOzTruXByrUcSZnvNgHjCYFZOY00a29cyK6fTdd0Qbzi9cvhEDfx1j6uXzYah7bdA8caunW1HvxwI+jiV8yEVySB7eku+SHA+8JJUIIZEL1iCASAqqVbTUoOxtfgbTXQRJdVAuDNj1J+AqFVtuJpJl4xvX97dF9FVQvgyLW9fpeb7rojdU0TSazBpVi7LLvocQjofp8bbAtbJ8Z0BN+/3DgM33uDTF8DeBGj2WmR+49F2oPnYh7FwjhbiOVqkOKyolqrRpK0PYczVdHusR6+cONkGcLzO9G5nakWzE9diJSW+nw9qD3bVL99ZzHK+6U7+R75KJdxj0V7VA1lkvWRlchxXrpsEoM0AQEUf97LsvkTpXPQ4Wf9XkCxFRAicSTeDijLCPy3ti0L6D6x9sBZwV5d3ODnkdxCAy2aY7g2YEWuuBDZC+W1ggQ3Xe705GwbBNk22HikA6XOVX9lb3xm7SnenfDGkFhNDzRijoGg96jU= + - secure: >- + hJ6VMaJqDh5HPdeERIqoOcdWZJTAOTeS/Lr6FLCWEOOvYPxwRi/L1pKbVuYf2ugeS2Z0TEvAS7RdfjRuC+NGFhsmpnpBlxAyJhVKcXrhHKVtoFK04xaCD2wDMkPaZiDZQRGF/H6/PyuoB4Tqss3aN/DC9eSMwY9HFfoeYRIwiJeb8Kq09pBtvoxU151VQt+jlmyCVw7rhNDTAazaCGKicgvbAtxSJ6xNswNfqOrtCYB+WW5CpUE+qqTjjbistSQJu3hjk2UwFMLJZXtJWdkcD88vNdHy3mtNZQNtE8x+ckNVqgJ98DyAN7HLUU0GvzTOiOGFfwr+bpl6Td8klR2YoQOW4ypluAetcDN9X7tKOxDQaaI8AyPLXPWi9JcESEGAeLzpfkWZ6clrQmqfLdVDsqYKPldF9m7Ozjdhq40r3qFdQAdEI29dBOKOalaZXgWnvU2wu5FBtWnBMSk89zOYC5wGR0E+wOMMMRu90LuMQY40Myhqso5iUFL5qhrn41I8ZfFi0EyOgEeKzYH3zrdo7/msEkCXxI0SKfG1CGSQSOT2luO6Xu6xIuf7qoWYKJiJQ40ObsRKn0cA4GQpNZe/dgKMRH2zzfKW6d2BSAsZGTDJG14XcDi9d/zz7djgboMjc/A6sH8L3c8BkbUa4wuyJRNu7VBZQHq5yrnHpxC6SbA= +dist: trusty diff --git a/catapult/third_party/polymer/components/neon-animation/CONTRIBUTING.md b/catapult/third_party/polymer/components/neon-animation/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +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 +## Guide for Contributors + +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: + +### Filing Issues + +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 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: [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. + +### Submitting Pull Requests + +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. + +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 in the pull request description using the following syntax: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. + +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! diff --git a/catapult/third_party/polymer/components/neon-animation/README.md b/catapult/third_party/polymer/components/neon-animation/README.md new file mode 100644 index 00000000..29c07539 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/README.md @@ -0,0 +1,306 @@ +# neon-animation + +`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/). + +*Warning: The API may change.* + +* [A basic animatable element](#basic) +* [Animation configuration](#configuration) + * [Animation types](#configuration-types) + * [Configuration properties](#configuration-properties) + * [Using multiple animations](#configuration-multiple) + * [Running animations encapsulated in children nodes](#configuration-encapsulation) +* [Page transitions](#page-transitions) + * [Shared element animations](#shared-element) + * [Declarative page transitions](#declarative-page) +* [Included animations](#animations) +* [Demos](#demos) + +<a name="basic"></a> +## A basic animatable element + +Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation. + +```js +Polymer({ + is: 'my-animatable', + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + properties: { + animationConfig: { + value: function() { + return { + // provided by neon-animation/animations/scale-down-animation.html + name: 'scale-down-animation', + node: this + } + } + } + }, + listeners: { + // this event is fired when the animation finishes + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + animate: function() { + // run scale-down-animation + this.playAnimation(); + }, + _onNeonAnimationFinish: function() { + console.log('animation done!'); + } +}); +``` + +[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html) + +<a name="configuration"></a> +## Animation configuration + +<a name="configuration-types"></a> +### Animation types + +An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration. + +```js +Polymer({ + is: 'my-dialog', + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + properties: { + opened: { + type: Boolean + }, + animationConfig: { + value: function() { + return { + 'entry': { + // provided by neon-animation/animations/scale-up-animation.html + name: 'scale-up-animation', + node: this + }, + 'exit': { + // provided by neon-animation/animations/fade-out-animation.html + name: 'fade-out-animation', + node: this + } + } + } + } + }, + listeners: { + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + show: function() { + this.opened = true; + this.style.display = 'inline-block'; + // run scale-up-animation + this.playAnimation('entry'); + }, + hide: function() { + this.opened = false; + // run fade-out-animation + this.playAnimation('exit'); + }, + _onNeonAnimationFinish: function() { + if (!this.opened) { + this.style.display = 'none'; + } + } +}); +``` + +[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html) + +You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations: + +```js +properties: { + entryAnimation: { + value: 'scale-up-animation' + }, + exitAnimation: { + value: 'fade-out-animation' + } +} +``` + +<a name="configuration-properties"></a> +### Configuration properties + +You can pass additional parameters to configure an animation in the animation configuration object. +All animations should accept the following properties: + + * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`. + * `node`: The target node to apply the animation to. Defaults to `this`. + * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The + properties include the following: + * `duration`: The duration of the animation in milliseconds. + * `delay`: The delay before the start of the animation in milliseconds. + * `easing`: A timing function for the animation. Matches the CSS timing function values. + +Animations may define additional configuration properties and they are listed in their documentation. + +<a name="configuration-multiple"></a> +### Using multiple animations + +Set the animation configuration to an array to combine animations, like this: + +```js +animationConfig: { + value: function() { + return { + // fade-in-animation is run with a 50ms delay from slide-down-animation + 'entry': [{ + name: 'slide-down-animation', + node: this + }, { + name: 'fade-in-animation', + node: this, + timing: {delay: 50} + }] + } + } +} +``` + +<a name="configuration-encapsulation"></a> +### Running animations encapsulated in children nodes + +You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property. + +```js +animationConfig: { + value: function() { + return { + // run fade-in-animation on this, and the entry animation on this.$.myAnimatable + 'entry': [ + {name: 'fade-in-animation', node: this}, + {animatable: this.$.myAnimatable, type: 'entry'} + ] + } + } +} +``` + +<a name="page-transitions"></a> +## Page transitions + +*The artist formerly known as `<core-animated-pages>`* + +The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page. + +<a name="shared-element"></a> +### Shared element animations + +Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation. + +In the incoming page: + +```js +properties: { + animationConfig: { + value: function() { + return { + // the incoming page defines the 'entry' animation + 'entry': { + name: 'hero-animation', + id: 'hero', + toPage: this + } + } + } + }, + sharedElements: { + value: function() { + return { + 'hero': this.$.hero + } + } + } +} +``` + +In the outgoing page: + +```js +properties: { + animationConfig: { + value: function() { + return { + // the outgoing page defines the 'exit' animation + 'exit': { + name: 'hero-animation', + id: 'hero', + fromPage: this + } + } + } + }, + sharedElements: { + value: function() { + return { + 'hero': this.$.otherHero + } + } + } +} +``` + +<a name="declarative-page"></a> +### Declarative page transitions + +For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions. + +For example: + +```js +<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation"> + <neon-animatable>1</neon-animatable> + <neon-animatable>2</neon-animatable> + <neon-animatable>3</neon-animatable> + <neon-animatable>4</neon-animatable> + <neon-animatable>5</neon-animatable> +</neon-animated-pages> +``` + +The new page will slide in from the right, and the old page slide away to the left. + +<a name="animations"></a> +## Included animations + +Single element animations: + + * `fade-in-animation` Animates opacity from `0` to `1`; + * `fade-out-animation` Animates opacity from `1` to `0`; + * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`; + * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`; + * `slide-down-animation` Animates transform from `none` to `translateY(100%)`; + * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`; + * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`; + * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`; + * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`; + * `slide-right-animation` Animates transform from `none` to `translateX(100%)`; + * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`; + * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`; + * `transform-animation` Animates a custom transform. + +Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties. + +Shared element animations + + * `hero-animation` Animates an element such that it looks like it scales and transforms from another element. + * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element. + +Group animations + * `cascaded-animation` Applys an animation to an array of elements with a delay between each. + +<a name="demos"></a> +## Demos + + * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html) + * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html) + * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width) + * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html) + * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html) diff --git a/catapult/third_party/polymer/components/neon-animation/animations/cascaded-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/cascaded-animation.html new file mode 100644 index 00000000..53997533 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/cascaded-animation.html @@ -0,0 +1,95 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<cascaded-animation>` applies an animation on an array of elements with a delay between each. +the delay defaults to 50ms. + +Configuration: +``` +{ + name: 'cascaded-animation', + animation: <animation-name>, + nodes: <array-of-nodes>, + nodeDelay: <node-delay-in-ms>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'cascaded-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + /** + * @param {{ + * animation: string, + * nodes: !Array<!Element>, + * nodeDelay: (number|undefined), + * timing: (Object|undefined) + * }} config + */ + configure: function(config) { + this._animations = []; + var nodes = config.nodes; + var effects = []; + var nodeDelay = config.nodeDelay || 50; + + config.timing = config.timing || {}; + config.timing.delay = config.timing.delay || 0; + + var oldDelay = config.timing.delay; + var abortedConfigure; + for (var node, index = 0; node = nodes[index]; index++) { + config.timing.delay += nodeDelay; + config.node = node; + + var animation = document.createElement(config.animation); + if (animation.isNeonAnimation) { + var effect = animation.configure(config); + + this._animations.push(animation); + effects.push(effect); + } else { + console.warn(this.is + ':', config.animation, 'not found!'); + abortedConfigure = true; + break; + } + } + config.timing.delay = oldDelay; + config.node = null; + // if a bad animation was configured, abort config. + if (abortedConfigure) { + return; + } + + this._effect = new GroupEffect(effects); + return this._effect; + }, + + complete: function() { + for (var animation, index = 0; animation = this._animations[index]; index++) { + animation.complete(animation.config); + } + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/fade-in-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/fade-in-animation.html new file mode 100644 index 00000000..cdb74e30 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/fade-in-animation.html @@ -0,0 +1,49 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<fade-in-animation>` animates the opacity of an element from 0 to 1. + +Configuration: +``` +{ + name: 'fade-in-animation', + node: <node> + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'fade-in-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + this._effect = new KeyframeEffect(node, [ + {'opacity': '0'}, + {'opacity': '1'} + ], this.timingFromConfig(config)); + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/fade-out-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/fade-out-animation.html new file mode 100644 index 00000000..82cc3997 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/fade-out-animation.html @@ -0,0 +1,49 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<fade-out-animation>` animates the opacity of an element from 1 to 0. + +Configuration: +``` +{ + name: 'fade-out-animation', + node: <node> + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'fade-out-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + this._effect = new KeyframeEffect(node, [ + {'opacity': '1'}, + {'opacity': '0'} + ], this.timingFromConfig(config)); + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/hero-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/hero-animation.html new file mode 100644 index 00000000..176bee78 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/hero-animation.html @@ -0,0 +1,83 @@ +<!-- +@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"> + +<!-- +`<hero-animation>` is a shared element animation that scales and transform an element such that it +appears to be shared between two pages. Use this in `<neon-animated-pages>`. The source page +should use this animation in an 'exit' animation and set the `fromPage` configuration property to +itself, and the destination page should use this animation in an `entry` animation and set the +`toPage` configuration property to itself. They should also define the hero elements in the +`sharedElements` property (not a configuration property, see +`Polymer.NeonSharedElementAnimatableBehavior`). + +Configuration: +``` +{ + name: 'hero-animation', + id: <shared-element-id>, + timing: <animation-timing>, + toPage: <node>, /* define for the destination page */ + fromPage: <node>, /* define for the source page */ +} +``` +--> + +<script> + + Polymer({ + + is: 'hero-animation', + + behaviors: [ + Polymer.NeonSharedElementAnimationBehavior + ], + + configure: function(config) { + var shared = this.findSharedElements(config); + if (!shared) { + return; + } + + var fromRect = shared.from.getBoundingClientRect(); + var toRect = shared.to.getBoundingClientRect(); + + var deltaLeft = fromRect.left - toRect.left; + var deltaTop = fromRect.top - toRect.top; + var deltaWidth = fromRect.width / toRect.width; + var deltaHeight = fromRect.height / toRect.height; + + this._effect = new KeyframeEffect(shared.to, [ + {'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'}, + {'transform': 'none'} + ], this.timingFromConfig(config)); + + this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0'); + shared.to.style.zIndex = 10000; + shared.from.style.visibility = 'hidden'; + + return this._effect; + }, + + complete: function(config) { + var shared = this.findSharedElements(config); + if (!shared) { + return null; + } + shared.to.style.zIndex = ''; + shared.from.style.visibility = ''; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html new file mode 100644 index 00000000..e3a00725 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/opaque-animation.html @@ -0,0 +1,46 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent +webkit/safari from drawing a frame before an animation for elements that animate from display:none. +--> + +<script> + + Polymer({ + + is: 'opaque-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + this._effect = new KeyframeEffect(node, [ + {'opacity': '1'}, + {'opacity': '1'} + ], this.timingFromConfig(config)); + node.style.opacity = '0'; + return this._effect; + }, + + complete: function(config) { + config.node.style.opacity = ''; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/reverse-ripple-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/reverse-ripple-animation.html new file mode 100644 index 00000000..f1f9de96 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/reverse-ripple-animation.html @@ -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) { + var shared = this.findSharedElements(config); + 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._effect = new KeyframeEffect(shared.from, [ + {'transform': translate + ' ' + scale}, + {'transform': translate + ' scale(0)'} + ], this.timingFromConfig(config)); + + this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%'); + shared.from.style.borderRadius = '50%'; + + return this._effect; + }, + + complete: function() { + if (this.sharedElements) { + this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', ''); + this.sharedElements.from.style.borderRadius = ''; + } + } + }); +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/ripple-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/ripple-animation.html new file mode 100644 index 00000000..d97186c3 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/ripple-animation.html @@ -0,0 +1,93 @@ +<!-- +@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"> + +<!-- +`<ripple-animation>` scales and transform an element such that it appears to ripple from either +a shared element, or from a screen position, to full screen. + +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 +hero elements in the `sharedElements` property (not a configuration property, see +`Polymer.NeonSharedElementAnimatableBehavior`). + +If using a screen position, define the `gesture` property. + +Configuration: +``` +{ + name: '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: 'ripple-animation', + + behaviors: [ + Polymer.NeonSharedElementAnimationBehavior + ], + + configure: function(config) { + var shared = this.findSharedElements(config); + if (!shared) { + return null; + } + + var translateX, translateY; + var toRect = shared.to.getBoundingClientRect(); + if (config.gesture) { + translateX = config.gesture.x - (toRect.left + (toRect.width / 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.top + (toRect.height / 2)); + } + var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; + + var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2); + var diameter = Math.sqrt(2 * size * size); + var scaleX = diameter / toRect.width; + var scaleY = diameter / toRect.height; + var scale = 'scale(' + scaleX + ',' + scaleY + ')'; + + this._effect = new KeyframeEffect(shared.to, [ + {'transform': translate + ' scale(0)'}, + {'transform': translate + ' ' + scale} + ], this.timingFromConfig(config)); + + this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%'); + shared.to.style.borderRadius = '50%'; + + return this._effect; + }, + + complete: function() { + if (this.sharedElements) { + this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', ''); + this.sharedElements.to.style.borderRadius = ''; + } + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/scale-down-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/scale-down-animation.html new file mode 100644 index 00000000..1dcb1713 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/scale-down-animation.html @@ -0,0 +1,65 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it +scales in both the x and y axes. + +Configuration: +``` +{ + name: 'scale-down-animation', + node: <node>, + axis: 'x' | 'y' | '', + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'scale-down-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + var scaleProperty = 'scale(0, 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(1,1)'}, + {'transform': scaleProperty} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/scale-up-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/scale-up-animation.html new file mode 100644 index 00000000..42ec3f32 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/scale-up-animation.html @@ -0,0 +1,65 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<scale-up-animation>` animates the scale transform of an element from 0 to 1. By default it +scales in both the x and y axes. + +Configuration: +``` +{ + name: 'scale-up-animation', + node: <node>, + axis: 'x' | 'y' | '', + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'scale-up-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + 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': scaleProperty}, + {'transform': 'scale(1, 1)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-down-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-down-animation.html new file mode 100644 index 00000000..9db28dd1 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-down-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-down-animation>` animates the transform of an element from `none` `translateY(100%)`. +The `transformOrigin` defaults to `50% 0`. + +Configuration: +``` +{ + name: 'slide-down-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-down-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translateY(0%)'}, + {'transform': 'translateY(100%)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-from-bottom-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-bottom-animation.html new file mode 100644 index 00000000..d1156e93 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-bottom-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`. +The `transformOrigin` defaults to `50% 0`. + +Configuration: +``` +{ + name: 'slide-from-bottom-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-from-bottom-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translateY(100%)'}, + {'transform': 'translateY(0)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-from-left-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-left-animation.html new file mode 100644 index 00000000..5386c9b0 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-left-animation.html @@ -0,0 +1,60 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-from-left-animation>` animates the transform of an element from +`translateX(-100%)` to `none`. +The `transformOrigin` defaults to `0 50%`. + +Configuration: +``` +{ + name: 'slide-from-left-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-from-left-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translateX(-100%)'}, + {'transform': 'none'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-from-right-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-right-animation.html new file mode 100644 index 00000000..2afb591f --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-right-animation.html @@ -0,0 +1,60 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-from-right-animation>` animates the transform of an element from +`translateX(100%)` to `none`. +The `transformOrigin` defaults to `0 50%`. + +Configuration: +``` +{ + name: 'slide-from-right-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-from-right-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translateX(100%)'}, + {'transform': 'none'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-from-top-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-top-animation.html new file mode 100644 index 00000000..c0a48811 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-from-top-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to +`none`. The `transformOrigin` defaults to `50% 0`. + +Configuration: +``` +{ + name: 'slide-from-top-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-from-top-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translateY(-100%)'}, + {'transform': 'translateY(0%)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-left-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-left-animation.html new file mode 100644 index 00000000..da80a6bd --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-left-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-left-animation>` animates the transform of an element from `none` to `translateX(-100%)`. +The `transformOrigin` defaults to `0 50%`. + +Configuration: +``` +{ + name: 'slide-left-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-left-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'none'}, + {'transform': 'translateX(-100%)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-right-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-right-animation.html new file mode 100644 index 00000000..99b5794e --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-right-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-right-animation>` animates the transform of an element from `none` to `translateX(100%)`. +The `transformOrigin` defaults to `0 50%`. + +Configuration: +``` +{ + name: 'slide-right-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-right-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'none'}, + {'transform': 'translateX(100%)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '0 50%'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/slide-up-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/slide-up-animation.html new file mode 100644 index 00000000..6464e78e --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/slide-up-animation.html @@ -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="../neon-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<slide-up-animation>` animates the transform of an element from `translateY(0)` to +`translateY(-100%)`. The `transformOrigin` defaults to `50% 0`. + +Configuration: +``` +{ + name: 'slide-up-animation', + node: <node>, + transformOrigin: <transform-origin>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'slide-up-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + + this._effect = new KeyframeEffect(node, [ + {'transform': 'translate(0)'}, + {'transform': 'translateY(-100%)'} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } else { + this.setPrefixedProperty(node, 'transformOrigin', '50% 0'); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/animations/transform-animation.html b/catapult/third_party/polymer/components/neon-animation/animations/transform-animation.html new file mode 100644 index 00000000..2e504442 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/animations/transform-animation.html @@ -0,0 +1,70 @@ +<!-- +@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-animation-behavior.html"> +<link rel="import" href="../web-animations.html"> + +<!-- +`<transform-animation>` animates a custom transform on an element. Use this to animate multiple +transform properties, or to apply a custom transform value. + +Configuration: +``` +{ + name: 'transform-animation', + node: <node>, + transformOrigin: <transform-origin>, + transformFrom: <transform-from-string>, + transformTo: <transform-to-string>, + timing: <animation-timing> +} +``` +--> + +<script> + + Polymer({ + + is: 'transform-animation', + + behaviors: [ + 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'; + var transformTo = config.transformTo || 'none'; + + this._effect = new KeyframeEffect(node, [ + {'transform': transformFrom}, + {'transform': transformTo} + ], this.timingFromConfig(config)); + + if (config.transformOrigin) { + this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin); + } + + return this._effect; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/bower.json b/catapult/third_party/polymer/components/neon-animation/bower.json new file mode 100644 index 00000000..c3e121e9 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/bower.json @@ -0,0 +1,52 @@ +{ + "name": "neon-animation", + "description": "A system for animating Polymer-based web components", + "version": "1.2.5", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "web-component", + "polymer", + "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-animatable.html", + "neon-animations.html" + ], + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/neon-animation" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/neon-animation", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-meta": "PolymerElements/iron-meta#^1.0.0", + "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", + "iron-selector": "PolymerElements/iron-selector#^1.0.0", + "web-animations-js": "web-animations/web-animations-js#^2.2.0" + }, + "devDependencies": { + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "paper-item": "PolymerElements/paper-item#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.0", + "iron-icons": "PolymerElements/iron-icons#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0" + } +} diff --git a/catapult/third_party/polymer/components/neon-animation/demo/card/index.html b/catapult/third_party/polymer/components/neon-animation/demo/card/index.html new file mode 100644 index 00000000..44993465 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/card/index.html @@ -0,0 +1,166 @@ +<!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>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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="../../../paper-styles/typography.html"> + <link rel="import" href="x-card.html"> + <link rel="import" href="x-cards-list.html"> + + <style is="custom-style"> + + body { + padding: 15px; + @apply(--layout-fullbleed); + @apply(--paper-font-common-base); + } + + 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; + } + + .card-contents { + @apply(--layout-vertical); + @apply(--layout-center-center); + @apply(--layout-fit); + } + + .button-container { + @apply(--layout-flex); + @apply(--layout-horizontal); + @apply(--layout-around-justified); + } + </style> + + </head> + <body> + + <template is="dom-bind"> + <neon-animated-pages id="pages" selected="0"> + <x-cards-list id="list"> + <div class="card-contents"> + <h2>Choose a subject</h2> + <div class="button-container 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="card-contents"> + <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="card-contents"> + <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> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/card/x-card.html b/catapult/third_party/polymer/components/neon-animation/demo/card/x-card.html new file mode 100644 index 00000000..92885d29 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/card/x-card.html @@ -0,0 +1,94 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="x-card"> + <template> + <style> + :host { + display: block; + overflow: hidden; + } + #placeholder { + opacity: 0; + background-color: grey; + @apply(--layout-fit); + } + </style> + + <div id="placeholder"></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: '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> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/card/x-cards-list.html b/catapult/third_party/polymer/components/neon-animation/demo/card/x-cards-list.html new file mode 100644 index 00000000..b817698f --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/card/x-cards-list.html @@ -0,0 +1,75 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="x-cards-list"> + <template> + <style> + :host { + display: block; + overflow: hidden; + } + + #placeholder { + opacity: 0; + background-color: grey; + @apply(--layout-fit); + } + </style> + + <div id="placeholder"></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> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/declarative/index.html b/catapult/third_party/polymer/components/neon-animation/demo/declarative/index.html new file mode 100644 index 00000000..26ba53ff --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/declarative/index.html @@ -0,0 +1,132 @@ +<!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>neon-animated-pages demo: declarative</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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../../paper-styles/typography.html"> + <link rel="import" href="../../../paper-styles/color.html"> + <link rel="import" href="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animatable.html"> + <link rel="import" href="../../neon-animations.html"> + + <style is="custom-style"> + body { + overflow: hidden; + @apply(--layout-fullbleed); + @apply(--layout-vertical); + } + + .toolbar { + position: relative; + + padding: 8px; + + background-color: white; + + z-index: 12; + } + + neon-animated-pages { + @apply(--layout-flex); + } + + neon-animatable { + color: white; + @apply(--layout-horizontal); + @apply(--layout-center-center); + @apply(--paper-font-display4); + } + + neon-animatable:nth-child(1) { + background: var(--paper-red-500); + } + + neon-animatable:nth-child(2) { + background: var(--paper-blue-500); + } + + neon-animatable:nth-child(3) { + background: var(--paper-orange-500); + } + + neon-animatable:nth-child(4) { + background: var(--paper-green-500); + } + + neon-animatable:nth-child(5) { + background: var(--paper-purple-500); + } + + </style> + + </head> + <body> + + <template is="dom-bind"> + + <div class="toolbar"> + <button on-click="_onPrevClick">⇦</button> + <button on-click="_onNextClick">⇨</button> + <button on-click="_onUpClick">⇧</button> + <button on-click="_onDownClick">⇩</button> + </div> + + <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> + <neon-animatable>1</neon-animatable> + <neon-animatable>2</neon-animatable> + <neon-animatable>3</neon-animatable> + <neon-animatable>4</neon-animatable> + <neon-animatable>5</neon-animatable> + </neon-animated-pages> + + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + scope.selected = 0; + + scope._onPrevClick = function() { + this.entryAnimation = 'slide-from-left-animation'; + this.exitAnimation = 'slide-right-animation'; + this.selected = this.selected === 0 ? 4 : (this.selected - 1); + } + + scope._onNextClick = function() { + this.entryAnimation = 'slide-from-right-animation'; + this.exitAnimation = 'slide-left-animation'; + this.selected = this.selected === 4 ? 0 : (this.selected + 1); + } + + scope._onUpClick = function() { + this.entryAnimation = 'slide-from-top-animation'; + this.exitAnimation = 'slide-down-animation'; + this.selected = this.selected === 4 ? 0 : (this.selected + 1); + } + + scope._onDownClick = function() { + this.entryAnimation = 'slide-from-bottom-animation'; + this.exitAnimation = 'slide-up-animation'; + this.selected = this.selected === 0 ? 4 : (this.selected - 1); + } + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/doc/index.html b/catapult/third_party/polymer/components/neon-animation/demo/doc/index.html new file mode 100644 index 00000000..8b3875e7 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/doc/index.html @@ -0,0 +1,70 @@ +<!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>neon-animation demo: basic</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="my-animatable.html"> + <link rel="import" href="my-dialog.html"> + + </head> + <style> + my-animatable { + margin-top: 50px; + } + </style> + <body> + + <template is="dom-bind"> + + <button on-click="_onCircleButtonClick">toggle circle</button> + <button on-click="_onDialogButtonClick">toggle dialog</button> + + <div style="text-align: center"> + <my-dialog>Hello World!</my-dialog> + </div> + + <my-animatable></my-animatable> + + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + + scope._onCircleButtonClick = function(event) { + var node = document.querySelector('my-animatable'); + if (node) { + node.animate(); + } + }; + + scope._onDialogButtonClick = function(event) { + var node = document.querySelector('my-dialog'); + if (node) { + if (node.opened) { + node.hide(); + } else { + node.show(); + } + } + }; + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/doc/my-animatable.html b/catapult/third_party/polymer/components/neon-animation/demo/doc/my-animatable.html new file mode 100644 index 00000000..5063f74b --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/doc/my-animatable.html @@ -0,0 +1,68 @@ +<!-- +@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-animation-runner-behavior.html"> +<link rel="import" href="../../animations/scale-down-animation.html"> + +<dom-module id="my-animatable"> + <template> + <style> + :host { + display: inline-block; + border-radius: 50%; + width: 300px; + height: 300px; + background: orange; + } + </style> + <content></content> + + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'my-animatable', + + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + + animationConfig: { + type: Object, + value: function() { + return { + name: 'scale-down-animation', + node: this + } + } + } + + }, + + listeners: { + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + + animate: function() { + this.playAnimation(); + }, + + _onNeonAnimationFinish: function() { + console.log('animation finish!'); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/doc/my-dialog.html b/catapult/third_party/polymer/components/neon-animation/demo/doc/my-dialog.html new file mode 100644 index 00000000..bd3344c0 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/doc/my-dialog.html @@ -0,0 +1,94 @@ +<!-- +@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/shadow.html"> +<link rel="import" href="../../neon-animation-runner-behavior.html"> +<link rel="import" href="../../animations/scale-up-animation.html"> +<link rel="import" href="../../animations/fade-out-animation.html"> + + +<dom-module id="my-dialog"> + <template> + <style> + :host { + display: none; + padding: 16px; + background: white; + color: black; + margin: 0 auto; + z-index: 100; + position: absolute; + @apply(--shadow-elevation-2dp); + } + </style> + <content></content> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'my-dialog', + + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + + opened: { + type: Boolean + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'scale-up-animation', + node: this + }], + 'exit': [{ + name: 'fade-out-animation', + node: this + }] + } + } + } + + }, + + listeners: { + 'neon-animation-finish': '_onAnimationFinish' + }, + + _onAnimationFinish: function() { + if (!this.opened) { + this.style.display = ''; + } + }, + + show: function() { + this.opened = true; + this.style.display = 'inline-block'; + this.playAnimation('entry'); + }, + + hide: function() { + this.opened = false; + this.playAnimation('exit'); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/dropdown/animated-dropdown.html b/catapult/third_party/polymer/components/neon-animation/demo/dropdown/animated-dropdown.html new file mode 100644 index 00000000..9a61530f --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/dropdown/animated-dropdown.html @@ -0,0 +1,90 @@ +<!-- +@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/shadow.html"> +<link rel="import" href="../../neon-animation-runner-behavior.html"> + +<dom-module id="animated-dropdown"> + <template> + <style> + :host { + display: none; + padding: 16px; + background: white; + color: black; + + @apply(--shadow-elevation-2dp); + } + </style> + <content></content> + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'animated-dropdown', + + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'scale-up-animation', + node: this, + transformOrigin: '0 0' + }], + 'exit': [{ + name: 'fade-out-animation', + node: this + }] + } + } + }, + + _showing: { + type: Boolean, + value: false + } + + }, + + listeners: { + 'neon-animation-finish': '_onAnimationFinish' + }, + + _onAnimationFinish: function() { + if (this._showing) { + } else { + this.style.display = ''; + } + }, + + show: function() { + this.style.display = 'inline-block'; + this._showing = true; + this.playAnimation('entry'); + }, + + hide: function() { + this._showing = false; + this.playAnimation('exit'); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/dropdown/index.html b/catapult/third_party/polymer/components/neon-animation/demo/dropdown/index.html new file mode 100644 index 00000000..b238474c --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/dropdown/index.html @@ -0,0 +1,54 @@ +<!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>neon-animated-pages demo: dropdown</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="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="animated-dropdown.html"> + + </head> + <body> + + <template is="dom-bind"> + + <button dropdown-id="dropdown" on-click="_onButtonClick">dropdown</button> + <br> + <animated-dropdown id="dropdown" on-click="_onDropdownClick">Hello world!</animated-dropdown> + + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + + scope._onButtonClick = function(event) { + var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id')); + if (dropdown) { + dropdown.show(); + } + }; + + scope._onDropdownClick = function(event) { + event.target.hide(); + }; + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/grid/animated-grid.html b/catapult/third_party/polymer/components/neon-animation/demo/grid/animated-grid.html new file mode 100644 index 00000000..a2689364 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/grid/animated-grid.html @@ -0,0 +1,164 @@ +<!-- +@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/typography.html"> +<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> +<link rel="import" href="../shared-styles.html"> + +<dom-module id="animated-grid"> + <template> + <style include="shared-styles"></style> + <style> + + :host { + display: block; + background: #000; + } + + .tile { + display: inline-block; + float: left; + vertical-align: top; + width: calc(100% / 6); + height: calc(100% / 3); + + @apply(--paper-font-title); + @apply(--layout-vertical); + @apply(--layout-center-center); + } + + .tile:nth-of-type(1) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(4) { + width: calc(100% / 3); + } + + .tile:nth-of-type(5) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(8) { + width: calc(100% / 3); + height: calc(100% / 3); + } + + .tile:nth-of-type(9) { + position: absolute; + top: calc(100% / 3 * 2); + left: 0; + width: calc(100% / 6); + height: calc(100% / 3); + } + + .tile:nth-of-type(10) { + position: absolute; + top: calc(100% / 3 * 2); + left: calc(100% / 6);; + width: calc(100% / 6); + height: calc(100% / 3); + } + </style> + + <template is="dom-repeat" items="[[config]]"> + <div class$="[[_computeTileClass(item.color)]]"> + <span>[[item.value]]</span> + </div> + </template> + + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'animated-grid', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + config: { + type: Array, + value: function() { + return [ + {value: 1, color: 'blue'}, + {value: 2, color: 'red'}, + {value: 3, color: 'blue'}, + {value: 4, color: 'green'}, + {value: 5, color: 'yellow'}, + {value: 6, color: 'blue'}, + {value: 7, color: 'red'}, + {value: 8, color: 'green'}, + {value: 9, color: 'yellow'}, + {value: 10, color: 'red'} + ] + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'exit': [{ + name: 'ripple-animation', + id: 'ripple', + fromPage: this + }, { + name: 'hero-animation', + id: 'hero', + fromPage: this + }] + } + } + } + + }, + + listeners: { + click: '_onClick' + }, + + _computeTileClass: function(color) { + return 'tile ' + color + '-300'; + }, + + _onClick: function(event) { + var target = event.target; + while (target !== this && !target._templateInstance) { + target = target.parentNode; + } + + // configure the page animation + this.sharedElements = { + 'hero': target, + 'ripple': target + }; + this.animationConfig['exit'][0].gesture = { + x: event.x || event.pageX, + y: event.y || event.pageY + }; + + this.fire('tile-click', { + tile: target, + data: target._templateInstance.item + }); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/grid/fullsize-page-with-card.html b/catapult/third_party/polymer/components/neon-animation/demo/grid/fullsize-page-with-card.html new file mode 100644 index 00000000..63d35bbf --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/grid/fullsize-page-with-card.html @@ -0,0 +1,122 @@ +<!-- +@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"> +<link rel="import" href="../../../paper-styles/color.html"> +<link rel="import" href="../shared-styles.html"> + +<dom-module id="fullsize-page-with-card"> + <template> + <style include="shared-styles"></style> + <style> + + :host { + display: block; + } + + .fixed { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + } + + .card { + position: relative; + margin: 200px 100px 0; + height: 700px; + } + + </style> + + <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div> + <div id="card" class$="[[_computeCardClass(color)]]"></div> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'fullsize-page-with-card', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + color: { + type: String + }, + + sharedElements: { + type: Object, + value: function() { + return { + 'hero': this.$.card, + 'ripple': this.$.fixed + } + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'ripple-animation', + id: 'ripple', + toPage: this, + }, { + name: 'hero-animation', + id: 'hero', + toPage: this, + timing: { + delay: 150 + } + }], + 'exit': [{ + name: 'fade-out-animation', + node: this.$.fixed + }, { + name: 'transform-animation', + transformFrom: 'none', + transformTo: 'translate(0px,-200vh) scale(0.9,1)', + node: this.$.card + }] + } + } + } + + }, + + _computeCardClass: function(color) { + var cls = 'card'; + if (color) { + cls += ' ' + color + '-300'; + } + return cls; + }, + + _computeFixedBackgroundClass: function(color) { + var cls = 'fixed'; + if (color) { + cls += ' ' + color + '-100'; + } + return cls; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/grid/index.html b/catapult/third_party/polymer/components/neon-animation/demo/grid/index.html new file mode 100644 index 00000000..b102dba4 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/grid/index.html @@ -0,0 +1,64 @@ +<!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>neon-animated-pages demo: grid</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="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="animated-grid.html"> + <link rel="import" href="fullsize-page-with-card.html"> + + <style is="custom-style"> + body { + overflow: hidden; + @apply(--layout-fullbleed); + } + + neon-animated-pages { + height: 100%; + } + </style> + + </head> + <body> + + <template is="dom-bind"> + <neon-animated-pages id="pages" selected="0"> + <animated-grid on-tile-click="_onTileClick"></animated-grid> + <fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick"> + </fullsize-page-with-card> + </neon-animated-pages> + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + + scope._onTileClick = function(event) { + this.$['fullsize-card'].color = event.detail.data.color; + this.$.pages.selected = 1; + }; + + scope._onFullsizeClick = function(event) { + this.$.pages.selected = 0; + }; + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/index.html b/catapult/third_party/polymer/components/neon-animation/demo/index.html new file mode 100644 index 00000000..1e4e1204 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/index.html @@ -0,0 +1,45 @@ +<!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 lang="en"> +<head> + <title>neon-animated pages demo</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/demo-pages.html"> +</head> +<style> + a { + display: block; + margin-bottom: 10px; + } +</style> +<body unresolved> + <div class="horizontal-section-container"> + <div> + <h4>Sample demos</h4> + <div class="horizontal-section"> + <a href="doc/index.html">basic</a> + <a href="declarative/index.html">declarative</a> + <a href="dropdown/index.html">dropdown</a> + <a href="grid/index.html">grid</a> + <a href="list/index.html">list</a> + <a href="load/index.html">load</a> + <a href="tiles/index.html">tiles</a> + <a href="card/index.html">card</a> + </div> + </div> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/list/full-view.html b/catapult/third_party/polymer/components/neon-animation/demo/list/full-view.html new file mode 100644 index 00000000..565618c2 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/list/full-view.html @@ -0,0 +1,118 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../../paper-styles/shadow.html"> +<link rel="import" href="../../neon-animatable-behavior.html"> + +<dom-module id="full-view"> + <template> + <style> + :host { + @apply(--layout-vertical); + } + + .main { + background: white; + @apply(--layout-flex); + @apply(--layout-scroll); + @apply(--shadow-elevation-8dp); + } + + .image-container { + position: relative; + width: 100%; + padding-bottom: 100%; + } + + .image { + position: absolute; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + 45deg, + #f5f5f5, + #f5f5f5 8px, + #e0e0e0 8px, + #e0e0e0 16px + ); + } + </style> + <paper-toolbar class="medium-tall"> + <paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button> + </paper-toolbar> + + <div id="main" class="main"> + <div class="image-container"> + <div class="image"> + </div> + </div> + </div> + + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'full-view', + + behaviors: [ + Polymer.NeonAnimatableBehavior + ], + + properties: { + + sharedElements: { + type: Object, + value: function() { + return { + 'hero': this.$.main + }; + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'fade-in-animation', + node: this.$.button + }, { + name: 'hero-animation', + id: 'hero', + toPage: this + }], + + 'exit': [{ + name: 'fade-out-animation', + node: this.$.button + }, { + name: 'scale-down-animation', + node: this.$.main, + transformOrigin: '50% 50%', + axis: 'y' + }] + + } + } + } + + }, + + _onClearButtonClick: function() { + this.fire('close'); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/list/index.html b/catapult/third_party/polymer/components/neon-animation/demo/list/index.html new file mode 100644 index 00000000..eabb02e5 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/list/index.html @@ -0,0 +1,35 @@ +<!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>neon-animated-pages demo: list</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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="list-demo.html"> + + </head> + <style is="custom-style"> + body { + @apply(--layout-fullbleed); + } + + list-demo { + @apply(--layout-fit); + } + </style> + <body> + <list-demo></list-demo> + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/list/list-demo.html b/catapult/third_party/polymer/components/neon-animation/demo/list/list-demo.html new file mode 100644 index 00000000..45808c8c --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/list/list-demo.html @@ -0,0 +1,102 @@ +<!-- +@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-toolbar/paper-toolbar.html"> +<link rel="import" href="../../neon-animated-pages.html"> +<link rel="import" href="../../neon-animations.html"> +<link rel="import" href="list-view.html"> +<link rel="import" href="full-view.html"> + +<dom-module id="list-demo"> + <template> + <style> + :host { + display: block; + } + neon-animated-pages { + height: 100%; + } + </style> + <neon-animated-pages id="pages" selected="0"> + <list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view> + <full-view on-close="_onClose"></full-view> + </neon-animated-pages> + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'list-demo', + + properties: { + + fileData: { + type: Array, + value: function() { + return [ + {fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'}, + {fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'} + ] + } + } + }, + + _onItemClick: function() { + this.$.pages.selected = 1; + }, + + _onClose: function() { + this.$.pages.selected = 0; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/list/list-view.html b/catapult/third_party/polymer/components/neon-animation/demo/list/list-view.html new file mode 100644 index 00000000..ddb05502 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/list/list-view.html @@ -0,0 +1,124 @@ +<!-- +@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="../../../iron-icons/iron-icons.html"> +<link rel="import" href="../../../iron-icon/iron-icon.html"> +<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../../paper-icon-button/paper-icon-button.html"> +<link rel="import" href="../../../paper-item/paper-item.html"> +<link rel="import" href="../../../paper-item/paper-item-body.html"> +<link rel="import" href="../../../paper-styles/color.html"> +<link rel="import" href="../../neon-animatable-behavior.html"> + +<dom-module id="list-view"> + <template> + <style> + :host { + @apply(--layout-vertical); + } + + .main { + @apply(--layout-flex); + @apply(--layout-scroll); + } + + iron-icon { + color: var(--google-grey-500); + } + </style> + <paper-toolbar class="medium-tall"> + <paper-icon-button id="button" icon="arrow-back"></paper-icon-button> + </paper-toolbar> + + <div class="main"> + + <template is="dom-repeat" items="[[data]]"> + + <paper-item> + <paper-item-body two-line> + <div>[[item.fileName]]</div> + <div secondary>[[item.modifiedDate]]</div> + </paper-item-body> + <iron-icon icon="info"></iron-icon> + </paper-item> + + </template> + + </div> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'list-view', + + behaviors: [ + Polymer.NeonAnimatableBehavior + ], + + listeners: { + 'click': '_onClick' + }, + + properties: { + + data: { + type: Array, + value: function() { + return []; + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'fade-in-animation', + node: this.$.button + }], + + 'exit': [{ + name: 'fade-out-animation', + node: this.$.button + }, { + name: 'hero-animation', + id: 'hero', + fromPage: this + }] + }; + } + } + + }, + + _onClick: function(event) { + var target = event.target; + while (target !== this && !target._templateInstance) { + target = target.parentNode; + } + + // configure the page animation + this.sharedElements = { + 'hero': target, + }; + + this.fire('item-click', { + item: target, + }); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/load/animated-grid.html b/catapult/third_party/polymer/components/neon-animation/demo/load/animated-grid.html new file mode 100644 index 00000000..c1d52c1a --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/load/animated-grid.html @@ -0,0 +1,146 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> +<link rel="import" href="../../../paper-styles/typography.html"> +<link rel="import" href="../../../paper-styles/color.html"> +<link rel="import" href="../shared-styles.html"> + +<dom-module id="animated-grid"> + <template> + <style include="shared-styles"></style> + <style> + :host { + display: block; + background: #000; + } + + .tile { + display: inline-block; + float: left; + vertical-align: top; + width: calc(100% / 6); + height: calc(100% / 3); + + @apply(--paper-font-title); + @apply(--layout-vertical); + @apply(--layout-center-center); + } + + .tile:nth-of-type(1) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(4) { + width: calc(100% / 3); + } + + .tile:nth-of-type(5) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(8) { + width: calc(100% / 3); + height: calc(100% / 3); + } + + .tile:nth-of-type(9) { + position: absolute; + top: calc(100% / 3 * 2); + left: 0; + width: calc(100% / 6); + height: calc(100% / 3); + } + + .tile:nth-of-type(10) { + position: absolute; + top: calc(100% / 3 * 2); + left: calc(100% / 6);; + width: calc(100% / 6); + height: calc(100% / 3); + } + </style> + + <template is="dom-repeat" items="[[config]]"> + <div class$="[[_computeTileClass(item.color)]]"> + <span>[[item.value]]</span> + </div> + </template> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'animated-grid', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + config: { + type: Array, + value: function() { + return [ + {value: 1, color: 'blue'}, + {value: 2, color: 'red'}, + {value: 3, color: 'blue'}, + {value: 4, color: 'green'}, + {value: 5, color: 'yellow'}, + {value: 6, color: 'blue'}, + {value: 7, color: 'red'}, + {value: 8, color: 'green'}, + {value: 9, color: 'yellow'}, + {value: 10, color: 'red'} + ] + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'cascaded-animation', + animation: 'transform-animation', + transformFrom: 'translateY(100%)', + transformTo: 'none', + timing: { + delay: 50 + } + }] + } + } + } + + }, + + attached: function() { + this.async(function() { + var nodeList = Polymer.dom(this.root).querySelectorAll('.tile'); + this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList); + }); + }, + + _computeTileClass: function(color) { + return 'tile ' + color + '-300'; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/load/full-page.html b/catapult/third_party/polymer/components/neon-animation/demo/load/full-page.html new file mode 100644 index 00000000..61a11bd7 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/load/full-page.html @@ -0,0 +1,82 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-animatable-behavior.html"> +<link rel="import" href="../../neon-animation-runner-behavior.html"> +<link rel="import" href="../../../paper-styles/shadow.html"> +<link rel="import" href="animated-grid.html"> + +<dom-module id="full-page"> + <template> + <style> + :host { + background: black; + visibility: hidden; + @apply(--layout-vertical); + } + + .toolbar { + background: #9c27b0; + height: 72px; + z-index: 1; + @apply(--shadow-elevation-2dp); + } + + animated-grid { + height: calc(100% - 72px); + @apply(--layout-flex); + } + </style> + + <div id="toolbar" class="toolbar"></div> + <animated-grid id="grid"></animated-grid> + + </template> +</dom-module> + +<script> + +Polymer({ + + is: 'full-page', + + behaviors: [ + Polymer.NeonAnimatableBehavior, + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'slide-from-top-animation', + node: this.$.toolbar + }, { + animatable: this.$.grid, + type: 'entry' + }] + }; + } + } + + }, + + show: function() { + this.style.visibility = 'visible'; + this.playAnimation('entry'); + } + +}); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/load/index.html b/catapult/third_party/polymer/components/neon-animation/demo/load/index.html new file mode 100644 index 00000000..54c8d68a --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/load/index.html @@ -0,0 +1,48 @@ +<!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>neon-animated-pages demo: load</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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="full-page.html"> + + <style is="custom-style"> + body { + overflow: hidden; + @apply(--layout-fullbleed); + } + full-page { + @apply(--layout-fit); + } + </style> + </head> + <body> + + <full-page></full-page> + + <script> + + document.addEventListener('WebComponentsReady', function() { + document.querySelector('full-page').show(); + }); + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/reprojection/animated-grid.html b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/animated-grid.html new file mode 100644 index 00000000..f1244b44 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/animated-grid.html @@ -0,0 +1,167 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> +<link rel="import" href="../../../paper-styles/typography.html"> +<link rel="import" href="../../../paper-styles/color.html"> +<link rel="import" href="../shared-styles.html"> + +<dom-module id="animated-grid"> + <template> + <style include="shared-styles"></style> + <style> + + :host { + display: block; + background: #000; + } + + .tile { + display: inline-block; + float: left; + vertical-align: top; + width: calc(100% / 6); + height: calc(100% / 3); + + @apply(--paper-font-title); + @apply(--layout-vertical); + @apply(--layout-center-center); + } + + .tile:nth-of-type(1) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(4) { + width: calc(100% / 3); + } + + .tile:nth-of-type(5) { + width: calc(100% / 3); + height: calc(100% / 3 * 2); + } + + .tile:nth-of-type(8) { + width: calc(100% / 3); + height: calc(100% / 3); + } + + .tile:nth-of-type(9) { + position: absolute; + top: calc(100% / 3 * 2); + left: 0; + width: calc(100% / 6); + height: calc(100% / 3); + } + + .tile:nth-of-type(10) { + position: absolute; + top: calc(100% / 3 * 2); + left: calc(100% / 6);; + width: calc(100% / 6); + height: calc(100% / 3); + } + + </style> + + <template is="dom-repeat" items="[[config]]"> + <div class$="[[_computeTileClass(item.color)]]"> + <span>[[item.value]]</span> + </div> + </template> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'animated-grid', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + config: { + type: Array, + value: function() { + return [ + {value: 1, color: 'blue'}, + {value: 2, color: 'red'}, + {value: 3, color: 'blue'}, + {value: 4, color: 'green'}, + {value: 5, color: 'yellow'}, + {value: 6, color: 'blue'}, + {value: 7, color: 'red'}, + {value: 8, color: 'green'}, + {value: 9, color: 'yellow'}, + {value: 10, color: 'red'} + ] + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'exit': [{ + name: 'ripple-animation', + id: 'ripple', + fromPage: this + }, { + name: 'hero-animation', + id: 'hero', + fromPage: this + }] + } + } + } + + }, + + listeners: { + click: '_onClick' + }, + + _computeTileClass: function(color) { + return 'tile ' + color + '-300'; + }, + + _onClick: function(event) { + var target = event.target; + while (target !== this && !target._templateInstance) { + target = target.parentNode; + } + + // configure the page animation + this.sharedElements = { + 'hero': target, + 'ripple': target + }; + this.animationConfig['exit'][0].gesture = { + x: event.x, + y: event.y + }; + + this.fire('tile-click', { + tile: target, + data: target._templateInstance.item + }); + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/reprojection/fullsize-page-with-card.html b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/fullsize-page-with-card.html new file mode 100644 index 00000000..83b8a917 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/fullsize-page-with-card.html @@ -0,0 +1,120 @@ +<!-- +@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"> +<link rel="import" href="../shared-styles.html"> + +<dom-module id="fullsize-page-with-card"> + <template> + <style include="shared-styles"></style> + <style> + + :host { + display: block; + } + + .fixed { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + } + + .card { + position: relative; + margin: 200px 100px 0; + height: 700px; + } + + </style> + + <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div> + <div id="card" class$="[[_computeCardClass(color)]]"></div> + + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'fullsize-page-with-card', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + color: { + type: String + }, + + sharedElements: { + type: Object, + value: function() { + return { + 'hero': this.$.card, + 'ripple': this.$.fixed + } + } + }, + + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'ripple-animation', + id: 'ripple', + toPage: this, + }, { + name: 'hero-animation', + id: 'hero', + toPage: this, + timing: { + delay: 150 + } + }], + 'exit': [{ + name: 'fade-out-animation', + node: this.$.fixed + }, { + name: 'transform-animation', + transformFrom: 'none', + transformTo: 'translate(0px,-200vh) scale(0.9,1)', + node: this.$.card + }] + } + } + } + + }, + + _computeCardClass: function(color) { + var cls = 'card'; + if (color) { + cls += ' ' + color + '-300'; + } + return cls; + }, + + _computeFixedBackgroundClass: function(color) { + var cls = 'fixed'; + if (color) { + cls += ' ' + color + '-100'; + } + return cls; + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/reprojection/index.html b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/index.html new file mode 100644 index 00000000..591d63c6 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/index.html @@ -0,0 +1,63 @@ +<!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>neon-animated-pages demo: grid</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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="reprojected-pages.html"> + <link rel="import" href="animated-grid.html"> + <link rel="import" href="fullsize-page-with-card.html"> + + <style is="custom-style"> + body { + overflow: hidden; + @apply(--layout-fullbleed); + } + reprojected-pages { + height: 100%; + } + </style> + </head> + <body> + <template is="dom-bind"> + + <reprojected-pages id="pages" selected="0"> + <animated-grid on-tile-click="_onTileClick"></animated-grid> + <fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick"> + </fullsize-page-with-card> + </reprojected-pages> + + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + + scope._onTileClick = function(event) { + this.$['fullsize-card'].color = event.detail.data.color; + this.$.pages.selected = 1; + }; + + scope._onFullsizeClick = function(event) { + this.$.pages.selected = 0; + }; + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/reprojection/reprojected-pages.html b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/reprojected-pages.html new file mode 100644 index 00000000..e71f2e05 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/reprojection/reprojected-pages.html @@ -0,0 +1,45 @@ +<!-- +@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-animated-pages.html"> + +<dom-module id="reprojected-pages"> + <template> + <style> + neon-animated-pages { + height: 100%; + } + </style> + <neon-animated-pages selected="{{selected}}"> + <content></content> + </neon-animated-pages> + + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'reprojected-pages', + + properties: { + + selected: { + type: String, + notify: true + } + + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/shared-styles.html b/catapult/third_party/polymer/components/neon-animation/demo/shared-styles.html new file mode 100644 index 00000000..4e48c8c4 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/shared-styles.html @@ -0,0 +1,47 @@ +<!-- +@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 +--> + +<dom-module id="shared-styles"> + <template> + <style> + .red-100 { + background: var(--google-red-100); + } + + .yellow-100 { + background: var(--google-yellow-100); + } + + .blue-100 { + background: var(--google-blue-100); + } + + .green-100 { + background: var(--google-green-100); + } + + .red-300 { + background: var(--google-red-300); + } + + .yellow-300 { + background: var(--google-yellow-300); + } + + .blue-300 { + background: var(--google-blue-300); + } + + .green-300 { + background: var(--google-green-300); + } + </style> + </template> +</dom-module> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/tiles/circles-page.html b/catapult/third_party/polymer/components/neon-animation/demo/tiles/circles-page.html new file mode 100644 index 00000000..79dc8e34 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/tiles/circles-page.html @@ -0,0 +1,107 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="circles-page"> + <template> + <style> + :host { + @apply(--layout-horizontal); + @apply(--layout-center-center); + } + + .circle { + display: inline-block; + box-sizing: border-box; + width: 100px; + height: 100px; + margin: 16px; + border-radius: 50%; + background: var(--color-one); + } + </style> + + <div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + </div> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'circles-page', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + animationConfig: { + value: function() { + var circles = Polymer.dom(this.root).querySelectorAll('.circle'); + var circlesArray = Array.prototype.slice.call(circles); + return { + 'entry': [{ + name: 'cascaded-animation', + animation: 'scale-up-animation', + nodes: circlesArray + }], + + 'exit': [{ + name: 'hero-animation', + id: 'hero', + fromPage: this + }, { + name: 'cascaded-animation', + animation: 'scale-down-animation' + }] + }; + } + } + }, + + listeners: { + 'click': '_onClick' + }, + + _onClick: function(event) { + var target = Polymer.dom(event).rootTarget; + if (target.classList.contains('circle')) { + // configure the page animation + this.sharedElements = { + 'hero': target + }; + + var nodesToScale = []; + var circles = Polymer.dom(this.root).querySelectorAll('.circle'); + for (var node, index = 0; node = circles[index]; index++) { + if (node !== event.target) { + nodesToScale.push(node); + } + } + this.animationConfig['exit'][1].nodes = nodesToScale; + + this.fire('circle-click'); + } + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/tiles/index.html b/catapult/third_party/polymer/components/neon-animation/demo/tiles/index.html new file mode 100644 index 00000000..f509f0b5 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/tiles/index.html @@ -0,0 +1,70 @@ +<!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>neon-animated-pages demo: tiles</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="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="../../../paper-styles/color.html"> + <link rel="import" href="circles-page.html"> + <link rel="import" href="squares-page.html"> + + <style is="custom-style"> + body { + overflow: hidden; + @apply(--layout-fullbleed); + } + neon-animated-pages { + height: 100%; + } + + :root { + --color-one: var(--paper-cyan-300); + --color-two: var(--paper-orange-500); + } + </style> + + </head> + <body> + + <template is="dom-bind"> + + <neon-animated-pages id="pages" selected="0"> + <circles-page on-circle-click="_onCircleClick"></circles-page> + <squares-page on-click="_onSquaresClick"></squares-page> + </neon-animated-pages> + + </template> + + <script> + + var scope = document.querySelector('template[is="dom-bind"]'); + + scope._onCircleClick = function(event) { + this.$.pages.selected = 1; + }; + + scope._onSquaresClick = function(event) { + this.$.pages.selected = 0; + }; + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html b/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html new file mode 100644 index 00000000..52fe7e18 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html @@ -0,0 +1,100 @@ +<!-- +@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="squares-page"> + <template> + <style> + .header { + height: 40%; + background: var(--color-one); + } + + .body { + text-align: center; + padding: 8px; + } + + .square { + display: inline-block; + width: 150px; + height: 150px; + margin: 8px; + background: var(--color-two); + } + </style> + + <div id="header" class="header"></div> + + <div class="body"> + <div class="square"></div> + <div class="square"></div> + <div class="square"></div> + <div class="square"></div> + </div> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'squares-page', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + sharedElements: { + value: function() { + return { + 'hero': this.$.header + } + } + }, + + animationConfig: { + value: function() { + var squares = Polymer.dom(this.root).querySelectorAll('.square'); + var squaresArray = Array.prototype.slice.call(squares); + return { + 'entry': [{ + name: 'hero-animation', + id: 'hero', + toPage: this + }, { + name: 'cascaded-animation', + animation: 'transform-animation', + transformFrom: 'translateY(100%)', + nodes: squaresArray + }], + + 'exit': [{ + name: 'slide-up-animation', + node: this.$.header + }, { + name: 'cascaded-animation', + animation: 'transform-animation', + transformTo: 'translateY(60vh)', + nodes: squaresArray + }] + }; + } + } + } + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/guides/neon-animation.md b/catapult/third_party/polymer/components/neon-animation/guides/neon-animation.md new file mode 100644 index 00000000..69727b86 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/guides/neon-animation.md @@ -0,0 +1,314 @@ +--- +title: neon-animation +summary: "A short guide to neon-animation and neon-animated-pages" +tags: ['animation','core-animated-pages'] +elements: ['neon-animation','neon-animated-pages'] +updated: 2015-05-26 +--- + +# neon-animation + +`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/). + +*Warning: The API may change.* + +* [A basic animatable element](#basic) +* [Animation configuration](#configuration) + * [Animation types](#configuration-types) + * [Configuration properties](#configuration-properties) + * [Using multiple animations](#configuration-multiple) + * [Running animations encapsulated in children nodes](#configuration-encapsulation) +* [Page transitions](#page-transitions) + * [Shared element animations](#shared-element) + * [Declarative page transitions](#declarative-page) +* [Included animations](#animations) +* [Demos](#demos) + +<a name="basic"></a> +## A basic animatable element + +Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation. + +```js +Polymer({ + is: 'my-animatable', + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + properties: { + animationConfig: { + value: function() { + return { + // provided by neon-animation/animations/scale-down-animation.html + name: 'scale-down-animation', + node: this + } + } + } + }, + listeners: { + // this event is fired when the animation finishes + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + animate: function() { + // run scale-down-animation + this.playAnimation(); + }, + _onNeonAnimationFinish: function() { + console.log('animation done!'); + } +}); +``` + +[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html) + +<a name="configuration"></a> +## Animation configuration + +<a name="configuration-types"></a> +### Animation types + +An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration. + +```js +Polymer({ + is: 'my-dialog', + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + properties: { + opened: { + type: Boolean + }, + animationConfig: { + value: function() { + return { + 'entry': { + // provided by neon-animation/animations/scale-up-animation.html + name: 'scale-up-animation', + node: this + }, + 'exit': { + // provided by neon-animation-animations/fade-out-animation.html + name: 'fade-out-animation', + node: this + } + } + } + } + }, + listeners: { + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + show: function() { + this.opened = true; + this.style.display = 'inline-block'; + // run scale-up-animation + this.playAnimation('entry'); + }, + hide: function() { + this.opened = false; + // run fade-out-animation + this.playAnimation('exit'); + }, + _onNeonAnimationFinish: function() { + if (!this.opened) { + this.style.display = 'none'; + } + } +}); +``` + +[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html) + +You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations: + +```js +properties: { + entryAnimation: { + value: 'scale-up-animation' + }, + exitAnimation: { + value: 'fade-out-animation' + } +} +``` + +<a name="configuration-properties"></a> +### Configuration properties + +You can pass additional parameters to configure an animation in the animation configuration object. +All animations should accept the following properties: + + * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`. + * `node`: The target node to apply the animation to. Defaults to `this`. + * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The + properties include the following: + * `duration`: The duration of the animation in milliseconds. + * `delay`: The delay before the start of the animation in milliseconds. + * `easing`: A timing function for the animation. Matches the CSS timing function values. + +Animations may define additional configuration properties and they are listed in their documentation. + +<a name="configuration-multiple"></a> +### Using multiple animations + +Set the animation configuration to an array to combine animations, like this: + +```js +animationConfig: { + value: function() { + return { + // fade-in-animation is run with a 50ms delay from slide-down-animation + 'entry': [{ + name: 'slide-down-animation', + node: this + }, { + name: 'fade-in-animation', + node: this, + timing: {delay: 50} + }] + } + } +} +``` + +<a name="configuration-encapsulation"></a> +### Running animations encapsulated in children nodes + +You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property. + +```js +animationConfig: { + value: function() { + return { + // run fade-in-animation on this, and the entry animation on this.$.myAnimatable + 'entry': [ + {name: 'fade-in-animation', node: this}, + {animatable: this.$.myAnimatable, type: 'entry'} + ] + } + } +} +``` + +<a name="page-transitions"></a> +## Page transitions + +*The artist formerly known as `<core-animated-pages>`* + +The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page. + +<a name="shared-element"></a> +### Shared element animations + +Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation. + +In the incoming page: + +```js +properties: { + animationConfig: { + value: function() { + return { + // the incoming page defines the 'entry' animation + 'entry': { + name: 'hero-animation', + id: 'hero', + toPage: this + } + } + } + }, + sharedElements: { + value: function() { + return { + 'hero': this.$.hero + } + } + } +} +``` + +In the outgoing page: + +```js +properties: { + animationConfig: { + value: function() { + return { + // the outgoing page defines the 'exit' animation + 'exit': { + name: 'hero-animation', + id: 'hero', + fromPage: this + } + } + } + }, + sharedElements: { + value: function() { + return { + 'hero': this.$.otherHero + } + } + } +} +``` + +<a name="declarative-page"></a> +### Declarative page transitions + +For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions. + +For example: + +```js +<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation"> + <neon-animatable>1</neon-animatable> + <neon-animatable>2</neon-animatable> + <neon-animatable>3</neon-animatable> + <neon-animatable>4</neon-animatable> + <neon-animatable>5</neon-animatable> +</neon-animated-pages> +``` + +The new page will slide in from the right, and the old page slide away to the left. + +<a name="animations"></a> +## Included animations + +Single element animations: + + * `fade-in-animation` Animates opacity from `0` to `1`; + * `fade-out-animation` Animates opacity from `1` to `0`; + * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`; + * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`; + * `slide-down-animation` Animates transform from `none` to `translateY(100%)`; + * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`; + * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`; + * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`; + * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`; + * `slide-right-animation` Animates transform from `none` to `translateX(100%)`; + * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`; + * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`; + * `transform-animation` Animates a custom transform. + +Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties. + +Shared element animations + + * `hero-animation` Animates an element such that it looks like it scales and transforms from another element. + * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element. + +Group animations + * `cascaded-animation` Applys an animation to an array of elements with a delay between each. + +<a name="demos"></a> +## Demos + + * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html) + * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html) + * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width) + * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html) + * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html) diff --git a/catapult/third_party/polymer/components/neon-animation/index.html b/catapult/third_party/polymer/components/neon-animation/index.html new file mode 100644 index 00000000..6f5feedf --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/index.html @@ -0,0 +1,30 @@ +<!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> + + <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</title> + + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../polymer/polymer.html"> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animatable-behavior.html b/catapult/third_party/polymer/components/neon-animation/neon-animatable-behavior.html new file mode 100644 index 00000000..dd58a6cf --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animatable-behavior.html @@ -0,0 +1,150 @@ +<!-- +@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"> + +<script> + + /** + * `Polymer.NeonAnimatableBehavior` is implemented by elements containing animations for use with + * elements implementing `Polymer.NeonAnimationRunnerBehavior`. + * @polymerBehavior + */ + Polymer.NeonAnimatableBehavior = { + + properties: { + + /** + * Animation configuration. See README for more info. + */ + animationConfig: { + type: Object + }, + + /** + * Convenience property for setting an 'entry' animation. Do not set `animationConfig.entry` + * manually if using this. The animated node is set to `this` if using this property. + */ + entryAnimation: { + observer: '_entryAnimationChanged', + type: String + }, + + /** + * Convenience property for setting an 'exit' animation. Do not set `animationConfig.exit` + * manually if using this. The animated node is set to `this` if using this property. + */ + exitAnimation: { + observer: '_exitAnimationChanged', + type: String + } + + }, + + _entryAnimationChanged: function() { + this.animationConfig = this.animationConfig || {}; + this.animationConfig['entry'] = [{ + name: this.entryAnimation, + node: this + }]; + }, + + _exitAnimationChanged: function() { + this.animationConfig = this.animationConfig || {}; + this.animationConfig['exit'] = [{ + name: this.exitAnimation, + node: this + }]; + }, + + _copyProperties: function(config1, config2) { + // shallowly copy properties from config2 to config1 + for (var property in config2) { + config1[property] = config2[property]; + } + }, + + _cloneConfig: function(config) { + var clone = { + isClone: true + }; + this._copyProperties(clone, config); + return clone; + }, + + _getAnimationConfigRecursive: function(type, map, allConfigs) { + if (!this.animationConfig) { + return; + } + + if(this.animationConfig.value && typeof this.animationConfig.value === 'function') { + this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it.")); + return; + } + + // type is optional + var thisConfig; + if (type) { + thisConfig = this.animationConfig[type]; + } else { + thisConfig = this.animationConfig; + } + + if (!Array.isArray(thisConfig)) { + thisConfig = [thisConfig]; + } + + // iterate animations and recurse to process configurations from child nodes + if (thisConfig) { + for (var config, index = 0; config = thisConfig[index]; index++) { + if (config.animatable) { + config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs); + } else { + if (config.id) { + var cachedConfig = map[config.id]; + if (cachedConfig) { + // merge configurations with the same id, making a clone lazily + if (!cachedConfig.isClone) { + map[config.id] = this._cloneConfig(cachedConfig) + cachedConfig = map[config.id]; + } + this._copyProperties(cachedConfig, config); + } else { + // put any configs with an id into a map + map[config.id] = config; + } + } else { + allConfigs.push(config); + } + } + } + } + }, + + /** + * An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this method to configure + * an animation with an optional type. Elements implementing `Polymer.NeonAnimatableBehavior` + * should define the property `animationConfig`, which is either a configuration object + * or a map of animation type to array of configuration objects. + */ + getAnimationConfig: function(type) { + var map = {}; + var allConfigs = []; + this._getAnimationConfigRecursive(type, map, allConfigs); + // append the configurations saved in the map to the array + for (var key in map) { + allConfigs.push(map[key]); + } + return allConfigs; + } + + }; + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animatable.html b/catapult/third_party/polymer/components/neon-animation/neon-animatable.html new file mode 100644 index 00000000..267ae5ed --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animatable.html @@ -0,0 +1,54 @@ +<!-- +@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="../iron-resizable-behavior/iron-resizable-behavior.html"> +<link rel="import" href="neon-animatable-behavior.html"> + +<!-- +`<neon-animatable>` is a simple container element implementing `Polymer.NeonAnimatableBehavior`. This is a convenience element for use with `<neon-animated-pages>`. + +``` +<neon-animated-pages selected="0" + entry-animation="slide-from-right-animation" + exit-animation="slide-left-animation"> + <neon-animatable>1</neon-animatable> + <neon-animatable>2</neon-animatable> +</neon-animated-pages> +``` +--> + +<dom-module id="neon-animatable"> + <template> + <style> + :host { + display: block; + } + </style> + + <content></content> + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'neon-animatable', + + behaviors: [ + Polymer.NeonAnimatableBehavior, + Polymer.IronResizableBehavior + ] + + }); + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animated-pages.html b/catapult/third_party/polymer/components/neon-animation/neon-animated-pages.html new file mode 100644 index 00000000..983cb471 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animated-pages.html @@ -0,0 +1,220 @@ +<!-- +@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="../iron-resizable-behavior/iron-resizable-behavior.html"> +<link rel="import" href="../iron-selector/iron-selectable.html"> +<link rel="import" href="neon-animation-runner-behavior.html"> + +<!-- +Material design: [Meaningful transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html) + +`neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its +children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit` +animations to be run when switching to or switching out of the page. + +@group Neon Elements +@element neon-animated-pages +@demo demo/index.html +--> + +<dom-module id="neon-animated-pages"> + <template> + <style> + :host { + display: block; + position: relative; + } + + :host > ::content > * { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + + :host > ::content > :not(.iron-selected):not(.neon-animating) { + display: none !important; + } + + :host > ::content > .neon-animating { + pointer-events: none; + } + </style> + + <content id="content"></content> + </template> + +</dom-module> + +<script> +(function() { + + Polymer({ + + is: 'neon-animated-pages', + + behaviors: [ + Polymer.IronResizableBehavior, + Polymer.IronSelectableBehavior, + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + + activateEvent: { + type: String, + value: '' + }, + + // if true, the initial page selection will also be animated according to its animation config. + animateInitialSelection: { + type: Boolean, + value: false + } + + }, + + listeners: { + 'iron-select': '_onIronSelect', + 'neon-animation-finish': '_onNeonAnimationFinish' + }, + + _onIronSelect: function(event) { + var selectedPage = event.detail.item; + + // Only consider child elements. + if (this.items.indexOf(selectedPage) < 0) { + return; + } + + var oldPage = this._valueToItem(this._prevSelected) || false; + this._prevSelected = this.selected; + + // on initial load and if animateInitialSelection is negated, simply display selectedPage. + if (!oldPage && !this.animateInitialSelection) { + this._completeSelectedChanged(); + return; + } + + this.animationConfig = []; + + // configure selectedPage animations. + if (this.entryAnimation) { + this.animationConfig.push({ + name: this.entryAnimation, + node: selectedPage + }); + } else { + if (selectedPage.getAnimationConfig) { + this.animationConfig.push({ + animatable: selectedPage, + type: 'entry' + }); + } + } + + // configure oldPage animations iff exists. + if (oldPage) { + + // cancel the currently running animation if one is ongoing. + if (oldPage.classList.contains('neon-animating')) { + this._squelchNextFinishEvent = true; + this.cancelAnimation(); + this._completeSelectedChanged(); + this._squelchNextFinishEvent = false; + } + + // configure the animation. + if (this.exitAnimation) { + this.animationConfig.push({ + name: this.exitAnimation, + node: oldPage + }); + } else { + if (oldPage.getAnimationConfig) { + this.animationConfig.push({ + animatable: oldPage, + type: 'exit' + }); + } + } + + // display the oldPage during the transition. + oldPage.classList.add('neon-animating'); + } + + // display the selectedPage during the transition. + selectedPage.classList.add('neon-animating'); + + // actually run the animations. + if (this.animationConfig.length >= 1) { + + // on first load, ensure we run animations only after element is attached. + if (!this.isAttached) { + this.async(function () { + this.playAnimation(undefined, { + fromPage: null, + toPage: selectedPage + }); + }); + + } else { + this.playAnimation(undefined, { + fromPage: oldPage, + toPage: selectedPage + }); + } + + } else { + this._completeSelectedChanged(oldPage, selectedPage); + } + }, + + /** + * @param {Object=} oldPage + * @param {Object=} selectedPage + */ + _completeSelectedChanged: function(oldPage, selectedPage) { + if (selectedPage) { + selectedPage.classList.remove('neon-animating'); + } + if (oldPage) { + oldPage.classList.remove('neon-animating'); + } + if (!selectedPage || !oldPage) { + var nodes = Polymer.dom(this.$.content).getDistributedNodes(); + for (var node, index = 0; node = nodes[index]; index++) { + node.classList && node.classList.remove('neon-animating'); + } + } + this.async(this._notifyPageResize); + }, + + _onNeonAnimationFinish: function(event) { + if (this._squelchNextFinishEvent) { + this._squelchNextFinishEvent = false; + return; + } + this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); + }, + + _notifyPageResize: function() { + var selectedPage = this.selectedItem || this._valueToItem(this.selected); + this.resizerShouldNotify = function(element) { + return element == selectedPage; + } + this.notifyResize(); + } + + }) + +})(); +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animation-behavior.html b/catapult/third_party/polymer/components/neon-animation/neon-animation-behavior.html new file mode 100644 index 00000000..6939d342 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animation-behavior.html @@ -0,0 +1,86 @@ +<!-- +@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="../iron-meta/iron-meta.html"> + +<script> + + /** + * Use `Polymer.NeonAnimationBehavior` to implement an animation. + * @polymerBehavior + */ + Polymer.NeonAnimationBehavior = { + + properties: { + + /** + * Defines the animation timing. + */ + animationTiming: { + type: Object, + value: function() { + return { + duration: 500, + easing: 'cubic-bezier(0.4, 0, 0.2, 1)', + fill: 'both' + } + } + } + + }, + + /** + * Can be used to determine that elements implement this behavior. + */ + isNeonAnimation: true, + + /** + * Do any animation configuration here. + */ + // configure: function(config) { + // }, + + /** + * Returns the animation timing by mixing in properties from `config` to the defaults defined + * by the animation. + */ + timingFromConfig: function(config) { + if (config.timing) { + for (var property in config.timing) { + this.animationTiming[property] = config.timing[property]; + } + } + return this.animationTiming; + }, + + /** + * Sets `transform` and `transformOrigin` properties along with the prefixed versions. + */ + setPrefixedProperty: function(node, property, value) { + var map = { + 'transform': ['webkitTransform'], + 'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin'] + }; + var prefixes = map[property]; + for (var prefix, index = 0; prefix = prefixes[index]; index++) { + node.style[prefix] = value; + } + node.style[property] = value; + }, + + /** + * Called when the animation finishes. + */ + complete: function() {} + + }; + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animation-runner-behavior.html b/catapult/third_party/polymer/components/neon-animation/neon-animation-runner-behavior.html new file mode 100644 index 00000000..67c11b68 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animation-runner-behavior.html @@ -0,0 +1,129 @@ +<!-- +@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="../iron-meta/iron-meta.html"> +<link rel="import" href="neon-animatable-behavior.html"> + +<script> + + /** + * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations. + * + * @polymerBehavior Polymer.NeonAnimationRunnerBehavior + */ + Polymer.NeonAnimationRunnerBehaviorImpl = { + + _configureAnimations: function(configs) { + var results = []; + if (configs.length > 0) { + for (var config, index = 0; config = configs[index]; index++) { + var neonAnimation = document.createElement(config.name); + // is this element actually a neon animation? + if (neonAnimation.isNeonAnimation) { + var result = null; + // configuration or play could fail if polyfills aren't loaded + try { + result = neonAnimation.configure(config); + // Check if we have an Effect rather than an Animation + if (typeof result.cancel != 'function') { + result = document.timeline.play(result); + } + } catch (e) { + result = null; + console.warn('Couldnt play', '(', config.name, ').', e); + } + if (result) { + results.push({ + neonAnimation: neonAnimation, + config: config, + animation: result, + }); + } + } else { + console.warn(this.is + ':', config.name, 'not found!'); + } + } + } + return results; + }, + + _shouldComplete: function(activeEntries) { + var finished = true; + for (var i = 0; i < activeEntries.length; i++) { + if (activeEntries[i].animation.playState != 'finished') { + finished = false; + break; + } + } + return finished; + }, + + _complete: function(activeEntries) { + for (var i = 0; i < activeEntries.length; i++) { + activeEntries[i].neonAnimation.complete(activeEntries[i].config); + } + for (var i = 0; i < activeEntries.length; i++) { + activeEntries[i].animation.cancel(); + } + }, + + /** + * Plays an animation with an optional `type`. + * @param {string=} type + * @param {!Object=} cookie + */ + playAnimation: function(type, cookie) { + var configs = this.getAnimationConfig(type); + if (!configs) { + return; + } + this._active = this._active || {}; + if (this._active[type]) { + this._complete(this._active[type]); + delete this._active[type]; + } + + var activeEntries = this._configureAnimations(configs); + + if (activeEntries.length == 0) { + this.fire('neon-animation-finish', cookie, {bubbles: false}); + return; + } + + this._active[type] = activeEntries; + + for (var i = 0; i < activeEntries.length; i++) { + activeEntries[i].animation.onfinish = function() { + if (this._shouldComplete(activeEntries)) { + this._complete(activeEntries); + delete this._active[type]; + this.fire('neon-animation-finish', cookie, {bubbles: false}); + } + }.bind(this); + } + }, + + /** + * Cancels the currently running animations. + */ + cancelAnimation: function() { + for (var k in this._animations) { + this._animations[k].cancel(); + } + this._animations = {}; + } + }; + + /** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */ + Polymer.NeonAnimationRunnerBehavior = [ + Polymer.NeonAnimatableBehavior, + Polymer.NeonAnimationRunnerBehaviorImpl + ]; +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animation.html b/catapult/third_party/polymer/components/neon-animation/neon-animation.html new file mode 100644 index 00000000..da645048 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animation.html @@ -0,0 +1,18 @@ +<!-- +@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="neon-animatable-behavior.html"> +<link rel="import" href="neon-animated-pages.html"> +<link rel="import" href="neon-animatable.html"> +<link rel="import" href="neon-animation-behavior.html"> +<link rel="import" href="neon-animation-runner-behavior.html"> +<link rel="import" href="neon-animations.html"> +<link rel="import" href="neon-shared-element-animatable-behavior.html"> +<link rel="import" href="neon-shared-element-animation-behavior.html"> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-animations.html b/catapult/third_party/polymer/components/neon-animation/neon-animations.html new file mode 100644 index 00000000..67c4df4c --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-animations.html @@ -0,0 +1,29 @@ +<!-- +@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="animations/cascaded-animation.html"> +<link rel="import" href="animations/fade-in-animation.html"> +<link rel="import" href="animations/fade-out-animation.html"> +<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"> +<link rel="import" href="animations/slide-from-right-animation.html"> +<link rel="import" href="animations/slide-from-top-animation.html"> +<link rel="import" href="animations/slide-from-bottom-animation.html"> +<link rel="import" href="animations/slide-left-animation.html"> +<link rel="import" href="animations/slide-right-animation.html"> +<link rel="import" href="animations/slide-up-animation.html"> +<link rel="import" href="animations/slide-down-animation.html"> +<link rel="import" href="animations/transform-animation.html"> + diff --git a/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animatable-behavior.html b/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animatable-behavior.html new file mode 100644 index 00000000..e63173d3 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animatable-behavior.html @@ -0,0 +1,43 @@ +<!-- +@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-animatable-behavior.html"> + +<script> + + /** + * Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements containing shared element + * animations. + * @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior + */ + Polymer.NeonSharedElementAnimatableBehaviorImpl = { + + properties: { + + /** + * A map of shared element id to node. + */ + sharedElements: { + type: Object, + value: {} + } + + } + + }; + + /** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */ + Polymer.NeonSharedElementAnimatableBehavior = [ + Polymer.NeonAnimatableBehavior, + Polymer.NeonSharedElementAnimatableBehaviorImpl + ]; + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animation-behavior.html b/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animation-behavior.html new file mode 100644 index 00000000..7787615b --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/neon-shared-element-animation-behavior.html @@ -0,0 +1,72 @@ +<!-- +@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-animation-behavior.html"> + +<script> + + /** + * Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations. + * @polymerBehavior Polymer.NeonSharedElementAnimationBehavior + */ + Polymer.NeonSharedElementAnimationBehaviorImpl = { + + properties: { + + /** + * Cached copy of shared elements. + */ + sharedElements: { + type: Object + } + + }, + + /** + * Finds shared elements based on `config`. + */ + findSharedElements: function(config) { + var fromPage = config.fromPage; + var toPage = config.toPage; + if (!fromPage || !toPage) { + console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!'); + return null; + }; + + if (!fromPage.sharedElements || !toPage.sharedElements) { + console.warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage); + return null; + }; + + var from = fromPage.sharedElements[config.id] + var to = toPage.sharedElements[config.id]; + + if (!from || !to) { + console.warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage); + return null; + } + + this.sharedElements = { + from: from, + to: to + }; + return this.sharedElements; + } + + }; + + /** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */ + Polymer.NeonSharedElementAnimationBehavior = [ + Polymer.NeonAnimationBehavior, + Polymer.NeonSharedElementAnimationBehaviorImpl + ]; + +</script> diff --git a/catapult/third_party/polymer/components/neon-animation/test/index.html b/catapult/third_party/polymer/components/neon-animation/test/index.html new file mode 100644 index 00000000..81555a2b --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/test/index.html @@ -0,0 +1,28 @@ +<!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> + <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', + 'neon-animated-pages.html?dom=shadow', + 'neon-animated-pages-lazy.html', + 'neon-animated-pages-lazy.html?dom=shadow', + 'neon-animated-pages-descendant-selection.html', + 'neon-animated-pages-descendant-selection.html?dom=shadow', + ]); + </script> + + +</body></html> diff --git a/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-descendant-selection.html b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-descendant-selection.html new file mode 100644 index 00000000..0904a395 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-descendant-selection.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<!-- +@license +Copyright (c) 2016 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 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-animation/neon-animated-pages.html"> +<link rel="import" href="../../neon-animation/neon-animation-behavior.html"> +<link rel="import" href="../../iron-selector/iron-selector.html"> + +</head> +<body> + +<test-fixture id="descendant-selection"> + <template> + <neon-animated-pages entry-animation="test-animation" animate-initial-selection> + <iron-selector selected="0" id="selector"> + <div>1</div> + <div id="target">2</div> + </iron-selector> + </neon-animated-pages> + </template> +</test-fixture> + +<test-fixture id="selecting-item"> + <template> + <neon-animated-pages entry-animation="test-animation" animate-initial-selection> + <x-selecting-element></x-selecting-element> + <div id="target"></div> + </neon-animated-pages> + </template> +</test-fixture> + +<dom-module id="x-selecting-element"> + <template> + <iron-selector selected="0" id="selector"> + <div>1</div> + <div id="target">2</div> + </iron-selector> + </template> +</dom-module> + +<dom-module id="test-element"> + <template> + <neon-animated-pages entry-animation="test-animation" animate-initial-selection> + <content></content> + </neon-animated-pages> + </template> +</dom-module> + +<script> + HTMLImports.whenReady(function() { + Polymer({ is: 'x-selecting-element' }); + Polymer({ is: 'test-element' }); + Polymer({ + is: 'test-animation', + behaviors: [ + Polymer.NeonAnimationBehavior + ], + configure: function(config) { + config.node.animated = true; + } + }); + }); +</script> + +<test-fixture id="distributed-children"> + <template> + <test-element> + <div>1</div> + <div id="target">2</div> + </test-element> + </template> +</test-fixture> + +<script> +suite('descendant selection', function() { + test('descendents of other selectors are not animated', function() { + var animatedPages = fixture('descendant-selection'); + var selector = Polymer.dom(animatedPages).querySelector('#selector'); + var target = Polymer.dom(animatedPages).querySelector('#target'); + Polymer.dom(selector).setAttribute('selected', '1'); + assert(!target.animated); + }); + test('elements distributed as children are animated', function() { + var testElement = fixture('distributed-children'); + var target = Polymer.dom(testElement).querySelector('#target'); + var animatedPages = Polymer.dom(testElement.root).querySelector("neon-animated-pages"); + Polymer.dom(animatedPages).setAttribute('selected', '1'); + assert(target.animated); + }); + test('ignores selection from shadow descendants of its items', function() { + var pages = fixture('selecting-item'); + var target = Polymer.dom(pages).querySelector('#target'); + var selecting = Polymer.dom(pages).querySelector('x-selecting-element'); + selecting.$.selector.selected = 1; + assert(!target.animated); + }); +}); +</script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-lazy.html b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-lazy.html new file mode 100644 index 00000000..86ef1988 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages-lazy.html @@ -0,0 +1,73 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2016 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>Polymer = {lazyRegister: true}</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="../neon-animatable.html"> + <link rel="import" href="../animations/slide-from-left-animation.html"> + <link rel="import" href="../animations/slide-right-animation.html"> + <link rel="import" href="test-resizable-pages.html"> + +</head> +<body> + + <test-fixture id="animate-initial-selection"> + <template> + <neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection> + <neon-animatable></neon-animatable> + <neon-animatable></neon-animatable> + </neon-animated-pages> + </template> + </test-fixture> + + <script> + suite('animations found when `lazRegister` setting is true', function() { + test('animations are registered', function(done) { + var animatedPages = fixture('animate-initial-selection'); + animatedPages._complete = sinon.spy(animatedPages._complete); + assert.isUndefined(animatedPages.selected); + var pages = Polymer.dom(animatedPages).children; + animatedPages.addEventListener('neon-animation-finish', function(event) { + if (animatedPages.selected === 0) { + animatedPages.selected = 1; + return; + } + assert.strictEqual(animatedPages.selected, 1); + assert.equal(event.detail.fromPage, pages[0]); + assert.equal(event.detail.toPage, pages[1]); + assert.isTrue(animatedPages._complete.calledTwice); + var a$ = animatedPages._complete.getCall(1).args[0]; + assert.isTrue(a$[0].neonAnimation.isNeonAnimation, 'entry animation is not a registered animation'); + assert.isTrue(a$[1].neonAnimation.isNeonAnimation, 'exit animation is not a registered animation'); + done(); + }); + animatedPages.selected = 0; + }); + }); + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages.html b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages.html new file mode 100644 index 00000000..98220b67 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/test/neon-animated-pages.html @@ -0,0 +1,101 @@ +<!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>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="../neon-animatable.html"> + <link rel="import" href="../animations/slide-from-left-animation.html"> + <link rel="import" href="../animations/slide-right-animation.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> + + <test-fixture id="animate-initial-selection"> + <template> + <neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection> + <neon-animatable></neon-animatable> + <neon-animatable></neon-animatable> + </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); + }); + }); + suite('animate-initial-selection', function() { + test('\'neon-animation-finish\' event fired after animating initial selection', function(done) { + var animatedPages = fixture('animate-initial-selection'); + assert.isUndefined(animatedPages.selected); + var pages = Polymer.dom(animatedPages).children; + animatedPages.addEventListener('neon-animation-finish', function(event) { + assert.strictEqual(animatedPages.selected, 0); + assert.isFalse(event.detail.fromPage); + assert.deepEqual(event.detail.toPage, pages[0]); + done(); + }); + animatedPages.selected = 0; + }); + }); + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/neon-animation/test/test-resizable-pages.html b/catapult/third_party/polymer/components/neon-animation/test/test-resizable-pages.html new file mode 100644 index 00000000..7330a1ff --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/test/test-resizable-pages.html @@ -0,0 +1,58 @@ +<!-- +@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"> +<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> diff --git a/catapult/third_party/polymer/components/neon-animation/web-animations.html b/catapult/third_party/polymer/components/neon-animation/web-animations.html new file mode 100644 index 00000000..c8718540 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/web-animations.html @@ -0,0 +1,11 @@ +<!-- +@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 +--> + +<script src="../web-animations-js/web-animations-next-lite.min.js"></script> |