neon-lazy-pages.html

<!--
@license
Copyright (C) 2016, Tim van der Lippe
All rights reserved.

This software may be modified and distributed under the terms
of the BSD license.  See the LICENSE file for details.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="iron-lazy-page.html">
<link rel="import" href="iron-lazy-pages-behavior.html">

<!--
# neon-lazy-pages

[`<neon-animated-pages>`](https://github.com/PolymerElements/neon-aniamation) with lazy-loading functionality.

@group Iron Elements
@element neon-lazy-pages
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="neon-lazy-pages">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <content></content>
  </template>
  <script>
    Polymer({

      is: 'neon-lazy-pages',

      behaviors: [
        Polymer.IronLazyPagesBehavior,
        Polymer.NeonAnimationRunnerBehavior
      ],

      properties: {
        animationConfig: {
          type: Object,
          value: function() {
            return {
              'entry': [],
              'exit': []
            };
          }
        },

        entryAnimation: String,
        exitAnimation: String
      },

      _hide: function(page, cb) {
        if (this._isAnimatingOut) {
          return;
        }
        var restamp = this.restamp;
        var onEnd = function() {
          page._hide(restamp);
          this.removeEventListener('neon-animation-finish', onEnd);
          if (this._callback) {
            var node = this._callback()._contentNode;
            this.animationConfig.entry = (node.animationConfig && node.animationConfig.entry) || {
              node: node,
              name: this.entryAnimation
            };
            this.playAnimation('entry');
          }
          this._isAnimatingOut = false;
        };
        this.animationConfig.exit = (page._contentNode.animationConfig && page._contentNode.animationConfig.exit) || {
          node: page._contentNode,
          name: this.exitAnimation
        };
        this._isAnimatingOut = true;
        this.addEventListener('neon-animation-finish', onEnd);
        this.playAnimation('exit');
      }
    });
  </script>
</dom-module>