ampproject · caroqliu · Mar 20, 2020 · Feb 20, 2020 · Mar 4, 2020 · Mar 9, 2020
diff --git a/examples/amp-list-container.amp.html b/examples/amp-list-container.amp.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html ⚡>
+ <head>
+ <meta charset="utf-8" />
+ <script async src="https://cdn.ampproject.org/v0.js"></script>
+ <script
+ async
+ custom-element="amp-list"
+ src="https://cdn.ampproject.org/v0/amp-list-0.1.js"
+ ></script>
+ <script
+ async
+ custom-template="amp-mustache"
+ src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"
+ ></script>
+ <link
+ rel="canonical"
+ href="https://amp.dev/documentation/examples/components/amp-list/"
+ />
+ <meta
+ name="viewport"
+ content="width=device-width,minimum-scale=1,initial-scale=1"
+ />
+ <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
+ >
+ <style amp-custom>
+ body {
+ padding: 2em 2em 0em;
+ }
+ </style>
+ </head>
+ <body>
+ <button on="tap:list1.refresh">
+ Refresh List
+ </button>
+ <button on="tap:text.toggleVisibility">
+ Toggle text
+ </button>
+ <h3>amp-list with layout="container"</h3>
+ <amp-list
+ id="list1"
+ layout="container"
+ src="list.example.json"
+ class="m1"
+ reset-on-refresh
+ >
+ <div placeholder>
+ <div role="listitem">
+ <a target="_top" href="http://localhost:8000/components/amp-img/"
+ >amp-img</a
+ >
+ </div>
+ <div role="listitem">
+ <a
+ target="_top"
+ href="http://localhost:8000/components/amp-accordion/"
+ >amp-accordion</a
+ >
+ </div>
+ </div>
+ <template type="amp-mustache" id="amp-template-id">
+ <div><a href="{{url}}">{{title}}</a></div>
+ </template>
+ </amp-list>
+
+ <p id="text">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel quam
+ eu turpis eleifend pretium. Aenean sagittis, leo ac congue mattis, est
+ nisl accumsan eros, sit amet suscipit massa lectus non nibh. In justo
+ libero, ultricies sed tristique vel, tincidunt non nulla. Pellentesque vel
+ pharetra risus. Donec tempus tortor at est vulputate ultrices. Quisque
+ sagittis pretium facilisis. Aliquam dignissim dapibus nibh sed bibendum.
+ Phasellus et nulla pulvinar, placerat sapien ac, vehicula mauris. Mauris
+ efficitur quis orci sed convallis. Maecenas ut nibh placerat, gravida
+ risus eu, tincidunt diam. Vivamus vitae mauris interdum, iaculis nisi
+ eget, vulputate lectus. Maecenas condimentum risus eu sapien molestie
+ sollicitudin. Fusce lobortis purus at fringilla imperdiet. Duis non orci
+ ultricies, vulputate urna sit amet, euismod velit. Vivamus tempor, nisi
+ vitae suscipit dignissim, risus lacus imperdiet risus, et mattis leo massa
+ nec erat. Nulla cursus a leo a dapibus. Nullam dapibus est ut condimentum
+ iaculis. Sed mollis lorem at sagittis dignissim. Donec euismod urna nec
+ ligula rhoncus dapibus ullamcorper at erat. Curabitur nec quam vitae nisi
+ efficitur tincidunt. Aliquam molestie turpis eget risus molestie, non
+ cursus metus cursus. Nullam diam nisl, tincidunt viverra luctus id, mattis
+ sed dui. Integer egestas, nunc eu hendrerit tristique, est magna cursus
+ ex, nec gravida elit magna sit amet neque. Pellentesque luctus leo sed
+ purus blandit malesuada et eu magna. Praesent molestie dolor diam, at
+ finibus purus efficitur ullamcorper. Mauris sit amet neque sapien. Nunc
+ tincidunt velit id nisl eleifend, a imperdiet ligula sagittis.
+ </p>
+ </body>
+</html>
diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
@@ -24,12 +24,7 @@ import {
  markElementForDiffing,
 } from '../../../src/purifier/sanitation';
 import {Deferred} from '../../../src/utils/promise';
