Phx.Live.Head (Phoenix Live Head v0.1.2-rc.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 and Phx.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 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
  • dynamic - 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

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

Link to this section Types

@type action() :: :add | :dynamic | :initial | :remove | :set | :toggle
@type attr() :: String.t()
@type query() :: String.t()
@type value() :: String.t()

Link to this section Functions

Link to this function

push(socket, query, action, attr, value)

Pushes action to apply on attribute of elements matching query. See Actions for available actions.

Link to this function

reset(socket, query)

Reset all attributes of elements matching query to their initial value.

Link to this function

reset(socket, query, attr)

Reset an attribute of elements matching query to it's initial value