OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // This variable will be changed by iOS scripts. | 5 // This variable will be changed by iOS scripts. |
6 var distiller_on_ios = false; | 6 var distiller_on_ios = false; |
7 | 7 |
8 function addToPage(html) { | 8 function addToPage(html) { |
9 var div = document.createElement('div'); | 9 var div = document.createElement('div'); |
10 div.innerHTML = html; | 10 div.innerHTML = html; |
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
91 cssClass = "dark"; | 91 cssClass = "dark"; |
92 } else { | 92 } else { |
93 cssClass = "light"; | 93 cssClass = "light"; |
94 } | 94 } |
95 // Relies on the classname order of the body being Theme class, then Font | 95 // Relies on the classname order of the body being Theme class, then Font |
96 // Family class. | 96 // Family class. |
97 var fontFamilyClass = document.body.className.split(" ")[1]; | 97 var fontFamilyClass = document.body.className.split(" ")[1]; |
98 document.body.className = cssClass + " " + fontFamilyClass; | 98 document.body.className = cssClass + " " + fontFamilyClass; |
99 } | 99 } |
100 | 100 |
| 101 function useFontScaling(scaling) { |
| 102 pincher.useFontScaling(scaling); |
| 103 } |
| 104 |
101 var updateLoadingIndicator = function() { | 105 var updateLoadingIndicator = function() { |
102 var colors = ["red", "yellow", "green", "blue"]; | 106 var colors = ["red", "yellow", "green", "blue"]; |
103 return function(isLastPage) { | 107 return function(isLastPage) { |
104 if (!isLastPage && typeof this.colorShuffle == "undefined") { | 108 if (!isLastPage && typeof this.colorShuffle == "undefined") { |
105 var loader = document.getElementById("loader"); | 109 var loader = document.getElementById("loader"); |
106 if (loader) { | 110 if (loader) { |
107 var colorIndex = -1; | 111 var colorIndex = -1; |
108 this.colorShuffle = setInterval(function() { | 112 this.colorShuffle = setInterval(function() { |
109 colorIndex = (colorIndex + 1) % colors.length; | 113 colorIndex = (colorIndex + 1) % colors.length; |
110 loader.className = colors[colorIndex]; | 114 loader.className = colors[colorIndex]; |
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
213 | 217 |
214 var lastSpan; | 218 var lastSpan; |
215 var lastClientMid; | 219 var lastClientMid; |
216 | 220 |
217 var scale = 1; | 221 var scale = 1; |
218 var shiftX; | 222 var shiftX; |
219 var shiftY; | 223 var shiftY; |
220 | 224 |
221 // The zooming speed relative to pinching speed. | 225 // The zooming speed relative to pinching speed. |
222 var FONT_SCALE_MULTIPLIER = 0.5; | 226 var FONT_SCALE_MULTIPLIER = 0.5; |
| 227 |
223 var MIN_SPAN_LENGTH = 20; | 228 var MIN_SPAN_LENGTH = 20; |
224 | 229 |
225 // The font size is guaranteed to be in px. | 230 // The font size is guaranteed to be in px. |
226 var baseSize = | 231 var baseSize = |
227 parseFloat(getComputedStyle(document.documentElement).fontSize); | 232 parseFloat(getComputedStyle(document.documentElement).fontSize); |
228 | 233 |
229 var refreshTransform = function() { | 234 var refreshTransform = function() { |
230 var slowedScale = Math.exp(Math.log(scale) * FONT_SCALE_MULTIPLIER); | 235 var slowedScale = Math.exp(Math.log(scale) * FONT_SCALE_MULTIPLIER); |
231 clampedScale = Math.max(0.4, Math.min(2.5, fontSizeAnchor * slowedScale)); | 236 clampedScale = Math.max(0.4, Math.min(2.5, fontSizeAnchor * slowedScale)); |
232 | 237 |
233 // Use "fake" 3D transform so that the layer is not repainted. | 238 // Use "fake" 3D transform so that the layer is not repainted. |
234 // With 2D transform, the frame rate would be much lower. | 239 // With 2D transform, the frame rate would be much lower. |
235 document.body.style.transform = | 240 document.body.style.transform = |
236 'translate3d(' + shiftX + 'px,' + | 241 'translate3d(' + shiftX + 'px,' + |
237 shiftY + 'px, 0px)' + | 242 shiftY + 'px, 0px)' + |
238 'scale(' + clampedScale/fontSizeAnchor + ')'; | 243 'scale(' + clampedScale/fontSizeAnchor + ')'; |
239 }; | 244 }; |
240 | 245 |
| 246 function saveCenter(clientMid) { |
| 247 // Try to preserve the pinching center after text reflow. |
| 248 // This is accurate to the HTML element level. |
| 249 focusElement = document.elementFromPoint(clientMid.x, clientMid.y); |
| 250 var rect = focusElement.getBoundingClientRect(); |
| 251 initClientMid = clientMid; |
| 252 focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); |
| 253 } |
| 254 |
| 255 function restoreCenter() { |
| 256 var rect = focusElement.getBoundingClientRect(); |
| 257 var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + |
| 258 document.body.scrollTop - (initClientMid.y + shiftY); |
| 259 document.body.scrollTop = targetTop; |
| 260 } |
| 261 |
241 function endPinch() { | 262 function endPinch() { |
242 pinching = false; | 263 pinching = false; |
243 | 264 |
244 document.body.style.transformOrigin = ''; | 265 document.body.style.transformOrigin = ''; |
245 document.body.style.transform = ''; | 266 document.body.style.transform = ''; |
246 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; | 267 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; |
247 | 268 |
248 var rect = focusElement.getBoundingClientRect(); | 269 restoreCenter(); |
249 var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + | 270 |
250 document.body.scrollTop - (initClientMid.y + shiftY); | 271 var img = document.getElementById('fontscaling-img'); |
251 document.body.scrollTop = targetTop; | 272 if (!img) { |
| 273 img = document.createElement('img'); |
| 274 img.id = 'fontscaling-img'; |
| 275 img.style.display = 'none'; |
| 276 document.body.appendChild(img); |
| 277 } |
| 278 img.src = "/savefontscaling/" + clampedScale; |
252 } | 279 } |
253 | 280 |
254 function touchSpan(e) { | 281 function touchSpan(e) { |
255 var count = e.touches.length; | 282 var count = e.touches.length; |
256 var mid = touchClientMid(e); | 283 var mid = touchClientMid(e); |
257 var sum = 0; | 284 var sum = 0; |
258 for (var i = 0; i < count; i++) { | 285 for (var i = 0; i < count; i++) { |
259 var dx = (e.touches[i].clientX - mid.x); | 286 var dx = (e.touches[i].clientX - mid.x); |
260 var dy = (e.touches[i].clientY - mid.y); | 287 var dy = (e.touches[i].clientY - mid.y); |
261 sum += Math.hypot(dx, dy); | 288 sum += Math.hypot(dx, dy); |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
302 | 329 |
303 pinching = true; | 330 pinching = true; |
304 fontSizeAnchor = | 331 fontSizeAnchor = |
305 parseFloat(getComputedStyle(document.documentElement).fontSize) / | 332 parseFloat(getComputedStyle(document.documentElement).fontSize) / |
306 baseSize; | 333 baseSize; |
307 | 334 |
308 var pinchOrigin = touchPageMid(e); | 335 var pinchOrigin = touchPageMid(e); |
309 document.body.style.transformOrigin = | 336 document.body.style.transformOrigin = |
310 pinchOrigin.x + 'px ' + pinchOrigin.y + 'px'; | 337 pinchOrigin.x + 'px ' + pinchOrigin.y + 'px'; |
311 | 338 |
312 // Try to preserve the pinching center after text reflow. | 339 saveCenter(clientMid); |
313 // This is accurate to the HTML element level. | |
314 focusElement = document.elementFromPoint(clientMid.x, clientMid.y); | |
315 var rect = focusElement.getBoundingClientRect(); | |
316 initClientMid = clientMid; | |
317 focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); | |
318 | 340 |
319 lastSpan = span; | 341 lastSpan = span; |
320 lastClientMid = clientMid; | 342 lastClientMid = clientMid; |
321 | 343 |
322 refreshTransform(); | 344 refreshTransform(); |
323 }, | 345 }, |
324 | 346 |
325 handleTouchMove: function(e) { | 347 handleTouchMove: function(e) { |
326 if (!pinching) return; | 348 if (!pinching) return; |
327 if (e.touches.length < 2) return; | 349 if (e.touches.length < 2) return; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
369 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; | 391 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; |
370 }, | 392 }, |
371 | 393 |
372 status: function() { | 394 status: function() { |
373 return { | 395 return { |
374 scale: scale, | 396 scale: scale, |
375 clampedScale: clampedScale, | 397 clampedScale: clampedScale, |
376 shiftX: shiftX, | 398 shiftX: shiftX, |
377 shiftY: shiftY | 399 shiftY: shiftY |
378 }; | 400 }; |
| 401 }, |
| 402 |
| 403 useFontScaling: function(scaling) { |
| 404 saveCenter({x: window.innerWidth/2, y: window.innerHeight/2}); |
| 405 shiftX = 0; |
| 406 shiftY = 0; |
| 407 document.documentElement.style.fontSize = scaling * baseSize + "px"; |
| 408 clampedScale = scaling; |
| 409 restoreCenter(); |
379 } | 410 } |
380 }; | 411 }; |
381 }()); | 412 }()); |
382 | 413 |
383 window.addEventListener('touchstart', pincher.handleTouchStart, false); | 414 window.addEventListener('touchstart', pincher.handleTouchStart, false); |
384 window.addEventListener('touchmove', pincher.handleTouchMove, false); | 415 window.addEventListener('touchmove', pincher.handleTouchMove, false); |
385 window.addEventListener('touchend', pincher.handleTouchEnd, false); | 416 window.addEventListener('touchend', pincher.handleTouchEnd, false); |
386 window.addEventListener('touchcancel', pincher.handleTouchCancel, false); | 417 window.addEventListener('touchcancel', pincher.handleTouchCancel, false); |
OLD | NEW |