NITRO

INTRO

The refined SYNRC API of the Nitrogen Web Framework brought to us by Rusty Klophaus.

API

The basic Rusty's idea was to stream small pieces of JavaScript to the thin client that performs simple eval. This is server side rendering framework with SDK for creating rich and complex control elements such as virtual grid or file upload element.

q(atom()) -> term().

Retrieves from process dictionary by atom-key the value of client DOM element passed by over the network in #ev record as a part of #pickle message.

event(click) -> io:format("~p~n",[nitro:q(:name)]);

qc(atom()) -> term().

Retrieves from URL query string the particular value by its key.

event(init) -> io:format("~p~n",[nitro:qc(:name)]);

jse([] | binary()) -> [] | binary().

Performs JavaScript escaping that is safe to eval and <script> injection. See more about XSS.

 > nitro:jse(<<"Ім'я"/utf8>>).
 <<"Ім\\'я"/utf8>>

hte([] | binary()) -> [] | binary().

Performs HTML escaping that is safe to display as a text on a page.

 > nitro:hte(<<"<a></a>">>).
"&lt;a&gt;&lt;/a&gt;"

wire(list(#action{})) -> [].

Updates the process dictionary actions variable with the new list of records inherited from #action. This process dictionary variable is a way data is passed from your event handlers into the output rendering pipeline. This is fixed by Nitrogen Web Framework API.

 > nitro:wire([#alert{text="hello"}]).
 []
 > get(actions).
 [#wire{ancestor = action,
        trigger = [],
        target = [],
        module = action_wire,
        actions = [#alert{ancestor = action,
                          trigger = [],
                          target = [],
                          module = action_alert,
                          actions = [],
                          source = [],
                          text = "hello"}],
        source = []}]

render(list(#action{} | #element{})) -> binary().

Renders HTML5 binary string by the record inherited from #element.

 > rr(nitro).
 [abbr,action,address,alert,api,area,article,aside,audio,
  author,b,base,bdi,bdo,bind,blockquote,body,br,button,
  calendar,canvas,caption,checkbox,cite,code,col,colgroup,
  color,command|...]
 > #element{}.
 #element{ancestor = element,id = [],module = undefined,
          delegate = [],validation = [],validate = [],actions = [],
          class = [],style = [],source = [],onmouseover = [],
          onkeypress = [],onchange = [],onkeyup = [],onkeydown = [],
          onclick = [],data_fields = [],aria_states = [],body = [],
          role = [],tabindex = [],show_if = true,html_tag = [],
          title = [],postback = [],accesskey = [],
          contenteditable = [],contextmenu = [],...}
 < nitro:render(#alert{text="hello"}).
 ["alert(\"","hello","\");"]
 > nitro:render(#element{}).
 [<<"<">>,<<"element">>,
  [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],
  <<">">>,<<>>,<<"</">>,<<"element">>,<<">">>]
 > iolist_to_binary(nitro:render(#element{})).
 <<"<element></element>">>
 > iolist_to_binary(nitro:render(setelement(1,#element{},tag))).
 <<"<tag></tag>">>

insert_top(atom(), list(#element{})) -> [].

Wires a JavaScript for adding the NITRO element as a first child of a given DOM id at the client.

 > nitro:insert_top(panel,#button{}).
 []
 > nitro:actions().
 [#wire{ancestor = action,trigger = [],target = [],
        module = action_wire,
        actions = "qi('panel').insertBefore((function(){var div = qn('div');
                   div.innerHTML = '<button type=\"button\"></button>';
                   return div.firstChild; })(),qi('panel').firstChild);",
        source = []}]
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"qi('panel').insertBefore((function(){var div
 = qn('div'); div.innerHTML = '<button type=\"button\"></button>';
 return div.firstChild; })(),qi('panel').firstChild);">>
 ok

insert_bottom(atom(), list(#element{})) -> [].

Wires a JavaScript for adding the NITRO element as a last child of a given DOM id at the client.

 > nitro:insert_bottom(panel,#button{}).
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"(function(){ var div = qn('div'); div.innerHTML =
 '<button type=\"button\"></button>';qi('panel')
 .appendChild(div.firstChild); })();">>
 ok

insert_adjacent(beforebegin | afterbegin | beforeend | afterend, atom(), list(#element{})) -> [].

Wires a JavaScript for different Adjacent modes.

 > nitro:insert_adjacent(beforebegin, panel, #button{}).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"qi('panel').insertAdjacentHTML('beforebegin',
 '<button type=\"button\"></button>');">>
 ok

update(atom(), list(#element{})) -> [].

Wires a JavaScript for updating the DOM element at the client by the render of a given NITRO element.

 > nitro:update(panel,#button{}).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"qi('panel').outerHTML='<button type=\"button\"<>/button>';">>
 ok

clear(atom()) -> [].

Wires a JavaScript that clear at the client all the children of a given DOM element id.

 > nitro:clear(panel).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"var x = qi('panel'); while (x.firstChild) x.removeChild(x.firstChild);"">>
 ok

remove(atom()) -> [].

Wires a JavaScript that remove particular DOM element from the tree at the client.

 > nitro:remove(panel).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"var x=qi('panel'); x && x.parentNode.removeChild(x);">>
 ok

display(atom(),atom()) -> [].

Wires a JavaScript that manipulate style field of a given DOM element.

 > nitro:display(panel,none).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 <<"{ var x = qi('panel'); if (x) x.style.display = 'none'; }">>
 ok

compact(term()) -> binary().

Pretty-prints the term into more compact format to display by a recursive cut the tuples with no more that 9 elements width.

 > iolist_to_binary(nitro:compact({1,2,3,4,5,{1,2,3,4},7,8,9,10,11})).
 <<"{1,2,3,4,5,{1,2,3,4},7,8,9}">>