View Source Phx.Live.Head (Phoenix Live Head v0.2.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.FaviconandPhx.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 snapshot.dynamic- 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 names.remove- Remove from list of class names.toggle- Toggle class name.initial- Reset attribute to it's intial value.
Supported actions on other attributes:
set- Set value of attribute.initial- Reset attribute to it's intial value.snap- Take a snapshot of all selected nodes.restore- Restore attributes using 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 will look like:
<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
@type action() ::
:add | :dynamic | :initial | :remove | :set | :toggle | :snap | :restore
@type change() :: [...]
@type query() :: String.t()
Link to this section Functions
@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.
@spec reset(Phoenix.LiveView.Socket.t(), query()) :: Phoenix.LiveView.Socket.t()
Reset all attributes of elements matching query to their initial value.
@spec reset(Phoenix.LiveView.Socket.t(), query(), attr()) :: Phoenix.LiveView.Socket.t()
Reset an attribute of elements matching query to it's initial value.
@spec restore(Phoenix.LiveView.Socket.t(), query(), name(), attr()) :: Phoenix.LiveView.Socket.t()
Restore an attribute from snapshot with named name.
@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