ampproject · Enriqe · Jan 28, 2020 · Jan 17, 2020 · Jan 10, 2020 · Jan 14, 2020
diff --git a/build-system/compile/sources.js b/build-system/compile/sources.js
@@ -49,6 +49,8 @@ const COMMON_GLOBS = [
   'node_modules/web-activities/activity-ports.js',
   'node_modules/@ampproject/animations/package.json',
   'node_modules/@ampproject/animations/dist/animations.mjs',
+  'node_modules/@ampproject/viewer-messaging/package.json',
+  'node_modules/@ampproject/viewer-messaging/messaging.js',
   'node_modules/@ampproject/worker-dom/package.json',
   'node_modules/@ampproject/worker-dom/dist/amp/main.mjs',
   'node_modules/preact/package.json',

diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
@@ -366,6 +366,7 @@ const forbiddenTerms = {
       'src/service/navigation.js',
       'src/service/url-impl.js',
       'dist.3p/current/integration.js',
+      'src/amp-story-embed.js',
     ],
   },
   '\\.sendMessage\\(': {

diff --git a/examples/amp-story/embed.html b/examples/amp-story/embed.html
@@ -6,14 +6,18 @@
       body {
         font-family: sans-serif;
       }
+      amp-story-embed {
+        position: absolute;
+        top: 3000px;
+      }
     </style>
     <style injected>
       .amp-story-embed {
         width: 405px;
         height: 720px;
       }
 
-      .story {
+      .story-embed-iframe {
         background-size: cover;
         display: block;
         position: relative;
@@ -40,26 +44,26 @@
   <body>
     <h1>This is a NON-AMP page that embeds a story below:</h1>
     <amp-story-embed>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in New York City</span>
-      </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in Miami</span>
-      </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
-      </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
-          data-poster-portrait-src="https://washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-do-and-eat-in-rome/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in Rome</span>
-      </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Miami</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-do-and-eat-in-rome/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Rome</span>
+        </a>
     </amp-story-embed>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@ampproject/animations": "0.2.0",
     "@ampproject/worker-dom": "0.23.2",
+    "@ampproject/viewer-messaging": "1.1.0",
     "dompurify": "2.0.7",
     "moment": "2.24.0",
     "preact": "10.2.1",

diff --git a/src/OWNERS b/src/OWNERS
@@ -15,7 +15,7 @@
       owners: [{name: 'ampproject/wg-analytics'}],
     },
     {
-      pattern: 'amp-story-embed.js',
+      pattern: '{amp-story-embed,amp-story-embed-manager}.js',
       owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}],
     },
   ],

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {AmpStoryEmbed} from './amp-story-embed';
+
+/** @const {string} */
+const SCROLL_THROTTLE_MS = 500;
+
+export class AmpStoryEmbedManager {
+  /**
+   * @param {!Window} win
+   * @constructor
+   */
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
+  }
+
+  /**
+   * Calls layoutCallback on the embed when it is close to the viewport.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @private
+   */
+  layoutEmbed_(embedImpl) {
+    if (!IntersectionObserver || this.win_ !== this.win_.parent) {
+      this.layoutFallback_(embedImpl);
+      return;
+    }
+
+    const intersectingCallback = entries => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+        embedImpl.layoutCallback();
+      });
+    };
+
+    const observer = new IntersectionObserver(intersectingCallback, {
+      rootMargin: '100%',
+    });
+    observer.observe(embedImpl.getElement());
+  }
+
+  /**
+   * Fallback for when IntersectionObserver is not supported. Calls
+   * layoutCallback on the embed when it is close to the viewport.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @private
+   */
+  layoutFallback_(embedImpl) {
+    let tick = true;
+
+    // TODO(Enriqe): pause embeds when scrolling away from viewport.
+    this.win_.addEventListener('scroll', () => {
+      if (!tick) {
+        return;
+      }
+
+      setTimeout(() => {
+        tick = true;
+
+        this.layoutIfVisible_(embedImpl);
+      }, SCROLL_THROTTLE_MS);
+
+      tick = false;
+    });
+
+    // Calls it once it in case scroll event never fires.
+    this.layoutIfVisible_(embedImpl);
+  }
+
+  /**
+   * Checks if embed is close to the viewport and calls layoutCallback when it
+   * is.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @private
+   */
+  layoutIfVisible_(embedImpl) {
+    const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
+    if (this.win_./*OK*/ innerHeight * 2 > embedTop) {
+      embedImpl.layoutCallback();
+    }
+  }
+
+  /**
+   * Builds and layouts the embeds when appropiate.
+   * @public
+   */
+  loadEmbeds() {
+    const doc = this.win_.document;
+    const embeds = doc.getElementsByTagName('amp-story-embed');
+    for (let i = 0; i < embeds.length; i++) {
+      const embedEl = embeds[i];
+      const embed = new AmpStoryEmbed(this.win_, embedEl);
+      embed.buildCallback();
+      this.layoutEmbed_(embed);
+    }
+  }
+}