HoloMap.Event (HoloMap v0.1.0)

Copy Markdown View Source

Normalises the event-handler props that components accept.

MapLibre events reach Elixir through JavaScript's Hologram.dispatchAction(), which needs three things: an action name, a target component id, and a params map. Event props therefore accept the same shapes Hologram's own longhand event bindings do, so there is one syntax to remember:

# Bare action name, dispatched to the page.
on_click={:parcel_clicked}

# Longhand, when the handler lives on a component rather than the page.
on_click={%{action: :parcel_clicked, target: "sidebar"}}

# With static params merged into the payload.
on_click={%{action: :parcel_clicked, target: "sidebar", params: %{layer: "parcels"}}}

A keyword list works wherever a map does.

Why the default target is the page

Hologram defaults an event binding to the closest enclosing stateful component. HoloMap's children are deliberately stateless, with no cid of their own, so there is no such component to fall back on, and silently targeting the map container would send the action to HoloMap.Map rather than to the caller's handler. "page" is both the common case and the one target that always exists.

Event payload

Whatever params you supply is merged under the runtime payload, so the data MapLibre reports always wins over a static value with the same key. The payload keys a handler can expect are documented per component, and the full list is in the Events guide.

Summary

Types

Any accepted event-handler prop value.

Functions

Normalises a handler prop into the map the browser reconciler consumes.

Types

handler()

@type handler() :: atom() | map() | keyword() | nil

Any accepted event-handler prop value.

Functions

normalize(action)

@spec normalize(handler()) :: map() | nil

Normalises a handler prop into the map the browser reconciler consumes.

Returns nil for an unset handler, which is how a component signals that no MapLibre listener should be attached at all.

iex> HoloMap.Event.normalize(:parcel_clicked)
%{"action" => "parcel_clicked", "target" => "page", "params" => %{}}

iex> HoloMap.Event.normalize(%{action: :zoomed, target: "sidebar"})
%{"action" => "zoomed", "target" => "sidebar", "params" => %{}}

iex> HoloMap.Event.normalize(%{action: :picked, params: %{layer: "parcels"}})
%{"action" => "picked", "target" => "page", "params" => %{"layer" => "parcels"}}

iex> HoloMap.Event.normalize(nil)
nil