Phx.Live.Head (Phoenix Live Head v0.2.0-rc.0)
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
nodes-elements
Nodes / Elements
snap
- Takes a snapshot of all selected nodes.restore
- Restores a saved snapshotdynamic
- Set the value of a{placeholder}
attributes
Attributes
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 valuesnap
- Takes a snapshot of all selected nodes.restore
- Restores a saved snapshot
dynamic-attributes-placeholders
Dynamic attributes / placeholders
To use a dynamic value for an attribute, the element must have an additional
data-dynamic-[attribute]
attribute with a value containing a named
placeholder. For example: {sub}
.
Example
<!-- data-dynamic-href is set -->
<!-- {sub} is used in it's value -->
<link rel='icon' href="default_fav.png" data-dynamic-href="favs/{sub}/fav-16x16.png">
When an event is pushed with target = "link[rel*=icon]"
, action = :dynamic
, attr = "sub", and
value = "new_message"` the result wil look like:
html <link rel='icon' href="favs/new_message/fav-16x16.png">
Link to this section Summary
Functions
Pushes action
to apply on attribute
of elements matching query
. See Actions for available actions.
Reset all attributes
of elements matching query
to their initial value.
Reset an attribute
of elements matching query
to it's initial value
Restore an attribute
from snapshot with named name
Create a snapshot named name
of an attribute
from all favicon link element
Link to this section Types
action()
@type action() ::
:add | :dynamic | :initial | :remove | :set | :toggle | :snap | :restore
attr()
change()
@type change() :: [...]
name()
query()
@type query() :: String.t()
value()
Link to this section Functions
push(socket, query, action, attr, value \\ nil)
@spec push(Phoenix.LiveView.Socket.t(), query(), action(), attr(), value() | nil) :: 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
restore(socket, query, name, attr \\ "*")
@spec restore(Phoenix.LiveView.Socket.t(), query(), name(), attr()) :: Phoenix.LiveView.Socket.t()
Restore an attribute
from snapshot with named name
snap(socket, query, name, attr \\ "*")
@spec snap(Phoenix.LiveView.Socket.t(), query(), name(), attr()) :: Phoenix.LiveView.Socket.t()
Create a snapshot named name
of an attribute
from all favicon link element