hax-app-browser-item.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/editor-icons.html">
<link rel="import" href="../iron-icons/device-icons.html">
<link rel="import" href="../iron-icons/hardware-icons.html">
<link rel="import" href="../iron-icons/communication-icons.html">
<link rel="import" href="../iron-icons/social-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../iron-icons/maps-icons.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../materializecss-styles/colors.html">

<!--
`hax-app-browser-item`
A button on the hax-app-browser display

@demo demo/index.html

@microcopy - the mental model for this element
 - hax-app - data wiring for an app, this element uses the visual side of this
-->

<dom-module id="hax-app-browser-item">
  <template>
    <style include="materializecss-styles-colors">
      :host {
        display: inline-flex;
      }
      paper-card {
        margin: .25em 0;
      }
      paper-button {
        color: rgba(0,0,0,0.66);
        text-transform: none;
        margin:0;
        background-color: #ffffff;
        height: 6em;
        width : 6em;
        display: flex;
        border-radius: 3px;
        border-style: solid;
        border-width: 1px;
      }
      paper-button .item-title {
        font-size: .8em;
        margin-top: .2em;
      }
      paper-button .button-inner {
        padding-top: .5em;
        text-align: center;
      }
      paper-button iron-icon {
        height: 3em;
        width: 2.5em;
      }
      .flip-icon {
        transform: rotateY(180deg);
      }
    </style>
    <paper-card id="card" elevation="2">
      <paper-button id="button" data-voicecommand$="select [[title]]" class$="[[color]] lighten-5 [[color]]-border">
        <div class="button-inner">
          <iron-icon icon="[[icon]]" class$="[[color]]-text text-darken-3" hidden$="[[!icon]]"></iron-icon>
          <iron-image src="[[image]]" preload sizing="cover" hidden$="[[!image]]"></iron-image>
          <div class="item-title">[[title]]</div>
        </div>
      </paper-button>
    </paper-card>
    <paper-tooltip
      for="button"
      position="bottom"
      offset="14">
      [[teaser]]
    </paper-tooltip>
  </template>

  <script>
    Polymer({

      is: 'hax-app-browser-item',
      listeners: {
        'tap': '_fireEvent',
        'mousedown': 'tapEventOn',
        'mouseover': 'tapEventOn',
        'mouseout': 'tapEventOff',
        'button.focused-changed': 'focusToggle',
      },
      properties: {
        /**
         * Title
         */
        title: {
          type: String,
        },
        /**
         * Index position in the original list of imports
         */
        index: {
          type: Number,
        },
        /**
         * Icon for the button, optional.
         */
        icon: {
          type: String
        },
        /**
         * Image for the button, optional.
         */
        image: {
          type: String
        },
        /**
         * MaterializeCSS color name of the item
         */
        color: {
          type: String
        },
        /**
         * Author related to this app
         */
        author: {
          type: String
        },
        /**
         * Teaser / headline.
         */
        teaser: {
          type: String
        },
        /**
         * Description for this.
         */
        description: {
          type: String
        },
        /**
         * Examples, a list of image links, optional.
         */
        examples: {
          type: Array
        },
        /**
         * Status, whether disabled, enabled, or other future states.
         */
        status: {
          type: Array
        },
      },
      /**
       * special handling for taps on the thing
       */
      tapEventOn: function(e) {
        this.$.card.elevation = 2;
      },
      /**
       * Hover off stop showing the deeper shadow.
       */
      tapEventOff: function(e) {
        this.$.card.elevation = 1;
      },
      /**
       * Toggle through focus so keyboard gets same interactions.
       */
      focusToggle: function(e) {
        if (this.$.card.elevation == 2) {
          this.$.card.elevation = 1;
        }
        else {
          this.$.card.elevation = 2;
        }
      },
      /**
       * Fire an event that includes the eventName of what was just pressed.
       */
      _fireEvent: function(e) {
        this.fire('hax-app-selected', this.index);
      },
    });
  </script>
</dom-module>