basic-swipe-direction.html

<!--
Aspect which translates touch gestures (swipe left, swipe right) to direction
semantics (goRight, goLeft).

@element basic-swipe-direction
-->

<link rel="import" href="../basic-aspect/basic-aspect.html">

<script>
Polymer({

  behaviors: [Basic.Aspect],

  contribute: {

    collectiveChanged: function() {
      this.collective.position = 0;
    },

    // Default implementations. These will typically be handled by other aspects
    // in the collective.
    goLeft: Basic.Collective.defaultMethod,
    goRight: Basic.Collective.defaultMethod,

    /**
     * The distance the user has moved the first touchpoint since the beginning
     * of a drag, expressed as a fraction of the element's width.
     *
     * @property position
     * @type Number
     */
    get position() {
      return this._position;
    },

    set position(value) {
      this._position = value;
    },

    // Default implementation. This will typically be handled by other aspects
    // in the collective.
    showTransition: Basic.Collective.defaultMethod,

    touchStart: function(event) {
      this.collective.showTransition(false);
      var x = event.changedTouches[0].clientX;
      var y = event.changedTouches[0].clientY;
      this._startX = x;
      this._previousX = x;
      this._previousY = y;
      this._deltaX = 0;
      this._deltaY = 0;
    },

    touchMove: function(event) {
      var x = event.changedTouches[0].clientX;
      var y = event.changedTouches[0].clientY;
      this._deltaX = x - this._previousX;
      this._deltaY = y - this._previousY;
      this._previousX = x;
      this._previousY = y;
      if (Math.abs(this._deltaX) > Math.abs(this._deltaY)) {
        // Move was mostly horizontal.
        this._trackTo(x);
        // Indicate that the event was handled. It'd be nicer if we didn't have
        // to do this so that, e.g., a user could be swiping left and right
        // while simultaneously scrolling up and down. (Native touch apps can do
        // that.) However, Mobile Safari wants to handle swipe events near the
        // page and interpret them as navigations. To avoid having a horiziontal
        // swipe misintepreted as a navigation, we indicate that we've handled
        // the event, and prevent default behavior.
        return true;
      } else {
        // Move was mostly vertical.
        return false; // Not handled
      }
    },

    touchEnd: function(event) {
      this.collective.showTransition(true);
      var x = event.changedTouches[0].clientX;
      if (this._deltaX >= 20) {
        // Finished going right at high speed.
        // console.log("flick right " + this._deltaX);
        this.collective.goLeft();
      } else if (this._deltaX <= -20) {
        // Finished going left at high speed.
        // console.log("flick left " + this.collective._deltaX);
        this.collective.goRight();
      } else {
        // Finished at low speed.
        // console.log("slow drag " + this._deltaX);
        this._trackTo(x);
        var position = this.collective.position;
        if (position >= 0.5) {
          this.collective.goRight();
        } else if (position <= -0.5) {
          this.collective.goLeft();
        }
      }
      this.collective.position = 0;
      this._deltaX = null;
      this._deltaY = null;
    },

  },

  is: 'basic-swipe-direction',

  get position() {
    return this.collective.position;
  },

  set position(position) {
    this.collective.position = position;
  },

  ready: function() {
    // TODO: touch events could be factored out into their own aspect.

    // In all touch events, only handle single touches. We don't want to
    // inadvertently do work when the user's trying to pinch-zoom for example.
    // TODO: Even better approach than below would be to ignore touches after
    // the first if the user has already begun a swipe.
    this.addEventListener('touchstart', function(event) {
      if (this._multiTouch) {
        return;
      } else if (event.touches.length === 1) {
        this.collective.touchStart(event);
      } else {
        this._multiTouch = true;
      }
    }.bind(this));
    this.addEventListener('touchmove', function(event) {
      if (!this._multiTouch && event.touches.length === 1) {
        var handled = this.collective.touchMove(event);
        if (handled) {
          event.preventDefault();
        }
      }
    }.bind(this));
    this.addEventListener('touchend', function(event) {
      if (event.touches.length === 0) {
        // All touches removed; gesture is complete.
        if (!this._multiTouch) {
          // Single-touch swipe has finished.
          this.collective.touchEnd(event);
        }
        this._multiTouch = false;
      }
    }.bind(this));
  },

  _trackTo: function(x) {
    var width = this.offsetWidth;
    var dragDistance = this._startX - x;
    var fraction = width > 0 ?
      dragDistance / width :
      0;
    this.collective.position = fraction;
  },

  _multiTouch: false

});
</script>