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

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