@codeforamerica/marcomms-design-system 1.13.1 → 1.15.0

package/src/components/carousel.js

@@ -1,177 +1,657 @@
-// TODO: Add mouse click and drag support to scroll carousel
 import { LitElement, html, css } from "lit";
 import { commonStyles } from "../shared/common";
+import "./icon";
 
+/**
+ * Carousel Component - Pagination-based content carousel with fade transitions
+ * 
+ * Supports HTML attributes (kebab-case):
+ * - items-per-view: Number of items to show per page (default: 3 on desktop, 1 on mobile)
+ * - auto-play: Enable/disable auto-play (default: true)
+ * - auto-play-duration: Duration in milliseconds for auto-play (default: 10000)
+ * 
+ * Example usage:
+ * <cfa-carousel items-per-view="3" auto-play="true" auto-play-duration="5000">
+ *   <cfa-slide>...</cfa-slide>
+ *   <cfa-slide>...</cfa-slide>
+ * </cfa-carousel>
+ * 
+ * CSS Custom Properties (for styling):
+ * - --carousel-fade-duration: Fade transition duration (default: 300ms)
+ * - --carousel-dot-color: Pagination dot color (default: var(--black-20))
+ * - --carousel-dot-active-color: Active dot progress bar color (default: var(--purple-60))
+ */
 class Carousel extends LitElement {
+  // Configuration constants
+  static SWIPE_THRESHOLD = 50;
+  static SHADOW_SPACE = 32;
+  static PROGRESS_UPDATE_INTERVAL = 100;
+  static AUTOPLAY_DURATION = 10000;
+  static DESKTOP_BREAKPOINT = 768;
+  static ITEMS_PER_VIEW_DESKTOP = 3;
+  static ITEMS_PER_VIEW_MOBILE = 1;
+
   static properties = {
-    atScrollStart: { type: Boolean },
-    atScrollEnd: { type: Boolean },
+    currentPage: { type: Number, state: true },
+    totalSlides: { type: Number, state: true },
+    progressPercentage: { type: Number, state: true },
+    isPaused: { type: Boolean, state: true },
+    prefersReducedMotion: { type: Boolean, state: true },
+    itemsPerView: { type: Number },
+    autoPlay: { type: Boolean },
+    autoPlayDuration: { type: Number },
   };
+
   static styles = [
     commonStyles,
     css`
       :host {
-        --slide-width-mobile: 75vw;
-        --slide-width-desktop: var(--column-span-3);
+        --carousel-fade-duration: 300ms;
+        --carousel-control-size: var(--spacing-layout-2);
+        --carousel-dot-size: var(--spacing-component-3);
+        --carousel-dot-gap: var(--spacing-component-3);
+        --carousel-dot-color: var(--black-20);
+        --carousel-dot-active-color: var(--purple-60);
+        --carousel-gap: var(--spacing-layout-1);
+      }
 
-        display: block;
-        scrollbar-color: transparent transparent;
-        scrollbar-width: 0px;
-        scroll-behavior: smooth;
+      .carousel-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-component-3);
+      }
+
+      .carousel-slides {
+        width: 100%;
         overflow: hidden;
-        -webkit-overflow-scrolling: touch;
+        transition: height 400ms ease-in-out;
+        height: auto;
+      }
+
+      .carousel-track {
+        display: flex;
+        gap: var(--carousel-gap);
       }
 
-      :host(:focus) {
-        outline: none !important;
+      ::slotted(*) {
+        flex: 0 0 calc((100% - (var(--items-per-view, 3) - 1) * var(--carousel-gap)) / var(--items-per-view, 3));
+        display: none;
+        opacity: 0;
+        transition: opacity var(--carousel-fade-duration) ease-in-out;
       }
 
-      ::-webkit-scrollbar {
-        background: transparent;
-        width: 0px;
+      ::slotted([data-slide-active]) {
+        display: block;
+        opacity: 1;
       }
 
-      .carousel {
+      @media (prefers-reduced-motion: reduce) {
+        .carousel-slides {
+          transition: none;
+        }
+        
+        ::slotted(*) {
+          transition: none;
+        }
+      }
+
+      .carousel-controls {
         display: flex;
-        gap: var(--spacing-layout-1);
-        overflow-x: scroll;
-        scroll-snap-type: x mandatory;
-        padding-block-start: var(--spacing-layout-half);
-        padding-block-end: var(--spacing-layout-1);
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-component-3);
       }
 
-      .controls {
-        margin-block-start: calc(-1 * var(--spacing-layout-half));
-        margin-block-end: var(--spacing-layout-1);
-        text-align: center;
+      .carousel-button {
+        background-color: transparent;
+        border: 0;
+        border-radius: 50%;
+        color: var(--text-color);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+        height: var(--carousel-control-size);
+        width: var(--carousel-control-size);
+        transition: all 0.2s ease-in-out;
+        flex-shrink: 0;
+      }
+
+      .carousel-button:hover {
+        background-color: var(--purple-20);
+        border-color: var(--purple-60);
+        color: var(--purple-80);
       }
 
-      .controls > * + * {
-        margin-inline-start: var(--spacing-layout-half);
+      .carousel-button:focus-visible {
+        outline: var(--focus-outline);
+        outline-offset: 2px;
+      }
+
+      .carousel-button cfa-icon {
+        --size: var(--font-size-base);
+        color: var(--purple-80);
       }
 
-      .controls button {
-        background: transparent;
+      .carousel-pagination {
+        display: flex;
+        align-items: center;
+        gap: var(--carousel-dot-gap);
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .carousel-dot {
+        background-color: var(--carousel-dot-color);
         border: none;
         border-radius: 50%;
-        color: var(--purple-80);
         cursor: pointer;
-        font-size: var(--font-size-large, 1.25rem);
-        height: var(--spacing-layout-2);
-        transition: background-color 0.2s ease-in-out;
-        width: var(--spacing-layout-2);
+        height: var(--carousel-dot-size);
+        min-width: var(--carousel-dot-size);
+        padding: 0;
+        position: relative;
+        transition: all 0.3s ease-in-out;
       }
 
-      .controls button:hover,
-      .controls button:focus {
-        background-color: var(--white, #fff);
+      .carousel-dot:hover {
+        background-color: var(--gray-60);
       }
 
-      .controls button:focus {
+      .carousel-dot:focus-visible {
         outline: var(--focus-outline);
+        outline-offset: 3px;
       }
 
-      .controls button.disabled {
-        color: var(--black-20);
-        cursor: default;
+      .carousel-dot[aria-current="true"] {
+        background-color: var(--carousel-dot-color);
+        border-radius: var(--carousel-dot-size);
+        min-width: calc(var(--carousel-dot-size) * 4);
+        overflow: hidden;
       }
 
-      .controls button.disabled:hover,
-      .controls button.disabled:focus {
-        background: transparent;
-        outline: none;
+      .carousel-dot-progress {
+        background-color: var(--carousel-dot-active-color);
+        height: 100%;
+        width: 0%;
+        transition: width 100ms linear;
       }
 
-      ::slotted(*) {
-        flex: 0 0 var(--slide-width-mobile);
-        margin-block: var(--spacing-layout-1);
-        scroll-snap-align: center;
+      @media (prefers-reduced-motion: reduce) {
+        .carousel-dot-progress {
+          transition: none;
+        }
       }
 
-      @media (min-width: 1024px) {
-        ::slotted(*) {
-          flex: 0 0 var(--slide-width-desktop);
+      @media (max-width: 768px) {
+        /* Note: 768px matches Carousel.DESKTOP_BREAKPOINT - keep in sync */
+        .carousel-button {
+          font-size: 1.25rem;
+          height: calc(var(--carousel-control-size) * 0.85);
+          width: calc(var(--carousel-control-size) * 0.85);
         }
 
-        .spacer {
-          flex: 0 0
-            calc((100vw - var(--column-span-12)) / 2 - var(--outer-margin));
+        .carousel-dot {
+          height: calc(var(--carousel-dot-size) * 0.8);
+          min-width: calc(var(--carousel-dot-size) * 0.8);
         }
       }
     `,
   ];
+
   constructor() {
     super();
-    this.atScrollStart = true;
-    this.atScrollEnd = false;
+    this.currentPage = 0;
+    this.totalSlides = 0;
+    this.progressPercentage = 0;
+    this.isPaused = true;
+    this.prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    this.itemsPerView = Carousel.ITEMS_PER_VIEW_DESKTOP;
+    this.autoPlay = true;
+    // Clamp autoPlayDuration to positive value
+    this.autoPlayDuration = Math.max(100, Carousel.AUTOPLAY_DURATION);
+    this.autoPlayTimer = null;
+    this.autoPlayTimeout = null;
+    this.touchStartX = null;
+    this.touchEndX = null;
+    this._initialized = false;
+    this._resizeTimerId = null;
+    this._mouseEnterListener = null;
+    this._mouseLeaveListener = null;
   }
+
   connectedCallback() {
     super.connectedCallback();
 
-    // Scroll slot element with focus into view
-    this.addEventListener("focusin", (event) => {
-      if (event.target.slot === "") {
-        event.target.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "center",
-        });
+    // Parse items-per-view attribute before setting CSS property
+    const attrValue = this.getAttribute('items-per-view');
+    if (attrValue !== null) {
+      const parsedValue = parseInt(attrValue, 10);
+      if (!isNaN(parsedValue)) {
+        this.itemsPerView = parsedValue;
       }
+    }
+
+    this.style.setProperty("--items-per-view", this.itemsPerView);
+
+    this.addEventListener("keydown", (e) => this._handleKeydown(e));
+    this.addEventListener("touchstart", (e) => this._handleTouchStart(e), false);
+    this.addEventListener("touchend", (e) => this._handleTouchEnd(e), false);
+    
+    // Store debounced resize listener for proper cleanup
+    this._resizeListener = () => {
+      if (this._resizeTimerId) {
+        clearTimeout(this._resizeTimerId);
+      }
+      this._resizeTimerId = setTimeout(() => {
+        this.updateItemsPerView();
+        this.updateCarouselHeight();
+      }, 150);
+    };
+    window.addEventListener("resize", this._resizeListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopAutoPlay();
+    if (this._resizeListener) {
+      window.removeEventListener("resize", this._resizeListener);
+    }
+    if (this._resizeTimerId) {
+      clearTimeout(this._resizeTimerId);
+    }
+    // Clean up mouse listeners if they were attached
+    const slidesContainer = this.shadowRoot?.querySelector(".carousel-slides");
+    if (slidesContainer && this._mouseEnterListener && this._mouseLeaveListener) {
+      slidesContainer.removeEventListener("mouseenter", this._mouseEnterListener);
+      slidesContainer.removeEventListener("mouseleave", this._mouseLeaveListener);
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("itemsPerView")) {
+      this.style.setProperty("--items-per-view", this.itemsPerView);
+    }
+    if (changedProperties.has("currentPage")) {
+      this.updateItemVisibility();
+    }
+  }
+
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector("slot");
+    const slidesContainer = this.shadowRoot.querySelector(".carousel-slides");
+    
+    // Set up the slotchange listener which will actually initialize when elements are assigned
+    if (slot && !this._slotChangeSetup) {
+      this._slotChangeSetup = true;
+      slot.addEventListener('slotchange', () => {
+        // Debounce initialization - wait for DOM to stabilize
+        if (this._slotChangeTimeout) {
+          clearTimeout(this._slotChangeTimeout);
+        }
+        this._slotChangeTimeout = setTimeout(() => {
+          if (!this._initialized) {
+            this._initializeCarousel();
+          }
+        }, 50);
+      });
+    }
+
+    // Only pause when hovering over the carousel items, not the controls
+    // Store listeners for cleanup on disconnect
+    if (slidesContainer && !this._mouseEnterListener) {
+      this._mouseEnterListener = () => {
+        this.stopAutoPlay();
+      };
+      this._mouseLeaveListener = () => {
+        if (!this.isPaused) {
+          this._scheduleNextPage();
+        }
+      };
+      slidesContainer.addEventListener("mouseenter", this._mouseEnterListener);
+      slidesContainer.addEventListener("mouseleave", this._mouseLeaveListener);
+    }
+  }
+
+  _initializeCarousel() {
+    if (this._initialized) {
+      return;
+    }
+
+    const slot = this.shadowRoot.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+
+    const items = slot.assignedElements();
+
+    if (items.length === 0) {
+      return;
+    }
+
+    this._initialized = true;
+    this.totalSlides = items.length;
+    this.updateItemsPerView();
+    this.updateItemVisibility();
+    this.startAutoPlay();
+
+    // Recalculate height after images load with timeout guard
+    this._waitForImages(items, 5000).then(() => {
+      this.updateCarouselHeight();
     });
   }
-  scrollPrevious() {
-    const carousel = this.shadowRoot.querySelector(".carousel");
-    const slotItem = this.shadowRoot
-      .querySelector("slot")
-      .assignedElements()[0];
-    const slotItemWidth = slotItem.clientWidth;
-    carousel.scrollBy({ left: -slotItemWidth, behavior: "smooth" });
-  }
-  scrollNext() {
-    const carousel = this.shadowRoot.querySelector(".carousel");
-    const slotItem = this.shadowRoot
-      .querySelector("slot")
-      .assignedElements()[0];
-    const slotItemWidth = slotItem.clientWidth;
-    carousel.scrollBy({ left: slotItemWidth, behavior: "smooth" });
-  }
-  handleScroll(event) {
-    // Check if at start of scroll
-    if (event.target.scrollLeft === 0) {
-      this.atScrollStart = true;
-    } else {
-      this.atScrollStart = false;
-    }
-    // Check if at end of scroll
-    if (
-      Math.round(event.target.scrollLeft + event.target.clientWidth) >=
-      Math.round(event.target.scrollWidth)
-    ) {
-      this.atScrollEnd = true;
-    } else {
-      this.atScrollEnd = false;
+
+  _waitForImages(items, timeout = 3000) {
+    return Promise.race([
+      Promise.all(
+        Array.from(items).map(item =>
+          Promise.all(
+            Array.from(item.querySelectorAll('img')).map(img =>
+              img.complete
+                ? Promise.resolve()
+                : new Promise(resolve => {
+                    img.addEventListener('load', resolve, { once: true });
+                    img.addEventListener('error', resolve, { once: true });
+                  })
+            )
+          )
+        )
+      ),
+      new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('Image load timeout')), timeout)
+      )
+    ]).catch(() => {
+      // If timeout or error, continue anyway
+      return Promise.resolve();
+    });
+  }
+
+  get totalPages() {
+    return Math.ceil(this.totalSlides / this.itemsPerView);
+  }
+
+  updateItemsPerView() {
+    // If itemsPerView was explicitly set via attribute, don't override it with responsive defaults
+    if (this.hasAttribute('items-per-view')) {
+      return;
+    }
+
+    const isDesktop = window.innerWidth >= Carousel.DESKTOP_BREAKPOINT;
+    const newItemsPerView = isDesktop
+      ? Carousel.ITEMS_PER_VIEW_DESKTOP
+      : Carousel.ITEMS_PER_VIEW_MOBILE;
+    
+    if (newItemsPerView !== this.itemsPerView) {
+      this.itemsPerView = newItemsPerView;
+      this.style.setProperty("--items-per-view", this.itemsPerView);
+      // Reset to first page if current page is out of bounds
+      if (this.currentPage >= this.totalPages) {
+        this.currentPage = 0;
+      }
+      this.requestUpdate();
+    }
+  }
+
+  updateItemVisibility() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+
+    const items = slot.assignedElements();
+    
+    if (items.length === 0) {
+      return;
+    }
+    
+    const startIdx = this.currentPage * this.itemsPerView;
+    const endIdx = startIdx + this.itemsPerView;
+    
+    items.forEach((item, idx) => {
+      if (idx >= startIdx && idx < endIdx) {
+        item.setAttribute("data-slide-active", "");
+      } else {
+        item.removeAttribute("data-slide-active");
+      }
+    });
+
+    // Update carousel height to match current page content
+    this.updateCarouselHeight();
+  }
+
+  updateCarouselHeight() {
+    const slot = this.shadowRoot.querySelector("slot");
+    const slidesContainer = this.shadowRoot.querySelector(".carousel-slides");
+    
+    if (!slot || !slidesContainer) {
+      return;
+    }
+
+    const items = slot.assignedElements();
+    if (items.length === 0) {
+      return;
+    }
+
+    const startIdx = this.currentPage * this.itemsPerView;
+    const endIdx = startIdx + this.itemsPerView;
+
+    // Use multiple animation frames and a small delay to ensure layout is complete
+    // after CSS changes have been applied to show/hide slides
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // Small timeout to ensure layout has been computed
+        setTimeout(() => {
+          let maxHeight = 0;
+          
+          for (let i = startIdx; i < endIdx && i < items.length; i++) {
+            const item = items[i];
+            const height = item.offsetHeight;
+            maxHeight = Math.max(maxHeight, height);
+          }
+          
+          // Set height (minimum SHADOW_SPACE to accommodate buttons/controls)
+          const totalHeight = Math.max(maxHeight, Carousel.SHADOW_SPACE);
+          slidesContainer.style.height = totalHeight + "px";
+        }, 0);
+      });
+    });
+  }
+
+  startAutoPlay() {
+    if (!this.autoPlay || this.prefersReducedMotion || this.totalSlides === 0) {
+      this.isPaused = true;
+      return;
+    }
+    this.isPaused = false;
+    this.progressPercentage = 0;
+    this._scheduleNextPage();
+  }
+
+  play() {
+    if (!this.prefersReducedMotion) {
+      this.startAutoPlay();
+    }
+  }
+
+  pause() {
+    this.isPaused = true;
+    this.stopAutoPlay();
+  }
+
+  stopAutoPlay() {
+    if (this.autoPlayTimer) {
+      clearInterval(this.autoPlayTimer);
+      this.autoPlayTimer = null;
+    }
+    if (this.autoPlayTimeout) {
+      clearTimeout(this.autoPlayTimeout);
+      this.autoPlayTimeout = null;
+    }
+  }
+
+  _scheduleNextPage() {
+    this.stopAutoPlay();
+
+    // Progress bar animation - calculate increment dynamically
+    const totalUpdates = this.autoPlayDuration / Carousel.PROGRESS_UPDATE_INTERVAL;
+    const increment = 100 / totalUpdates;
+    
+    this.autoPlayTimer = setInterval(() => {
+      this.progressPercentage = Math.min(100, this.progressPercentage + increment);
+    }, Carousel.PROGRESS_UPDATE_INTERVAL);
+
+    // Advance to next page after configured duration
+    this.autoPlayTimeout = setTimeout(() => {
+      if (!this.isPaused) {
+        this.nextPage();
+        this.startAutoPlay();
+      }
+    }, this.autoPlayDuration);
+  }
+
+  nextPage() {
+    this.currentPage = (this.currentPage + 1) % this.totalPages;
+    this.progressPercentage = 0;
+    this.stopAutoPlay();
+    this.requestUpdate();
+    this.play();
+  }
+
+  previousPage() {
+    this.currentPage =
+      (this.currentPage - 1 + this.totalPages) % this.totalPages;
+    this.progressPercentage = 0;
+    this.stopAutoPlay();
+    this.requestUpdate();
+    this.play();
+  }
+
+  goToPage(pageIndex) {
+    if (pageIndex >= 0 && pageIndex < this.totalPages) {
+      // Only update if page is different
+      if (pageIndex !== this.currentPage) {
+        this.currentPage = pageIndex;
+        this.progressPercentage = 0;
+        this.stopAutoPlay();
+        this.requestUpdate();
+        this.play();
+      }
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.nextPage();
+      this.pause();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.previousPage();
+      this.pause();
     }
   }
