item.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../elliptical-polymer-behaviors/component-behavior.html">

<script>
  Polymer({
    is: 'shopping-item',
    behaviors: [Elliptical.ComponentBehavior],
    properties: {
      _image: {
        value: null
      },
      images: {
        type: String,
        value: null
      },
      notifyService: {
        type: String,
        value: null
      },
      maxPollingIntervals: {
        type: Number,
        value: 20
      },
      pollingInterval: {
        type: Number,
        value: 300
      },
      carouselId: {
        type: String,
        value: null
      },
      _notifyService: {
        type: Object,
        value: null
      },
      _images: {
        type: Array,
        value: null
      },
      _loadedImages: {
        type: Array,
        value: null
      },
      _altImages:{
        type:Array,
        value:null
      },
      _video:{
        value:null
      },
      _videoSource:{
        value:null
      },
      _videoContainer:{
        value:null
      },
      _zoom:{
        value:null
      }
    },

    ready: function () {
      this._setNotifyService();
      this._setImages();
      this._setCarousel();
      this._events();
    },

    _events: function () {
      var click = this._data.click;
      this._event(this.element, click, 'alt-image', this._onSelectAltImage.bind(this));
      this._event(this.element, 'ui-carousel-slide', this._onAltImageChange.bind(this));
      this._event(this.element, 'image-zoom-in', this._onZoomIn.bind(this));
      this._event(this.element, 'image-zoom-out', this._onZoomOut.bind(this));
    },

    _onSelectAltImage: function (event) {
      var target = $(event.currentTarget);
      var video=target.attr('data-video');
      if(video==='true'){
        this._onSelectAltImageVideo(target);
        return;
      }
      var src = target.attr('data-src');
      var zoomSrc = target.attr('data-zoom-src');
      var image = this._getImage();
      var video=this._getVideo();
      if(video[0]){
        video.addClass('hide');
        var videoContainer=this._getVideoContainer();
        videoContainer.addClass('hide');
      }
      var zoom=this._getZoom();
      if(zoom[0]) zoom.removeClass('hide');
      image.attr('src', src);
      image.attr('zoom-src', zoomSrc);
      this._fireEvent('selected', {
        src: src,
        zoomSrc: zoomSrc
      });
      this._clearActive();
      target.addClass('active');
      if (this.carouselId && this._isTouchDevice()) this._slideCarousel(target[0]);
      if (this.debugService) this._debug();
    },

    _onSelectAltImageVideo: function (target) {
      var src = target.attr('data-src');
      var zoomSrc = target.attr('data-zoom-src');
      this._clearActive();
      target.addClass('active');
      if (this.carouselId && this._isTouchDevice()) this._slideCarousel(target[0]);
      else{
        var video = this._getVideo();
        var zoom=this._getZoom();
        if(zoom[0]) zoom.addClass('hide');
        video.removeClass('hide');
        var videoContainer=this._getVideoContainer();
        videoContainer.removeClass('hide');
        var player=video[0];
        var videoSource=this._videoSource;
        if(videoSource && videoSource[0]){
           videoSource[0].src = src;
           player.load();
        }
      }
    },

    _onAltImageChange: function (event) {
      var detail = event.detail;
      var index = detail.slideIndex;
      var image = this.element.find('alt-image')[index];
      this._clearActive();
      image.classList.add('active');
    },

    _onZoomIn:function(){
      if(this._carousel.suspend) this._carousel.suspend();
    },

    _onZoomOut:function(){
      if(this._carousel.resume) this._carousel.resume();
    },

    _getImage: function () {
      if (!this._image) this._image = this.element.find('.main-image').find('[data-image]');
      return this._image;
    },

    _getZoom: function () {
      if (!this._zoom) this._zoom = this.element.find('.main-image');
      return this._zoom;
    },

    _getVideoContainer: function () {
      if (!this._videoContainer) this._videoContainer = this.element.find('.main-video-container');
      return this._videoContainer;
    },

    _getVideo: function () {
      if (!this._video) {
        this._video = this.element.find('[data-id="main-video"]');
        this._videoSource = this.element.find('[data-id="main-video-source"]');
      }
      return this._video;
    },

    _clearActive: function () {
      this.element.find('alt-image').removeClass('active');
    },

    _setImages: function () {
      if (this.images && this.images !== '') {
        this._images = JSON.parse(this.images);
        this._preloadItemImages();
      }
    },

    _getAltImagesLength:function(){
      if(!this._altImages) this._altImages=this.element.find('alt-image');
      return this._altImages.length;
    },

    _setNotifyService: function () {
      if (this.notifyService) {
        this._notifyService = this.$service(this.notifyService);
      }
    },

    _preloadItemImages: function () {
      var images = this._images;
      this._loadedImages = [];
      var loadedImages = this._loadedImages;
      images.forEach(function (src) {
        var image = new Image();
        image.src = src;
        $(image).bind('load', function (event) {
          loadedImages.push(image);
        });
      });
    },

    _getLoadedImage: function (src) {
      var loadedImages = this._loadedImages;
      if (loadedImages) {
        var loadedImage = null;
        for (var i = 0; i < loadedImages.length; i++) {
          var image = loadedImages[i];
          if (image.src.toLowerCase() === src.toLowerCase()) {
            image.setAttribute('zoom-image', '');
            image.setAttribute('data-image', '');
            loadedImage = image;
            break;
          }
        }
        return loadedImage;
      } else return null;
    },

    _setLoadedImage: function (img) {
      var image = this._getImage();
      image.replaceWith(img);
      this._image = $(img);
    },

    _showNotification: function () {
      var notify = this._notifyService;
      if (notify) {
        notify.show('loading image', {
          duration: 30000
        });
      }
    },

    _hideNotification: function () {
      var notify = this._notifyService;
      if (notify) {
        notify.hide();
      }
    },

    _pollLoadedImage: function (src) {
      var self = this;
      var delay = this.pollingInterval;
      var MAX = this.maxPollingIntervals;
      var count = 0;
      var intervalId = setInterval(function () {
        var image = self._getLoadedImage(src);
        if (image) {
          self._setLoadedImage(image);
          self._hideNotification();
          clearInterval(intervalId);
        } else {
          count++;
          if (count > MAX) {
            self._hideNotification();
            clearInterval(intervalId);
          }
        }
      }, delay);
    },

    _setCarousel: function () {
      if (this.carouselId) {
        this._carousel = document.querySelector('#' + this.carouselId);
      }
    },

    _slideCarousel: function (element) {
      var length=this._getAltImagesLength();
      var images=this._altImages;
      var index=images.index(element);
      var carousel=this._carousel;
      if(index===0) carousel.slideFirst();
      else if(index===length-1) carousel.slideLast();
      else carousel.slide(index);
    },

    _fireEvent: function (evt, data) {
      this.fire('item-image-' + evt, data);
    },

    setImage: function (src) {
      var image = this._getImage();
      image.attr('src', src);
      if (this.debugService) this._debug();
    },

    setPreloadedImage: function (src) {
      if (!this._images) return;
      var image = this._getLoadedImage(src);
      if (!image) {
        this._showNotification();
        this._pollLoadedImage(src);
      }
      else this._setLoadedImage(image);
    }

  });

</script>