hax-gizmo-browser.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-list/iron-list.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../grafitto-filter/grafitto-filter.html">
<link rel="import" href="../dropdown-select/dropdown-select.html">
<link rel="import" href="hax-gizmo-browser-item.html">

<!--
`hax-gizmo-browser`
Browse a list of gizmos. This provides a listing of custom elements for people to search and select based on what have been defined as gizmos for users to select.

@demo demo/index.html

@microcopy - the mental model for this element
 - gizmo - silly name for the general public when talking about custom elements and what it provides in the end.
-->

<dom-module id="hax-gizmo-browser">
  <template>
    <style>
      :host {
        display: block;
      }
      hax-gizmo-browser-item {
        margin: 10px;
      }
      @media screen and (max-width: 550px) {
        hax-gizmo-browser-item {
          margin: 6px;
        }
      }
      #ironlist {
        min-height: 50vh;
      }
    </style>
    <app-toolbar>
      <dropdown-select id="filtertype" label="Filter gizmos by" value="title">
        <paper-item value="title">Title</paper-item>
        <paper-item value="status">Status</paper-item>
        <paper-item value="description">Description</paper-item>
      </dropdown-select>
      <paper-input label="Filter" id="inputfilter" aria-controls="filter" value="" always-float-label></paper-input>
    </app-toolbar>
    <grafitto-filter id="filter" items="[[__gizmoList]]" like=""  where="title" as="filtered">
      <template>
        <iron-list id="ironlist" items="[[filtered]]" as="gizmo" grid>
          <template>
            <div class="gizmo-container">
              <hax-gizmo-browser-item
                index="[[gizmo.index]]"
                title="[[gizmo.title]]"
                tag="[[gizmo.tag]]"
                icon="[[gizmo.icon]]"
                image="[[gizmo.image]]"
                color="[[gizmo.color]]"
                author="[[gizmo.author]]"
                teaser="[[gizmo.teaser]]"
                description="[[gizmo.description]]"
                examples="[[gizmo.examples]]"
                status="[[gizmo.status]]"></hax-gizmo-browser-item>
            </div>
          </template>
        </iron-list>
      </template>
    </grafitto-filter>
  </template>
  <script>
    Polymer({

      is: 'hax-gizmo-browser',

      properties: {
        /**
         * Search term
         */
        search: {
          type: String,
        },
      },
      /**
       * Attached
       */
      attached: function() {
        this.resetBrowser();
        this.$$('#inputfilter').addEventListener('value-changed', (e) => {
          this.$$('#filter').like = e.target.value;
        });
        this.$$('#filtertype').addEventListener('change', (e) => {
          this.$$('#inputfilter').value = '';
          this.$$('#filter').where = e.detail.value;
          this.$$('#filter').like = '';
        });
        document.body.addEventListener('hax-store-property-updated', this._haxStorePropertyUpdated.bind(this));
      },
      /**
       * Store updated, sync.
       */
      _haxStorePropertyUpdated: function(e) {
        if (e.detail && typeof e.detail.value !== typeof undefined && e.detail.property) {
          this.set(e.detail.property, e.detail.value);
        }
      },
      /**
       * Reset this browser.
       */
      resetBrowser: function() {
        this.set('__gizmoList', Polymer.HaxStore.instance.gizmoList);
        this.$.filter.$$('#ironlist').fire('iron-resize');
        this.$.filter.$$('#ironlist').filtered = this.__gizmoList;
        this.$.inputfilter.value = '';
        this.$.filtertype.value = 'title';
        this.$.filter.value = '';
        this.$.filter.filter();
        this.$.filter.where = 'title';
        this.$.filter.like = '';
      },
    });
  </script>
</dom-module>