hostabee-thumbnail-list.html

<!--
@license
Copyright (c) 2019 Hostabee SAS.
This program is available under Apache License Version 2.0.
-->

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="./hostabee-icons.html">

<dom-module id="hostabee-thumbnail-list">
  <template>
    <style>
      :host {
        border: 1px solid var(--divider-color, #dbdbdb);
        border-radius: 10px;
        background-color: var(--primary-background-color, #ffffff);
        @apply --layout-horizontal;
        @apply --layout-wrap;
      }

      :host([hidden]) {
        visibility: hidden;
        border: 0;
        width: 0;
      }

      :host([disabled]) {
        pointer-events: none;
        opacity: 0.4;
      }

      .flex {
        @apply --layout-flex;
      }

      .thumbnail {
        overflow: hidden;
      }

      .thumbnail__title {
        padding: 5px;
        font-weight: 500;
        background: white;
        border-bottom: 1px solid var(--divider-color, #dbdbdb);
        color: var(--secondary-text-color, #737373);
        @apply --layout-horizontal;
      }

      .thumbnail__title>span {
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .thumbnail__picture {
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--primary-background-color, #ffffff);
      }

      .thumbnail__button--remove {
        min-width: 24px;
        color: var(--secondary-text-color, #737373);
        cursor: pointer;
      }
    </style>

    <template is="dom-repeat" items="{{thumbs}}" as="thumb" on-rendered-item-count-changed="_renderedItemsChanged">
      <div class="thumbnail" on-click="_dispatchClickEvent">
        <div class="thumbnail__title">
          <span>[[thumb.name]]</span>
          <span class="flex"></span>
          <iron-icon id="remove-thumbnail-[[index]]" class="thumbnail__button--remove" icon="hostabee-icons:cancel" on-click="_removePicture" hidden$="[[!editable]]"></iron-icon>
        </div>
        <iron-image class="thumbnail__picture" src="[[thumb.url]]" alt="[[thumb.name]]" height="[[heightThumbnails]]px" sizing="cover" fade></iron-image>
      </div>
    </template>

  </template>

  <script>
    /**
     * `hostabee-thumbnail-list`
     * 
     * Displays pictures as thumbnails in a square container. Width of pictures
     * are automatically adjusted.
     *
     * @summary Displays pictures as thumbnails in a square container.
     * @customElement
     * @polymer
     * @extends {Polymer.Element}
     * @memberof Hostabee
     * @demo demo/hostabee-thumbnail-list/basic.html Basic
     */
    class HostabeeThumbnailList extends Polymer.Element {

      static get is() {
        return 'hostabee-thumbnail-list';
      }

      static get properties() {
        return {
          /**
           * Is editable. If true the pictures can be removed from the list.
           * 
           * @type {Boolean}
           * @default false
           */
          editable: {
            type: Boolean,
            value: false,
          },
          /**
           * List of file to load.
           * See: https://developer.mozilla.org/en-US/docs/Web/API/File
           * 
           * @type {Array<File>}
           * @default []
           */
          files: {
            type: Array,
            value: [],
            notify: true,
            observer: '_filesChanged'
          },
          /**
           * Limit of pictures in the list. Can't be set higher than 4.
           * 
           * @type {Number}
           * @default 4
           */
          limit: {
            type: Number,
            value: 4,
            observer: '_limitChanged'
          },
          /**
           * Height of thumbnails in pixels.
           * 
           * @type {Number}
           * @default 200
           */
          heightThumbnails: {
            type: Number,
            value: 200,
          },
          /**
           * Thumbnails name and data URL.
           * 
           * @type {Array}
           * @default []
           */
          thumbs: {
            type: Array,
            value: [],
            readOnly: true,
            notify: true,
          },
          /**
           * EXIF data orientation must be fixed or not. Is `True` if the device
           * loading the file is using a camera and if required libraries to
           * fix the orientation are available in the app using this element.
           *
           * @type {Boolean}
           */
          _mustFixPictureOrientation: {
            type: Boolean,
            value() {
              return window.orientation != undefined &&
                'loadImage' in window &&
                'EXIF' in window;
            },
          }
        };
      }

      /**
       * Array of strings describing multi-property observer methods and their
       * dependant properties
       */
      static get observers() {
        return [
          '_computeThumbnails(files.*)',
        ];
      }

      /**
       * Ensures list of file does not exceed defined limit.
       */
      _filesChanged(files) {
        if (!files) {
          this.set('files', []);
        } else if (files.length > this.limit) {
          this.set('files', files.slice(0, this.limit));
        }
      }

      /**
       * Dispatches event with the file clicked.
       */
      _dispatchClickEvent(event) {
        this.dispatchEvent(new CustomEvent('thumbnail-click', {
          bubbles: true,
          composed: true,
          detail: {
            index: event.model.index,
            file: event.model.file,
          },
        }));
      }

      /**
       * Resizes the pictures and changes corners rounded according to the number
       * of pictures displayed. Also updates the margin between each pictures.
       */
      _renderedItemsChanged(event) {
        let thumbnails = event.target.parentNode.querySelectorAll('.thumbnail');
        this.toggleAttribute('hidden', thumbnails.length == 0);
        let style;
        if (thumbnails.length == 1) {
          // Round corners
          style = thumbnails[0].style;
          style.setProperty('width', '100%');
          style.setProperty('margin', '0px');
          style.setProperty('border-radius', '9px');
        } else if (thumbnails.length == 2) {
          // Split width in half
          thumbnails.forEach((tn) => tn.style.setProperty('width', 'calc(50% - 5px)'));
          // Round top and bottom left corners
          style = thumbnails[0].style;
          style.setProperty('margin', '0px 5px 0px 0px');
          style.setProperty('border-radius', '9px 0px 0px 9px');
          // Round top and bottom right corners
          style = thumbnails[1].style;
          style.setProperty('margin', '0px 0px 0px 5px');
          style.setProperty('border-radius', '0px 9px 9px 0px');
        } else if (thumbnails.length == 3) {
          // Split width in half and round top left corner
          style = thumbnails[0].style;
          style.setProperty('width', 'calc(50% - 5px)');
          style.setProperty('margin', '0px 5px 5px 0px');
          style.setProperty('border-radius', '9px 0px 0px 0px');
          // Split width in half and round top right corner
          style = thumbnails[1].style;
          style.setProperty('width', 'calc(50% - 5px)');
          style.setProperty('margin', '0px 0px 5px 5px');
          style.setProperty('border-radius', '0px 9px 0px 0px');
          // Full width and round bottom right and left corners
          style = thumbnails[2].style;
          style.setProperty('width', '100%');
          style.setProperty('margin', '5px 0px 0px 0px');
          style.setProperty('border-radius', '0px 0px 9px 9px');
        } else if (thumbnails.length == 4) {
          // Split width in half
          thumbnails.forEach((tn) => tn.style.setProperty('width', 'calc(50% - 5px)'));
          // Round top left corner
          style = thumbnails[0].style;
          style.setProperty('margin', '0px 5px 5px 0px');
          style.setProperty('border-radius', '9px 0px 0px 0px');
          // Round top right corner
          style = thumbnails[1].style;
          style.setProperty('margin', '0px 0px 5px 5px');
          style.setProperty('border-radius', '0px 9px 0px 0px');
          // Round bottom left corner
          style = thumbnails[2].style;
          style.setProperty('margin', '5px 5px 0px 0px');
          style.setProperty('border-radius', '0px 0px 0px 9px');
          // Round bottom right corner
          style = thumbnails[3].style;
          style.setProperty('margin', '5px 0px 0px 5px');
          style.setProperty('border-radius', '0px 0px 9px 0px');
        }
      }

      /**
       * Ensures the limit max of displayed thumbnails is not higher than 4.
       * 
       * @param {Number} count The limit max of pictures to be displayed
       */
      _limitChanged(count) {
        if (count > 4) {
          this.limit = 4;
        }
      }

      /**
       * Removes a picture from the list. The picture which the cross icon was
       * clicked is removed.
       * 
       * @param {Event} event Click event.
       */
      _removePicture(event) {
        // Stop click event propagation on the thuhmbail
        event.stopPropagation();
        event.preventDefault();
        let index = event.target.id.split('remove-thumbnail-')[1];
        this.splice('files', index, 1);
      }

      /**
       * Computes list of thumbnails to be displayed from the provided files.
       */
      async _computeThumbnails(changeRecord) {
        // Stop if no change
        if (!changeRecord) {
          return;
        }

        // Remove thumbnail accroding to the file removed from the list
        if (changeRecord.path == 'files.splices') {
          changeRecord.value.indexSplices
            .forEach((s) => this.splice('thumbs', s.index, 1));
          return;
        }

        // Get new list of files to convert into thumbnails
        let files = [];
        if (changeRecord.path == 'files') {
          files = changeRecord.value.slice(0, this.limit);
        } else if (changeRecord.path == 'files.length') {
          files = changeRecord.base.slice(0, this.limit);
        }
        if (!this._checkIsTypeFile(files)) {
          return;
        }

        let thumbs = await this._filesToThumbnails(files);
        this._setThumbs(thumbs);
      }

      /**
       * Converts a File into a Thumbnail.
       *
       * @param {Array<File>} files The file list to be converted into thumbnails
       * @return {Array<Object>} list of thumbnails
       */
      async _filesToThumbnails(files) {
        try {
          if (!this._mustFixPictureOrientation) {
            return files.map((file) => Object.assign({}, {
              name: file.name,
              url: URL.createObjectURL(file)
            }));
          }
          let thumbs = await Promise.all(files.map((file) => this._fixOrientation(file)));
          return thumbs;
        } catch (error) {
          console.warn("Can't get URL. Provided files must be instances of File class.", error);
        }
      }

      /**
       * Checks if the given files are instacnes of class File.
       * 
       * @param {Array} files The files to check the type of.
       * @return {Boolean} True if all files are instances of File, false otherwise.
       */
      _checkIsTypeFile(files) {
        return files.reduce((valid, obj) => valid && obj.constructor.name == 'File', true);
      }

      /**
       * Ensures the orientation of the EXIF (Exchangeable image file format) is
       * properly defined on mobile device when the photo is took with a camera.
       *
       * For more information see this issue:
       * https://stackoverflow.com/questions/20600800
       *
       * @param {File} file The file to fix the orientation of.
       * @return {Promise<String>} a Promise which resolve the data URL of the
       * image after have fixed the orientation.
       */
      _fixOrientation(file) {
        return new Promise((resolve, reject) => {
          window.loadImage(file, async function(img) {
            if (img.type === 'error') {
              console.info('Could not fix image orientation.');
              resolve({
                name: file.name,
                url: URL.createObjectURL(file),
              });
            }
            // Fix image orientation
            await window.EXIF.getData(img, async function() {
              var orientation = EXIF.getTag(this, 'Orientation');
              var canvas = await window.loadImage.scale(img, {
                orientation: orientation || 0,
                canvas: true,
                noRevoke: true,
              });
              resolve({
                name: file.name,
                url: canvas.toDataURL(),
              });
            });
          }, {
            noRevoke: true,
          });
        });
      }

      /**
       * Dispatched when a thumbnail is clicked. The detail of the event
       * contains the `thumbnail` (a File) and its index in the list.
       * _(bubbles: true, composed: true)_
       * 
       * @event thumbnail-click
       */

    }

    window.customElements.define(HostabeeThumbnailList.is, HostabeeThumbnailList);
  </script>
</dom-module>