Skip to content

Commit 9c57fd8

Browse files
emarchioriaghassemi
authored andcommitted
✨ Document-level infinite-scroll (#12945): Adds support for a separator that is attached in-between pages. (#14465)
1 parent 38087e8 commit 9c57fd8

File tree

4 files changed

+43
-7
lines changed

4 files changed

+43
-7
lines changed

examples/amp-document-recommendations.amp.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@ <h2>Content discovery</h2>
105105
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.
106106
</p>
107107
<amp-document-recommendations>
108+
<div separator>
109+
READ ANOTHER ARTICLE FROM OUR SITE!
110+
</div>
108111
<script type='application/json'>
109112
{
110113
"recommendations": [

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
background: #FFFFFF;
3232
}
3333

34+
.i-amphtml-document-recommendations > *[separator] {
35+
display: none;
36+
}
37+
3438
.i-amphtml-reco-holder-article {
3539
padding-top: 10px;
3640
padding-bottom: 10px;

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

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,16 @@ import {
2222
} from '../../../src/service/position-observer/position-observer-worker';
2323
import {Services} from '../../../src/services';
2424
import {assertConfig} from './config';
25+
import {
26+
childElementsByAttr,
27+
childElementsByTag,
28+
isJsonScriptTag,
29+
} from '../../../src/dom';
2530
import {getServiceForDoc} from '../../../src/service';
2631
import {
2732
installPositionObserverServiceForDoc,
2833
} from '../../../src/service/position-observer/position-observer-impl';
2934
import {isExperimentOn} from '../../../src/experiments';
30-
import {isJsonScriptTag} from '../../../src/dom';
3135
import {parseUrl} from '../../../src/url';
3236
import {setStyle} from '../../../src/style';
3337
import {tryParseJson} from '../../../src/json';
@@ -81,6 +85,9 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
8185
/** @private {number} */
8286
this.nextArticle_ = 0;
8387

88+
/** @private {Element} */
89+
this.separator_ = null;
90+
8491
/** @private @const {!../../../src/service/viewer-impl.Viewer} */
8592
this.viewer_ = Services.viewerForDoc(ampDoc);
8693

@@ -196,6 +203,12 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
196203
amp =
197204
this.multidocManager_.attachShadowDoc(shadowRoot, doc, '', {});
198205

206+
if (this.separator_) {
207+
const separatorClone = this.separator_.cloneNode(true);
208+
separatorClone.removeAttribute('separator');
209+
this.element.appendChild(separatorClone);
210+
}
211+
199212
this.element.appendChild(shadowRoot);
200213
this.element.appendChild(this.createDivider_());
201214
this.appendArticleLinks_(this.nextArticle_ + 1);
@@ -226,14 +239,13 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
226239

227240
// TODO(peterjosling): Read config from another source.
228241

229-
const children = this.element.children;
230-
user().assert(children.length == 1,
231-
'The tag should contain exactly one <script> child.');
232-
const scriptElement = children[0];
242+
const scriptElements = childElementsByTag(this.element, 'SCRIPT');
243+
user().assert(scriptElements.length == 1,
244+
`${TAG} should contain only one <script> child.`);
245+
const scriptElement = scriptElements[0];
233246
user().assert(isJsonScriptTag(scriptElement),
234-
'The amp-document-recommendations config should ' +
247+
`${TAG} config should ` +
235248
'be inside a <script> tag with type="application/json"');
236-
237249
const configJson = tryParseJson(scriptElement.textContent, error => {
238250
throw user().createError(
239251
'failed to parse content discovery script', error);
@@ -243,6 +255,14 @@ export class AmpDocumentRecommendations extends AMP.BaseElement {
243255
const host = parseUrl(docInfo.sourceUrl).host;
244256
this.config_ = assertConfig(configJson, host);
245257

258+
const separatorElements = childElementsByAttr(this.element, 'separator');
259+
user().assert(separatorElements.length <= 1,
260+
`${TAG} should contain at most one <div separator> child`);
261+
262+
if (separatorElements.length == 1) {
263+
this.separator_ = separatorElements[0];
264+
}
265+
246266
this.mutateElement(() => {
247267
this.element.appendChild(this.createDivider_());
248268
this.appendArticleLinks_(this.nextArticle_ + 1);

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ tags: { # amp-document-recommendations: json config
3636
}
3737
spec_url: "https://www.ampproject.org/docs/reference/components/amp-document-recommendations"
3838
}
39+
tags: {
40+
tag_name: "DIV"
41+
spec_name: "AMP-DOCUMENT-RECOMMENDATIONS > DIV [separator]"
42+
mandatory_parent: "AMP-DOCUMENT-RECOMMENDATIONS"
43+
attrs: {
44+
name: "separator"
45+
mandatory: true
46+
}
47+
}
3948
tags: { # <amp-document-recommendations>
4049
html_format: AMP
4150
tag_name: "AMP-DOCUMENT-RECOMMENDATIONS"

0 commit comments

Comments
 (0)