diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo')
24 files changed, 2314 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/index.html new file mode 100644 index 00000000000..ec246dbc77a --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/index.html @@ -0,0 +1,174 @@ +<!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="../../web-animations.html"> + <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"> + + <custom-style> + <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> + </custom-style> + + </head> + <body> + <dom-bind> + <template is="dom-bind"> + <neon-animated-pages id="pages" selected="0"> + <x-cards-list id="list"> + <div slot="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 slot="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 slot="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> + </dom-bind> + + <script> + var polymer2DomBind = document.querySelector('dom-bind'); + var polymer1DomBindScope = document.querySelector('template[is="dom-bind"]'); + + polymer2DomBind._onPolymerClick = function(event) { + this.$.list.sharedElements = { + 'ripple': event.target, + 'reverse-ripple': event.target + }; + this.$.pages.selected = 1; + }; + + polymer2DomBind._onAngularClick = function(event) { + this.$.list.sharedElements = { + 'ripple': event.target, + 'reverse-ripple': event.target + }; + this.$.pages.selected = 2; + }; + + polymer2DomBind._onBackClick = function(event) { + this.$.pages.selected = 0; + }; + + polymer1DomBindScope._onPolymerClick = polymer2DomBind._onPolymerClick; + polymer1DomBindScope._onAngularClick = polymer2DomBind._onAngularClick; + polymer1DomBindScope._onBackClick = polymer2DomBind._onBackClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html new file mode 100644 index 00000000000..12979bb1a70 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.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="../../../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"> + <slot name="div"></slot> + </div> + + </template> +</dom-module> + +<script> +(function() { + Polymer({ + is: 'x-card', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + animationConfig: { + type: Object + }, + + sharedElements: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.animationConfig = { + '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 + }] + }; + + this.sharedElements = { + 'ripple': this.$.placeholder, + 'reverse-ripple': this.$.placeholder + }; + } + }); +})(); +</script> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-cards-list.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-cards-list.html new file mode 100644 index 00000000000..a3ba2ca695e --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-cards-list.html @@ -0,0 +1,81 @@ +<!-- +@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"> + <slot name="div"></slot> + </div> + + </template> +</dom-module> + +<script> +(function() { + Polymer({ + is: 'x-cards-list', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + animationConfig: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.animationConfig = { + '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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/declarative/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/declarative/index.html new file mode 100644 index 00000000000..3bac789d1b2 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/declarative/index.html @@ -0,0 +1,150 @@ +<!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="../../web-animations.html"> + <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"> + + <custom-style> + <style is="custom-style"> + body { + overflow: hidden; + height: 100vh; + margin: 0px; + } + + dom-bind { + height: 100%; + } + + .toolbar { + position: relative; + + padding: 8px; + + background-color: white; + + z-index: 12; + } + + neon-animated-pages { + height: 100%; + @apply --layout-flex; + } + + neon-animatable { + color: white; + @apply --layout-horizontal; + @apply --layout-center-center; + @apply --paper-font-display4; + } + + /* in shady polymer1 slot element is first child */ + neon-animatable:nth-child(1), + neon-animatable:nth-child(6) { + 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> + </custom-style> + + </head> + <body> + <dom-bind> + <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> + </dom-bind> + + <script> + + var scope1 = document.querySelector('template[is="dom-bind"]'); + var scope2 = document.querySelector('dom-bind'); + + scope1.selected = 0; + scope2.selected = 0; + + scope1._onPrevClick = function() { + this.entryAnimation = 'slide-from-left-animation'; + this.exitAnimation = 'slide-right-animation'; + this.selected = this.selected === 0 ? 4 : (this.selected - 1); + } + + scope1._onNextClick = function() { + this.entryAnimation = 'slide-from-right-animation'; + this.exitAnimation = 'slide-left-animation'; + this.selected = this.selected === 4 ? 0 : (this.selected + 1); + } + + scope1._onUpClick = function() { + this.entryAnimation = 'slide-from-top-animation'; + this.exitAnimation = 'slide-down-animation'; + this.selected = this.selected === 4 ? 0 : (this.selected + 1); + } + + scope1._onDownClick = function() { + this.entryAnimation = 'slide-from-bottom-animation'; + this.exitAnimation = 'slide-up-animation'; + this.selected = this.selected === 0 ? 4 : (this.selected - 1); + } + + scope2._onPrevClick = scope1._onPrevClick; + scope2._onNextClick = scope1._onNextClick; + scope2._onUpClick = scope1._onUpClick; + scope2._onDownClick = scope1._onDownClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/index.html new file mode 100644 index 00000000000..a15bfa585ae --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/index.html @@ -0,0 +1,76 @@ +<!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="../../web-animations.html"> + <link rel="import" href="my-animatable.html"> + <link rel="import" href="my-dialog.html"> + + </head> + <style> + my-animatable { + margin-top: 50px; + } + </style> + <body> + <dom-bind> + <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> + </dom-bind> + + <script> + + var scope1 = document.querySelector('template[is="dom-bind"]'); + var scope2 = document.querySelector('dom-bind'); + + scope1._onCircleButtonClick = function(event) { + var node = document.querySelector('my-animatable'); + if (node) { + node.animate(); + } + }; + + scope1._onDialogButtonClick = function(event) { + var node = document.querySelector('my-dialog'); + if (node) { + if (node.opened) { + node.hide(); + } else { + node.show(); + } + } + }; + + scope2._onCircleButtonClick = scope1._onCircleButtonClick; + scope2._onDialogButtonClick = scope1._onDialogButtonClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/my-animatable.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/my-animatable.html new file mode 100644 index 00000000000..86dcb19ea5c --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_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> + <slot></slot> + + </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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/my-dialog.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/doc/my-dialog.html new file mode 100644 index 00000000000..5ccdff82c76 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_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> + <slot></slot> + + </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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/dropdown/animated-dropdown.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/dropdown/animated-dropdown.html new file mode 100644 index 00000000000..8c09f37a46e --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_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> + <slot></slot> + </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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/dropdown/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/dropdown/index.html new file mode 100644 index 00000000000..de81a322a33 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/dropdown/index.html @@ -0,0 +1,61 @@ +<!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="../../web-animations.html"> + <link rel="import" href="../../neon-animated-pages.html"> + <link rel="import" href="../../neon-animations.html"> + <link rel="import" href="animated-dropdown.html"> + + </head> + <body> + + <dom-bind> + <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> + </dom-bind> + + <script> + + var scope1 = document.querySelector('template[is="dom-bind"]'); + var scope2 = document.querySelector('dom-bind'); + + scope1._onButtonClick = function(event) { + var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id')); + if (dropdown) { + dropdown.show(); + } + }; + + scope1._onDropdownClick = function(event) { + event.target.hide(); + }; + + scope2._onButtonClick = scope1._onButtonClick; + scope2._onDropdownClick = scope1._onDropdownClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/animated-grid.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/animated-grid.html new file mode 100644 index 00000000000..3688ace6b21 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/animated-grid.html @@ -0,0 +1,160 @@ +<!-- +@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"> + + :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 item="[[item]]" class$="[[_computeTileClass(item.color)]]" on-click="_onClick"> + <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 + }] + } + } + } + + }, + + _computeTileClass: function(color) { + return 'tile ' + color + '-300'; + }, + + _onClick: function(event) { + var target = Polymer.dom(event).rootTarget; + + if (!target.item) { + target = Polymer.dom(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.item + }); + } + + }); + +</script> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html new file mode 100644 index 00000000000..8f334ec44ac --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html @@ -0,0 +1,125 @@ +<!-- +@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 + }, + + animationConfig: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.sharedElements = { + 'hero': this.$.card, + 'ripple': this.$.fixed + }; + + this.animationConfig = { + '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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/index.html new file mode 100644 index 00000000000..d88ec2d7979 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/grid/index.html @@ -0,0 +1,74 @@ +<!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="../../web-animations.html"> + <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"> + + <custom-style> + <style is="custom-style"> + body { + overflow: hidden; + @apply --layout-fullbleed; + } + + neon-animated-pages { + height: 100%; + } + </style> + </custom-style> + + </head> + <body> + <dom-bind> + <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> + </dom-bind> + + <script> + + var scope1 = document.querySelector('template[is="dom-bind"]'); + var scope2 = document.querySelector('dom-bind'); + + var _onTileClick = function(event) { + this.$['fullsize-card'].color = event.detail.data.color; + this.$.pages.selected = 1; + }; + + var _onFullsizeClick = function(event) { + this.$.pages.selected = 0; + }; + + scope1._onTileClick = _onTileClick; + scope1._onFullsizeClick = _onFullsizeClick; + scope2._onTileClick = _onTileClick; + scope2._onFullsizeClick = _onFullsizeClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/index.html new file mode 100644 index 00000000000..1ca9f2d50ce --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/index.html @@ -0,0 +1,46 @@ +<!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"> + <link rel="import" href="../web-animations.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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/full-view.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/full-view.html new file mode 100644 index 00000000000..da52eb318ba --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/full-view.html @@ -0,0 +1,123 @@ +<!-- +@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="../../../app-layout/app-toolbar/app-toolbar.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 + ); + } + + app-toolbar { + color: white; + background-color: var(--google-blue-500); + } + </style> + <app-toolbar> + <paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button> + </app-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 + }, + + animationConfig: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.sharedElements = { 'hero': this.$.main }; + this.animationConfig = { + '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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/index.html new file mode 100644 index 00000000000..6e100bd21f3 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/index.html @@ -0,0 +1,38 @@ +<!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="../../web-animations.html"> + <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="list-demo.html"> + + </head> + <custom-style> + <style is="custom-style"> + body { + @apply --layout-fullbleed; + } + + list-demo { + @apply --layout-fit; + } + </style> + </custom-style> + <body> + <list-demo></list-demo> + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-demo.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-demo.html new file mode 100644 index 00000000000..21897e4c357 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-demo.html @@ -0,0 +1,101 @@ +<!-- +@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"> +<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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-view.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-view.html new file mode 100644 index 00000000000..2620a35599b --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/list/list-view.html @@ -0,0 +1,131 @@ +<!-- +@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="../../../app-layout/app-toolbar/app-toolbar.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); + } + + app-toolbar { + color: white; + background-color: var(--google-blue-500); + } + </style> + <app-toolbar> + <paper-icon-button id="button" icon="arrow-back"></paper-icon-button> + </app-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 + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.animationConfig = { + '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 = Polymer.dom(event).rootTarget; + + // configure the page animation + this.sharedElements = { + 'hero': target, + }; + + this.fire('item-click', { + item: target, + }); + } + + }); + +</script> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/animated-grid.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/animated-grid.html new file mode 100644 index 00000000000..260a4395e72 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/animated-grid.html @@ -0,0 +1,145 @@ +<!-- +@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"> + :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 + } + }] + } + } + } + + }, + + ready: 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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/full-page.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/full-page.html new file mode 100644 index 00000000000..d7a789a6067 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_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 + } + }, + + attached: function() { + this.animationConfig = this.animationConfig || { + '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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/index.html new file mode 100644 index 00000000000..1e1f1317b52 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/load/index.html @@ -0,0 +1,51 @@ +<!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="../../web-animations.html"> + <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"> + + <custom-style> + <style is="custom-style"> + body { + overflow: hidden; + @apply --layout-fullbleed; + } + full-page { + @apply --layout-fit; + } + </style> + </custom-style> + </head> + <body> + + <full-page></full-page> + + <script> + + window.addEventListener('WebComponentsReady', function() { + document.querySelector('full-page').show(); + }); + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/shared-styles.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/shared-styles.html new file mode 100644 index 00000000000..4e48c8c4065 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html new file mode 100644 index 00000000000..3d7fdddca2f --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html @@ -0,0 +1,115 @@ +<!-- +@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: { + type: Object + } + }, + + listeners: { + 'click': '_onClick' + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + var circles = Polymer.dom(this.root).querySelectorAll('.circle'); + var circlesArray = Array.prototype.slice.call(circles); + this.animationConfig = { + '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' + }] + }; + }, + + _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/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/index.html new file mode 100644 index 00000000000..3a46ab08cf4 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/index.html @@ -0,0 +1,80 @@ +<!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="../../web-animations.html"> + <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"> + + <custom-style> + <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> + </custom-style> + + </head> + <body> + <dom-bind> + <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> + </dom-bind> + + <script> + + var scope1 = document.querySelector('template[is="dom-bind"]'); + var scope2 = document.querySelector('dom-bind'); + + var _onCircleClick = function(event) { + this.$.pages.selected = 1; + }; + + var _onSquaresClick = function(event) { + this.$.pages.selected = 0; + }; + + scope1._onCircleClick = _onCircleClick; + scope1._onSquaresClick = _onSquaresClick; + scope2._onCircleClick = _onCircleClick; + scope2._onSquaresClick = _onSquaresClick; + + </script> + + </body> +</html> diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/squares-page.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/squares-page.html new file mode 100644 index 00000000000..5382fb1eed3 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/squares-page.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="../../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: { + type: Object + }, + + animationConfig: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.sharedElements = { 'hero': this.$.header }; + var squares = Polymer.dom(this.root).querySelectorAll('.square'); + var squaresArray = Array.prototype.slice.call(squares); + this.animationConfig = { + '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> |