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

[Thomas Lamprecht]

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.

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