Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[amp-list] finalize amp-list-load-more DIY API + documentation #19519

Merged
merged 10 commits into from
Nov 30, 2018

Conversation

cathyxz
Copy link
Contributor

@cathyxz cathyxz commented Nov 29, 2018

A few changes based on a sync with @aghassemi today:

  1. A separate element for each of:
  • load-more-button
  • load-more-end
  • load-more-failed
  • load-more-loading
    Only one of these elements should ever be visible at any given time.
  1. load-more-end is optional and shows at the end of the list when we have no more items
  2. load-more-failed is now used to retry the failed url instead of overloading load-more-button with the same functionality.
  • [Please discuss] we previously talked about a retryable attribute for load-more-failed, but @andrewwatterson brought up the point that UX-wise, we might not ever want this item to be inactionable (it should always try to reload the previously failed data on click). I'm struggling to find a situation where that would not be the case.

Stacked PRs for templating / positioning coming shortly.

@ghost
Copy link

ghost commented Nov 29, 2018

This pull request introduces 1 alert when merging 9ec411e into 5e6c958 - view on LGTM.com

new alerts:

  • 1 for Syntax error

Comment posted by LGTM.com

@@ -296,18 +296,19 @@ This attribute specifies an attribute in the returned data that will give the ur
```

### Additional children of `<amp-list>`
Copy link
Contributor Author

@cathyxz cathyxz Nov 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's intended that we provide UX defaults for these, so when that happens these elements will no longer be mandatory. However, they are mandatory for now.
/cc @CrystalFaith

extensions/amp-list/0.1/amp-list.js Outdated Show resolved Hide resolved
getLoadMoreEndElement_() {
if (!this.loadMoreEndElement_) {
this.loadMoreEndElement_ = childElementByAttr(
this.element, 'load-more-end');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rules in amp.css needs to be updated for amp-list[load-more-end] as well.

I like to also make amp.css smaller, we should move the amp-list[load-more] > [load-more-*].amp-visible rules into an amp-list.css files as they can not be trigged until the extension has loaded anyway.

extensions/amp-list/0.1/amp-list.js Outdated Show resolved Hide resolved
extensions/amp-list/0.1/amp-list.js Show resolved Hide resolved
css/amp.css Show resolved Hide resolved
@cathyxz cathyxz self-assigned this Nov 29, 2018
@cathyxz
Copy link
Contributor Author

cathyxz commented Nov 29, 2018

Thank you @cvializ and @aghassemi for the review! Assigning this back to myself for now because I've somehow managed to break everything. I'll ping back here when it's ready for you to TAL.

@cathyxz cathyxz removed their assignment Nov 29, 2018
@cathyxz
Copy link
Contributor Author

cathyxz commented Nov 29, 2018

@cvializ @aghassemi PTAL?

css/amp.css Show resolved Hide resolved
css/amp.css Outdated Show resolved Hide resolved
Copy link
Contributor

@cvializ cvializ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

extensions/amp-list/0.1/amp-list.js Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants