| @@ -346,10 +346,8 @@ | ||
| 346 | 346 | |
| 347 | 347 | // Restore widgets to initial unloaded state when they are scrolled out of view. |
| 348 | 348 | jetpackUnloadScrolledOutWidgets(); |
| 349 | 349 | |
| 350 | - jetpackObserveUnloadedWidgets(); | |
| 351 | - | |
| 352 | 350 | var unloadedWidgetsInView = jetpackGetUnloadedWidgetsInView(); |
| 353 | 351 | |
| 354 | 352 | if ( unloadedWidgetsInView.length > 0 ) { |
| 355 | 353 | // Grab any unloaded widgets for a batch request |
| @@ -413,26 +411,13 @@ | ||
| 413 | 411 | wrapper.classList.remove( 'jetpack-likes-widget-unloaded' ); |
| 414 | 412 | wrapper.classList.add( 'jetpack-likes-widget-loading' ); |
| 415 | 413 | |
| 416 | 414 | wrapper.querySelector( 'iframe' ).addEventListener( 'load', e => { |
| 417 | - // A widget scrolled out of view mid-load has its iframe dropped, and a reloaded one | |
| 418 | - // replaces it, either of which leaves this closure holding a detached iframe. Acting on | |
| 419 | - // it would hide a placeholder that is now the only thing the widget has left to show. | |
| 420 | - if ( ! wrapper.contains( e.target ) ) { | |
| 421 | - return; | |
| 422 | - } | |
| 423 | - | |
| 424 | 415 | JetpackLikesPostMessage( |
| 425 | 416 | { event: 'loadLikeWidget', name: e.target.name, width: e.target.width }, |
| 426 | 417 | window.frames[ 'likes-master' ] |
| 427 | 418 | ); |
| 428 | 419 | |
| 429 | - // The stylesheet is otherwise the only thing that hides the placeholder, so one that never | |
| 430 | - // applies leaves "Loading…" sitting over a widget that loaded fine. | |
| 431 | - if ( placeholder ) { | |
| 432 | - placeholder.style.display = 'none'; | |
| 433 | - } | |
| 434 | - | |
| 435 | 420 | wrapper.classList.remove( 'jetpack-likes-widget-loading' ); |
| 436 | 421 | wrapper.classList.add( 'jetpack-likes-widget-loaded' ); |
| 437 | 422 | } ); |
| 438 | 423 | } |
| @@ -466,16 +451,8 @@ | ||
| 466 | 451 | widgetWrapper.classList.remove( 'jetpack-likes-widget-loaded' ); |
| 467 | 452 | widgetWrapper.classList.remove( 'jetpack-likes-widget-loading' ); |
| 468 | 453 | widgetWrapper.classList.add( 'jetpack-likes-widget-unloaded' ); |
| 469 | 454 | |
| 470 | - // An empty string removes the inline declaration rather than setting one, handing the | |
| 471 | - // placeholder back to the stylesheet. The `display: none` set on load would otherwise | |
| 472 | - // outrank it, leaving an unloaded widget with neither an iframe nor a placeholder. | |
| 473 | - const placeholder = widgetWrapper.querySelector( '.likes-widget-placeholder' ); | |
| 474 | - if ( placeholder ) { | |
| 475 | - placeholder.style.display = ''; | |
| 476 | - } | |
| 477 | - | |
| 478 | 455 | // Remove it from the list of loaded widgets. |
| 479 | 456 | jetpackCommentLikesLoadedWidgets.splice( i, 1 ); |
| 480 | 457 | |
| 481 | 458 | // Remove comment like widget iFrame. |
| @@ -492,33 +469,8 @@ | ||
| 492 | 469 | }; |
| 493 | 470 | }; |
| 494 | 471 | |
| 495 | 472 | var jetpackOnScrollStopped = jetpackWidgetsDelayedExec( 250, JetpackLikesWidgetQueueHandler ); |
| 496 | - | |
| 497 | -// Scrolling is not the only thing that brings a widget into range. A stylesheet that lands late | |
| 498 | -// reflows the page without firing a scroll event, and the queue would never look at that widget | |
| 499 | -// again, leaving it on "Loading…" until the reader happens to scroll. | |
| 500 | -var jetpackLikesWidgetObserver = | |
| 501 | - typeof IntersectionObserver === 'function' | |
| 502 | - ? new IntersectionObserver( jetpackOnScrollStopped, { | |
| 503 | - rootMargin: `${ jetpackLikesLookAhead }px`, | |
| 504 | - // jetpackIsScrolledIntoView() wants the widget fully inside the band, so ask to be | |
| 505 | - // told when it gets there - crossing into partial overlap alone would not load it. | |
| 506 | - threshold: [ 0, 1 ], | |
| 507 | - } ) | |
| 508 | - : null; | |
| 509 | - | |
| 510 | -// Observing an element twice is a no-op, so every queue pass can call this to pick up widgets | |
| 511 | -// added after load. | |
| 512 | -function jetpackObserveUnloadedWidgets() { | |
| 513 | - if ( ! jetpackLikesWidgetObserver ) { | |
| 514 | - return; | |
| 515 | - } | |
| 516 | - | |
| 517 | - document | |
| 518 | - .querySelectorAll( 'div.jetpack-likes-widget-unloaded' ) | |
| 519 | - .forEach( widget => jetpackLikesWidgetObserver.observe( widget ) ); | |
| 520 | -} | |
| 521 | 473 | |
| 522 | 474 | // Load initial batch of widgets, prior to any scrolling events. |
| 523 | 475 | JetpackLikesWidgetQueueHandler(); |
| 524 | 476 | |
