lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for touch events in Internet Explorer 10/11 on mobile devices (i.e., Windows Phone 8+)

Browse Source
This commit is contained in:
Jason Follas 2014-05-14 09:18:41 -04:00
parent cb52be6dc0
commit f9f7b89c3f
3 changed files with 112 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/Global.js
View File

@ -83,29 +83,7 @@ var Kinetic = {};
*/ */
angleDeg: true, angleDeg: true,
// user agent
UA: (function() {
var userAgent = (root.navigator && root.navigator.userAgent) || '';
var ua = userAgent.toLowerCase(),
// jQuery UA regex
match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[],
// adding mobile flag as well
mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile
};
})(),
/** /**
* @namespace Filters * @namespace Filters
@ -334,8 +312,36 @@ var Kinetic = {};
}, },
getAngle: function(angle) { getAngle: function(angle) {
return this.angleDeg ? angle * PI_OVER_180 : angle; return this.angleDeg ? angle * PI_OVER_180 : angle;
} },
_parseUA: function(userAgent) {
var ua = userAgent.toLowerCase(),
// jQuery UA regex
match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[],
// adding mobile flag as well
mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)),
ieMobile = !!(userAgent.match(/IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile,
ieMobile: ieMobile // If this is true (i.e., WP8), then Kinetic touch events are executed instead of equivalent Kinetic mouse events
};
},
// user agent
UA: undefined
}; };
Kinetic.UA = Kinetic._parseUA((root.navigator && root.navigator.userAgent) || '');
})(this); })(this);
// Uses Node, AMD or browser globals to create a module. // Uses Node, AMD or browser globals to create a module.

21
src/Stage.js
View File

@ -385,6 +385,12 @@
} }
}, },
_mousemove: function(evt) { _mousemove: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchmove(evt);
}
// workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464 // workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464
if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) { if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) {
return; return;
@ -438,6 +444,12 @@
} }
}, },
_mousedown: function(evt) { _mousedown: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchstart(evt);
}
if (!Kinetic.UA.mobile) { if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
@ -460,6 +472,11 @@
} }
}, },
_mouseup: function(evt) { _mouseup: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Kinetic.UA.ieMobile) {
return _touchend(evt);
}
if (!Kinetic.UA.mobile) { if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()), var shape = this.getIntersection(this.getPointerPosition()),
@ -623,8 +640,8 @@
x = offsetX; x = offsetX;
y = evt.offsetY; y = evt.offsetY;
} }
// we unforunately have to use UA detection here because accessing // we unfortunately have to use UA detection here because accessing
// the layerX or layerY properties in newer veresions of Chrome // the layerX or layerY properties in newer versions of Chrome
// throws a JS warning. layerX and layerY are required for FF // throws a JS warning. layerX and layerY are required for FF
// when the container is transformed via CSS. // when the container is transformed via CSS.
else if (Kinetic.UA.browser === 'mozilla') { else if (Kinetic.UA.browser === 'mozilla') {

64
test/unit/Global-test.js
View File

@ -17,4 +17,68 @@ suite('Global', function() {
// set angleDeg back to true for future tests // set angleDeg back to true for future tests
Kinetic.angleDeg = true; Kinetic.angleDeg = true;
}); });
// ======================================================
test('UA tests', function() {
var ua;
// Chrome 34.0.1847.137 m
ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36');
assert.equal(ua.browser, 'chrome');
assert.equal(ua.mobile, false);
assert.equal(ua.version, '34.0.1847.137');
assert.equal(ua.ieMobile, false);
// Internet Explorer 9
ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)');
assert.equal(ua.browser, 'msie');
assert.equal(ua.mobile, false);
assert.equal(ua.version, '9.0');
assert.equal(ua.ieMobile, false);
// Internet Explorer 10
ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)');
assert.equal(ua.browser, 'msie');
assert.equal(ua.mobile, false);
assert.equal(ua.version, '10.0');
assert.equal(ua.ieMobile, false);
// Internet Explorer 10 Mobile (Windows Phone 8)
ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)');
assert.equal(ua.browser, 'msie');
assert.equal(ua.mobile, true);
assert.equal(ua.version, '10.0');
assert.equal(ua.ieMobile, true); // <-- forces Kinetic mouse events to be Kinetic touch events instead
// Internet Explorer 11 Mobile (Windows Phone 8.1)
ua = Kinetic._parseUA('Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0; NOKIA; Lumia 928) like Gecko');
assert.equal(ua.browser, 'mozilla');
assert.equal(ua.mobile, true);
assert.equal(ua.version, '11');
assert.equal(ua.ieMobile, true); // <-- forces Kinetic mouse events to be Kinetic touch events instead
// Internet Explorer 11 on 64-bit Windows 8.1 with Update
ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko');
assert.equal(ua.browser, 'mozilla');
assert.equal(ua.mobile, false);
assert.equal(ua.version, '11.0');
assert.equal(ua.ieMobile, false);
// Windows 8.1 with Update HTML/JS appx
ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; MSAppHost/2.0; rv:11.0) like Gecko');
assert.equal(ua.browser, 'mozilla');
assert.equal(ua.mobile, false);
assert.equal(ua.version, '11.0');
assert.equal(ua.ieMobile, false);
});
}); });