auto-paginated-image-gallery.html

<!--
Copyright 2017 Next Century Corporation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paginated-image-gallery/paginated-image-gallery.html">

<!--
A Polymer Element showing a paginated-image-gallery element that automatically handles pagination.

### Example
```html
<auto-paginated-image-gallery
  images="[[images]]">
</auto-paginated-image-gallery>
```

### Styling

`<auto-paginated-image-gallery>` provides the following custom properties and mixins for styling:

Custom property                                   | Description                                  | Default
--------------------------------------------------|----------------------------------------------|--------
`--auto-paginated-image-gallery-hovering-color`   | The background color of the hovering images. | none
`--auto-paginated-image-gallery-loading-spinner`  | Mixin applied to the loading-spinner.        | none
`--auto-paginated-image-gallery-max-height`       | Maximum height of the gallery.               | 160px
`--auto-paginated-image-gallery-scroll-threshold` | Mixin applied to the iron-scroll-threshold.  | none
`--auto-paginated-image-gallery-selected-color`   | The background color of the selected images. | none
`--auto-paginated-image-gallery-show-more-button` | Mixin applied to the show more button.       | none

@demo demo/index.html
-->

<dom-module id="auto-paginated-image-gallery">
  <template>
    <style>
      :host {
        display: block;
      }

      paginated-image-gallery {
        --paginated-image-gallery-hovering-color: var(--auto-paginated-image-gallery-hovering-color);
        --paginated-image-gallery-loading-spinner: var(--auto-paginated-image-gallery-loading-spinner);
        --paginated-image-gallery-scroll-threshold: var(--auto-paginated-image-gallery-scroll-threshold);
        --paginated-image-gallery-selected-color: var(--auto-paginated-image-gallery-selected-color);
        --paginated-image-gallery-show-more-button: var(--auto-paginated-image-gallery-show-more-button);
        /* By default, the height of 1 row of images. */
        --paginated-image-gallery-max-height: var(--auto-paginated-image-gallery-max-height, 160px);
      }
    </style>

    <paginated-image-gallery
      image-items="[[_pageImages]]"
      total-items="[[images.length]]"
      image-id-property="[[imageIdProperty]]"
      image-link-property="[[imageLinkProperty]]"
      image-name-property="[[imageNameProperty]]"
      image-source-property="[[imageSourceProperty]]"
      large-image-style-class="[[largeImageStyleClass]]"
      new-tab="[[newTab]]"
      page-size="[[pageSize]]"
      select-icon="[[selectIcon]]"
      select-word="[[selectWord]]"
      selected-property="[[selectedProperty]]"
      show-labels="[[showLabels]]"
      show-select="[[showSelect]]"
      show-select-preceding="[[showSelectPreceding]]"
      small-image-style-class="[[smallImageStyleClass]]"
      unselect="[[unselect]]"
      unselect-icon="[[unselectIcon]]"
      unselect-word="[[unselectWord]]"
      page="{{_page}}"
      hovering="{{hovering}}"
      selected="{{selected}}"
      shown-items="{{loadedImages}}">
    </paginated-image-gallery>
  </template>

  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'auto-paginated-image-gallery',

      properties: {
        /**
         * (Output)
         *
         * The list of image IDs targeted by a hover event.
         *
         * @type {Array}
         */
        hovering: {
          notify: true,
          type: Array
        },

        /**
         * (Required)
         *
         * The list of all images available across all pages in the gallery.
         *
         * @type {Array}
         */
        images: {
          type: Array
        },

        /**
         * (Optional)
         *
         * The property of the image objects for their unique IDs.
         *
         * @type {String}
         * @default 'id'
         */
        imageIdProperty: {
          type: String,
          value: 'id'
        },

        /**
         * (Optional)
         *
         * The property of the image objects for their link URL to open information within the application.
         *
         * @type {String}
         * @default 'link'
         */
        imageLinkProperty: {
          type: String,
          value: 'link'
        },

        /**
         * (Optional)
         *
         * The property of the image objects for their name.
         *
         * @type {String}
         * @default 'name'
         */
        imageNameProperty: {
          type: String,
          value: 'name'
        },

        /**
         * (Optional)
         *
         * The property of the image objects for their source URL.
         *
         * @type {String}
         * @default 'source'
         */
        imageSourceProperty: {
          type: String,
          value: 'source'
        },

        /**
         * (Optional)
         *
         * The style class for any image in a popup.
         *
         * @type {String}
         * @default ''
         */
        largeImageStyleClass: {
          type: String,
          value: ''
        },

        /**
         * (Output)
         *
         * The list of all the images loaded in the image gallery (shown on the current and prior pages).
         *
         * @type {Array}
         */
        loadedImages: {
          notify: true,
          type: Array
        },

        /**
         * (Optional)
         *
         * Whether to open a link in a new tab.
         *
         * @type {Boolean}
         * @default false
         */
        newTab: {
          type: Boolean,
          value: false
        },

        /**
         * (Optional)
         *
         * The page size.
         *
         * @type {Number}
         * @default 25
         */
        pageSize: {
          type: Number,
          value: 25
        },

        /**
         * (Optional|Output)
         *
         * The list of selected image IDs.  Either a list or an object containing a list at its `selectedProperty` property.
         *
         * @type {Array|Object}
         * @default []
         */
        selected: {
          notify: true,
          type: Array,
          value: function() {
            return [];
          }
        },

        /**
         * (Optional)
         *
         * The property in the `selected` object containing the list of selected string IDs.  If undefined, assumes that `selected` itself is a list.
         *
         * @type {String}
         */
        selectedProperty: {
          type: String
        },

        /**
         * (Optional)
         *
         * The icon for the "select" button if the image is unselected.
         *
         * @type {String}
         * @default 'done'
         */
        selectIcon: {
          type: String,
          value: 'done'
        },

        /**
         * (Optional)
         *
         * The word for the "select" button text if the image is unselected.
         *
         * @type {String}
         * @default 'Select'
         */
        selectWord: {
          type: String,
          value: 'Select'
        },

        /**
         * (Optional)
         *
         * Whether to show the labels for the images.
         *
         * @type {Boolean}
         * @default false
         */
        showLabels: {
          type: Boolean,
          value: false
        },

        /**
         * (Optional)
         *
         * Whether to show the "select" buttons.
         *
         * @type {Boolean}
         * @default false
         */
        showSelect: {
          type: Boolean,
          value: false
        },

        /**
         * (Optional)
         *
         * Whether to show the "select preceding" buttons.
         *
         * @type {Boolean}
         * @default false
         */
        showSelectPreceding: {
          type: Boolean,
          value: false
        },

        /**
         * (Optional)
         *
         * The style class for all the images in the gallery.
         *
         * @type {String}
         * @default ''
         */
        smallImageStyleClass: {
          type: String,
          value: ''
        },

        /**
         * (Optional)
         *
         * Whether clicking the "select" button for a selected image will unselect it.
         *
         * @type {Boolean}
         * @default false
         */
        unselect: {
          type: Boolean,
          value: false
        },

        /**
         * (Optional)
         *
         * The icon for the "select" button if the image is selected.
         *
         * @type {String}
         * @default 'done'
         */
        unselectIcon: {
          type: String,
          value: 'done'
        },

        /**
         * (Optional)
         *
         * The word for the "select" button text if the image is selected.
         *
         * @type {String}
         * @default 'Unselect'
         */
        unselectWord: {
          type: String,
          value: 'Unselect'
        },

        /**
         * The current page.
         *
         * @type {Number}
         * @default 1
         * @private
         */
        _page: {
          type: Number,
          value: 1
        },

        /**
         * The images to show on the current page in the image gallery.
         *
         * @type {Array}
         * @default []
         * @private
         */
        _pageImages: {
          type: Array,
          value: function() {
            return [];
          }
        }
      },

      observers: [
        '_updatePageImages(_page, pageSize)',
        '_updatePage(images)'
      ],

      /**
       * Updates the images to show on the current page based on the page and page size.
       *
       * @param {Number} pageSize
       * @param {Number} page
       * @private
       */
      _updatePageImages: function(page, pageSize) {
        var startIndex = pageSize * (page - 1);
        var images = this.images || [];
        this.set('_pageImages', images.slice(startIndex, startIndex + pageSize));
      },

      /**
       * Updates the page to show a new set of images.
       *
       * @private
       */
      _updatePage: function() {
        if(this._page === 1) {
          this._updatePageImages(this._page, this.pageSize);
        } else {
          this.set('_page', 1);
        }
      }
    });
  })();
  </script>
</dom-module>