mirror of
https://git.proxmox.com/git/proxmox-widget-toolkit
synced 2025-05-04 20:11:43 +00:00
Toolkit: update overrides for scroll fixes
while some scrolling issues where fixed since 6.0.1, some where introduced, namely: * for firefox, the correct event to listen to is 'wheel' not 'mousewheel' * the spinner scroll direction was incorrect * the boxOverflow scroll direction was incorrect * the boxOverflow scroll amount was too high functions were copied from extjs source, eslintified, and adapted Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
parent
fef7d02477
commit
d78eb5ec99
106
src/Toolkit.js
106
src/Toolkit.js
@ -3,11 +3,6 @@
|
|||||||
// do not send '_dc' parameter
|
// do not send '_dc' parameter
|
||||||
Ext.Ajax.disableCaching = false;
|
Ext.Ajax.disableCaching = false;
|
||||||
|
|
||||||
// FIXME: HACK! Makes scrolling in number spinner work again. fixed in ExtJS >= 6.1
|
|
||||||
if (Ext.isFirefox) {
|
|
||||||
Ext.$eventNameMap.DOMMouseScroll = 'DOMMouseScroll';
|
|
||||||
}
|
|
||||||
|
|
||||||
// custom Vtypes
|
// custom Vtypes
|
||||||
Ext.apply(Ext.form.field.VTypes, {
|
Ext.apply(Ext.form.field.VTypes, {
|
||||||
IPAddress: function(v) {
|
IPAddress: function(v) {
|
||||||
@ -466,29 +461,96 @@ Ext.define('Proxmox.form.field.Text', {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// this should be fixed with ExtJS 6.0.2
|
// make mousescrolling work in firefox in the containers overflowhandler,
|
||||||
// make mousescrolling work in firefox in the containers overflowhandler
|
// by using only the 'wheel' event not 'mousewheel'(fixed in 7.3)
|
||||||
|
// also reverse the scrolldirection (fixed in 7.3)
|
||||||
|
// and reduce the default increment
|
||||||
Ext.define(null, {
|
Ext.define(null, {
|
||||||
override: 'Ext.layout.container.boxOverflow.Scroller',
|
override: 'Ext.layout.container.boxOverflow.Scroller',
|
||||||
|
|
||||||
createWheelListener: function() {
|
wheelIncrement: 1,
|
||||||
let me = this;
|
|
||||||
if (Ext.isFirefox) {
|
getWheelDelta: function(e) {
|
||||||
me.wheelListener = me.layout.innerCt.on('wheel', me.onMouseWheelFirefox, me, { destroyable: true });
|
return -e.getWheelDelta(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
onOwnerRender: function(owner) {
|
||||||
|
var me = this,
|
||||||
|
scrollable = {
|
||||||
|
isBoxOverflowScroller: true,
|
||||||
|
x: false,
|
||||||
|
y: false,
|
||||||
|
listeners: {
|
||||||
|
scrollend: this.onScrollEnd,
|
||||||
|
scope: this,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// If no obstrusive scrollbars, allow natural scrolling on mobile touch devices
|
||||||
|
if (!Ext.scrollbar.width() && !Ext.platformTags.desktop) {
|
||||||
|
scrollable[owner.layout.horizontal ? 'x' : 'y'] = true;
|
||||||
} else {
|
} else {
|
||||||
me.wheelListener = me.layout.innerCt.on('mousewheel', me.onMouseWheel, me, { destroyable: true });
|
me.wheelListener = me.layout.innerCt.on(
|
||||||
|
'wheel', me.onMouseWheel, me, { destroyable: true },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
owner.setScrollable(scrollable);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// extj 6.7 reversed mousewheel direction... (fixed in 7.3)
|
||||||
|
// https://forum.sencha.com/forum/showthread.php?472517-Mousewheel-scroll-direction-in-numberfield-with-spinners
|
||||||
|
// alse use the 'wheel' event instead of 'mousewheel' (fixed in 7.3)
|
||||||
|
Ext.define('Proxmox.form.field.Spinner', {
|
||||||
|
override: 'Ext.form.field.Spinner',
|
||||||
|
|
||||||
|
onRender: function() {
|
||||||
|
var me = this,
|
||||||
|
spinnerTrigger = me.getTrigger('spinner');
|
||||||
|
|
||||||
|
me.callParent();
|
||||||
|
|
||||||
|
// Init up/down arrow keys
|
||||||
|
if (me.keyNavEnabled) {
|
||||||
|
me.spinnerKeyNav = new Ext.util.KeyNav({
|
||||||
|
target: me.inputEl,
|
||||||
|
scope: me,
|
||||||
|
up: me.spinUp,
|
||||||
|
down: me.spinDown,
|
||||||
|
});
|
||||||
|
|
||||||
|
me.inputEl.on({
|
||||||
|
keyup: me.onInputElKeyUp,
|
||||||
|
scope: me,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init mouse wheel
|
||||||
|
if (me.mouseWheelEnabled) {
|
||||||
|
me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me);
|
||||||
|
}
|
||||||
|
|
||||||
|
// in v4 spinUpEl/spinDownEl were childEls, now they are children of the trigger.
|
||||||
|
// create references for compatibility
|
||||||
|
me.spinUpEl = spinnerTrigger.upEl;
|
||||||
|
me.spinDownEl = spinnerTrigger.downEl;
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseWheel: function(e) {
|
||||||
|
var me = this,
|
||||||
|
delta;
|
||||||
|
if (me.hasFocus) {
|
||||||
|
delta = e.getWheelDelta();
|
||||||
|
if (delta > 0) {
|
||||||
|
me.spinDown();
|
||||||
|
} else if (delta < 0) {
|
||||||
|
me.spinUp();
|
||||||
|
}
|
||||||
|
e.stopEvent();
|
||||||
|
me.onSpinEnd();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// special wheel handler for firefox. differs from the default onMouseWheel
|
|
||||||
// handler by using deltaY instead of wheelDeltaY and no normalizing,
|
|
||||||
// because it is already
|
|
||||||
onMouseWheelFirefox: function(e) {
|
|
||||||
e.stopEvent();
|
|
||||||
let delta = e.browserEvent.deltaY || 0;
|
|
||||||
this.scrollBy(delta * this.wheelIncrement, false);
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// add '@' to the valid id
|
// add '@' to the valid id
|
||||||
|
Loading…
Reference in New Issue
Block a user