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

[Dominik Csapak]

On 03/30/2018 10:22 AM, Thomas Lamprecht wrote:
> Am 03/30/2018 um 09:48 AM schrieb 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)
>>
> 
> I guess you took a quick look at what they changed to address this in
> 6.5.1 and it is just to much change to backport a similar "full" 
> solution to our available versions?
> 
> Anyway it looks OK, tested and applied.

AFAICS, the 'real' fix is during setting up the event handlers, which is 
a point we cannot override (since this happens during the setting up of 
extjs itself)

> 
>> 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',
>>