ezmodex v0.4.0 Ezmodex.Elements

Provides functions to create HTML element trees and its nodes such as html5 doctype and safe text

Elements

Following HTML elements are currently supported

html base head link meta style title body address article aside footer header h1 h2 h3 h4 h5 h6 hgroup nav section dd del div dl dt figcaption figure hr ins li main ol p pre ul a abbr b bdi bdo br cite code dfn em i kbd mark q rp rt rtc ruby s samp small span strong sub sup time u var wbr area audio img map track video embed object param source canvas noscript script caption col colgroup table tbody td tfoot th thead tr button datalist fieldset form input label legend meter optgroup option output progress select textarea details dialog menu menuitem summary content element shadow template

Each element accepts 2 optional parameters, a map of attributes and a list of child elements

The result of calling the element functions is a list that can be collapsed to a HTML string

Uncollapsed example

iex> ul [ li [ text("Tom & Jerry") ] ]
["<ul>", "<li>", "Tom &amp; Jerry", "</li>", "</ul">]

iex> Enum.join(ul [ li [ text("Tom & Jerry") ] ], "")
"<ul><li>Tom &amp; Jerry</li></ul>"

All following examples below will only show the collapsed version

Element Examples

iex> html
"<html></html>"

iex> p(%{ class: "stuff" })
"<p class="stuff"></p>"

iex> ul [ li [ text("Item") ]
"<ul><li>Item</li></ul>"

iex> a %{ href: "https://google.com" }, [ text("Google") ]
"<a href="https://google.com">Google</a>"

The following empty elements will not render a closing tag and will discard any child elements

base link meta hr br wbr area img track embed object source col input menuitem

Empty Element Examples

iex> img
"<img>"

iex> link %{ rel: "stylesheet", href: "styles.css" }
"<link rel="stylesheet" href="styles.css">"

iex> hr [ div ]
"<hr>"

Summary

Types

Element tree is a list that contains either strings or Element trees

Functions

Creates a HTML tag out of the string passed in as first argument

Convenience function that will create a html5 doctype and wrap all children in and tags. Should be used as the root element of the view section

Safely inserts a string of text to the element tree. Uses the Ezmodex.HTML.Sanitizer to escape special characters

Types

element_tree()

Element tree is a list that contains either strings or Element trees

Functions

build_element(element, attributes, children)
build_element(String.t, map, element_tree) :: element_tree

Creates a HTML tag out of the string passed in as first argument.

Accepts map of attributes as second argument and a list of children as third.

Allows creation of custom elements not supported as standard.

Examples

iex> build_element("bunny", %{ awesomeness: "high" }, [])
"<bunny awesomeness="high"></bunny>"
html5(children)

Convenience function that will create a html5 doctype and wrap all children in and tags. Should be used as the root element of the view section.

Example

iex> html5 [ head, body ]
"<!DOCTYPE html><html><head></head><body</body></html>"
text(string)
text(String.t) :: [String.t]

Safely inserts a string of text to the element tree. Uses the Ezmodex.HTML.Sanitizer to escape special characters

Examples

iex> text("Helloo")
"Helloo"

iex> text("<script>")
"&lt;script&gt;"