<html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="author" content="Maxim Sokhatsky" /> <title>NITRO</title> <link rel="stylesheet" href="https://n2o.dev/blank.css" /> <link rel="stylesheet" href="https://n2o.dev/zima.css" /> </head> <body> <nav> <a href="https://n2o.dev">DEV</a> <a href="https://nitro.n2o.dev">NITRO</a> <a href="#" style="background:#ededed;">API</a> <div class="dropdown"> <a onclick="drop()" class="dropbtn">EN</a> <div id="dropdown" class="dropdown-content"> <a href="https://n2o.dev/deps/nitro/man/ua/nitro.htm">UA</a> <a href="#">EN</a> </div> </div> </nav> <header> <a href="../index.html"><img src="https://openmoji.org/data/color/svg/1F525.svg" /></a> <h1>NITRO</h1> </header> <main> <section> <h3>INTRO</h3> <p>The refined SYNRC API of the Nitrogen Web Framework brought to us by Rusty Klophaus.</p> </section> <section> <h3>API</h3> <p>The basic Rusty's idea was to stream small pieces of JavaScript to the thin client that performs simple <b>eval</b>. This is server side rendering framework with SDK for creating rich and complex control elements such as virtual grid or file upload element.</p> <h4 id="q">q(atom()) -> term().</h4> <p>Retrieves from process dictionary by atom-key the value of client DOM element passed by over the network in <b>#ev</b> record as a part of <b>#pickle</b> message.</p> <figure><code> event(click) -> io:format("~p~n",[nitro:q(:name)]);</code></figure> <h4 id="jse">jse([] | binary()) -> [] | binary().</h4> <p>Performs JavaScript escaping that is safe to eval and <b><script></b> injection. See more about <a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html">XSS</a>.</p> <figure><code> > nitro:jse(<<"Ім'я"/utf8>>). <<"Ім\\'я"/utf8>></code></figure> <h4 id=hte">hte([] | binary()) -> [] | binary().</h4> <p>Performs HTML escaping that is safe to display as a text on a page.</p> <figure><code> > nitro:hte(<<"<a></a>">>). "&lt;a&gt;&lt;/a&gt;"</code></figure> <h4 id="wire">wire(list(#action{})) -> [].</h4> <p>Updates the process dictionary <b>actions</b> variable with the new list of records inherited from <b>#action</b>. This process dictionary variable is a way data is passed from your <b>event</b> handlers into the output rendering pipeline. This is fixed by Nitrogen Web Framework API.</p> <figure><code> > 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 = []}]</code></figure> <h4 id="render">render(list(#action{} | #element{})) -> binary().</h4> <p>Renders HTML5 binary string by the record inherited from <b>#element</b>.</p> <figure><code> > 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>">></code></figure> <h4 id="insert_top">insert_top(atom(), list(#element{})) -> [].</h4> <p>Wires a JavaScript for adding the NITRO element as a first child of a given DOM id at the client.</p> <figure><code> > 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</code></figure> <h4 id="insert_bottom">insert_bottom(atom(), list(#element{})) -> [].</h4> <p>Wires a JavaScript for adding the NITRO element as a last child of a given DOM id at the client.</p> <figure><code> > 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</code></figure> <h4 id="insert_adjustment">insert_adjustment(beforebegin | afterbegin | beforeend | afterend, atom(), list(#element{})) -> [].</h4> <p>Wires a JavaScript for different <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML">Adjacent</a> modes.</p> <figure><code> > nitro:insert_adjacent(beforebegin, panel, #button{}). [] > rp(iolist_to_binary(nitro:render(nitro:actions()))). <<"qi('panel').insertAdjacentHTML('beforebegin', '<button type=\"button\"></button>');">> ok</code></figure> <h4 id="update">update(atom(), list(#element{})) -> [].</h4> <p>Wires a JavaScript for updating the DOM element at the client by the render of a given NITRO element.</p> <figure><code> > nitro:update(panel,#button{}). [] > rp(iolist_to_binary(nitro:render(nitro:actions()))). <<"qi('panel').outerHTML='<button type=\"button\"<>/button>';">> ok</code></figure> <h4 id="clear">clear(atom()) -> [].</h4> <p>Wires a JavaScript that clear at the client all the children of a given DOM element id.</p> <figure><code> > nitro:clear(panel). [] > rp(iolist_to_binary(nitro:render(nitro:actions()))). <<"var x = qi('panel'); while (x.firstChild) x.removeChild(x.firstChild);"">> ok</code></figure> <h4 id="remove">remove(atom()) -> [].</h4> <p>Wires a JavaScript that remove particular DOM element from the tree at the client.</p> <figure><code> > nitro:remove(panel). [] > rp(iolist_to_binary(nitro:render(nitro:actions()))). <<"var x=qi('panel'); x && x.parentNode.removeChild(x);">> ok</code></figure> <h4 id="display">display(atom(),atom()) -> [].</h4> <p>Wires a JavaScript that manipulate <b>style</b> field of a given DOM element.</p> <figure><code> > nitro:display(panel,none). [] > rp(iolist_to_binary(nitro:render(nitro:actions()))). <<"{ var x = qi('panel'); if (x) x.style.display = 'none'; }">> ok</code></figure> <h4 id="compact">compact(term()) -> binary().</h4> <p>Pretty-prints the term into more compact format to display by a recursive cut the tuples with no more that 9 elements width.</p> <figure><code> > 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}">></code></figure> <br/> <br/> </section> </main> <footer> 2005—2019 © Synrc Research Center </footer> <script>function drop(){document.getElementById("dropdown").classList.toggle("show");}</script> </body> </html>