API

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Marquee.pause("api-controls-client")} class="button ui-size-sm">Pause</.action>
  <.action phx-click={Corex.Marquee.resume("api-controls-client")} class="button ui-size-sm">Resume</.action>
  <.action phx-click={Corex.Marquee.toggle_pause("api-controls-client")} class="button ui-size-sm">Toggle</.action>
</div>

<.marquee
  id="api-controls-client"
  class="marquee"
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"},
    %{name: "Grape", logo: "🍇"},
    %{name: "Lemon", logo: "🍋"}
  ]}
  duration={20}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>


  

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={JS.dispatch("corex:marquee:pause", to: "#api-controls-js", bubbles: false)}
    class="button ui-size-sm"
  >
    Pause
  </.action>
  <.action
    phx-click={JS.dispatch("corex:marquee:resume", to: "#api-controls-js", bubbles: false)}
    class="button ui-size-sm"
  >
    Resume
  </.action>
  <.action
    phx-click={JS.dispatch("corex:marquee:toggle-pause", to: "#api-controls-js", bubbles: false)}
    class="button ui-size-sm"
  >
    Toggle
  </.action>
</div>

<.marquee
  id="api-controls-js"
  class="marquee"
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"},
    %{name: "Grape", logo: "🍇"},
    %{name: "Lemon", logo: "🍋"}
  ]}
  duration={20}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>


  

    const el = document.getElementById("api-controls-js");
el?.dispatchEvent(new CustomEvent("corex:marquee:pause", { bubbles: false }));
el?.dispatchEvent(new CustomEvent("corex:marquee:resume", { bubbles: false }));
el?.dispatchEvent(new CustomEvent("corex:marquee:toggle-pause", { bubbles: false }));

  

    const el: HTMLElement | null = document.getElementById("api-controls-js");
el?.dispatchEvent(new CustomEvent("corex:marquee:pause", { bubbles: false }));
el?.dispatchEvent(new CustomEvent("corex:marquee:resume", { bubbles: false }));
el?.dispatchEvent(new CustomEvent("corex:marquee:toggle-pause", { bubbles: false }));

  

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="marquee_api_server_pause" class="button ui-size-sm">Pause</.action>
  <.action phx-click="marquee_api_server_resume" class="button ui-size-sm">Resume</.action>
  <.action phx-click="marquee_api_server_toggle_pause" class="button ui-size-sm">Toggle</.action>
</div>

<.marquee
  id="api-controls-server"
  class="marquee"
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"},
    %{name: "Grape", logo: "🍇"},
    %{name: "Lemon", logo: "🍋"}
  ]}
  duration={20}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>


  

    def handle_event("marquee_api_server_pause", _, socket) do
  {:noreply, Corex.Marquee.pause(socket, "api-controls-server")}
end

def handle_event("marquee_api_server_resume", _, socket) do
  {:noreply, Corex.Marquee.resume(socket, "api-controls-server")}
end

def handle_event("marquee_api_server_toggle_pause", _, socket) do
  {:noreply, Corex.Marquee.toggle_pause(socket, "api-controls-server")}
end