<script>
  window.SkiaBehaviors = window.SkiaBehaviors || function() {
    var bh = {};
    bh.StatusPopup = {
      show: function() {
        // If we are on a small screen (e.g. mobile), make the popup
        // take up more space than on a desktop.
        if (document.documentElement.clientWidth < 600) {
          this.style["height"] = "70vh";
          this.style["width"] = "70vw";
          this.style["top"] = "15vh";
          this.style["left"] = "15vw";
        }
        // Stop propegation of any taps on the popup, so they don't make
        // it go away
        this.addEventListener("tap", function(e){
          e.stopPropagation();
        });
        // If the user taps anywhere else, remove the popup.
        document.body.addEventListener("tap", this.hide.bind(this));
        this.style["display"] = "block";
        if (this.showCallback) {
          this.showCallback();
        }
      },
      hide: function() {
        document.body.removeEventListener("tap", this.hide);
        this.style["display"] = "none";
        if (this.hideCallback) {
          this.hideCallback();
        }
      },
    };
    return bh;
  }();
</script>

<dom-module id="status-popup">
  <template>
  <style>
    :host {
      position: fixed;
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
                  0  8px 10px -5px rgba(0, 0, 0, 0.4);
      padding: 15px;
      border-radius: 10px;
      background-color: white;
      /* Default to desktop size of 40% of viewport */
      top: 30vh;
      left: 30vw;
      height: 40vh;
      width: 40vw;
      overflow: auto;
      z-index: 5;
    }
  </style>
  </template>
</dom-module>