oo-hud.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="../iron-fit-behavior/iron-fit-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../paper-styles/paper-styles-classes.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">

<link rel="import" href="./oo-hud-loggers.html">

<dom-module id="oo-hud">
  <template>
    <style>
      :host {
        display: block;
        background: white;
        width: 80%;
        height: 33%;
        min-height: 400px;
        opacity: 0.67;
        transition: opacity ease-in 0.2s;
        @apply --shadow-elevation-4dp;
        overflow: hidden;
      }

      #content {
        padding: 0;
      }

      #pages {
        padding: 20px;
      }

      paper-tabs {
        margin: 0 -16px;
        --paper-tabs-selection-bar-color: var(--paper-light-blue-500);
        border-bottom: 1px solid var(--divider-color, #000);
      }

      paper-tab {
        --paper-tab-ink: var(--paper-light-blue-500);
        text-transform: uppercase;
      }

      paper-tab[disabled] {
        color: gray;
      }
    </style>

    <iron-a11y-keys
      target="[[keysTarget]]"
      keys="1"
      data-tab="0"
      on-keys-pressed="_keyToggleTab">
    </iron-a11y-keys>

    <iron-a11y-keys
      target="[[keysTarget]]"
      keys="2"
      data-tab="1"
      on-keys-pressed="_keyToggleTab">
    </iron-a11y-keys>

    <iron-a11y-keys
      target="[[keysTarget]]"
      keys="3"
      data-tab="2"
      on-keys-pressed="_keyToggleTab">
    </iron-a11y-keys>

    <iron-a11y-keys
      target="[[keysTarget]]"
      keys="4"
      data-tab="3"
      on-keys-pressed="_keyToggleTab">
    </iron-a11y-keys>

    <div id="content">
      <paper-tabs id="tabs" selected="{{selectedPage}}" fit-container>
        <paper-tab disabled>pages</paper-tab>
        <paper-tab>controllers</paper-tab>
        <paper-tab>loggers</paper-tab>
        <paper-tab disabled>workers</paper-tab>
      </paper-tabs>

      <iron-pages id="pages" selected="[[selectedPage]]">
        <div>pages</div>
        <div>controllers</div>
        <oo-hud-loggers></oo-hud-loggers>
        <div>workers</div>
      </iron-pages>
    </div>
  </template>

  <script>
    class OoHud extends Polymer.mixinBehaviors(
      [Polymer.IronOverlayBehavior], Polymer.Element) {

      static get is() {
        return "oo-hud"
      }

      static get properties() {
        return {
          selectedPage: {
            type: Number,
            value: () => 2
          },

          keysTarget: {
            type: Object,
            value: () => window
          }
        }
      }

      ready() {
        super.ready()
        this._log("ready")

        this.$.pages.addEventListener("iron-select", event => {
          const item = event.detail.item
          item.dispatchEvent(new CustomEvent("hud-item-enter"))
        })
      }

      connectedCallback() {
        super.connectedCallback()
        this._log("connected", this.__data)

        this._initKeys()
        this._positionPanel()
        this._overlayPanel()
      }

      _initKeys() {
        this.keysTarget = window
      }

      _positionPanel() {
        this.positionTarget = window
        this.verticalAlign = "bottom"
        this.horizontalAlign = "center"
        this.position()
      }

      _overlayPanel() {
        this.noCancelOnOutsideClick = true
        this.open()
      }

      _keyToggleTab(event) {
        const tab = parseInt(event.currentTarget.getAttribute("data-tab"))
        this._log("toggle tab:", tab)

        if (this.selectedPage !== tab || !this.opened) {
          this.$.tabs.select(tab)
          this.open()
        }
        else {
          this.close()
        }
      }

      _log(...messages) {
        console.log(`[${this.localName}]`, ...messages)
      }
    }

    window.customElements.define(OoHud.is, OoHud)
  </script>
</dom-module>