Index: components/dom_distiller/core/javascript/dom_distiller_viewer.js |
diff --git a/components/dom_distiller/core/javascript/dom_distiller_viewer.js b/components/dom_distiller/core/javascript/dom_distiller_viewer.js |
index bf114cf6c9ad14639da53c4fef3a71e2e56ad27c..c5d833d21f2d1acffbe4224eb25624159b59796a 100644 |
--- a/components/dom_distiller/core/javascript/dom_distiller_viewer.js |
+++ b/components/dom_distiller/core/javascript/dom_distiller_viewer.js |
@@ -98,6 +98,10 @@ function useTheme(theme) { |
document.body.className = cssClass + " " + fontFamilyClass; |
} |
+function useFontScaling(scaling) { |
+ pincher.useFontScaling(scaling); |
+} |
+ |
var updateLoadingIndicator = function() { |
var colors = ["red", "yellow", "green", "blue"]; |
return function(isLastPage) { |
@@ -220,6 +224,7 @@ var pincher = (function() { |
// The zooming speed relative to pinching speed. |
var FONT_SCALE_MULTIPLIER = 0.5; |
+ |
var MIN_SPAN_LENGTH = 20; |
// The font size is guaranteed to be in px. |
@@ -238,6 +243,22 @@ var pincher = (function() { |
'scale(' + clampedScale/fontSizeAnchor + ')'; |
}; |
+ function saveCenter(clientMid) { |
+ // Try to preserve the pinching center after text reflow. |
+ // This is accurate to the HTML element level. |
+ focusElement = document.elementFromPoint(clientMid.x, clientMid.y); |
+ var rect = focusElement.getBoundingClientRect(); |
+ initClientMid = clientMid; |
+ focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); |
+ } |
+ |
+ function restoreCenter() { |
+ var rect = focusElement.getBoundingClientRect(); |
+ var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + |
+ document.body.scrollTop - (initClientMid.y + shiftY); |
+ document.body.scrollTop = targetTop; |
+ } |
+ |
function endPinch() { |
pinching = false; |
@@ -245,10 +266,16 @@ var pincher = (function() { |
document.body.style.transform = ''; |
document.documentElement.style.fontSize = clampedScale * baseSize + "px"; |
- var rect = focusElement.getBoundingClientRect(); |
- var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + |
- document.body.scrollTop - (initClientMid.y + shiftY); |
- document.body.scrollTop = targetTop; |
+ restoreCenter(); |
+ |
+ var img = document.getElementById('fontscaling-img'); |
+ if (!img) { |
+ img = document.createElement('img'); |
+ img.id = 'fontscaling-img'; |
+ img.style.display = 'none'; |
+ document.body.appendChild(img); |
+ } |
+ img.src = "/savefontscaling/" + clampedScale; |
} |
function touchSpan(e) { |
@@ -309,12 +336,7 @@ var pincher = (function() { |
document.body.style.transformOrigin = |
pinchOrigin.x + 'px ' + pinchOrigin.y + 'px'; |
- // Try to preserve the pinching center after text reflow. |
- // This is accurate to the HTML element level. |
- focusElement = document.elementFromPoint(clientMid.x, clientMid.y); |
- var rect = focusElement.getBoundingClientRect(); |
- initClientMid = clientMid; |
- focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); |
+ saveCenter(clientMid); |
lastSpan = span; |
lastClientMid = clientMid; |
@@ -376,6 +398,15 @@ var pincher = (function() { |
shiftX: shiftX, |
shiftY: shiftY |
}; |
+ }, |
+ |
+ useFontScaling: function(scaling) { |
+ saveCenter({x: window.innerWidth/2, y: window.innerHeight/2}); |
+ shiftX = 0; |
+ shiftY = 0; |
+ document.documentElement.style.fontSize = scaling * baseSize + "px"; |
+ clampedScale = scaling; |
+ restoreCenter(); |
} |
}; |
}()); |