Skip to content

Replace card_carousel.js with a Rust implementation using web_sys #27

@max-wells

Description

@max-wells

Context

public/components/card_carousel.js is a vanilla JS carousel controller (~35 lines) loaded as a <script type="module"> inside demo_card_carousel.rs. It handles nav button clicks and scroll-based indicator/button state updates via event delegation on document.

What the current JS does

Two delegated event listeners on document:

Click — nav button handler:

document.addEventListener("click", ...)
  → finds [data-name="CardCarouselNavButton"]
  → prevents default (safe for <a> wrappers)
  → scrolls [data-name="CardCarouselTrack"] by one full width (prev or next)

Scroll (capture phase) — indicator + button state sync:

document.addEventListener("scroll", ..., true)
  → finds [data-name="CardCarouselTrack"]
  → computes current index from scrollLeft / clientWidth
  → toggles aria-current on [data-name="CardCarouselIndicator"] items
  → toggles aria-disabled on prev/next [data-name="CardCarouselNavButton"]

Goal

Replace card_carousel.js with a pure Rust module using web_sys, eliminating the JS file and the <script> tag from the demo/component.

The Rust implementation should:

  • Add a delegated click listener on document targeting CardCarouselNavButton → call scroll_by on the track element
  • Add a delegated scroll listener (capture phase) on document targeting CardCarouselTrack → update aria-current / aria-disabled attributes
  • Use web_sys APIs: Document, Element, EventTarget, ScrollToOptions
  • Handle post-hydration mounting via MutationObserver if needed (see PR refactor(hooks): replace lock_scroll.js with Rust web_sys implementation #21 for the pattern)

Files involved

  • public/components/card_carousel.js — delete
  • app_crates/registry/src/demos/demo_card_carousel.rs — remove <script> tag, wire in Rust init
  • public/registry/styles/default/demo_card_carousel.md — update registry snapshot

Reference

PR #21 replaced lock_scroll.js with Rust using the same pattern — good starting point.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions