Support display observer in the lightbox (#32701)

* Display observer in nested fixed overlays * Support display observer in the lightbox * cleanup * docs * fix types * minor * Combine observers and containers together * eager reset of container observations * shortcircuit
ampproject · Feb 22, 2021 · 6549bb8 · 6549bb8
1 parent aee80a6
commit 6549bb8
Show file tree

Hide file tree

Showing 4 changed files with 523 additions and 52 deletions.
diff --git a/examples/amp-lightbox.amp.html b/examples/amp-lightbox.amp.html
@@ -39,6 +39,7 @@
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 </head>
 <body class="comic-amp-font-loading">
 
@@ -76,6 +77,14 @@ <h2>Scrollable Lightbox</h2>
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
     </p>
+    <div style="height: 100vh;"></div>
+  <amp-video id="video1"
+    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+    width="358"
+    height="204"
+    layout="responsive"
+    controls>
+  </amp-video>
   </amp-lightbox>
 
   <button on="tap:lightbox-scrollable">

diff --git a/extensions/amp-lightbox/0.1/amp-lightbox.js b/extensions/amp-lightbox/0.1/amp-lightbox.js
@@ -39,6 +39,10 @@ import {dict, hasOwn} from '../../../src/utils/object';
 import {getMode} from '../../../src/mode';
 import {htmlFor} from '../../../src/static-template';
 import {isInFie} from '../../../src/iframe-helper';
+import {
+  registerContainer,
+  unregisterContainer,
+} from '../../../src/utils/display-observer';
 import {toArray} from '../../../src/types';
 import {tryFocus} from '../../../src/dom';
 
@@ -283,6 +287,7 @@ class AmpLightbox extends AMP.BaseElement {
       return;
     }
     this.initialize_();
+    registerContainer(this.element, this.container_);
     this.boundCloseOnEscape_ = /** @type {?function(this:AmpLightbox, Event)} */ (this.closeOnEscape_.bind(
       this
     ));
@@ -557,6 +562,7 @@ class AmpLightbox extends AMP.BaseElement {
     if (!this.active_) {
       return;
     }
+    unregisterContainer(this.element);
     if (this.isScrollable_) {
       setStyle(this.element, 'webkitOverflowScrolling', '');
     }