feat #1112 (carousel pause button): basic setup

Orange-OpenSource · Mar 14, 2022 · 5450994 · 5450994
1 parent afa7577
commit 5450994
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -67,6 +67,9 @@ const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
 const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
 const SELECTOR_CONTROL_PREV = '.carousel-control-prev' // Boosted mod
 const SELECTOR_CONTROL_NEXT = '.carousel-control-next' // Boosted mod
+const SELECTOR_CONTROL_PAUSE = '[data-bs-control="play-button"]' // Boosted mod
+const SELECTOR_CAROUSEL_TO_PAUSE = 'data-bs-target' // Boosted mod
+// const SELECTOR_ICON_PAUSE = '.icon-pause' // Boosted mod
 
 const PREFIX_CUSTOM_PROPS = 'o-' // Boosted mod: should match `$boosted-variable-prefix` in scss/_variables.scss
 
@@ -522,6 +525,23 @@ class Carousel extends BaseComponent {
     return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
   }
 
+  // Boosted mod: add pause button
+  static PauseCarousel(event) {
+    const pauseButton = event.target
+    const pauseButtonAttribute = pauseButton.getAttribute(SELECTOR_CAROUSEL_TO_PAUSE)
+    const carouselToPause = Carousel.getOrCreateInstance(document.querySelector(pauseButtonAttribute))
+    if (pauseButton.classList.contains('pause')) {
+      carouselToPause.pause()
+      pauseButton.classList.toggle('pause')
+      pauseButton.classList.toggle('play')
+    } else {
+      carouselToPause.cycle()
+      pauseButton.classList.toggle('pause')
+      pauseButton.classList.toggle('play')
+    }
+  }
+  // End mod
+
   // Static
   static jQueryInterface(config) {
     return this.each(function () {
@@ -582,6 +602,8 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (e
   carousel.prev()
 })
 
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_CONTROL_PAUSE, Carousel.PauseCarousel)
+
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)
 

diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md
@@ -95,6 +95,43 @@ Carousel progress indicator is paused under multiple conditions:
 </div>
 {{< /example >}}
 
+<!-- Boosted mod -->
+### With pause button
+
+{{< example >}}
+<div id="carouselExamplePause" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-indicators">
+    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="1" aria-label="Slide 2"></button>
+    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="2" aria-label="Slide 3"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#000" background="#4bb4e6" text="First slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#000" background="#50be87" text="Second slide" >}}
+    </div>
+    <div class="carousel-item">
+      {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#000" background="#a885d8" text="Third slide" >}}
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExamplePause" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExamplePause" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
+<button data-bs-control="play-button" data-bs-target="#carouselExamplePause" type="button" class="carousel-control-pause btn btn-info btn-icon btn-xs mt-4 pause" aria-label="Pause Carousel" title="Pause Carousel">
+  <span class="icon-pause" aria-hidden="true"></span>
+</button>
+{{< /example >}}
+
+<!-- End mod -->
+
 ### With captions
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.