[pve-devel] [PATCH widget-toolkit] (partially) fix #1223: add touchscreen override for extjs

[Dominik Csapak]

the combination of firefox, touchscreen, mouse input and extjs
prevents normal click/touch input for buttons, lists, etc.

the workaround on firefox was to set
dom.w3c_touch_events.enabled
to 0 (in about:config)

or to upgrade to extjs >= 6.5.1 (of which there is no gpl release as of now)

so we introduce that workaround as it seems to not disrupt 'normal'
browsers and non-touchscreen devices

we then still have an issue with scrolling though, since extjs
now expects the user to drag the content instead of using the wheel

but it is still better than a completely non working interface

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 Toolkit.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/Toolkit.js b/Toolkit.js
index 7e62e05..4f1b623 100644
--- a/Toolkit.js
+++ b/Toolkit.js
@@ -139,6 +139,49 @@ Ext.apply(Ext.form.field.VTypes, {
     passwordText: gettext('Passwords do not match')
 });
 
+// Firefox 52+ Touchscreen bug
+// see https://www.sencha.com/forum/showthread.php?336762-Examples-don-t-work-in-Firefox-52-touchscreen/page2
+// and https://bugzilla.proxmox.com/show_bug.cgi?id=1223
+Ext.define('EXTJS_23846.Element', {
+    override: 'Ext.dom.Element'
+}, function(Element) {
+    var supports = Ext.supports,
+        proto = Element.prototype,
+        eventMap = proto.eventMap,
+        additiveEvents = proto.additiveEvents;
+
+    if (Ext.os.is.Desktop && supports.TouchEvents && !supports.PointerEvents) {
+        eventMap.touchstart = 'mousedown';
+        eventMap.touchmove = 'mousemove';
+        eventMap.touchend = 'mouseup';
+        eventMap.touchcancel = 'mouseup';
+
+        additiveEvents.mousedown = 'mousedown';
+        additiveEvents.mousemove = 'mousemove';
+        additiveEvents.mouseup = 'mouseup';
+        additiveEvents.touchstart = 'touchstart';
+        additiveEvents.touchmove = 'touchmove';
+        additiveEvents.touchend = 'touchend';
+        additiveEvents.touchcancel = 'touchcancel';
+
+        additiveEvents.pointerdown = 'mousedown';
+        additiveEvents.pointermove = 'mousemove';
+        additiveEvents.pointerup = 'mouseup';
+        additiveEvents.pointercancel = 'mouseup';
+    }
+});
+
+Ext.define('EXTJS_23846.Gesture', {
+    override: 'Ext.event.publisher.Gesture'
+}, function(Gesture) {
+    var me = Gesture.instance;
+
+    if (Ext.supports.TouchEvents && !Ext.isWebKit && Ext.os.is.Desktop) {
+        me.handledDomEvents.push('mousedown', 'mousemove', 'mouseup');
+        me.registerEvents();
+    }
+});
+
 // we always want the number in x.y format and never in, e.g., x,y
 Ext.define('PVE.form.field.Number', {
     override: 'Ext.form.field.Number',
-- 
2.11.0