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 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
109 if (themeClass == "sepia") { | 109 if (themeClass == "sepia") { |
110 toolbarColor = "#BF9A73"; | 110 toolbarColor = "#BF9A73"; |
111 } else if (themeClass == "dark") { | 111 } else if (themeClass == "dark") { |
112 toolbarColor = "#1A1A1A"; | 112 toolbarColor = "#1A1A1A"; |
113 } else { | 113 } else { |
114 toolbarColor = "#F5F5F5"; | 114 toolbarColor = "#F5F5F5"; |
115 } | 115 } |
116 document.getElementById('theme-color').content = toolbarColor; | 116 document.getElementById('theme-color').content = toolbarColor; |
117 } | 117 } |
118 | 118 |
| 119 function useFontScaling(scaling) { |
| 120 pincher.useFontScaling(scaling); |
| 121 } |
| 122 |
119 var updateLoadingIndicator = function() { | 123 var updateLoadingIndicator = function() { |
120 var colors = ["red", "yellow", "green", "blue"]; | 124 var colors = ["red", "yellow", "green", "blue"]; |
121 return function(isLastPage) { | 125 return function(isLastPage) { |
122 if (!isLastPage && typeof this.colorShuffle == "undefined") { | 126 if (!isLastPage && typeof this.colorShuffle == "undefined") { |
123 var loader = document.getElementById("loader"); | 127 var loader = document.getElementById("loader"); |
124 if (loader) { | 128 if (loader) { |
125 var colorIndex = -1; | 129 var colorIndex = -1; |
126 this.colorShuffle = setInterval(function() { | 130 this.colorShuffle = setInterval(function() { |
127 colorIndex = (colorIndex + 1) % colors.length; | 131 colorIndex = (colorIndex + 1) % colors.length; |
128 loader.className = colors[colorIndex]; | 132 loader.className = colors[colorIndex]; |
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
226 | 230 |
227 var lastSpan; | 231 var lastSpan; |
228 var lastClientMid; | 232 var lastClientMid; |
229 | 233 |
230 var scale = 1; | 234 var scale = 1; |
231 var shiftX; | 235 var shiftX; |
232 var shiftY; | 236 var shiftY; |
233 | 237 |
234 // The zooming speed relative to pinching speed. | 238 // The zooming speed relative to pinching speed. |
235 var FONT_SCALE_MULTIPLIER = 0.5; | 239 var FONT_SCALE_MULTIPLIER = 0.5; |
| 240 |
236 var MIN_SPAN_LENGTH = 20; | 241 var MIN_SPAN_LENGTH = 20; |
237 | 242 |
238 // The font size is guaranteed to be in px. | 243 // The font size is guaranteed to be in px. |
239 var baseSize = | 244 var baseSize = |
240 parseFloat(getComputedStyle(document.documentElement).fontSize); | 245 parseFloat(getComputedStyle(document.documentElement).fontSize); |
241 | 246 |
242 var refreshTransform = function() { | 247 var refreshTransform = function() { |
243 var slowedScale = Math.exp(Math.log(scale) * FONT_SCALE_MULTIPLIER); | 248 var slowedScale = Math.exp(Math.log(scale) * FONT_SCALE_MULTIPLIER); |
244 clampedScale = Math.max(0.4, Math.min(2.5, fontSizeAnchor * slowedScale)); | 249 clampedScale = Math.max(0.5, Math.min(2.0, fontSizeAnchor * slowedScale)); |
245 | 250 |
246 // Use "fake" 3D transform so that the layer is not repainted. | 251 // Use "fake" 3D transform so that the layer is not repainted. |
247 // With 2D transform, the frame rate would be much lower. | 252 // With 2D transform, the frame rate would be much lower. |
248 document.body.style.transform = | 253 document.body.style.transform = |
249 'translate3d(' + shiftX + 'px,' + | 254 'translate3d(' + shiftX + 'px,' + |
250 shiftY + 'px, 0px)' + | 255 shiftY + 'px, 0px)' + |
251 'scale(' + clampedScale/fontSizeAnchor + ')'; | 256 'scale(' + clampedScale/fontSizeAnchor + ')'; |
252 }; | 257 }; |
253 | 258 |
| 259 function saveCenter(clientMid) { |
| 260 // Try to preserve the pinching center after text reflow. |
| 261 // This is accurate to the HTML element level. |
| 262 focusElement = document.elementFromPoint(clientMid.x, clientMid.y); |
| 263 var rect = focusElement.getBoundingClientRect(); |
| 264 initClientMid = clientMid; |
| 265 focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); |
| 266 } |
| 267 |
| 268 function restoreCenter() { |
| 269 var rect = focusElement.getBoundingClientRect(); |
| 270 var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + |
| 271 document.body.scrollTop - (initClientMid.y + shiftY); |
| 272 document.body.scrollTop = targetTop; |
| 273 } |
| 274 |
254 function endPinch() { | 275 function endPinch() { |
255 pinching = false; | 276 pinching = false; |
256 | 277 |
257 document.body.style.transformOrigin = ''; | 278 document.body.style.transformOrigin = ''; |
258 document.body.style.transform = ''; | 279 document.body.style.transform = ''; |
259 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; | 280 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; |
260 | 281 |
261 var rect = focusElement.getBoundingClientRect(); | 282 restoreCenter(); |
262 var targetTop = focusPos * (rect.bottom - rect.top) + rect.top + | 283 |
263 document.body.scrollTop - (initClientMid.y + shiftY); | 284 var img = document.getElementById('fontscaling-img'); |
264 document.body.scrollTop = targetTop; | 285 if (!img) { |
| 286 img = document.createElement('img'); |
| 287 img.id = 'fontscaling-img'; |
| 288 img.style.display = 'none'; |
| 289 document.body.appendChild(img); |
| 290 } |
| 291 img.src = "/savefontscaling/" + clampedScale; |
265 } | 292 } |
266 | 293 |
267 function touchSpan(e) { | 294 function touchSpan(e) { |
268 var count = e.touches.length; | 295 var count = e.touches.length; |
269 var mid = touchClientMid(e); | 296 var mid = touchClientMid(e); |
270 var sum = 0; | 297 var sum = 0; |
271 for (var i = 0; i < count; i++) { | 298 for (var i = 0; i < count; i++) { |
272 var dx = (e.touches[i].clientX - mid.x); | 299 var dx = (e.touches[i].clientX - mid.x); |
273 var dy = (e.touches[i].clientY - mid.y); | 300 var dy = (e.touches[i].clientY - mid.y); |
274 sum += Math.hypot(dx, dy); | 301 sum += Math.hypot(dx, dy); |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
315 | 342 |
316 pinching = true; | 343 pinching = true; |
317 fontSizeAnchor = | 344 fontSizeAnchor = |
318 parseFloat(getComputedStyle(document.documentElement).fontSize) / | 345 parseFloat(getComputedStyle(document.documentElement).fontSize) / |
319 baseSize; | 346 baseSize; |
320 | 347 |
321 var pinchOrigin = touchPageMid(e); | 348 var pinchOrigin = touchPageMid(e); |
322 document.body.style.transformOrigin = | 349 document.body.style.transformOrigin = |
323 pinchOrigin.x + 'px ' + pinchOrigin.y + 'px'; | 350 pinchOrigin.x + 'px ' + pinchOrigin.y + 'px'; |
324 | 351 |
325 // Try to preserve the pinching center after text reflow. | 352 saveCenter(clientMid); |
326 // This is accurate to the HTML element level. | |
327 focusElement = document.elementFromPoint(clientMid.x, clientMid.y); | |
328 var rect = focusElement.getBoundingClientRect(); | |
329 initClientMid = clientMid; | |
330 focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top); | |
331 | 353 |
332 lastSpan = span; | 354 lastSpan = span; |
333 lastClientMid = clientMid; | 355 lastClientMid = clientMid; |
334 | 356 |
335 refreshTransform(); | 357 refreshTransform(); |
336 }, | 358 }, |
337 | 359 |
338 handleTouchMove: function(e) { | 360 handleTouchMove: function(e) { |
339 if (!pinching) return; | 361 if (!pinching) return; |
340 if (e.touches.length < 2) return; | 362 if (e.touches.length < 2) return; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
382 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; | 404 document.documentElement.style.fontSize = clampedScale * baseSize + "px"; |
383 }, | 405 }, |
384 | 406 |
385 status: function() { | 407 status: function() { |
386 return { | 408 return { |
387 scale: scale, | 409 scale: scale, |
388 clampedScale: clampedScale, | 410 clampedScale: clampedScale, |
389 shiftX: shiftX, | 411 shiftX: shiftX, |
390 shiftY: shiftY | 412 shiftY: shiftY |
391 }; | 413 }; |
| 414 }, |
| 415 |
| 416 useFontScaling: function(scaling) { |
| 417 saveCenter({x: window.innerWidth/2, y: window.innerHeight/2}); |
| 418 shiftX = 0; |
| 419 shiftY = 0; |
| 420 document.documentElement.style.fontSize = scaling * baseSize + "px"; |
| 421 clampedScale = scaling; |
| 422 restoreCenter(); |
392 } | 423 } |
393 }; | 424 }; |
394 }()); | 425 }()); |
395 | 426 |
396 window.addEventListener('touchstart', pincher.handleTouchStart, false); | 427 window.addEventListener('touchstart', pincher.handleTouchStart, false); |
397 window.addEventListener('touchmove', pincher.handleTouchMove, false); | 428 window.addEventListener('touchmove', pincher.handleTouchMove, false); |
398 window.addEventListener('touchend', pincher.handleTouchEnd, false); | 429 window.addEventListener('touchend', pincher.handleTouchEnd, false); |
399 window.addEventListener('touchcancel', pincher.handleTouchCancel, false); | 430 window.addEventListener('touchcancel', pincher.handleTouchCancel, false); |
OLD | NEW |