Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(64)

Unified Diff: third_party/polymer/v0_8/components/neon-animation/neon-animated-pages.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v0_8/components/neon-animation/neon-animated-pages.html
diff --git a/third_party/polymer/v0_8/components/neon-animation/neon-animated-pages.html b/third_party/polymer/v0_8/components/neon-animation/neon-animated-pages.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a5259d54992e6c958b818b42fce37a9f80cfe1a
--- /dev/null
+++ b/third_party/polymer/v0_8/components/neon-animation/neon-animated-pages.html
@@ -0,0 +1,208 @@
+<!--
+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="../paper-styles/paper-styles.html">
+<link rel="import" href="neon-animation-runner-behavior.html">
+<link rel="import" href="animations/opaque-animation.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">
+
+ <style>
+
+ :host {
+ display: block;
+ position: relative;
+ }
+
+ :host > ::content > * {
+ @apply(--layout-fit);
+ height: 100%;
+ }
+
+ :host > ::content > :not(.iron-selected):not(.neon-animating) {
+ display: none !important;
+ }
+
+ :host > ::content > .neon-animating {
+ pointer-events: none;
+ }
+
+ </style>
+
+ <template>
+ <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
+ }
+
+ },
+
+ observers: [
+ '_selectedChanged(selected)'
+ ],
+
+ listeners: {
+ 'neon-animation-finish': '_onNeonAnimationFinish'
+ },
+
+ _selectedChanged: function(selected) {
+
+ var selectedPage = this.selectedItem;
+ var oldPage = this._prevSelected || false;
+ this._prevSelected = selectedPage;
+
+ // on initial load and if animateInitialSelection is negated, simply display selectedPage.
+ if (!oldPage && !this.animateInitialSelection) {
+ this._completeSelectedChanged();
+ return;
+ }
+
+ // insert safari fix.
+ this.animationConfig = [{
+ name: 'opaque-animation',
+ node: selectedPage
+ }];
+
+ // 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();
+ }
+
+ // 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(null, {
+ fromPage: null,
+ toPage: selectedPage
+ });
+ });
+
+ } else {
+ this.playAnimation(null, {
+ fromPage: oldPage,
+ toPage: selectedPage
+ });
+ }
+
+ } else {
+ this._completeSelectedChanged(oldPage, 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.notifyResize);
+ },
+
+ _onNeonAnimationFinish: function(event) {
+ if (this._squelchNextFinishEvent) {
+ this._squelchNextFinishEvent = false;
+ return;
+ }
+ this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
+ }
+
+ })
+
+})();
+</script>

Powered by Google App Engine
This is Rietveld 408576698