| OLD | NEW |
| 1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 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 // Single iframe for NTP tiles. | 5 // Single iframe for NTP tiles. |
| 6 (function() { | 6 (function() { |
| 7 'use strict'; | 7 'use strict'; |
| 8 | 8 |
| 9 | 9 |
| 10 /** | 10 /** |
| (...skipping 423 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 434 } | 434 } |
| 435 }); | 435 }); |
| 436 | 436 |
| 437 var title = tile.querySelector('.mv-title'); | 437 var title = tile.querySelector('.mv-title'); |
| 438 title.innerText = data.title; | 438 title.innerText = data.title; |
| 439 title.style.direction = data.direction || 'ltr'; | 439 title.style.direction = data.direction || 'ltr'; |
| 440 if (NUM_TITLE_LINES > 1) { | 440 if (NUM_TITLE_LINES > 1) { |
| 441 title.classList.add('multiline'); | 441 title.classList.add('multiline'); |
| 442 } | 442 } |
| 443 | 443 |
| 444 // We keep track of the outcome of loading possible thumbnails for this | |
| 445 // tile. Possible values: | |
| 446 // - null: waiting for load/error | |
| 447 // - false: error | |
| 448 // - a string: URL that loaded correctly. | |
| 449 // This is populated by imageLoaded/imageLoadFailed, and selectBestImage | |
| 450 // selects the best one to display. | |
| 451 var results = []; | |
| 452 var thumb = tile.querySelector('.mv-thumb'); | 444 var thumb = tile.querySelector('.mv-thumb'); |
| 453 var img = document.createElement('img'); | 445 var img = document.createElement('img'); |
| 454 var loaded = false; | |
| 455 | |
| 456 var selectBestImage = function() { | |
| 457 if (loaded) { | |
| 458 return; | |
| 459 } | |
| 460 // |results| is ordered from best candidate to worst. | |
| 461 for (var i = 0; i < results.length; ++i) { | |
| 462 if (results[i] === null) { | |
| 463 // A better candidate is still waiting to be loaded; defer. | |
| 464 return; | |
| 465 } | |
| 466 if (results[i] != false) { | |
| 467 // This is the best (non-failed) candidate. Use it! | |
| 468 img.src = results[i]; | |
| 469 loaded = true; | |
| 470 return; | |
| 471 } | |
| 472 } | |
| 473 // If we get here, then all candidates failed to load. | |
| 474 thumb.classList.add('failed-img'); | |
| 475 thumb.removeChild(img); | |
| 476 // Usually we count the load once the img element gets either a 'load' or | |
| 477 // an 'error' event. Since we have removed the img element, instead count | |
| 478 // the load here. | |
| 479 countLoad(); | |
| 480 }; | |
| 481 | |
| 482 var imageLoaded = function(idx, url) { | |
| 483 return function(ev) { | |
| 484 results[idx] = url; | |
| 485 selectBestImage(); | |
| 486 }; | |
| 487 }; | |
| 488 | |
| 489 var imageLoadFailed = function(idx) { | |
| 490 return function(ev) { | |
| 491 results[idx] = false; | |
| 492 selectBestImage(); | |
| 493 }; | |
| 494 }; | |
| 495 | |
| 496 img.title = data.title; | 446 img.title = data.title; |
| 447 img.src = data.thumbnailUrl; |
| 497 loadedCounter += 1; | 448 loadedCounter += 1; |
| 498 img.addEventListener('load', countLoad); | 449 img.addEventListener('load', countLoad); |
| 499 img.addEventListener('error', countLoad); | 450 img.addEventListener('error', countLoad); |
| 500 img.addEventListener('error', function(ev) { | 451 img.addEventListener('error', function(ev) { |
| 501 thumb.classList.add('failed-img'); | 452 thumb.classList.add('failed-img'); |
| 502 thumb.removeChild(img); | 453 thumb.removeChild(img); |
| 503 }); | 454 }); |
| 504 thumb.appendChild(img); | 455 thumb.appendChild(img); |
| 505 | 456 |
| 506 if (data.thumbnailUrl) { | |
| 507 img.src = data.thumbnailUrl; | |
| 508 } else { | |
| 509 // Get all thumbnailUrls for the tile. | |
| 510 // They are ordered from best one to be used to worst. | |
| 511 for (var i = 0; i < data.thumbnailUrls.length; ++i) { | |
| 512 results.push(null); | |
| 513 } | |
| 514 for (var i = 0; i < data.thumbnailUrls.length; ++i) { | |
| 515 if (data.thumbnailUrls[i]) { | |
| 516 var image = new Image(); | |
| 517 image.src = data.thumbnailUrls[i]; | |
| 518 image.onload = imageLoaded(i, data.thumbnailUrls[i]); | |
| 519 image.onerror = imageLoadFailed(i); | |
| 520 } else { | |
| 521 imageLoadFailed(i)(/*ev=*/null); | |
| 522 } | |
| 523 } | |
| 524 } | |
| 525 | |
| 526 var favicon = tile.querySelector('.mv-favicon'); | 457 var favicon = tile.querySelector('.mv-favicon'); |
| 527 if (data.faviconUrl) { | 458 if (data.faviconUrl) { |
| 528 var fi = document.createElement('img'); | 459 var fi = document.createElement('img'); |
| 529 fi.src = data.faviconUrl; | 460 fi.src = data.faviconUrl; |
| 530 // Set the title to empty so screen readers won't say the image name. | 461 // Set the title to empty so screen readers won't say the image name. |
| 531 fi.title = ''; | 462 fi.title = ''; |
| 532 loadedCounter += 1; | 463 loadedCounter += 1; |
| 533 fi.addEventListener('load', countLoad); | 464 fi.addEventListener('load', countLoad); |
| 534 fi.addEventListener('error', countLoad); | 465 fi.addEventListener('error', countLoad); |
| 535 fi.addEventListener('error', function(ev) { | 466 fi.addEventListener('error', function(ev) { |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 582 var html = document.querySelector('html'); | 513 var html = document.querySelector('html'); |
| 583 html.dir = 'rtl'; | 514 html.dir = 'rtl'; |
| 584 } | 515 } |
| 585 | 516 |
| 586 window.addEventListener('message', handlePostMessage); | 517 window.addEventListener('message', handlePostMessage); |
| 587 }; | 518 }; |
| 588 | 519 |
| 589 | 520 |
| 590 window.addEventListener('DOMContentLoaded', init); | 521 window.addEventListener('DOMContentLoaded', init); |
| 591 })(); | 522 })(); |
| OLD | NEW |