Timer · Events
Subscribe to tick and complete from LiveView or the client.
On tick and on complete (Server)
| Time | Event | Id | Value |
|---|---|---|---|
|
No event yet. Interact with the components to receive new events |
|||
<.timer
countdown
start_ms={3_600_000}
target_ms={0}
class="timer"
on_tick="timer_tick"
on_complete="timer_complete"
>
<:start_trigger><.heroicon name="hero-play"/></:start_trigger>
<:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
<:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
<:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>
def handle_event("timer_tick", %{"id" => id} = params, socket) do
IO.inspect(params, label: "timer_tick")
{:noreply, socket}
end
def handle_event("timer_complete", %{"id" => id} = params, socket) do
IO.inspect(params, label: "timer_complete")
{:noreply, socket}
end
On tick and on complete (Client)
| Time | Event | Id | Value |
|---|---|---|---|
|
No event yet. Interact with the components to receive new events |
|||
<.timer
id="timer-events-client"
countdown
start_ms={3_600_000}
target_ms={0}
class="timer"
on_tick_client="timer-tick"
on_complete_client="timer-complete"
>
<:start_trigger><.heroicon name="hero-play"/></:start_trigger>
<:pause_trigger><.heroicon name="hero-pause"/></:pause_trigger>
<:resume_trigger><.heroicon name="hero-play"/></:resume_trigger>
<:reset_trigger><.heroicon name="hero-arrow-path"/></:reset_trigger>
</.timer>
const el = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event) => {
const d = event.detail
console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event) => {
console.log(event.detail?.id)
})
const el: HTMLElement | null = document.getElementById("timer-events-client")
if (!el) return
el.addEventListener("timer-tick", (event: CustomEvent<{ formattedTime?: string; id?: string }>) => {
const d = event.detail
console.log(d?.formattedTime, d?.id)
})
el.addEventListener("timer-complete", (event: CustomEvent<{ id?: string }>) => {
console.log(event.detail?.id)
})