polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.js

/**
 * @license
 * Copyright (C) 2016 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
(function() {
  'use strict';

  const AWAIT_MAX_ITERS = 10;
  const AWAIT_STEP = 5;
  const BREAKPOINT_FULLSCREEN_OVERLAY = '50em';

  /**
    * @appliesMixin Gerrit.FireMixin
    */
  class GrOverlay extends Polymer.mixinBehaviors( [
    Gerrit.FireBehavior,
    Polymer.IronOverlayBehavior,
  ], Polymer.GestureEventListeners(
      Polymer.LegacyElementMixin(
          Polymer.Element))) {
    static get is() { return 'gr-overlay'; }
    /**
     * Fired when a fullscreen overlay is closed
     *
     * @event fullscreen-overlay-closed
     */

    /**
     * Fired when an overlay is opened in full screen mode
     *
     * @event fullscreen-overlay-opened
     */

    static get properties() {
      return {
        _fullScreenOpen: {
          type: Boolean,
          value: false,
        },
      };
    }

    created() {
      super.created();
      this.addEventListener('iron-overlay-closed',
          () => this._close());
      this.addEventListener('iron-overlay-cancelled',
          () => this._close());
    }

    open(...args) {
      return new Promise(resolve => {
        Polymer.IronOverlayBehaviorImpl.open.apply(this, args);
        if (this._isMobile()) {
          this.fire('fullscreen-overlay-opened');
          this._fullScreenOpen = true;
        }
        this._awaitOpen(resolve);
      });
    }

    _isMobile() {
      return window.matchMedia(`(max-width: ${BREAKPOINT_FULLSCREEN_OVERLAY})`);
    }

    _close() {
      if (this._fullScreenOpen) {
        this.fire('fullscreen-overlay-closed');
        this._fullScreenOpen = false;
      }
    }

    /**
     * Override the focus stops that iron-overlay-behavior tries to find.
     */
    setFocusStops(stops) {
      this.__firstFocusableNode = stops.start;
      this.__lastFocusableNode = stops.end;
    }

    /**
     * NOTE: (wyatta) Slightly hacky way to listen to the overlay actually
     * opening. Eventually replace with a direct way to listen to the overlay.
     */
    _awaitOpen(fn) {
      let iters = 0;
      const step = () => {
        this.async(() => {
          if (this.style.display !== 'none') {
            fn.call(this);
          } else if (iters++ < AWAIT_MAX_ITERS) {
            step.call(this);
          }
        }, AWAIT_STEP);
      };
      step.call(this);
    }

    _id() {
      return this.getAttribute('id') || 'global';
    }
  }

  customElements.define(GrOverlay.is, GrOverlay);
})();