Update bs-carousel and related components to Glimmer components (embe…

…r-bootstrap#2038) * Update bs-carousel and related components to Glimmer components * Address review feedback * Simplify bs-carousel `isMouseHovering` Co-authored-by: Jeldrik Hanschke <[email protected]> --------- Co-authored-by: Jeldrik Hanschke <[email protected]>
SanderKnauff · Dec 18, 2023 · 6888aa0 · 6888aa0
1 parent 3387959
commit 6888aa0
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 220 deletions.
diff --git a/addon/components/bs-carousel.hbs b/addon/components/bs-carousel.hbs
@@ -1,43 +1,47 @@
-<div
-  {{!-- template-lint-disable no-positive-tabindex --}}{{!-- @todo --}}
-  tabindex={{this.tabindex}}
-  class="carousel slide {{if this.carouselFade "carousel-fade"}}"
-  ...attributes
-  {{on "keydown" this.handleKeyDown}}
-  {{on "mouseenter" this.handleMouseEnter}}
-  {{on "mouseleave" this.handleMouseLeave}}
->
-  {{#if this.showIndicators}}
-    <ol class="carousel-indicators">
-      {{#each this.indicators as |indicator _index|}}
-        <li class={{if (bs-eq this.currentIndex _index) "active"}} {{on "click" (fn this.toSlide _index)}} role="button"></li>
-      {{/each}}
-    </ol>
-  {{/if}}
-
-  <div class="carousel-inner" role="listbox">
-    {{yield
-      (hash
-        slide=(component (ensure-safe-component (bs-default @slideComponent (component "bs-carousel/slide")))
-          currentSlide=this.currentSlide
-          directionalClassName=this.directionalClassName
-          followingSlide=this.followingSlide
-          orderClassName=this.orderClassName
-          presentationState=this.presentationState
-        )
-      )
-    }}
-  </div>
-
-  {{#if this.showControls}}
-    <a class="carousel-control-prev" href="#{{this.elementId}}" {{on "click" this.toPrevSlide}} role="button">
-      <span aria-hidden="true" class="carousel-control-prev-icon"></span>
-      <span class={{if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only"}}>{{this.prevControlLabel}}</span>
-    </a>
-    <a class="carousel-control-next" href="#{{this.elementId}}" {{on "click" this.toNextSlide}} role="button">
-      <span aria-hidden="true" class="carousel-control-next-icon"></span>
-      <span class={{if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only"}}>{{this.nextControlLabel}}</span>
-    </a>
-  {{/if}}
-
+<div
+  {{!-- template-lint-disable no-positive-tabindex --}}
+  tabindex={{this.tabindex}}
+  class="carousel slide {{if this.carouselFade "carousel-fade"}}"
+  ...attributes
+  {{on "keydown" this.handleKeyDown}}
+  {{on "mouseenter" this.handleMouseEnter}}
+  {{on "mouseleave" this.handleMouseLeave}}
+  {{did-update this.childSlidesObserver this.childSlides this.autoPlay}}
+  {{did-update this.indexObserver this.index}}
+>
+  {{#if this.showIndicators}}
+    <ol class="carousel-indicators">
+      {{#each this.indicators as |indicator _index|}}
+        <li class={{if (bs-eq this.currentIndex _index) "active"}} {{on "click" (fn this.toSlide _index)}} role="button"></li>
+      {{/each}}
+    </ol>
+  {{/if}}
+
+  <div class="carousel-inner" role="listbox">
+    {{yield
+      (hash
+        slide=(component (ensure-safe-component (bs-default @slideComponent (component "bs-carousel/slide")))
+          currentSlide=this.currentSlide
+          directionalClassName=this.directionalClassName
+          followingSlide=this.followingSlide
+          orderClassName=this.orderClassName
+          presentationState=this.presentationState
+          registerChild=this.registerChild
+          unregisterChild=this.unregisterChild
+        )
+      )
+    }}
+  </div>
+
+  {{#if this.showControls}}
+    <a class="carousel-control-prev" href="#{{this.elementId}}" {{on "click" this.toPrevSlide}} role="button">
+      <span aria-hidden="true" class="carousel-control-prev-icon"></span>
+      <span class={{if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only"}}>{{this.prevControlLabel}}</span>
+    </a>
+    <a class="carousel-control-next" href="#{{this.elementId}}" {{on "click" this.toNextSlide}} role="button">
+      <span aria-hidden="true" class="carousel-control-next-icon"></span>
+      <span class={{if (macroCondition (macroGetOwnConfig "isBS5")) "visually-hidden" "sr-only"}}>{{this.nextControlLabel}}</span>
+    </a>
+  {{/if}}
+
 </div>