curium-animated-pages.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/utils/debounce.html">

<link rel="import" href="../../bower_components/web-animations-js/web-animations-next-lite.min.html">

<link rel="import" href="../iron-selector/iron-selectable.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

<dom-module id="curium-animated-pages">
  <template>
    <style strip-whitespace>
      :host {
        display: block;
        position: relative;
        overflow: hidden;
      }
      :host > ::slotted(*) {
        /* !important is added for shadydom */
        /* For native shadowdom, this selector will have higher priority than the :host selector.
           For polyfill shadydom, the :host selector will have higher priority than this selector,
           so these styles may be overridden by the host styles e.g. position: relative.
           The current solution is to add !important to prevent styles from overridden. */
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        bottom: 0px !important;
        left: 0px !important;
      }
      :host > ::slotted(:not(.iron-selected):not(.curium-animating)) {
        display: none !important;
      }
      :host > ::slotted(.curium-animating) {
        pointer-events: none;
      }
    </style>
    <slot></slot>
  </template>

  <script>
    /**
     * `curium-animated-pages`
     * A component similar to neon-animated-pages with greater flexibility
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class CuriumAnimatedPages extends Polymer.mixinBehaviors([Polymer.IronSelectableBehavior, Polymer.IronResizableBehavior], Polymer.Element) {

      static get is() { return 'curium-animated-pages'; }

      static get properties() {
        return {
          animationManager: {
            type: String // or HTMLElement
          },
          animatingAttribute: {
            type: String
          },
          animatingClass: {
            type: String,
            value: 'curium-animating'
          },

          notifyResizeOnGrandchildren: {
            type: Boolean,
            value: false
          },

          activateEvent: {
            type: String,
            value: ''
          },

        };
      }

      ready() {
        super.ready();
        this.addEventListener('iron-select', e => {
          if (e.target === this) this._onSelectionChanged(e)
        });
        this.addEventListener('iron-deselect', e => {
          if (e.target === this) this._onSelectionChanged(e)
        });
        this.addEventListener('iron-items-changed', e => this._onSelectionChanged(e)); // iron-items-changed is non-bubbling
      }

      _onSelectionChanged(evt) {
        this._onSelectionChanged_debJob = Polymer.Debouncer.debounce(this._onSelectionChanged_debJob, Polymer.Async.microTask, () => {
          
          let pageList = this.items;

          let deselectedPage = this._valueToItem(this._prevSelected) || null;
          let selectedPage = this._valueToItem(this.selected) || null;

          this._prevSelected = this.selected;

          if (deselectedPage === selectedPage) {
            return;
          }

          if (this._runningAnimation) {
            // finish event handler will be triggered after the given animation duration
            // no matter whether finish() has been called or not. (Bug?)
            // So we have to manually call the finish callback otherwise the callback
            // will be delayed.
            this._runningAnimation.onfinish = null;
            this._runningAnimation.finish();

            this._animationFinishCallback();
          }

          let managerInstance;
          if (typeof this.animationManager === 'string') {
            managerInstance = this._getParentRoot().querySelector(this.animationManager);
          } else if (this.animationManager instanceof HTMLElement) {
            managerInstance = this.animationManager;
          } else {
            managerInstance = null;
          }

          let runningAnimation = managerInstance ? managerInstance.beforeAnimation(this, pageList, selectedPage, deselectedPage) : null;
          let animationFinishCallback = () => {
            if (managerInstance) managerInstance.afterAnimation(this, pageList, selectedPage, deselectedPage);

            this._runningAnimation = null;
            this._animationFinishCallback = null;

            this.resizerShouldNotify = el => {
              if (this.notifyResizeOnGrandchildren) {
                let node = el;
                while (node !== selectedPage && node !== this) {
                  node = node.assignedSlot || node.parentNode || node.host;
                }
                return node === selectedPage;
              } else {
                return el === selectedPage;
              }
            };
            this.notifyResize();

            this.dispatchEvent(new CustomEvent('curium-animation-finish', {
              bubbles: false,
              detail: {
                pageContainer: this,
                pageList: pageList,
                selectedPage: selectedPage,
                deselectedPage: deselectedPage
              }
            }));
          };

          this.dispatchEvent(new CustomEvent('curium-animation-begin', {
            bubbles: false,
            detail: {
              pageContainer: this,
              pageList: pageList,
              selectedPage: selectedPage,
              deselectedPage: deselectedPage
            }
          }));
          this._runningAnimation = runningAnimation;
          this._animationFinishCallback = animationFinishCallback;
          if (this._runningAnimation) {
            this._runningAnimation.onfinish = e => this._animationFinishCallback();
            this._runningAnimation.play();
          } else {
            this._animationFinishCallback();
          }

        });
      }

      /**
       * Query parent shadow root.
       * Real parent of a shadow root is host instead of parentNode, so its parentNode === null
       */
      _getParentRoot() {
        // let node = this.parentNode;
        // while (node.parentNode) {
        //   node = node.parentNode;
        // }
        // return node;
        return this.getRootNode();
      }

    }

    window.customElements.define(CuriumAnimatedPages.is, CuriumAnimatedPages);
    window.Curium = window.Curium || {};
    Curium.CuriumAnimatedPages = CuriumAnimatedPages;
  </script>
</dom-module>