hax-blox-picker.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../app-layout/app-drawer/app-drawer.html">
<link rel="import" href="hax-blox-browser.html">
<link rel="import" href="../simple-colors/simple-colors.html">

<!--
 `hax-blox-picker`
 A picker for selecting an item from a list of apps / hax blox which require
 a decision to be made. This is used when multiple things match either on upload
 in the add operation of the app or in the blox selection to render through,
 such as having multiple ways of presenting an image.

@demo demo/index.html

@microcopy - the mental model for this element
 - data - this is the app data model for an element which expresses itself to hax
-->

<dom-module id="hax-blox-picker">
  <template>
    <style>
      :host {
        display: block;
      }
      #dialog {
        --app-drawer-width: 320px;
        z-index: 1000;
        margin-top: 64px;
        @apply --hax-blox-picker-dialog;
      }
      paper-icon-button#closedialog {
        float: right;
        top: 135px;
        right: 0;
        position: absolute;
        padding: 4px;
        margin: 0;
        color: var(--simple-colors-light-green-background1);
      }
      .title {
        margin-top: 32px;
        text-align: center;
        padding: 16px;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 32px;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
        color: var(--simple-colors-light-green-background1);
      }
      app-drawer {
        --app-drawer-content-container: {
          background-color: rgba(0, 0, 0, 0.7);
        };
        --app-drawer-width: 320px;
      }
      .pref-container {
        text-align: left;
        padding: 16px;
      }
    </style>
    <app-drawer id="dialog" align="left">
      <h3 class="title">[[title]]</h3>
      <div style="height: 100%; overflow: auto;" class="pref-container">
        <hax-blox-browser id="bloxbrowser"></hax-blox-browser>
      </div>
      <paper-icon-button id="closedialog" on-tap="close" icon="icons:cancel" title="Close dialog"></paper-icon-button>
    </app-drawer>
  </template>
  <script>
    Polymer({
      is: 'hax-blox-picker',
      behaviors: [
        simpleColorsBehaviors,
      ],
      properties: {
        /**
         * Header so it's variable
         */
        title: {
          type: String,
          value: 'Layouts',
        },
      },
      /**
       * Ready life cycle.
       */
      ready: function() {
        document.body.appendChild(this);
      },
      /**
       * Attached life cycle
       */
      attached: function() {
        this.fire('hax-register-blox-picker', this);
      },
      /**
       * open the dialog
       */
      open: function() {
        this.$.bloxbrowser.resetBrowser();
        this.$.dialog.open();
      },
      /**
       * close the dialog
       */
      close: function() {
        this.$.dialog.close();
      },
      /**
       * Toggle state.
       */
      toggleDialog: function() {
        if (this.$.dialog.opened) {
          this.close();
        }
        else {
          Polymer.HaxStore.instance.closeAllDrawers(this);
        }
      },
    });
  </script>
</dom-module>