diff options
author | Andy Huang <ath@google.com> | 2013-01-16 20:05:33 -0800 |
---|---|---|
committer | Andy Huang <ath@google.com> | 2013-01-17 14:33:20 -0800 |
commit | ce8565b3605c2ce47c75e259f387cd4955f017da (patch) | |
tree | ee484476aca84237247b11f418943283bdabc0da /assets | |
parent | d0e50f396f6a86d68bbe1826dd41ec35a359605c (diff) | |
download | android_packages_apps_UnifiedEmail-ce8565b3605c2ce47c75e259f387cd4955f017da.tar.gz android_packages_apps_UnifiedEmail-ce8565b3605c2ce47c75e259f387cd4955f017da.tar.bz2 android_packages_apps_UnifiedEmail-ce8565b3605c2ce47c75e259f387cd4955f017da.zip |
counteract jumping in CSS-based message zooming
Adjust scroll position after a zoom to counteract jumping.
There's still a momentary flash, so it's not perfect yet. That
might be suppressable with ingenuity (i.e. gross hacks).
Suppress WebView input handling for an input sequence on
POINTER_DOWN to prevent WebView from scrolling during a scale.
I've chosen to implement message translation-during-scale
manually, so the WebView must not move on its own during a
scale, or else the translation will be doubly applied.
Bug: 7400516
Change-Id: I54c347c37d28864441c8a3bca3395bdc86f6616f
Diffstat (limited to 'assets')
-rw-r--r-- | assets/script.js | 51 |
1 files changed, 35 insertions, 16 deletions
diff --git a/assets/script.js b/assets/script.js index 6ea24e819..37c266ef4 100644 --- a/assets/script.js +++ b/assets/script.js @@ -487,23 +487,29 @@ function onScaleBegin(screenX, screenY) { msgDivTop = getTotalOffset(msgBodyDiv).top; - scaledOriginX = focusX;// / initialScale; - scaledOriginY = (focusY - msgDivTop);// / initialScale; + // TODO: correct only for no initial translation + // FIXME: wrong for initialScale > 1.0 + scaledOriginX = focusX / initialScale; + scaledOriginY = (focusY - msgDivTop) / initialScale; - translateX = scaledOriginX * (initialScale - 1.0) / initialScale; - translateY = scaledOriginY * (initialScale - 1.0) / initialScale; + // TODO: is this still needed? + translateX = 0; + translateY = 0; gScaleInfo = { div: msgBodyDiv, - divTop: msgDivTop, initialScale: initialScale, - initialX: focusX, - initialY: focusY, + initialScreenX: screenX, + initialScreenY: screenY, + originX: scaledOriginX, + originY: scaledOriginY, translateX: translateX, translateY: translateY, initialH: getCachedValue(msgBodyDiv, "offsetHeight", "data-initial-height"), minScale: Math.min(document.body.offsetWidth / msgBodyDiv.scrollWidth, 1.0), - currScale: initialScale + currScale: initialScale, + currTranslateX: 0, + currTranslateY: 0 }; origin = scaledOriginX + "px " + scaledOriginY + "px"; @@ -530,19 +536,31 @@ function onScaleEnd(screenX, screenY) { scale = gScaleInfo.currScale; msgBodyDiv.style.webkitTransformOrigin = "0 0"; // clear any translate - msgBodyDiv.style.webkitTransform = "scale3d(" + scale + "," + scale + ",1)"; // switching to a 2D transform here re-renders the fonts more clearly, but introduces // texture upload lag to any subsequent scale operation - //msgBodyDiv.style.webkitTransform = "scale(" + gScaleInfo.currScale + ")"; + // TODO: conditionalize this based on device GPU performance and/or body size/complexity? + if (true) { + msgBodyDiv.style.webkitTransform = "scale(" + gScaleInfo.currScale + ")"; + } else { + msgBodyDiv.style.webkitTransform = "scale3d(" + scale + "," + scale + ",1)"; + } h = gScaleInfo.initialH * scale; // console.log("onScaleEnd set h=" + h); msgBodyDiv.style.height = h + "px"; + + // Use saved translateX/Y rather than calculating from screenX/Y because screenX/Y values + // from onScaleEnd only track focus of remaining pointers, which is not useful and leads + // to a perceived jump. + var deltaScrollX = (scale - 1) * gScaleInfo.originX - gScaleInfo.currTranslateX; + var deltaScrollY = (scale - 1) * gScaleInfo.originY - gScaleInfo.currTranslateY; +// console.log("JS adjusting scroll by x/y=" + deltaScrollX + "/" + deltaScrollY); + window.scrollBy(deltaScrollX, deltaScrollY); + msgBodyDiv.classList.remove("zooming-focused"); msgBodyDiv.setAttribute("data-initial-scale", scale); } function onScale(relativeScale, screenX, screenY) { - var focusX, focusY; var scale; var translateX, translateY; var transform; @@ -550,21 +568,22 @@ function onScale(relativeScale, screenX, screenY) { if (!gScaleInfo) { return; } - focusX = screenX + document.body.scrollLeft; - focusY = screenY + document.body.scrollTop; scale = Math.max(gScaleInfo.initialScale * relativeScale, gScaleInfo.minScale); if (scale > 4.0) { scale = 4.0; } + translateX = screenX - gScaleInfo.initialScreenX; + translateY = screenY - gScaleInfo.initialScreenY; + // TODO: clamp translation to prevent going beyond body edges gScaleInfo.currScale = scale; - translateX = focusX - gScaleInfo.initialX; - translateY = focusY - gScaleInfo.initialY; + gScaleInfo.currTranslateX = translateX; + gScaleInfo.currTranslateY = translateY; transform = "translate3d(" + translateX + "px," + translateY + "px,0) scale3d(" + scale + "," + scale + ",1) translate3d(" + gScaleInfo.translateX + "px," + gScaleInfo.translateY + "px,0)"; gScaleInfo.div.style.webkitTransform = transform; -// console.log("JS got scale=" + relativeScale + " x/y=" + screenX + "/" + screenY +// console.log("JS got scale=" + scale + " x/y=" + screenX + "/" + screenY // + " transform='" + transform + "'"); } |