touch-slider.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-image/iron-image.html">

<!--
`touch-slider` is a super simple draggable slider for touch devices.

The drag doesn't work with mouse events. IMO for desktop it's better to have some arrow handles instead.

A slide is a container where you can attach content. There is always three slides attached at the same time, so animations can occur.

Example:

    <touch-slider items="[[images]]"></touch-slider>

@demo demo/index.html
-->

<dom-module id="touch-slider">
  <template>
    <style>

      :host {
        display: block;
        overflow: hidden;
        position: relative;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        user-select: none;
      }

      #slides {
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
        bottom: 0;
        left: calc(-100% - 20px);
        overflow: hidden;
        position: absolute;
        top: 0;
        width: calc(300% + 40px);
        will-change: transform;
      }

      .slide {
        @apply(--layout-center-center);
        @apply(--layout-flex);
        @apply(--layout);
        height: 100%;
        pointer-events: none;
        position: relative;
      }

      .slide:first-child {
        margin-right: 20px;
      }

      .slide:last-child {
        margin-left: 20px;
      }

    </style>

    <div id="slides">
    </div>

  </template>
</dom-module>

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

  Polymer({

    is: 'touch-slider',

    properties: {

      items: {
        type: Array,
        observer: '_itemsChanged'
      },

      /**
       * Current visible slide index.
       */
      currentIndex: {
        type: Number,
        value: 0,
        notify: true,
        observer: '_currentIndexChanged'
      },

      /**
       * True if the user is dragging a slide.
       */
      dragging: {
        type: Boolean,
        value: false,
        readOnly: true,
        reflectToAttribute: true
      },

      /**
       * When true the slider is not draggable.
       */
      dragDisabled: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true
      },

      /**
       * When a drag ends and a new currentIndex is set, the container is transformed
       * to the new position with a smooth animation. When the animation finishes this value
       * is set to match the currentIndex and it's then when the dom elements are reattached
       * to match the current set of indexes.
       */
      _domCurrentIndex: {
        type: Number,
        observer: '_domCurrentIndexChanged'
      }

    },

    listeners: {
      'touchstart': '_onTouchStart',
      'touchmove': '_onTouchMove',
      'touchend': '_onTouchEnd'
    },

    attached: function() {
      this._currentIndexChanged(this.currentIndex);
    },

    _itemsChanged: function() {
      this.$.slides.innerHTML = '';
      this.currentIndex = 0;
      this._domCurrentIndexChanged(this.currentIndex);
    },

    _onTouchStart: function(event) {
      this._startX = event.touches[0].clientX;
    },

    _onTouchMove: function(event) {
      if (typeof this._startX === 'number' && !this.disabled) {
        var dx = event.touches[0].clientX - this._startX;

        if (this.dragging) {
          if (Math.abs(dx) <= this._rect.width) {
            requestAnimationFrame(function() {
              this.$.slides.style.transform = 'translate3d(' + dx + 'px, 0, 0)';
            }.bind(this));
          }

          this._dx = dx;
        } else {
          // Don't start dragging until the finger has moved a bit
          if (Math.abs(dx) > 4) {
            this._updateRect();
            this._startDraggingTime = new Date().getTime();
            this._setDragging(true);
          }
        }
      }
    },

    _onTouchEnd: function(event) {
      if (this.dragging) {
        event.stopPropagation();

        var currentTime = new Date().getTime();
        this._draggingDuration = currentTime - this._startDraggingTime;
        var newIndex = this.currentIndex;

        if (this._draggingDuration / Math.abs(this._dx) < 1.2) {
          newIndex = this._dx > 0 ? this.currentIndex - 1 : this.currentIndex + 1;
        }

        if (newIndex === this.currentIndex) {
          this._currentIndexChanged(newIndex, newIndex);
        } else {
          this.currentIndex = newIndex;
        }

        this._startX = null;
        this._dx = null;
        this._startDraggingTime = null;
        this._setDragging(false);
      }
   },

   /**
    * Animate the current slide to the new currentIndex.
    */
    _currentIndexChanged: function(currentIndex, old) {
      if (!this.isAttached || !this.items || !this.items.length) {
        return;
      }

      // Index should be between 0 and the max value
      this.currentIndex = Math.min(Math.max(0, currentIndex), Math.max(0, this.items.length - 1));

      if (this.currentIndex !== currentIndex) {
        return;
      }

      // Which direction the slides are moving to.
      var direction;
      if (currentIndex > old && old !== -1) {
        direction = 'right';
      } else if (currentIndex < old && old !== this.items.length) {
        direction = 'left';
      } else {
        direction = 'center';
      }

      if (this._animation) {
        this._animation.finish();
      }

      // Only animate on touch
      if (this.dragging) {
        this._updateRect();

        var isFastDrag = this._draggingDuration < 70;
        var translateX = 0;

        if (direction === 'left') {
          translateX = this._rect.width + 20;
        } else if (direction === 'right') {
          translateX = -this._rect.width -20;
        }

        this._animation = this.$.slides.animate([
          {transform: this.$.slides.style.transform},
          {transform: 'translate3d(' + translateX + 'px, 0, 0)'}
        ], {
          duration: isFastDrag < 70 ? 150 : 400,
          easing: isFastDrag < 70 ? 'cubic-bezier(0.39, 0.575, 0.565, 1)': 'cubic-bezier(0.215, 0.61, 0.355, 1)'
        });

        this._animation.onfinish = function() {
          this._domCurrentIndex = currentIndex;
          this.$.slides.style.transform = '';
          this._animation = null;
        }.bind(this);
      } else {
        // Dont animate for if triggered by mouse events
        this._domCurrentIndex = currentIndex;
      }
    },

    /**
     * Reattach the slides to match the current index set.
     *
     * @param {!Number} domCurrentIndex
     */
    _domCurrentIndexChanged: function(domCurrentIndex) {
      var currentIndexes = [];
      for (var i = domCurrentIndex - 1; i <= domCurrentIndex + 1; i++) {
        currentIndexes.push(i);
      }

      var slides = this.$.slides.children;
      var unchangedIndexes = [];

      // Remove unnecessary slides
      for (var i = slides.length - 1; i >= 0; i--) {
        var slide = slides[i];
        var slideIndex = Number(slide.dataset.index);

        if (currentIndexes.indexOf(slideIndex) < 0) {
          slide.remove();
        } else {
          unchangedIndexes.push(slideIndex);
        }
      }

      // Add slides
      for (var i = 0; i < 3; i++) {
        var index = currentIndexes[i];

        if (unchangedIndexes.indexOf(index) < 0) {
          this._renderSlide(currentIndexes[i], i);
        }
      }
    },

    /**
     * @param {!Number} index - The index of the slide.
     * @param {!Number} slideIndex - Represents the slide child index. It can be 0, 1 or 2.
     */
    _renderSlide: function(index, slideIndex) {
      var slide = this.create('div');

      slide.classList.add('slide');
      slide.setAttribute('data-index', index);

      if (index >= 0 && this.items &&  this.items[index]) {
        var ironImage = this.create('iron-image', {
          src: this.items[index],
          sizing: 'cover'
        });

        ironImage.style.height = '100%';
        ironImage.style.width = '100%';

        Polymer.dom(slide).appendChild(ironImage);
      }

      var slideInThatPosition = this.$.slides.children[slideIndex];

      if (slideIndex < 2 && slideInThatPosition) {
        Polymer.dom(this.$.slides).insertBefore(slide, slideInThatPosition);
      } else {
        Polymer.dom(this.$.slides).appendChild(slide);
      }
    },

    _updateRect: function() {
      this._rect = this.getBoundingClientRect();
    }

  });

}());
</script>