fix(ripple): removing ripples on touchmove

When touching a button in order to scroll, the button creates a ripple as its being pressed, now when the touch moved we assume that this gesture is a scroll so we remove all the ripple effects

fixes #5261. closes #5532.

src/core/services/ripple/ripple.js

@@ -135,8 +135,8 @@ InkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {
  */
 InkRippleCtrl.prototype.bindEvents = function () {
   this.$element.on('mousedown', angular.bind(this, this.handleMousedown));
-  this.$element.on('mouseup', angular.bind(this, this.handleMouseup));
-  this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));
+  this.$element.on('mouseup touchend mouseleave', angular.bind(this, this.handleMouseup));
+  this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));
 };
 
 /**
@@ -162,18 +162,46 @@ InkRippleCtrl.prototype.handleMousedown = function (event) {
  * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
  * mouseup or mouseleave event)
  */
-InkRippleCtrl.prototype.handleMouseup = function () {
+InkRippleCtrl.prototype._handleRemoval = function (cb) {
   if ( this.mousedown || this.lastRipple ) {
-    var ctrl       = this;
     this.mousedown = false;
     this.$mdUtil.nextTick(function () {
-      ctrl.clearRipples();
+      cb();
     }, false);
   }
 };
 
+/**
+ * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
+ * mouseup, touchend or mouseleave event)
+ */
+InkRippleCtrl.prototype.handleMouseup = function () {
+  var ctrl = this;
+
+  ctrl._handleRemoval(angular.bind(ctrl, ctrl.clearRipples));
+};
+
+/**
+ * Either remove or unlock any remaining ripples when the user mouses off of the element (by
+ * touchmove)
+ */
+InkRippleCtrl.prototype.handleTouchmove = function () {
+  var ctrl = this;
+
+  ctrl._handleRemoval(angular.bind(ctrl, ctrl.deleteRipples));
+};
+
 /**
  * Cycles through all ripples and attempts to remove them.
+ */
+InkRippleCtrl.prototype.deleteRipples = function () {
+  for (var i = 0; i < this.ripples.length; i++) {
+    this.ripples[ i ].remove();
+  }
+};
+
+/**
+ * Cycles through all ripples and attempts to remove them with fade.
  * Depending on logic within `fadeInComplete`, some removals will be postponed.
  */
 InkRippleCtrl.prototype.clearRipples = function () {