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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 amp-base-carousel: Update offset and index together #30963

Merged
merged 2 commits into from Nov 3, 2020

Conversation

micajuine-ho
Copy link
Contributor

@micajuine-ho micajuine-ho commented Nov 3, 2020

Closes #30905

When the viewport is barely bigger than the carousel (on the scrolling axis), the scroll listener will not receive the final event that would set currentElementOffset_ and currentIndex_ to 0 and n+1 (instead it would be set at something like -0.998, n).

Then, when resetScrollReferencePoint_() is finally called, it will update currentIndex_ to the correct value, but leave currentElementOffset_ to be referencing the old index value.

// We are updating during a programmatic scroll, so go to the correct
// index.
if (this.requestedIndex_ !== null) {
this.currentIndex_ = this.requestedIndex_;
this.requestedIndex_ = null;
}

Then finally, when restoreScrollStart_() is called, deltaOffset will not be 0, due to actualOffset and currentElementOffset_ referencing 2 different elements (causing another shift in the carousel).

const deltaOffset = actualOffset - currentElementOffset_;

Copy link
Contributor

@kristoferbaxter kristoferbaxter left a comment

Choose a reason for hiding this comment

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

Looks good to me, leaving a comment to allow others to take a look too.


// Fake the scroll that ends short of the correct index.
// This is handled by scroll event listener.
carousel.touching_ = false;
Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for adding a comment here describing what the intent of these values are, nice touch!

describe('resetScrollReferencePoint_', () => {
it('currentElementOffset_ & currentIndex_ should be set when it is a' +
' programmatic scroll', async () => {
setStyle(element, 'width', '299.2px');
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this condition happen only when the element width is not floored?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No, this is actually unnecessary. I'll simplify.

Copy link
Contributor

@caroqliu caroqliu left a comment

Choose a reason for hiding this comment

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

Thank you!

@micajuine-ho micajuine-ho force-pushed the carouselFix branch 2 times, most recently from 372629c to e6fc9b3 Compare November 3, 2020 17:36
Copy link
Contributor

@dmanek dmanek left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks for adding e2e tests.

@micajuine-ho micajuine-ho merged commit de5a90e into ampproject:master Nov 3, 2020
ed-bird pushed a commit to ed-bird/amphtml that referenced this pull request Dec 10, 2020
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.

<amp-base-carousel>: buggy when advance-count = 1 and visible-count > 1
5 participants