+
+  _handleTouchStart(event) {
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      this.touchStartX = event.changedTouches[0].screenX;
+    }
+  }
+
+  _handleTouchEnd(event) {
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      this.touchEndX = event.changedTouches[0].screenX;
+      this._handleSwipe();
+    }
+  }
+
+  _handleSwipe() {
+    // Validate that touch coordinates were captured
+    if (this.touchStartX === null || this.touchEndX === null) {
+      return;
+    }
+    
+    const diff = this.touchStartX - this.touchEndX;
+
+    if (Math.abs(diff) > Carousel.SWIPE_THRESHOLD) {
+      if (diff > 0) {
+        // Swiped left - go to next page
+        this.nextPage();
+        this.pause();
+      } else {
+        // Swiped right - go to previous page
+        this.previousPage();
+        this.pause();
+      }
+    }
+  }
+
   render() {
     return html`
-      <div class="carousel" @scroll=${this.handleScroll}>
-        <div class="spacer"></div>
-        <slot></slot>
-        <div class="spacer"></div>
-      </div>
-      <div class="controls">
-        <button
-          class="previous ${this.atScrollStart ? "disabled" : ""}"
-          @click="${this.scrollPrevious}"
-        >
-          <cfa-icon>arrow_back</cfa-icon>
-        </button>
-        <button
-          class="next ${this.atScrollEnd ? "disabled" : ""}"
-          @click="${this.scrollNext}"
-        >
-          <cfa-icon>arrow_forward</cfa-icon>
-        </button>
+      <div
+        class="carousel-container"
+        role="region"
+        aria-label="Content carousel"
+      >
+        <div class="carousel-slides">
+          <div class="carousel-track">
+            <slot @slotchange=${() => {
+              // Only update if not already initialized in firstUpdated
+              if (!this._initialized) {
+                const slot = this.shadowRoot.querySelector("slot");
+                if (slot) {
+                  const items = slot.assignedElements();
+                  this.totalSlides = items.length;
+                  this.updateItemVisibility();
+                  this.requestUpdate();
+                }
+              }
+            }}></slot>
+          </div>
+        </div>
+
+        ${this.totalSlides > 0
+          ? html`
+              <div class="carousel-controls">
+                <button
+                  class="carousel-button"
+                  @click=${() => this.previousPage()}
+                  aria-label="Previous page"
+                >
+                  <cfa-icon>arrow_back</cfa-icon>
+                </button>
+
+                <div class="carousel-pagination">
+                  ${Array.from({ length: this.totalPages }).map(
+                    (_, idx) => html`
+                      <button
+                        class="carousel-dot"
+                        @click=${() => this.goToPage(idx)}
+                        aria-label="Go to page ${idx + 1} of ${this.totalPages}"
+                        aria-current=${idx === this.currentPage ? "true" : "false"}
+                      >
+                        ${idx === this.currentPage && !this.prefersReducedMotion
+                          ? html`<div
+                              class="carousel-dot-progress"
+                              style="width: ${this.progressPercentage}%"
+                            ></div>`
+                          : ""}
+                      </button>
+                    `
+                  )}
+                </div>
+
+                <button
+                  class="carousel-button"
+                  @click=${() => this.nextPage()}
+                  aria-label="Next page"
+                >
+                  <cfa-icon>arrow_forward</cfa-icon>
+                </button>
+              </div>
+            `
+          : ""}
       </div>
     `;
   }