sc-photoswipe.html

<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-swipeable-container/iron-swipeable-container.html">
<link rel="import" href="../iron-photo-viewer/iron-photo-viewer.html">
<link rel="import" href="icons.html">

<dom-module id="sc-photoswipe">
  <template>
    <style>
      .preview {
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
        @apply(--layout-start-justified);
        margin: 0 -5px;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      .preview > div, .preview ::content > div {
        position: relative;
        @apply(--layout);
        @apply(--layout-flex);
        -ms-flex: 1 1 125px;
        -webkit-flex-basis: 125px;
        flex-basis: 125px;
        margin: 5px;
        border: 1px dotted #eee;
        min-height: 100px;
        border-radius: 2px;
        @apply(--sc-photoswipe-preview-item);
        justify-content: center;
      }

      .preview > div:before, .preview ::content > div:before {
        @apply(--sc-photoswipe-preview-item-before);
      }

      .preview > div:after, .preview ::content > div:after {
        @apply(--sc-photoswipe-preview-item-after);
      }

      .preview > div > img, .preview ::content > div > img {
        width: 100%;
        background: white;
        @apply(--layout-self-center);

        @apply(--sc-photoswipe-preview-item-image);

        -webkit-transition: opacity 1s;
        transition: opacity 1s;
      }

      .preview > div > img.hidden, .preview ::content > div > img.hidden {
        opacity: 0;
        -webkit-transition: opacity 0s;
        transition: opacity 0s;
      }

      .preview > div > label, .preview ::content > div > label {
        @apply(--layout-fit);

        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;

        @apply(--layout);
        @apply(--layout-center-center);

        z-index: 1;
        visibility: hidden;
        text-align: center;
        color: var(--secondary-text-color);

        @apply(--sc-photoswipe-preview-item-label);
      }
      .preview > div > label > span {
        padding: 5px;
        border-radius: 2px;
        word-wrap: break-word;
        display: inline-block;
        max-width: 100%;
      }
      .preview > div > iron-icon {
        position: absolute;
        width: 75%;
        height: 75%;
        top: 12.5%;
        left: 12.5%;
        opacity: 0.2;
        color: var(--primary-color);
        z-index: -1;

        @apply(--sc-photoswipe-preview-item-icon);
      }
      .preview > div:hover > label {
        visibility: visible;
      }
      .preview > div:hover > label > span {
        background-color: rgba(255, 255, 255, 0.9);
      }
    </style>

    <iron-swipeable-container id="swipeable" class="preview" swipe-style="curved" disabled="[[!editable]]">
      <content></content>
      <template is="dom-repeat" items="[[items]]">
        <div data-index$="[[index]]" data-rindex$="[[rindex(items, index)]]" on-tap="popup">
          <iron-icon icon="[[icon(item)]]"></iron-icon>
          <label>
            <span>[[item.name]]</span>
          </label>
          <img src$="[[display(item)]]" alt class$="[[className(item)]]" on-load="imageLoaded" crossOrigin="true">
          <img src$="[[thumbnail(item)]]" alt on-load="imageLoaded" crossOrigin="true" hidden>
        </div>
      </template>
    </iron-swipeable-container>

    <iron-photo-viewer id="viewer" editable="[[editable]]"></iron-photo-viewer>

  </template>
</dom-module>

<script>
(function () {

  var cache = {};

  window.Polymer({
    is: 'sc-photoswipe',

    properties: {
      items: {
        type: Array,
        value: []
      },
      editable: {
        type: Boolean,
        value: false
      },
      showLocalIndex: {
        type: Boolean,
        value: true
      },
      options: {
        type: Object,
        value: {
          captionEl: false,
          fullscreenEl: true,
          zoomEl: true,
          shareEl: false,
          history: false
        }
      }
    },

    observers: [
      'initialize(items.splices)'
    ],

    attached: function () {
      this.$.swipeable._onTransitionEnd = function (e) {
        var root = Polymer.dom(e).rootTarget;
        var index = root.getAttribute('data-index');

        if (!this._swipeComplete || e.propertyName !== 'opacity' || index === null) {
          return;
        }

        this.fire('remove', {
          index: parseInt(index, 10)
        });
      };
    },

    initialize: function () {
      if (!this.items) {
        return;
      }

      var todo = this.items.length;
      var done = -1;
      var end = function () {
        done += 1;

        if (done >= todo) {
          this.fire('initialized');
        }
      }.bind(this);

      this.items.forEach(function (item) {
        item.src = item.src || item.url;

        if (!item.src) {
          return;
        }

        item._id = item._id || 10000 + Math.floor(Math.random() * 89999);
        if (cache[item._id]) {
          item.w = cache[item._id].w;
          item.h = cache[item._id].h;
          item.loaded = true;
          return;
        }

        var img = new Image();

        img.style.visibility = 'hidden';
        img.style.position = 'absolute';

        img.crossOrigin = 'Anonymous';

        img.onload = function () {
          var rect = this.getBoundingClientRect();
          item.w = rect && rect.width * 10 || 100;
          item.h = rect && rect.height * 10 || 100;
          item.loaded = true;
          cache[item._id] = item;
          document.body.removeChild(img);

          end();
        };

        img.onerror = function () {
          end();
        };

        document.body.appendChild(img);
        img.src = item.src;
      });

      end();
    },

    popup: function (e) {
      var target;
      var index = 0;

      if (e && e.preventDefault) {
        target = Polymer.dom(e).rootTarget;
        while (target && target.tagName !== 'DIV') {
          target = target.parentNode;
        }

        e.preventDefault();
        e.cancelBubble = true;
      }

      if (!this.items || !this.items.length) {
        return;
      }

      if (typeof e === 'number') {
        index = e;
      }
      else if (target) {
        index = parseInt(target.getAttribute('data-index'), 10) || 0;
      }

      var item = this.items[index];

      if (!item) {
        return;
      }

      var items = this.items.filter(function (item) {
        return /image|jpg|jpeg|png/i.test(item.type);
      });

      index = items.indexOf(item);

      if (!items.length || index < 0) {
        if (window.viewLink) {
          return window.viewLink(item.src, { filename: item.name });
        }

        return window.open(item.src);
      }

      items = items.map(function (item) {
        return item.src;
      });

      this.$.viewer.view(items, index);
    },

    thumbnail: function (item) {
      return item.thumbnail || item.thumbnail_url || item.src || this.dummy;
    },

    display: function (item) {
      if (/image/i.test(item.type)) {
        return item.src || this.dummy;
      }

      return this.thumbnail(item);
    },

    icon: function (item) {
      if (/pdf/i.test(item && item.type)) {
        return 'sc-photoswipe:picture-as-pdf';
      }
      else if (/video/i.test(item && item.type)) {
        return 'sc-photoswipe:movie-creation';
      }
      else if (/image/i.test(item && item.type)) {
        return 'sc-photoswipe:photo';
      }
      else if (/audio/i.test(item && item.type)) {
        return 'sc-photoswipe:audiotrack';
      }

      return 'sc-photoswipe:insert-drive-file';
    },

    rindex: function (items, index) {
      if (this.showLocalIndex) {
        return items.length - index;
      }
      return (items[index] || {}).global_index || 0;
    },

    className: function (item) {
      return item.loaded ? '' : 'hidden';
    },

    imageLoaded: function (e) {
      var root = Polymer.dom(e).rootTarget;
      root.parentNode.removeAttribute('style');
      root.classList.remove('hidden');

      this.fire('load', { img: root, url: root.src }, { bubbles: false });
    }
  });

})();
</script>