-import {
- Layout,
- getLayoutClass,
- isLayoutSizeDefined,
- parseLayout,
-} from '../../../src/layout';
+import {Layout, getLayoutClass, parseLayout} from '../../../src/layout';
 import {LoadMoreService} from './service/load-more-service';
 import {Pass} from '../../../src/pass';
 import {Services} from '../../../src/services';
@@ -61,7 +56,7 @@ import {
 } from '../../../src/utils/xhr-utils';
 import {isArray, toArray} from '../../../src/types';
 import {isExperimentOn} from '../../../src/experiments';
-import {px, setStyles, toggle} from '../../../src/style';
+import {px, setImportantStyles, setStyles, toggle} from '../../../src/style';
 import {setDOM} from '../../../third_party/set-dom/set-dom';
 import {startsWith} from '../../../src/string';
 
@@ -130,6 +125,9 @@ export class AmpList extends AMP.BaseElement {
  */
  this.layoutCompleted_ = false;
 
+ /** @private {boolean} */
+ this.isLayoutContainer_ = false;
+
  /**
  * The `src` attribute's initial value.
  * @private {?string}
@@ -177,7 +175,8 @@ export class AmpList extends AMP.BaseElement {
 
  /** @override */
  isLayoutSupported(layout) {
- return isLayoutSizeDefined(layout);
+ this.isLayoutContainer_ = layout === Layout.CONTAINER;
+ return true;
  }
 
  /** @override */
@@ -426,6 +425,7 @@ export class AmpList extends AMP.BaseElement {
 
  const isLayoutContainer = mutations['is-layout-container'];
  if (isLayoutContainer) {
+ this.isLayoutContainer_ = true;
  this.changeToLayoutContainer_();
  }
 
@@ -455,7 +455,7 @@ export class AmpList extends AMP.BaseElement {
  // In the load-more case, we allow the container to be height auto
  // in order to reasonably make space for the load-more button and
  // load-more related UI elements underneath.
- if (!this.loadMoreEnabled_) {
+ if (!this.loadMoreEnabled_ && !this.isLayoutContainer_) {
  this.applyFillContent(container, true);
  }
  return container;
@@ -514,24 +514,33 @@ export class AmpList extends AMP.BaseElement {
  (isFetch && this.element.hasAttribute('reset-on-refresh')) ||
  this.element.getAttribute('reset-on-refresh') === 'always'
  ) {
- // Placeholder and loading don't need a mutate context.
- this.togglePlaceholder(true);
- this.toggleLoading(true, /* opt_force */ true);
- this.mutateElement(() => {
- this.toggleFallback_(false);
- // Clean up bindings in children before removing them from DOM.
- if (this.bind_) {
- const removed = toArray(this.container_.children);
- this.bind_.rescan(/* added */ [], removed, {
- 'fast': true,
- 'update': false,
+ let currentHeight;
+ this.measureMutateElement(
+ () => {
+ currentHeight = this.element./*OK*/ offsetHeight;
+ },
+ () => {
+ setImportantStyles(this.element, {
+ 'height': `${currentHeight}px`,
+ 'overflow': 'hidden',
  });
+ this.togglePlaceholder(true);
+ this.toggleLoading(true, /* opt_force */ true);
+ this.toggleFallback_(false);
+ // Clean up bindings in children before removing them from DOM.
+ if (this.bind_) {
+ const removed = toArray(this.container_.children);
+ this.bind_.rescan(/* added */ [], removed, {
+ 'fast': true,
+ 'update': false,
+ });
+ }
+ removeChildren(dev().assertElement(this.container_));
+ if (this.loadMoreEnabled_) {
+ this.getLoadMoreService_().hideAllLoadMoreElements();
+ }
  }
- removeChildren(dev().assertElement(this.container_));
- if (this.loadMoreEnabled_) {
- this.getLoadMoreService_().hideAllLoadMoreElements();
- }
- });
+ );
  }
  }
 
@@ -956,35 +965,51 @@ export class AmpList extends AMP.BaseElement {
  dev().info(TAG, 'render:', this.element, elements);
  const container = dev().assertElement(this.container_);
 
- return this.mutateElement(() => {
- this.hideFallbackAndPlaceholder_();
-
- if (this.element.hasAttribute('diffable') && container.hasChildNodes()) {
- this.diff_(container, elements);
- } else {
- if (!opt_append) {
- removeChildren(container);
- }
- this.addElementsToContainer_(elements, container);
- }
+ let currentHeight;
+ return this.measureMutateElement(
+ () => {
+ currentHeight = this.element./*OK*/ offsetHeight;
+ },
+ () => {
+ setImportantStyles(this.element, {
+ 'height': `${currentHeight}px`,
+ 'overflow': 'hidden',
+ });
 
- const event = createCustomEvent(
- this.win,
- AmpEvents.DOM_UPDATE,
- /* detail */ null,
- {bubbles: true}
- );
- this.container_.dispatchEvent(event);
+ this.hideFallbackAndPlaceholder_();
 
- // Now that new contents have been rendered, clear pending size requests
- // from previous calls to attemptToFit_(). Rejected size requests are
- // saved as "pending" and are fulfilled later on 'focus' event.
- // See resources-impl.checkPendingChangeSize_().
- const r = this.element.getResources().getResourceForElement(this.element);
- r.resetPendingChangeSize();
+ if (
+ this.element.hasAttribute('diffable') &&
+ container.hasChildNodes()
+ ) {
+ this.diff_(container, elements);
+ } else {
+ if (!opt_append) {
+ removeChildren(container);
+ }
+ this.addElementsToContainer_(elements, container);
+ }
 
- this.maybeResizeListToFitItems_();
- });
+ const event = createCustomEvent(
+ this.win,
+ AmpEvents.DOM_UPDATE,
+ /* detail */ null,
+ {bubbles: true}
+ );
+ this.container_.dispatchEvent(event);
+
+ // Now that new contents have been rendered, clear pending size requests
+ // from previous calls to attemptToFit_(). Rejected size requests are
+ // saved as "pending" and are fulfilled later on 'focus' event.
+ // See resources-impl.checkPendingChangeSize_().
+ const r = this.element
+ .getResources()
+ .getResourceForElement(this.element);
+ r.resetPendingChangeSize();
+
+ this.maybeResizeListToFitItems_();
+ }
+ );
  }
 
  /**
@@ -1092,14 +1117,22 @@ export class AmpList extends AMP.BaseElement {
  * @private
  */
  attemptToFit_(target) {
- if (this.element.getAttribute('layout') == Layout.CONTAINER) {
- return;
- }
  this.measureElement(() => {
  const targetHeight = target./*OK*/ scrollHeight;
  const height = this.element./*OK*/ offsetHeight;
  if (targetHeight > height) {
- this.attemptChangeHeight(targetHeight).catch(() => {});
+ this.attemptChangeHeight(targetHeight).then(
+ () => {
+ if (!this.isLayoutContainer_) {
+ return;
+ }
+ setImportantStyles(this.element, {
+ 'height': '',
+ 'overflow': '',
+ });
+ },
+ () => {}
+ );
  }
  });
  }
@@ -1110,6 +1143,9 @@ export class AmpList extends AMP.BaseElement {
  * @private
  */
  attemptToFitLoadMore_(target) {
+ if (this.isLayoutContainer_) {
+ return;
+ }
  const element = !!this.loadMoreSrc_
  ? this.getLoadMoreService_().getLoadMoreButton()
  : this.getLoadMoreService_().getLoadMoreEndElement();
@@ -1122,9 +1158,6 @@ export class AmpList extends AMP.BaseElement {
  * @private
  */
  attemptToFitLoadMoreElement_(element, target) {
- if (this.element.getAttribute('layout') == Layout.CONTAINER) {
- return;
- }
  this.measureElement(() => {
  const targetHeight = target./*OK*/ scrollHeight;
  const height = this.element./*OK*/ offsetHeight;