Browse Source

Merge pull request #758 from LasLabs/bugfix/11.0/gh-742-forward-port

[11.0][FIX] web_responsive: Chrome Slow Scrolling
pull/772/head
Pedro M. Baeza 7 years ago
committed by GitHub
parent
commit
96eed3f510
  1. 87
      web_responsive/static/lib/js/iscroll-probe.5.2.0.js
  2. 3
      web_responsive/static/src/js/web_responsive.js

87
web_responsive/static/lib/js/iscroll-probe.5.2.0.js

@ -1,4 +1,4 @@
/*! iScroll v5.2.0 ~ (c) 2008-2016 Matteo Spinelli ~ http://cubiq.org/license */
/*! iScroll v5.2.0-snapshot ~ (c) 2008-2017 Matteo Spinelli ~ http://cubiq.org/license */
(function (window, document, Math) {
var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
@ -124,7 +124,8 @@ var utils = (function () {
transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
transitionDuration: _prefixStyle('transitionDuration'),
transitionDelay: _prefixStyle('transitionDelay'),
transformOrigin: _prefixStyle('transformOrigin')
transformOrigin: _prefixStyle('transformOrigin'),
touchAction: _prefixStyle('touchAction')
});
me.hasClass = function (e, c) {
@ -278,6 +279,39 @@ var utils = (function () {
}
};
me.getTouchAction = function(eventPassthrough, addPinch) {
var touchAction = 'none';
if ( eventPassthrough === 'vertical' ) {
touchAction = 'pan-y';
} else if (eventPassthrough === 'horizontal' ) {
touchAction = 'pan-x';
}
if (addPinch && touchAction != 'none') {
// add pinch-zoom support if the browser supports it, but if not (eg. Chrome <55) do nothing
touchAction += ' pinch-zoom';
}
return touchAction;
};
me.getRect = function(el) {
if (el instanceof SVGElement) {
var rect = el.getBoundingClientRect();
return {
top : rect.top,
left : rect.left,
width : rect.width,
height : rect.height
};
} else {
return {
top : el.offsetTop,
left : el.offsetLeft,
width : el.offsetWidth,
height : el.offsetHeight
};
}
};
return me;
})();
function IScroll (el, options) {
@ -380,7 +414,7 @@ function IScroll (el, options) {
}
IScroll.prototype = {
version: '5.2.0',
version: '5.2.0-snapshot',
_init: function () {
this._initEvents();
@ -726,15 +760,16 @@ IScroll.prototype = {
},
refresh: function () {
var rf = this.wrapper.offsetHeight; // Force reflow
utils.getRect(this.wrapper); // Force reflow
this.wrapperWidth = this.wrapper.clientWidth;
this.wrapperHeight = this.wrapper.clientHeight;
var rect = utils.getRect(this.scroller);
/* REPLACE START: refresh */
this.scrollerWidth = this.scroller.offsetWidth;
this.scrollerHeight = this.scroller.offsetHeight;
this.scrollerWidth = rect.width;
this.scrollerHeight = rect.height;
this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
this.maxScrollY = this.wrapperHeight - this.scrollerHeight;
@ -758,6 +793,16 @@ IScroll.prototype = {
this.directionX = 0;
this.directionY = 0;
if(utils.hasPointer && !this.options.disablePointer) {
// The wrapper should have `touchAction` property for using pointerEvent.
this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, true);
// case. not support 'pinch-zoom'
// https://github.com/cubiq/iscroll/issues/1118#issuecomment-270057583
if (!this.wrapper.style[utils.style.touchAction]) {
this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, false);
}
}
this.wrapperOffset = utils.offset(this.wrapper);
this._execEvent('refresh');
@ -842,11 +887,13 @@ IScroll.prototype = {
pos.top -= this.wrapperOffset.top;
// if offsetX/Y are true we center the element to the screen
var elRect = utils.getRect(el);
var wrapperRect = utils.getRect(this.wrapper);
if ( offsetX === true ) {
offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
offsetX = Math.round(elRect.width / 2 - wrapperRect.width / 2);
}
if ( offsetY === true ) {
offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2);
offsetY = Math.round(elRect.height / 2 - wrapperRect.height / 2);
}
pos.left -= offsetX || 0;
@ -1227,7 +1274,8 @@ IScroll.prototype = {
x = 0, y,
stepX = this.options.snapStepX || this.wrapperWidth,
stepY = this.options.snapStepY || this.wrapperHeight,
el;
el,
rect;
this.pages = [];
@ -1267,7 +1315,8 @@ IScroll.prototype = {
n = -1;
for ( ; i < l; i++ ) {
if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
rect = utils.getRect(el[i]);
if ( i === 0 || rect.left <= utils.getRect(el[i-1]).left ) {
m = 0;
n++;
}
@ -1276,16 +1325,16 @@ IScroll.prototype = {
this.pages[m] = [];
}
x = Math.max(-el[i].offsetLeft, this.maxScrollX);
y = Math.max(-el[i].offsetTop, this.maxScrollY);
cx = x - Math.round(el[i].offsetWidth / 2);
cy = y - Math.round(el[i].offsetHeight / 2);
x = Math.max(-rect.left, this.maxScrollX);
y = Math.max(-rect.top, this.maxScrollY);
cx = x - Math.round(rect.width / 2);
cy = y - Math.round(rect.height / 2);
this.pages[m][n] = {
x: x,
y: y,
width: el[i].offsetWidth,
height: el[i].offsetHeight,
width: rect.width,
height: rect.height,
cx: cx,
cy: cy
};
@ -1598,7 +1647,7 @@ IScroll.prototype = {
if ( now >= destTime ) {
that.isAnimating = false;
that._translate(destX, destY);
if ( !that.resetPosition(that.options.bounceTime) ) {
that._execEvent('scrollEnd');
}
@ -1822,7 +1871,7 @@ Indicator.prototype = {
utils.removeEvent(window, 'mouseup', this);
}
if ( this.options.defaultScrollbars ) {
if ( this.options.defaultScrollbars && this.wrapper.parentNode ) {
this.wrapper.parentNode.removeChild(this.wrapper);
}
},
@ -1989,7 +2038,7 @@ Indicator.prototype = {
}
}
var r = this.wrapper.offsetHeight; // force refresh
utils.getRect(this.wrapper); // force refresh
if ( this.options.listenX ) {
this.wrapperWidth = this.wrapper.clientWidth;

3
web_responsive/static/src/js/web_responsive.js

@ -109,7 +109,10 @@ odoo.define('web_responsive', function(require) {
'transform', 'matrix(1, 0, 0, 1, 0, ' + transform + ')'
);
};
// Scroll probe aggressiveness level
// 2 == always executes the scroll event except during momentum and bounce.
this.iScroll.options.probeType = 2;
// Set options because
this.iScroll.on('scroll', $.proxy(onIScroll, this));
});
this.initialized = true;

Loading…
Cancel
Save