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

♿ 🐛 Show Carousel control button when mouse is detected #30765

Merged
merged 3 commits into from
Oct 23, 2020

Conversation

zhouyx
Copy link
Contributor

@zhouyx zhouyx commented Oct 20, 2020

Closes #29560

@zhouyx
Copy link
Contributor Author

zhouyx commented Oct 20, 2020

I couldn't find a related test. Open to test ideas.

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.

Thanks for making this contribution, LGTM!

For testing, touch is not yet supported in e2e -- this thread also discusses this, though I'm not sure this counts as a unique use case since this and the previous conversation came up from testing carousel's hidden controls feature. I'm not sure if visual-diff tests support this, but that would also be a good route for confirming whether or not the buttons are there.

In the mean time, a unit test should be sufficient. I'd recommend looking at test/unit/test-input.js for firing the onMouseDetected states and checking the classes accordingly.

For manual testing, there is also the test procedures outlined in the original issue. :)

@@ -193,6 +200,21 @@ class AmpCarousel extends AMP.BaseElement {
// Need to wait for slides to exist first.
this.carousel_.goToSlide(Number(this.element.getAttribute('slide') || '0'));
// Signal for runtime to check children for layout.

if (
isAmp4Email(this.element.ownerDocument) ||
Copy link
Contributor

Choose a reason for hiding this comment

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

amp-carousel:0.2 is not allowed in email yet, so this check is not necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah! that explains, I was wonder why we didn't have the check here : )

* Whether to show control buttons
* @private {boolean}
*/
this.alwaysShowControls_ = false;
Copy link
Contributor

Choose a reason for hiding this comment

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

suggestion: We can name this showControls instead of alwaysShowControls, since it can change

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

@CLAassistant
Copy link

CLAassistant commented Oct 22, 2020

CLA assistant check
All committers have signed the CLA.

Copy link
Collaborator

@estherkim estherkim left a comment

Choose a reason for hiding this comment

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

✅ bundle size

@zhouyx zhouyx merged commit 222af60 into ampproject:master Oct 23, 2020
@zhouyx zhouyx deleted the carousel-control branch October 23, 2020 18:30
@zhouyx
Copy link
Contributor Author

zhouyx commented Oct 23, 2020

The unit test requires me to mock too much events and is not very helpful imho. If possible I agree visual diff test would be helpful, but it would still require us to fake the mousemove and also touch event. Tested manually

ed-bird pushed a commit to ed-bird/amphtml that referenced this pull request Dec 10, 2020
…0765)

* show carousel control buttons when mouse event detected

* show carousel control buttons when mouse is detected

* recommend changes
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-carousel: No indication of focus (hidden controls)
5 participants