ElementorexCms.Block.Helpers (ElementorexCms v0.2.0)

Copy Markdown View Source

Helpers imported into every block (use ElementorexCms.Block).

The important one is root/2: spread it on the root element of the block.

<a href={@url} {root(assigns, class: ["btn", @wide && "btn-block"])}>...</a>

Summary

Functions

Renders the children of a container. On the canvas, an empty container shows a drop zone.

Joins classes, skipping nil, false and empty strings.

Whether the block is being rendered on the editor canvas.

Whether option is the value (or one of the values) of an entry of the filter form.

The field key of the filtered source (ElementorexCms.Source.Field), or nil.

Whether the block is in a filter form (that targets a loop grid).

The name of an input of the filter form the block is in: filter_name(assigns, "q") → "catalog[q]", filter_name(assigns, [@field, ""]) → "catalog[category][]", filter_name(assigns, [@field, "min"]) → "catalog[price][min]". nil outside a filter form.

The options of a field of the filtered source: [%{label:, value:, count:}].

The value the visitor gave to an entry of the filter form (nil if none).

An icon from Heroicons, inline SVG (works with any icon name chosen in the editor, see ElementorexCms.Heroicons).

Marks the element that holds an inline-editable prop: on the canvas the user double-clicks it to type. Outside the editor it adds nothing, and neither does it for props bound to dynamic content (their value comes from the data).

href, target and rel for a link. An empty URL gives no href (on the canvas links never navigate anyway).

Sanitized rich text (:rich policy) as safe HTML.

Sanitized inline HTML (:inline policy) as safe HTML.

Attributes for the root element of a block.

Inline style from validated declarations: [{"max-width", "640px"}] → "max-width:640px". Invalid values are dropped (see ElementorexCms.CSS).

Translates a string of the block (see ElementorexCms.I18n).

Functions

children(assigns)

Renders the children of a container. On the canvas, an empty container shows a drop zone.

Attributes

  • node (:map) (required)
  • ctx (:any) (required)
  • placeholder (:string) - Defaults to nil.

class_list(classes)

@spec class_list(term()) :: String.t()

Joins classes, skipping nil, false and empty strings.

editor?(assigns)

@spec editor?(map()) :: boolean()

Whether the block is being rendered on the editor canvas.

filter_checked?(assigns, path, option)

@spec filter_checked?(map(), String.t() | [String.t()], term()) :: boolean()

Whether option is the value (or one of the values) of an entry of the filter form.

filter_field(assigns, key)

@spec filter_field(map(), String.t()) :: ElementorexCms.Source.Field.t() | nil

The field key of the filtered source (ElementorexCms.Source.Field), or nil.

filter_form?(assigns)

@spec filter_form?(map()) :: boolean()

Whether the block is in a filter form (that targets a loop grid).

filter_name(assigns, path)

@spec filter_name(map(), String.t() | [String.t()]) :: String.t() | nil

The name of an input of the filter form the block is in: filter_name(assigns, "q") → "catalog[q]", filter_name(assigns, [@field, ""]) → "catalog[category][]", filter_name(assigns, [@field, "min"]) → "catalog[price][min]". nil outside a filter form.

filter_options(assigns, key)

@spec filter_options(map(), String.t()) :: [map()]

The options of a field of the filtered source: [%{label:, value:, count:}].

filter_value(assigns, path)

@spec filter_value(map(), String.t() | [String.t()]) :: term()

The value the visitor gave to an entry of the filter form (nil if none).

heroicon(assigns)

An icon from Heroicons, inline SVG (works with any icon name chosen in the editor, see ElementorexCms.Heroicons).

Attributes

  • name (:string) (required)
  • style (:string) - Defaults to "outline".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

inline(arg1, prop)

@spec inline(map(), atom() | String.t()) :: [{String.t(), String.t()}]

Marks the element that holds an inline-editable prop: on the canvas the user double-clicks it to type. Outside the editor it adds nothing, and neither does it for props bound to dynamic content (their value comes from the data).

<h2 {inline(assigns, :text)}>{@text}</h2>

rich(html)

@spec rich(String.t() | nil) :: Phoenix.HTML.safe()

Sanitized rich text (:rich policy) as safe HTML.

rich_inline(html)

@spec rich_inline(String.t() | nil) :: Phoenix.HTML.safe()

Sanitized inline HTML (:inline policy) as safe HTML.

root(assigns, opts \\ [])

@spec root(map(), keyword()) :: [{String.t(), term()}]

Attributes for the root element of a block.

  • data-ex-id - the node id; the node's CSS is scoped to it
  • id and class from the Advanced tab, merged with :class
  • on the canvas, data-ex-type and data-ex-container for the editor, and data-ex-off when its display condition fails for the item

Options:

  • :class - classes of the block (string, list, nil/false are skipped)
  • :style - inline style string, written as is (build it from validated values only)
  • :attrs - extra attributes ([{"role", "alert"}])

style(declarations)

@spec style(list()) :: String.t()

Inline style from validated declarations: [{"max-width", "640px"}] → "max-width:640px". Invalid values are dropped (see ElementorexCms.CSS).

t(text, bindings \\ [])

@spec t(String.t(), keyword()) :: String.t()

Translates a string of the block (see ElementorexCms.I18n).