nuxeo-grid.html

<dom-module id="nuxeo-grid">
  <template>
    <style>

      :host {
        display: block;
        @apply(--paper-font-common-base);
      }

      iron-list {
        margin-top: 90px;
        padding-bottom: 16px;
      }

      .photoContent {
        @apply(--layout);
        background-color: #ddd;
        position: relative;
        width: 300px;
        height: 300px;
        margin: 8px;
      }

      .photoContent:hover .detail{
        opacity: 1;
      }

      .photoContent > iron-image {
        @apply(--layout-flex);
      }

      .photoContent > .detail {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
        color: white;
        font-size: 20px;
        font-weight: 100;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.1s;
      }

      .searchInput {
        @apply(--layout-flex);
        font-size: 18px;
        padding: 10px 20px;
        border: none;
        background-color: rgba(255, 255, 255, 0.2);
        -webkit-appearance: none;
        border-radius: 0px;
      }

      .searchInput:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }

      .searchInput:focus {
        background-color: white;
        outline: none;
        color: black;
      }

      .loadingIndicator {
        font-size: 16px;
        text-align: center;
        height: 60px;
      }

      .loadingIndicator paper-spinner {
        margin-right: 20px;
        vertical-align: middle;
      }

      @media (max-width: 800px) {
        .photoContainer {
          width: calc(50% - 16px);
        }

        .photoContent {
          width: auto;
        }
      }

      @media (max-width: 400px) {
        iron-list {
          margin-top: 72px;
        }

        .photoContainer {
          width: 100%;
        }

        .photoContent > .detail {
          opacity: 1;
        }
      }

      ::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      ::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      :-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      ::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

    </style>

    <nuxeo-page-provider id="provider" loading="{{loadingPhotos}}"
     provider="default_search"
     page-size="[[perPage]]"
     enrichers="thumbnail"
     params="[[params]]"
     schemas="*"
     headers='{"X-NXfetch.document": "properties", "X-NXtranslate.directoryEntry": "label"}'>
  </nuxeo-page-provider>

    <nuxeo-page class="main">

    <div class="header">
      <paper-toolbar>
        <input class="searchInput" type="search" placeholder="Search on Flikr" value="{{searchText::input}}">
      </paper-toolbar>
    </div>

    <div class="content">

      <iron-list items="[[photos]]" as="photo" scroll-target="document" grid>
        <template>
          <div class="photoContainer">
            <div class="photoContent" tabindex$="[[tabIndex]]">
              <iron-image sizing="cover"
                  src="[[photo.contextParameters.thumbnail.url]]">
              </iron-image>
              <div class="detail">
                [[photo.title]]
              </div>
            </div>
          </div>
        </template>
      </iron-list>

      <div class="loadingIndicator" hidden$="[[!loadingPhotos]]">
        <paper-spinner active$="[[loadingPhotos]]"></paper-spinner> Fetching photos for <b>[[searchText]]</b>
      </div>

      <!-- this element loads more photos when the user scrolls down and reached the lower threshold -->
      <iron-scroll-threshold id="scrollTheshold"
        lower-threshold="500"
        on-lower-threshold="_onLowerThreshold"
        scroll-target="document">
      </iron-scroll-threshold>

    </div>
    </nuxeo-page>

  </template>
  <script>
  Polymer({

      is: 'nuxeo-grid',

      properties: {

        apiKey: {
          type: String,
          value: 'c304f1096a06486d3c1e7ab271bf7f3f'
        },

        photos: Array,

        perPage: {
          type: Number,
          value: 100
        },

        page: {
          type: Number,
          value: 0
        },

        searchText: {
          type: String,
          value: 'picture'
        },

        loadingPhotos: Boolean
      },

      observers: [
        '_resetPhotos(searchText)'
      ],

      _onLowerThreshold: function() {
        this.debounce('_loadPhotos', this._loadMorePhotos, 60);
      },

      _loadMorePhotos: function() {
        this.$.provider.fetch().then(function(response) {
          response.entries.forEach(function(entry) {
            this.push('photos', entry);
          }.bind(this));
          this.$.scrollTheshold.clearTriggers();
        }.bind(this));
        this.page++;
      },

      _resetPhotos: function(searchText) {
        this.page = 0;
        this.photos = [];
        this.params = {ecm_fulltext: searchText + '*'};

        if (searchText.trim() !== '') {
          this.debounce('_loadPhotos', this._loadMorePhotos, 400);
        }
      }

    });
  </script>
</dom-module>

<nuxeo-slot-content slot="PAGES">
  <template>
    <nuxeo-grid name="cool"></nuxeo-grid>
  </template>
</nuxeo-slot-content>