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