الشريط المتحرك · الحدث

    <.marquee
  class="marquee"
  on_pause_change="pause_changed"
  on_loop_complete="loop_complete"
  on_complete="complete"
  loop_count={3}
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"},
    %{name: "Grape", logo: "🍇"},
    %{name: "Lemon", logo: "🍋"}
  ]}
  duration={12}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>

  

    def handle_event("pause_changed", %{"paused" => paused, "id" => id} = params, socket) do
  IO.inspect(params, label: "pause_changed")
  {:noreply, socket}
end

def handle_event("loop_complete", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "loop_complete")
  {:noreply, socket}
end

def handle_event("complete", %{"id" => id} = params, socket) do
  IO.inspect(params, label: "complete")
  {:noreply, socket}
end
  

    <.marquee
  id="marquee-events-client"
  class="marquee"
  on_pause_change_client="marquee-pause-changed-client"
  on_loop_complete_client="marquee-loop-complete-client"
  on_complete_client="marquee-complete-client"
  loop_count={3}
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"},
    %{name: "Grape", logo: "🍇"},
    %{name: "Lemon", logo: "🍋"}
  ]}
  duration={12}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>

  

    const el = document.getElementById("marquee-events-client");
el?.addEventListener("marquee-pause-changed-client", (e) => {
  console.log("pause", e.detail.id, e.detail.paused);
});
el?.addEventListener("marquee-loop-complete-client", (e) => {
  console.log("loop", e.detail.id);
});
el?.addEventListener("marquee-complete-client", (e) => {
  console.log("complete", e.detail.id);
});

  

    const el = document.getElementById("marquee-events-client");
el?.addEventListener("marquee-pause-changed-client", (e: Event) => {
  const d = (e as CustomEvent<{ id: string; paused: boolean }>).detail;
  console.log("pause", d.id, d.paused);
});
el?.addEventListener("marquee-loop-complete-client", (e: Event) => {
  const d = (e as CustomEvent<{ id: string }>).detail;
  console.log("loop", d.id);
});
el?.addEventListener("marquee-complete-client", (e: Event) => {
  const d = (e as CustomEvent<{ id: string }>).detail;
  console.log("complete", d.id);
});