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-lightbox: Better resource scheduling for scrollable lightbox #12751

Merged
merged 2 commits into from Jan 10, 2018

Conversation

aghassemi
Copy link
Contributor

@aghassemi aghassemi commented Jan 10, 2018

Fixes #12685

Temporary solution for high priority #12685. Layers will fix all the crazyness here.

Previous solution had the following bugs:

  • Ignored new children added dynamically via amp-list
  • Only monitored visibility of immediate children.
  • offsetTop calculation were wrong and only worked when there was no other offsetParent
  • Only layedout when child was fully visible which means user would see loading state in all case. New approach allows 2x lightboxHeight margin and prelayouts better.

(Unfortunately all the problems above also exist for scrollable version of amp-carousel. Given layers is the right solution and there hasn't been a high priority need, I don't recommend porting these to amp-carousel)

@aghassemi
Copy link
Contributor Author

@erwinmombay Can we wait to get this into Canary if not cut yet?

Copy link

@dreamofabear dreamofabear left a comment

Choose a reason for hiding this comment

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

Just one question. Can we follow up with tests?

// Check whether child element is visible in the lightbox given
const descendants = this.getComponentDescendants_();
for (let i = 0; i < descendants.length; i++) {
const child = descendants[i];

Choose a reason for hiding this comment

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

Nit: s/child/descendant

const child = descendants[i];
let offsetTop = 0;
for (let n = child; n && this.element.contains(n);
n = n./*OK*/offsetParent) {

Choose a reason for hiding this comment

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

Nit: Formatting.

for (let n = child; 
    n && this.element.contains(n);
    n = n./*OK*/offsetParent) {
  offsetTop += n./*OK*/offsetTop;
}


this.element.addEventListener(AmpEvents.DOM_UPDATE, () => {
this.takeOwnershipOfDescendants_();
this.updateChildrenInViewport_(this.pos_, this.pos_);

Choose a reason for hiding this comment

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

This means we won't call updateInViewport for new children. WAI?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We would, on debounced scroll we also calculate visible children and call scheduleLayout and updateInViewport on them.

@aghassemi
Copy link
Contributor Author

@choumx Thanks. There are currently 0 tests for lightbox :( I will send a PR with some integrations tests this sprint #12759

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

amp-img not showing when inside a lightbox and outside of viewport initially
4 participants