hax-stax-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-stax-browser-item.html">

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

@demo demo/index.html

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

<dom-module id="hax-stax-browser">
  <template>
    <style>
      :host {
        display: block;
      }
      hax-stax-browser-item {
        margin: 10px;
      }
      @media screen and (max-width: 550px) {
        hax-stax-browser-item {
          margin: 6px;
        }
      }
      #ironlist {
        min-height: 50vh;
      }
    </style>
    <app-toolbar>
      <dropdown-select id="filtertype" label="Filter stax 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="[[__staxList]]" like=""  where="title" as="filtered">
      <template>
        <iron-list id="ironlist" items="[[filtered]]" as="stax" grid>
          <template>
            <div class="stax-container">
              <hax-stax-browser-item
                index="[[stax.index]]"
                title="[[stax.details.title]]"
                tag="[[stax.details.tag]]"
                image="[[stax.details.image]]"
                author="[[stax.details.author]]"
                teaser="[[stax.details.teaser]]"
                description="[[stax.details.description]]"
                examples="[[stax.details.examples]]"
                status="[[stax.details.status]]"
                stax="[[stax.stax]]"></hax-stax-browser-item>
            </div>
          </template>
        </iron-list>
      </template>
    </grafitto-filter>
  </template>
  <script>
    Polymer({

      is: 'hax-stax-browser',

      properties: {
        /**
         * Search term
         */
        search: {
          type: String,
        },
        /**
         * The list of stax
         */
        staxList: {
          type: Array,
          observer: '_staxListChanged',
        }
      },
      /**
       * 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);
        }
      },
      /**
       * Notice staxList changing.
       */
      _staxListChanged: function(newValue, oldValue) {
        if (typeof newValue !== typeof undefined) {
          this.set('__staxList', newValue);
        }
      },
      /**
       * Reset this browser.
       */
      resetBrowser: function() {
        this.$.filter.$$('#ironlist').fire('iron-resize');
        this.$.filter.$$('#ironlist').filtered = [];
        this.$.filter.$$('#ironlist').filtered = this.__staxList;
        this.$.inputfilter.value = '';
        this.$.filtertype.value = 'title';
        this.$.filter.value = '';
        this.$.filter.filter();
        this.$.filter.where = 'title';
        this.$.filter.like = '';
      },
    });
  </script>
</dom-module>