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

* show carousel control buttons when mouse event detected * show carousel control buttons when mouse is detected * recommend changes
ampproject · Oct 23, 2020 · 222af60 · 222af60
1 parent b28bc6c
commit 222af60
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/extensions/amp-carousel/0.1/base-carousel.js b/extensions/amp-carousel/0.1/base-carousel.js
@@ -18,6 +18,8 @@ import {Services} from '../../../src/services';
 import {isAmp4Email} from '../../../src/format';
 import {toggleAttribute} from '../../../src/dom';
 
+const _CONTROL_HIDE_ATTRIBUTE = 'i-amphtml-carousel-hide-buttons';
+const _HAS_CONTROL_CLASS = 'i-amphtml-carousel-has-controls';
 /**
  * @abstract
  */
@@ -40,14 +42,24 @@ export class BaseCarousel extends AMP.BaseElement {
   buildCallback() {
     const input = Services.inputFor(this.win);
     const doc = /** @type {!Document} */ (this.element.ownerDocument);
-    this.showControls_ =
-      isAmp4Email(doc) ||
-      input.isMouseDetected() ||
-      this.element.hasAttribute('controls');
 
-    if (this.showControls_) {
-      this.element.classList.add('i-amphtml-carousel-has-controls');
+    if (isAmp4Email(doc) || this.element.hasAttribute('controls')) {
+      this.showControls_ = true;
+      this.element.classList.add(_HAS_CONTROL_CLASS);
+    } else {
+      input.onMouseDetected((mouseDetected) => {
+        if (mouseDetected) {
+          this.showControls_ = true;
+          toggleAttribute(
+            this.element,
+            _CONTROL_HIDE_ATTRIBUTE,
+            !this.showControls_
+          );
+          this.element.classList.add(_HAS_CONTROL_CLASS);
+        }
+      }, true);
     }
+
     this.buildCarousel();
     this.buildButtons();
     this.setupGestures();

diff --git a/extensions/amp-carousel/0.2/amp-carousel.js b/extensions/amp-carousel/0.2/amp-carousel.js
@@ -115,6 +115,12 @@ class AmpCarousel extends AMP.BaseElement {
 
     /** @private {?ChildLayoutManager} */
     this.childLayoutManager_ = null;
+
+    /**
+     * Whether to show control buttons
+     * @private {boolean}
+     */
+    this.showControls_ = false;
   }
 
   /** @override */
@@ -193,6 +199,18 @@ 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 (this.element.hasAttribute('controls')) {
+      this.showControls_ = true;
+    } else {
+      Services.inputFor(this.win).onMouseDetected((mouseDetected) => {
+        if (mouseDetected) {
+          this.showControls_ = true;
+          this.updateUi_();
+        }
+      }, true);
+    }
+
     return this.mutateElement(() => {});
   }
 
@@ -470,8 +488,7 @@ class AmpCarousel extends AMP.BaseElement {
    */
   updateUi_() {
     const index = this.carousel_.getCurrentIndex();
-    const bothDisabled =
-      this.hadTouch_ && !this.element.hasAttribute('controls');
+    const bothDisabled = this.hadTouch_ && !this.showControls_;
     const prevDisabled = bothDisabled || this.carousel_.isAtStart();
     const nextDisabled = bothDisabled || this.carousel_.isAtEnd();