Phx.Live.Head (Phoenix Live Head v0.1.1)
Provides commands for manipulating the HTML Head of Phoenix Live View applications while minimizing data over the wire.
The available command actions support a variety of utility operations useful for HTML Head manipulation. Such as setting or removing tag attributes and adding or removing CSS classes for vector (SVG) favicons.
Note
This lib is not meant to be used directly. Have a look at
Phx.Live.Favicon
andPhx.Live.Metadata
. Those libs provide a cleaner syntax and specific documentation for their intended usage.
query
Query
The query is used by the the Javascript client to select HTML elements
using document.querySelectorAll(query)
.
actions
Actions
The actions are applied to an attribute in all selected HTML elements.
Supported actions on the "class" attribute:
set
- Set class name(s)add
- Add to list of class namesremove
- Remove from list of class namestoggle
- Toggle class nameinitial
- Reset attribute to it's intial value
Supported actions on other attributes:
set
- Set value of attributeinitial
- Reset attribute to it's intial valuedynamic
- Set the value of a{dynamic}
attribute
dynamic-attributes
Dynamic attributes
To define a dynamic attribute, the element in the template must have a data-dynamic-[attr]
attribute with a value containing the placeholder notation {dynamic}
.
Example
<link rel='icon' href="default_fav.png" data-dynamic-href="favs/{dynamic}/fav-16x16.png">
When an event is pushed with target = "link[rel*=icon]"
, action = :dynamic
and
value = "new_message"
the result wil look like:
<link rel='icon' href="favs/new_message/fav-16x16.png">
Link to this section Summary
Link to this section Types
action()
@type action() :: :add | :dynamic | :initial | :remove | :set | :toggle
attr()
@type attr() :: binary()
changes()
@type changes() :: [...]
query()
@type query() :: binary()
value()
@type value() :: binary()
Link to this section Functions
push(socket, query, action, attr, value)
@spec push(Phoenix.LiveView.Socket.t(), query(), action(), attr(), value()) :: Phoenix.LiveView.Socket.t()
Pushes action
to apply on attribute
of elements matching query
. See Actions for available actions.
reset(socket, query)
@spec reset(Phoenix.LiveView.Socket.t(), query()) :: Phoenix.LiveView.Socket.t()
Reset all attributes
of elements matching query
to their initial value.
reset(socket, query, attr)
@spec reset(Phoenix.LiveView.Socket.t(), query(), attr()) :: Phoenix.LiveView.Socket.t()
Reset an attribute
of elements matching query
to it's initial value