third_party/polymer/v1_0/components-chromium/neon-animation/neon-animated-pages-extracted.js

   1
   2 (function() {
   3
   4   Polymer({
   5
   6     is: 'neon-animated-pages',
   7
   8     behaviors: [
   9       Polymer.IronResizableBehavior,
  10       Polymer.IronSelectableBehavior,
  11       Polymer.NeonAnimationRunnerBehavior
  12     ],
  13
  14     properties: {
  15
  16       activateEvent: {
  17         type: String,
  18         value: ''
  19       },
  20
  21       // if true, the initial page selection will also be animated according to its animation config.
  22       animateInitialSelection: {
  23         type: Boolean,
  24         value: false
  25       }
  26
  27     },
  28
  29     observers: [
  30       '_selectedChanged(selected)'
  31     ],
  32
  33     listeners: {
  34       'neon-animation-finish': '_onNeonAnimationFinish'
  35     },
  36
  37     _selectedChanged: function(selected) {
  38
  39       var selectedPage = this.selectedItem;
  40       var oldPage = this._valueToItem(this._prevSelected) || false;
  41       this._prevSelected = selected;
  42
  43       // on initial load and if animateInitialSelection is negated, simply display selectedPage.
  44       if (!oldPage && !this.animateInitialSelection) {
  45         this._completeSelectedChanged();
  46         return;
  47       }
  48
  49       // insert safari fix.
  50       this.animationConfig = [{
  51         name: 'opaque-animation',
  52         node: selectedPage
  53       }];
  54
  55       // configure selectedPage animations.
  56       if (this.entryAnimation) {
  57         this.animationConfig.push({
  58           name: this.entryAnimation,
  59           node: selectedPage
  60         });
  61       } else {
  62         if (selectedPage.getAnimationConfig) {
  63           this.animationConfig.push({
  64             animatable: selectedPage,
  65             type: 'entry'
  66           });
  67         }
  68       }
  69
  70       // configure oldPage animations iff exists.
  71       if (oldPage) {
  72
  73         // cancel the currently running animation if one is ongoing.
  74         if (oldPage.classList.contains('neon-animating')) {
  75           this._squelchNextFinishEvent = true;
  76           this.cancelAnimation();
  77           this._completeSelectedChanged();
  78         }
  79
  80         // configure the animation.
  81         if (this.exitAnimation) {
  82           this.animationConfig.push({
  83             name: this.exitAnimation,
  84             node: oldPage
  85           });
  86         } else {
  87           if (oldPage.getAnimationConfig) {
  88             this.animationConfig.push({
  89               animatable: oldPage,
  90               type: 'exit'
  91             });
  92           }
  93         }
  94
  95         // display the oldPage during the transition.
  96         oldPage.classList.add('neon-animating');
  97       }
  98
  99       // display the selectedPage during the transition.
 100       selectedPage.classList.add('neon-animating');
 101
 102       // actually run the animations.
 103       if (this.animationConfig.length > 1) {
 104
 105         // on first load, ensure we run animations only after element is attached.
 106         if (!this.isAttached) {
 107           this.async(function () {
 108             this.playAnimation(undefined, {
 109               fromPage: null,
 110               toPage: selectedPage
 111             });
 112           });
 113
 114         } else {
 115           this.playAnimation(undefined, {
 116             fromPage: oldPage,
 117             toPage: selectedPage
 118           });
 119         }
 120
 121       } else {
 122         this._completeSelectedChanged(oldPage, selectedPage);
 123       }
 124     },
 125
 126     /**
 127      * @param {Object=} oldPage
 128      * @param {Object=} selectedPage
 129      */
 130     _completeSelectedChanged: function(oldPage, selectedPage) {
 131       if (selectedPage) {
 132         selectedPage.classList.remove('neon-animating');
 133       }
 134       if (oldPage) {
 135         oldPage.classList.remove('neon-animating');
 136       }
 137       if (!selectedPage || !oldPage) {
 138         var nodes = Polymer.dom(this.$.content).getDistributedNodes();
 139         for (var node, index = 0; node = nodes[index]; index++) {
 140           node.classList && node.classList.remove('neon-animating');
 141         }
 142       }
 143       this.async(this._notifyPageResize);
 144     },
 145
 146     _onNeonAnimationFinish: function(event) {
 147       if (this._squelchNextFinishEvent) {
 148         this._squelchNextFinishEvent = false;
 149         return;
 150       }
 151       this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
 152     },
 153
 154     _notifyPageResize: function() {
 155       var selectedPage = this.selectedItem;
 156       this.resizerShouldNotify = function(element) {
 157         return element == selectedPage;
 158       }
 159       this.notifyResize();
 160     }
 161
 162   })
 163
 164 })();