overlay-container.html

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

<dom-module id="overlay-container">
  <template>
    <style>
      :host {
        bottom: 0;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
      }

      #overlays {
        pointer-events: all;
      }

      .backdrop {
        background: rgba(0,0,0,0.2);
        height: 100%;
        opacity: 0;
        pointer-events: all;
        position: absolute;
        transition: all 0.2s ease-in;
        width: 100%;
      }

      .backdrop[transparent] {
        background: rgba(0,0,0,0);
      }      
    </style>

    <div id="overlays"></div>

  </template>
  <script>

    class OverlayContainer extends Polymer.Element {

      static get is() {return 'overlay-container';}

      constructor() {
        super();
        this.__beforeOpenOverlay = this.__beforeOpenOverlay.bind(this);
        this.__onOverlayOpened = this.__onOverlayOpened.bind(this);
        this.__onOverlayClosed = this.__onOverlayClosed.bind(this);
        this.__onPopstate = this.__onPopstate.bind(this);
        this.__onBackdropMousedown = this.__onBackdropMousedown.bind(this);
      }

      connectedCallback() {
        super.connectedCallback();
        this.__toggleListeners({enable: true});
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        this.__toggleListeners({enable: false});
      }

      __toggleListeners({enable}) {
        const m = enable ? 'addEventListener' : 'removeEventListener';
        document.body[m]('before-open-overlay', this.__beforeOpenOverlay);
        this[m]('overlay-opened', this.__onOverlayOpened);
        this[m]('overlay-closed', this.__onOverlayClosed);
        window[m]('popstate', this.__onPopstate);
      }

      __beforeOpenOverlay(evt) {
        const overlay = evt.detail.overlay;
        overlay.parentContainer = this.$.overlays;
      }

      __onOverlayOpened(evt) {
        const overlay = evt.detail.overlay;
        this.__handleCloseOthers(overlay);
        if (overlay.cancelOnPopState) {
          history.pushState({}, '', location.href);
        }
        this.__updateBackdrop(overlay);
      }

      __onOverlayClosed(evt) {
        const overlay = evt.composedPath()[0];
        const lastOverlay = this.__getLastOverlay();
        if ((lastOverlay) &&
            (!lastOverlay.noAutoFocus) &&
            (!this.__isOverlayOrDescendantFocused(lastOverlay))) {
          lastOverlay.focus();
        }
        this.__updateBackdrop(overlay);
      }

      __onPopstate() {
        const overlay = this.__getLastOverlay();
        if (overlay && overlay.cancelOnPopState) {
          overlay._setCanceled(true);
          overlay.opened = false;
        }
      }

      /**
       * If the given overlay have the `closeOthers` attribute set to true,
       * then all overlays will be closed.
       */
      __handleCloseOthers(overlay) {
        if (overlay.closeOthers) {
          const c$ = this.$.overlays.children;
          for (let i = c$.length - 1; i >= 0; i--) {
            if (c$[i] && c$[i] !== overlay && c$[i].opened) {
              c$[i].opened = false;
            }
          }
        }
      }

      __updateBackdrop(overlay) {
        const {withBackdrop, cancelOnOutsideClick, opened} = overlay;
        if (opened) {
          if (withBackdrop || cancelOnOutsideClick) {
            const el = document.createElement('div');
            el.classList.add('backdrop');
            if (!withBackdrop) {
              el.setAttribute('transparent', '');
            }
            overlay.__backdropEl = el;
            this.$.overlays.insertBefore(el, overlay);
            el.offsetHeight; /* force repaint */
            el.style.opacity = 1;
            if (cancelOnOutsideClick) {
              el.addEventListener('mousedown', this.__onBackdropMousedown);
            }
          }
        } else {
          if (overlay.__backdropEl) {
            overlay.__backdropEl.removeEventListener(
                'mousedown', this.__onBackdropMousedown);
            overlay.__backdropEl.remove();
            overlay.__backdropEl = null;
          }
        }
      }

      __onBackdropMousedown(evt) {
        const target = evt.composedPath()[0];
        const c$ = this.$.overlays.children;
        for (let i = c$.length - 1; i >= 0; i--) {
          if (c$[i] && c$[i].__backdropEl === target) {
            c$[i].opened = false;
          }
        }
      }

      __getLastOverlay() {
        const c$ = this.$.overlays.children;
        for (let i = c$.length - 1; i >= 0; i--) {
          if (c$[i].opened) {
            return c$[i];
          }
        }
      }

      __isOverlayOrDescendantFocused(overlay) {
        const activeElement = this.__getDeepActiveElement();
        if (activeElement) {
          let node = activeElement;
          while(node && node !== this) {
            if (node === overlay) {
              return true;
            }
            node = node.parentNode || node.host;
          }
        }
        return false;
      }

      __getDeepActiveElement() {
        var activeElement = document.activeElement;
        while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {
          activeElement = activeElement.shadowRoot.activeElement;
        }
        return activeElement;
      }

    }

    customElements.define(OverlayContainer.is, OverlayContainer);

  </script>
</dom-module>