annsonn/fancy-carousel

<link rel="import" href="fancy-carousel-animations.html">
<script src="image-search.js"></script>

<script>
  FancyCarouselBehaviour = (base) => class extends FancyCarouselAnimations(base) {

    _loadCustomImages(searchTerm) {
        var that = this;
        var imgUrls;
        findImages(searchTerm, this.searchEngineCx, this.apiKey, function(urls) {
            if (!urls) {
            console.log('Error loading images');
            return;
            }
            imgUrls = urls;
            console.log(imgUrls);
            that._addImageNodes(imgUrls);
        });
    }

    _addImageNodes(imgUrls) {
        var numUrls = imgUrls.length;
        for (var i=0; i<numUrls; i++) {
            if (!imgUrls[i]) {
                continue;
            }
            var newImage = document.createElement('img');
            newImage.setAttribute('src', imgUrls[i]);
            newImage.style.width = '100%';
            newImage.style.height = '100%';
            Polymer.dom(this).appendChild(newImage);
        }
    }

    _getNextElement() {
        var elem = this.selected.nextElementSibling;
        while (elem && elem.getAttribute("class") === "dummy") {
            elem = elem.nextElementSibling;
        }
        if (!elem) {
            elem = Polymer.dom(this).querySelectorAll('img')[0];
        }
        return elem;
    }

      _timerChanged(newValue, oldValue) {
        var that = this;
        if (newValue != 0) {
          setInterval(function() {
            that.next();
          }, newValue*1000);
        }
      }

      _selectedChanged(selected, oldSelected) {
        if (oldSelected) {
          oldSelected.removeAttribute('selected');
        }
        if (selected) {
          selected.setAttribute('selected', '');
          this.$.prevBtn.disabled = !selected.previousElementSibling;
          this.$.nextBtn.disabled = !selected.nextElementSibling;

          this._loadImage(selected);
          this._loadImage(selected.previousElementSibling);
          this._loadImage(selected.nextElementSibling);
        }
      }

      _loadImage(img) {
        if (img && !img.src) {
          img.src = img.getAttribute('data-src');
        }
      }
  }
</script>