From 6a64572e960578335d3bbb182bcb18b7129ee613 Mon Sep 17 00:00:00 2001 From: Patrick Nelson Date: Tue, 15 Jul 2014 13:22:03 -0400 Subject: [PATCH] Fixed race condition that affected Android + Chrome on mobile when a "scratchDown" callback was also setup. Fixed involves deferring callbacks so that "touchstart" will return immediately on touch devices due to delay caused by calculating percentage which is passed into all callbacks (including 'down'). Chrome will trigger a "touchcancel" event if not responding after 200ms. Also ensuring all callbacks (down/move/up) are called all the time except "move" which should be called only when "realtime" is set. --- src/wScratchPad.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/wScratchPad.js b/src/wScratchPad.js index 649de29..75dcfcc 100644 --- a/src/wScratchPad.js +++ b/src/wScratchPad.js @@ -174,10 +174,15 @@ e.pageY = Math.floor(e.pageY - this.canvasOffset.top); this['_scratch' + event](e); - - if (this.options.realtime || event === 'Up') { + + if (this.options.realtime || event !== 'Move') { if (this.options['scratch' + event]) { - this.options['scratch' + event].apply(this, [e, this._scratchPercent()]); + // Setup callback to execute later, since scratch percentage calculation takes too long in some mobile browsers + // and will cause Chrome to fire a "touchcancel" event prematurely when touching down at first. + var _this = this; + setTimeout(function() { + _this.options['scratch' + event].apply(_this, [e, _this._scratchPercent()]); + }, 0); } } }, @@ -277,7 +282,7 @@ size : 5, // The size of the brush/scratch. bg : '#cacaca', // Background (image path or hex color). fg : '#6699ff', // Foreground (image path or hex color). - realtime : true, // Calculates percentage in realitime + realtime : true, // Calculates percentage in real time (on move events, not just mouse up). scratchDown : null, // Set scratchDown callback. scratchUp : null, // Set scratchUp callback. scratchMove : null, // Set scratcMove callback. @@ -292,6 +297,7 @@ switch (event.type) { case 'touchstart': + event.preventDefault(); type = 'mousedown'; break; case 'touchmove':