✨ Document-level infinite-scroll (#12945): Adds support for a separator that is attached in-between pages. (#14465)

Author: emarchiori

examples/amp-document-recommendations.amp.html

@@ -105,6 +105,9 @@ <h2>Content discovery</h2>
 Donec vehicula nisi eget metus blandit, at semper nunc porttitor. Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin felis, ut dapibus  orci ipsum quis leo. Nam accumsan tortor sit amet orci gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit rhoncus. Fusce commodo risus id sapien ultrices vehicula.
 </p>
   <amp-document-recommendations>
+    <div separator>
+        READ ANOTHER ARTICLE FROM OUR SITE!
+    </div>
     <script type='application/json'>
       {
         "recommendations": [

extensions/amp-document-recommendations/0.1/amp-document-recommendations.css

@@ -31,6 +31,10 @@
   background: #FFFFFF;
 }
 
+.i-amphtml-document-recommendations > *[separator] {
+  display: none;
+}
+
 .i-amphtml-reco-holder-article {
   padding-top: 10px;
   padding-bottom: 10px;

extensions/amp-document-recommendations/0.1/amp-document-recommendations.js

@@ -22,12 +22,16 @@ import {
 } from '../../../src/service/position-observer/position-observer-worker';
 import {Services} from '../../../src/services';
 import {assertConfig} from './config';
+import {
+  childElementsByAttr,
+  childElementsByTag,
+  isJsonScriptTag,
+} from '../../../src/dom';
 import {getServiceForDoc} from '../../../src/service';
 import {
   installPositionObserverServiceForDoc,
 } from '../../../src/service/position-observer/position-observer-impl';
 import {isExperimentOn} from '../../../src/experiments';
-import {isJsonScriptTag} from '../../../src/dom';
 import {parseUrl} from '../../../src/url';
 import {setStyle} from '../../../src/style';
 import {tryParseJson} from '../../../src/json';
@@ -81,6 +85,9 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
     /** @private {number} */
     this.nextArticle_ = 0;
 
+    /** @private {Element} */
+    this.separator_ = null;
+
     /** @private @const {!../../../src/service/viewer-impl.Viewer} */
     this.viewer_ = Services.viewerForDoc(ampDoc);
 
@@ -196,6 +203,12 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
             amp =
                 this.multidocManager_.attachShadowDoc(shadowRoot, doc, '', {});
 
+            if (this.separator_) {
+              const separatorClone = this.separator_.cloneNode(true);
+              separatorClone.removeAttribute('separator');
+              this.element.appendChild(separatorClone);
+            }
+
             this.element.appendChild(shadowRoot);
             this.element.appendChild(this.createDivider_());
             this.appendArticleLinks_(this.nextArticle_ + 1);
@@ -226,14 +239,13 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
 
     // TODO(peterjosling): Read config from another source.
 
-    const children = this.element.children;
-    user().assert(children.length == 1,
-        'The tag should contain exactly one <script> child.');
-    const scriptElement = children[0];
+    const scriptElements = childElementsByTag(this.element, 'SCRIPT');
+    user().assert(scriptElements.length == 1,
+        `${TAG} should contain only one <script> child.`);
+    const scriptElement = scriptElements[0];
     user().assert(isJsonScriptTag(scriptElement),
-        'The amp-document-recommendations config should ' +
+        `${TAG} config should ` +
             'be inside a <script> tag with type="application/json"');
-
     const configJson = tryParseJson(scriptElement.textContent, error => {
       throw user().createError(
           'failed to parse content discovery script', error);
@@ -243,6 +255,14 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
     const host = parseUrl(docInfo.sourceUrl).host;
     this.config_ = assertConfig(configJson, host);
 
+    const separatorElements = childElementsByAttr(this.element, 'separator');
+    user().assert(separatorElements.length <= 1,
+        `${TAG} should contain at most one <div separator> child`);
+
+    if (separatorElements.length == 1) {
+      this.separator_ = separatorElements[0];
+    }
+
     this.mutateElement(() => {
       this.element.appendChild(this.createDivider_());
       this.appendArticleLinks_(this.nextArticle_ + 1);

extensions/amp-document-recommendations/validator-amp-document-recommendations.protoascii

@@ -36,6 +36,15 @@ tags: {  # amp-document-recommendations: json config
   }
   spec_url: "https://www.ampproject.org/docs/reference/components/amp-document-recommendations"
 }
+tags: {
+  tag_name: "DIV"
+  spec_name: "AMP-DOCUMENT-RECOMMENDATIONS > DIV [separator]"
+  mandatory_parent: "AMP-DOCUMENT-RECOMMENDATIONS"
+  attrs: {
+    name: "separator"
+    mandatory: true
+  }
+}
 tags: {  # <amp-document-recommendations>
   html_format: AMP
   tag_name: "AMP-DOCUMENT-RECOMMENDATIONS"