third_party/polymer/v1_0/components/neon-animation/neon-animated-pages.html

   1 <!--
   2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  11 <link rel="import" href="../iron-selector/iron-selectable.html">
  12 <link rel="import" href="neon-animation-runner-behavior.html">
  13 <link rel="import" href="animations/opaque-animation.html">
  14
  15 <!--
  16 `neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
  17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
  18 animations to be run when switching to or switching out of the page.
  19
  20 @group Neon Elements
  21 @element neon-animated-pages
  22 @demo demo/index.html
  23 -->
  24
  25 <dom-module id="neon-animated-pages">
  26
  27   <style>
  28
  29     :host {
  30       display: block;
  31       position: relative;
  32     }
  33
  34     :host > ::content > * {
  35       position: absolute;
  36       top: 0;
  37       left: 0;
  38       bottom: 0;
  39       right: 0;
  40       height: 100%;
  41     }
  42
  43     :host > ::content > :not(.iron-selected):not(.neon-animating) {
  44       display: none !important;
  45     }
  46
  47     :host > ::content > .neon-animating {
  48       pointer-events: none;
  49     }
  50
  51   </style>
  52
  53   <template>
  54     <content id="content"></content>
  55   </template>
  56
  57 </dom-module>
  58
  59 <script>
  60 (function() {
  61
  62   Polymer({
  63
  64     is: 'neon-animated-pages',
  65
  66     behaviors: [
  67       Polymer.IronResizableBehavior,
  68       Polymer.IronSelectableBehavior,
  69       Polymer.NeonAnimationRunnerBehavior
  70     ],
  71
  72     properties: {
  73
  74       activateEvent: {
  75         type: String,
  76         value: ''
  77       },
  78
  79       // if true, the initial page selection will also be animated according to its animation config.
  80       animateInitialSelection: {
  81         type: Boolean,
  82         value: false
  83       }
  84
  85     },
  86
  87     observers: [
  88       '_selectedChanged(selected)'
  89     ],
  90
  91     listeners: {
  92       'neon-animation-finish': '_onNeonAnimationFinish'
  93     },
  94
  95     _selectedChanged: function(selected) {
  96
  97       var selectedPage = this.selectedItem;
  98       var oldPage = this._valueToItem(this._prevSelected) || false;
  99       this._prevSelected = selected;
 100
 101       // on initial load and if animateInitialSelection is negated, simply display selectedPage.
 102       if (!oldPage && !this.animateInitialSelection) {
 103         this._completeSelectedChanged();
 104         return;
 105       }
 106
 107       // insert safari fix.
 108       this.animationConfig = [{
 109         name: 'opaque-animation',
 110         node: selectedPage
 111       }];
 112
 113       // configure selectedPage animations.
 114       if (this.entryAnimation) {
 115         this.animationConfig.push({
 116           name: this.entryAnimation,
 117           node: selectedPage
 118         });
 119       } else {
 120         if (selectedPage.getAnimationConfig) {
 121           this.animationConfig.push({
 122             animatable: selectedPage,
 123             type: 'entry'
 124           });
 125         }
 126       }
 127
 128       // configure oldPage animations iff exists.
 129       if (oldPage) {
 130
 131         // cancel the currently running animation if one is ongoing.
 132         if (oldPage.classList.contains('neon-animating')) {
 133           this._squelchNextFinishEvent = true;
 134           this.cancelAnimation();
 135           this._completeSelectedChanged();
 136         }
 137
 138         // configure the animation.
 139         if (this.exitAnimation) {
 140           this.animationConfig.push({
 141             name: this.exitAnimation,
 142             node: oldPage
 143           });
 144         } else {
 145           if (oldPage.getAnimationConfig) {
 146             this.animationConfig.push({
 147               animatable: oldPage,
 148               type: 'exit'
 149             });
 150           }
 151         }
 152
 153         // display the oldPage during the transition.
 154         oldPage.classList.add('neon-animating');
 155       }
 156
 157       // display the selectedPage during the transition.
 158       selectedPage.classList.add('neon-animating');
 159
 160       // actually run the animations.
 161       if (this.animationConfig.length > 1) {
 162
 163         // on first load, ensure we run animations only after element is attached.
 164         if (!this.isAttached) {
 165           this.async(function () {
 166             this.playAnimation(undefined, {
 167               fromPage: null,
 168               toPage: selectedPage
 169             });
 170           });
 171
 172         } else {
 173           this.playAnimation(undefined, {
 174             fromPage: oldPage,
 175             toPage: selectedPage
 176           });
 177         }
 178
 179       } else {
 180         this._completeSelectedChanged(oldPage, selectedPage);
 181       }
 182     },
 183
 184     /**
 185      * @param {Object=} oldPage
 186      * @param {Object=} selectedPage
 187      */
 188     _completeSelectedChanged: function(oldPage, selectedPage) {
 189       if (selectedPage) {
 190         selectedPage.classList.remove('neon-animating');
 191       }
 192       if (oldPage) {
 193         oldPage.classList.remove('neon-animating');
 194       }
 195       if (!selectedPage || !oldPage) {
 196         var nodes = Polymer.dom(this.$.content).getDistributedNodes();
 197         for (var node, index = 0; node = nodes[index]; index++) {
 198           node.classList && node.classList.remove('neon-animating');
 199         }
 200       }
 201       this.async(this._notifyPageResize);
 202     },
 203
 204     _onNeonAnimationFinish: function(event) {
 205       if (this._squelchNextFinishEvent) {
 206         this._squelchNextFinishEvent = false;
 207         return;
 208       }
 209       this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
 210     },
 211
 212     _notifyPageResize: function() {
 213       var selectedPage = this.selectedItem;
 214       this.resizerShouldNotify = function(element) {
 215         return element == selectedPage;
 216       }
 217       this.notifyResize();
 218     }
 219
 220   })
 221
 222 })();
 223 </script>