2019-09-14 01:36:16 +00:00
defmodule Temple.Html do
2019-08-21 03:13:10 +00:00
require Temple.Elements
2019-05-12 02:20:43 +00:00
@moduledoc """
2019-09-14 01:36:16 +00:00
The ` Temple.Html ` module defines macros for all HTML5 compliant elements .
2019-05-12 02:20:43 +00:00
2019-09-14 01:36:16 +00:00
` Temple.Html ` macros must be called inside of a ` Temple . temple / 1 ` block .
* Note * : Only the lowest arity macros are documented . Void elements are defined as a 1 - arity macro and non - void elements are defined as 0 , 1 , and 2 - arity macros .
2019-07-04 02:05:50 +00:00
2019-05-12 02:20:43 +00:00
## Attributes
2019-09-14 01:36:16 +00:00
Html accept a keyword list or a map of attributes to be emitted into the element ' s opening tag. Multi-word attribute keys written in snake_case (`data_url`) will be transformed into kebab-case (`data-url`).
2019-05-12 02:20:43 +00:00
## Children
Non - void elements ( such as ` div ` ) accept a block that can be used to nest other tags or text nodes . These blocks can contain arbitrary Elixir code such as variables and for comprehensions .
If you are only emitting a text node within a block , you can use the shortened syntax by passing the text in as the first parameter of the tag .
## Example
` ` `
2019-07-09 02:29:41 +00:00
temple do
2019-05-12 02:20:43 +00:00
# empty non-void element
div ( )
2019-07-04 04:16:29 +00:00
# non-void element with keyword list attributes
2019-05-12 02:20:43 +00:00
div class : " text-red " , id : " my-el "
2019-08-21 03:13:10 +00:00
2019-07-04 04:16:29 +00:00
# non-void element with map attributes
div %{ :class = > " text-red " , " id " = > " my-el " }
2019-05-12 02:20:43 +00:00
# non-void element with children
div do
text " Hello, world! "
for name <- @names do
div data_name : name
end
end
# non-void element with a single text node
div " Hello, world! " , class : " text-green "
# void elements
input name : " comments " , placeholder : " Enter a comment... "
end
2019-07-08 02:26:32 +00:00
# {:safe,
2019-05-12 02:20:43 +00:00
# "<div></div>
# <div class=\"text-red\" id=\"my-el\"></div>
# <div>
# Hello, world!
# <div data-name=\"Alice\"></div>
# <div data-name=\"Bob\"></div>
# <div data-name=\"Carol\"></div>
# </div>
# <div class=\"text-green\">Hello, world!</div>
# <input name=\"comments\" placeholder=\"Enter a comment...\">"
# }
` ` `
"""
2019-04-15 01:44:39 +00:00
@nonvoid_elements ~w[
head title style script
noscript template
body section nav article aside h1 h2 h3 h4 h5 h6
header footer address main
p pre blockquote ol ul li dl dt dd figure figcaption div
a em strong small s cite q dfn abbr data time code var samp kbd
sub sup i b u mark ruby rt rp bdi bdo span
ins del
iframe object video audio canvas
2019-05-10 19:27:59 +00:00
map
2019-04-15 01:44:39 +00:00
table caption colgroup tbody thead tfoot tr td th
form fieldset legend label button select datalist optgroup
option textarea output progress meter
details summary menuitem menu
] a
@void_elements ~w[
meta link base
area br col embed hr img input keygen param source track wbr
] a
2019-05-10 19:06:03 +00:00
@doc false
2019-05-09 02:09:14 +00:00
def nonvoid_elements , do : @nonvoid_elements
2019-05-10 19:06:03 +00:00
@doc false
2019-05-09 02:09:14 +00:00
def void_elements , do : @void_elements
2019-04-15 01:44:39 +00:00
for el <- @nonvoid_elements do
2019-08-21 03:13:10 +00:00
Temple.Elements . defelement ( unquote ( el ) , :nonvoid )
2019-04-15 01:44:39 +00:00
end
2019-05-08 07:31:13 +00:00
for el <- @void_elements do
2019-08-21 03:13:10 +00:00
Temple.Elements . defelement ( unquote ( el ) , :void )
2019-04-15 01:44:39 +00:00
end
2019-08-19 23:53:17 +00:00
2019-08-21 01:01:07 +00:00
defmacro html ( attrs \\ [ ] , [ { :do , _inner } ] = block ) do
doc_type =
2019-08-21 03:13:10 +00:00
quote location : :keep do
2019-09-14 01:36:16 +00:00
Temple.Utils . put_buffer ( var! ( buff , Temple.Html ) , " <!DOCTYPE html> " )
2019-08-21 01:01:07 +00:00
end
2019-08-19 23:53:17 +00:00
2019-08-21 01:01:07 +00:00
[ doc_type , Temple.Elements . nonvoid_element ( :html , attrs , block ) ]
2019-08-19 23:53:17 +00:00
end
2019-04-15 01:44:39 +00:00
end
