summaryrefslogtreecommitdiffhomepage
path: root/documentation/jsapi/LuCI.dom.html
diff options
context:
space:
mode:
authorJo-Philipp Wich <jo@mein.io>2019-11-05 09:33:40 +0100
committerJo-Philipp Wich <jo@mein.io>2019-11-05 09:37:52 +0100
commit3942789dc62d6a0e7fcfb0a935bfe5c8d372245b (patch)
tree9ec432a1dc31c7d837575e7989a47d7cca93e86b /documentation/jsapi/LuCI.dom.html
parent9b92b2c8f9ce69cfe89c231311d37177ecaa8d43 (diff)
documentation: add JS api docs
Signed-off-by: Jo-Philipp Wich <jo@mein.io> (cherry picked from commit d9452d1157aef6b8752fac0f4ed1e0b9221abb31)
Diffstat (limited to 'documentation/jsapi/LuCI.dom.html')
-rw-r--r--documentation/jsapi/LuCI.dom.html3135
1 files changed, 3135 insertions, 0 deletions
diff --git a/documentation/jsapi/LuCI.dom.html b/documentation/jsapi/LuCI.dom.html
new file mode 100644
index 0000000000..b98c8f0a66
--- /dev/null
+++ b/documentation/jsapi/LuCI.dom.html
@@ -0,0 +1,3135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>JSDoc: Class: dom</title>
+
+ <script src="scripts/prettify/prettify.js"> </script>
+ <script src="scripts/prettify/lang-css.js"> </script>
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+ <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+ <h1 class="page-title">Class: dom</h1>
+
+
+
+
+
+
+<section>
+
+<header>
+
+ <h2><span class="attribs"><span class="type-signature"></span></span>
+ <span class="ancestors"><a href="LuCI.html">LuCI</a>.</span>dom</h2>
+
+ <div class="class-description"><p>The <code>dom</code> class provides convenience method for creating and
+manipulating DOM elements.</p></div>
+
+
+</header>
+
+<article>
+ <div class="container-overview">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2065">line 2065</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h3 class="subsection-title">Methods</h3>
+
+
+
+
+
+
+
+ <h4 class="name" id="append"><span class="type-signature"></span>append<span class="signature">(node, children<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Appends the given children data to the given node.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The <code>Node</code> argument to append the children to.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>children</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The childrens to append to the given node.</p>
+<p>When <code>children</code> is an array, then each item of the array
+will be either appended as child element or text node,
+depending on whether the item is a DOM <code>Node</code> instance or
+some other non-<code>null</code> value. Non-<code>Node</code>, non-<code>null</code> values
+will be converted to strings first before being passed as
+argument to <code>createTextNode()</code>.</p>
+<p>When <code>children</code> is a function, it will be invoked with
+the passed <code>node</code> argument as sole parameter and the <code>append</code>
+function will be invoked again, with the given <code>node</code> argument
+as first and the return value of the <code>children</code> function as
+second parameter.</p>
+<p>When <code>children</code> is is a DOM <code>Node</code> instance, it will be
+appended to the given <code>node</code>.</p>
+<p>When <code>children</code> is any other non-<code>null</code> value, it will be
+converted to a string and appened to the <code>innerHTML</code> property
+of the given <code>node</code>.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2216">line 2216</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the last children <code>Node</code> appended to the node or <code>null</code>
+if either the <code>node</code> argument was no valid DOM <code>node</code> or if the
+<code>children</code> was <code>null</code> or didn't result in further DOM nodes.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Node</span>
+|
+
+<span class="param-type">null</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="attr"><span class="type-signature"></span>attr<span class="signature">(node, key, val<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Sets attributes or registers event listeners on element nodes.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The <code>Node</code> argument to set the attributes or add the event
+listeners for. When the given <code>node</code> value is not a valid
+DOM <code>Node</code>, the function returns and does nothing.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>key</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+|
+
+<span class="param-type">Object.&lt;string, *></span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Specifies either the attribute or event handler name to use,
+or an object containing multiple key, value pairs which are
+each added to the node as either attribute or event handler,
+depending on the respective value.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>val</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Specifies the attribute value or event handler function to add.
+If the <code>key</code> parameter is an <code>Object</code>, this parameter will be
+ignored.</p>
+<p>When <code>val</code> is of type function, it will be registered as event
+handler on the given <code>node</code> with the <code>key</code> parameter being the
+event name.</p>
+<p>When <code>val</code> is of type object, it will be serialized as JSON and
+added as attribute to the given <code>node</code>, using the given <code>key</code>
+as attribute name.</p>
+<p>When <code>val</code> is of any other type, it will be added as attribute
+to the given <code>node</code> as-is, with the underlying <code>setAttribute()</code>
+call implicitely turning it into a string.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2331">line 2331</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="bindClassInstance"><span class="type-signature"></span>bindClassInstance<span class="signature">(node, inst)</span><span class="type-signature"> &rarr; {Class}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Binds the given class instance ot the specified DOM <code>Node</code>.</p>
+<p>This function uses the <code>dom.data()</code> facility to attach the
+passed instance of a Class to a node. This is needed for
+complex widget elements or similar where the corresponding
+class instance responsible for the element must be retrieved
+from DOM nodes obtained by <code>querySelector()</code> or similar means.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>The DOM <code>Node</code> instance to bind the class to.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>inst</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Class</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>The Class instance to bind to the node.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2565">line 2565</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Throws:</h5>
+
+
+
+<dl>
+ <dt>
+ <div class="param-desc">
+ <p>Throws a <code>TypeError</code> when the given instance argument isn't
+a valid Class instance.</p>
+ </div>
+ </dt>
+ <dd></dd>
+ <dt>
+ <dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">TypeError</span>
+
+
+ </dd>
+ </dl>
+ </dt>
+ <dd></dd>
+</dl>
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the bound class instance.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Class</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="callClassMethod"><span class="type-signature"></span>callClassMethod<span class="signature">(node, method, &hellip;params)</span><span class="type-signature"> &rarr; {*|null}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Finds a bound class instance on the given node itself or the
+first bound instance on its closest parent node and invokes
+the specified method name on the found class instance.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The DOM <code>Node</code> instance to start from.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>method</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The name of the method to invoke on the found class instance.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>params</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ &lt;repeatable><br>
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Additional arguments to pass to the invoked method as-is.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2619">line 2619</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the return value of the invoked method if a class
+instance and method has been found. Returns <code>null</code> if either
+no bound class instance could be found, or if the found
+instance didn't have the requested <code>method</code>.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">*</span>
+|
+
+<span class="param-type">null</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="content"><span class="type-signature"></span>content<span class="signature">(node, children<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Replaces the content of the given node with the given children.</p>
+<p>This function first removes any children of the given DOM
+<code>Node</code> and then adds the given given children following the
+rules outlined below.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The <code>Node</code> argument to replace the children of.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>children</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The childrens to replace into the given node.</p>
+<p>When <code>children</code> is an array, then each item of the array
+will be either appended as child element or text node,
+depending on whether the item is a DOM <code>Node</code> instance or
+some other non-<code>null</code> value. Non-<code>Node</code>, non-<code>null</code> values
+will be converted to strings first before being passed as
+argument to <code>createTextNode()</code>.</p>
+<p>When <code>children</code> is a function, it will be invoked with
+the passed <code>node</code> argument as sole parameter and the <code>append</code>
+function will be invoked again, with the given <code>node</code> argument
+as first and the return value of the <code>children</code> function as
+second parameter.</p>
+<p>When <code>children</code> is is a DOM <code>Node</code> instance, it will be
+appended to the given <code>node</code>.</p>
+<p>When <code>children</code> is any other non-<code>null</code> value, it will be
+converted to a string and appened to the <code>innerHTML</code> property
+of the given <code>node</code>.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2283">line 2283</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the last children <code>Node</code> appended to the node or <code>null</code>
+if either the <code>node</code> argument was no valid DOM <code>node</code> or if the
+<code>children</code> was <code>null</code> or didn't result in further DOM nodes.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Node</span>
+|
+
+<span class="param-type">null</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="create"><span class="type-signature"></span>create<span class="signature">(html, attr<span class="signature-attributes">opt</span>, data<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Creates a new DOM <code>Node</code> from the given <code>html</code>, <code>attr</code> and
+<code>data</code> parameters.</p>
+<p>This function has multiple signatures, it can be either invoked
+in the form <code>create(html[, attr[, data]])</code> or in the form
+<code>create(html[, data])</code>. The used variant is determined from the
+type of the second argument.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>html</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Describes the node to create.</p>
+<p>When the value of <code>html</code> is of type array, a <code>DocumentFragment</code>
+node is created and each item of the array is first converted
+to a DOM <code>Node</code> by passing it through <code>create()</code> and then added
+as child to the fragment.</p>
+<p>When the value of <code>html</code> is a DOM <code>Node</code> instance, no new
+element will be created but the node will be used as-is.</p>
+<p>When the value of <code>html</code> is a string starting with <code>&lt;</code>, it will
+be passed to <code>dom.parse()</code> and the resulting value is used.</p>
+<p>When the value of <code>html</code> is any other string, it will be passed
+to <code>document.createElement()</code> for creating a new DOM <code>Node</code> of
+the given name.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>attr</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Object.&lt;string, *></span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Specifies an Object of key, value pairs to set as attributes
+or event handlers on the created node. Refer to
+<a href="LuCI.dom.html#attr"><code>dom.attr()</code></a> for details.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>data</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Specifies children to append to the newly created element.
+Refer to <a href="LuCI.dom.html#append"><code>dom.append()</code></a> for details.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2409">line 2409</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Throws:</h5>
+
+
+
+<dl>
+ <dt>
+ <div class="param-desc">
+ <p>Throws an <code>InvalidCharacterError</code> when the given <code>html</code>
+argument contained malformed markup (such as not escaped
+<code>&amp;</code> characters in XHTML mode) or when the given node name
+in <code>html</code> contains characters which are not legal in DOM
+element names, such as spaces.</p>
+ </div>
+ </dt>
+ <dd></dd>
+ <dt>
+ <dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">InvalidCharacterError</span>
+
+
+ </dd>
+ </dl>
+ </dt>
+ <dd></dd>
+</dl>
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the newly created <code>Node</code>.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Node</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="data"><span class="type-signature"></span>data<span class="signature">(node, key<span class="signature-attributes">opt</span>, val<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {*}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Attaches or detaches arbitrary data to and from a DOM <code>Node</code>.</p>
+<p>This function is useful to attach non-string values or runtime
+data that is not serializable to DOM nodes. To decouple data
+from the DOM, values are not added directly to nodes, but
+inserted into a registry instead which is then referenced by a
+string key stored as <code>data-idref</code> attribute in the node.</p>
+<p>This function has multiple signatures and is sensitive to the
+number of arguments passed to it.</p>
+<ul>
+<li><code>dom.data(node)</code> -
+Fetches all data associated with the given node.</li>
+<li><code>dom.data(node, key)</code> -
+Fetches a specific key associated with the given node.</li>
+<li><code>dom.data(node, key, val)</code> -
+Sets a specific key to the given value associated with the
+given node.</li>
+<li><code>dom.data(node, null)</code> -
+Clears any data associated with the node.</li>
+<li><code>dom.data(node, key, null)</code> -
+Clears the given key associated with the node.</li>
+</ul>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The DOM <code>Node</code> instance to set or retrieve the data for.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>key</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+|
+
+<span class="param-type">null</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>This is either a string specifying the key to retrieve, or
+<code>null</code> to unset the entire node data.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>val</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+|
+
+<span class="param-type">null</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>This is either a non-<code>null</code> value to set for a given key or
+<code>null</code> to remove the given <code>key</code> from the specified node.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2485">line 2485</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the get or set value, or <code>null</code> when no value could
+be found.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">*</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="elem"><span class="type-signature"></span>elem<span class="signature">(e)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Tests whether the given argument is a valid DOM <code>Node</code>.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>e</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>The value to test.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2079">line 2079</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns <code>true</code> if the value is a DOM <code>Node</code>, else <code>false</code>.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">boolean</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="findClassInstance"><span class="type-signature"></span>findClassInstance<span class="signature">(node)</span><span class="type-signature"> &rarr; {Class|null}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Finds a bound class instance on the given node itself or the
+first bound instance on its closest parent node.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>The DOM <code>Node</code> instance to start from.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2585">line 2585</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the founds class instance if any or <code>null</code> if no bound
+class could be found on the node itself or any of its parents.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Class</span>
+|
+
+<span class="param-type">null</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="isEmpty"><span class="type-signature"></span>isEmpty<span class="signature">(node, ignoreFn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Tests whether a given DOM <code>Node</code> instance is empty or appears
+empty.</p>
+<p>Any element child nodes which have the CSS class <code>hidden</code> set
+or for which the optionally passed <code>ignoreFn</code> callback function
+returns <code>false</code> are ignored.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The DOM <code>Node</code> instance to test.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>ignoreFn</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type"><a href="LuCI.dom.html#~ignoreCallbackFn">LuCI.dom~ignoreCallbackFn</a></span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>Specifies an optional function which is invoked for each child
+node to decide whether the child node should be ignored or not.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2665">line 2665</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns <code>true</code> if the node does not have any children or if
+any children node either has a <code>hidden</code> CSS class or a <code>false</code>
+result when testing it using the given <code>ignoreFn</code>.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">boolean</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="matches"><span class="type-signature"></span>matches<span class="signature">(node, selector<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Tests whether a given <code>Node</code> matches the given query selector.</p>
+<p>This function is a convenience wrapper around the standard
+<code>Node.matches(&quot;selector&quot;)</code> function with the added benefit that
+the <code>node</code> argument may be a non-<code>Node</code> value, in which case
+this function simply returns <code>false</code>.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The <code>Node</code> argument to test the selector against.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>selector</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The query selector expression to test against the given node.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2140">line 2140</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns <code>true</code> if the given node matches the specified selector
+or <code>false</code> when the node argument is no valid DOM <code>Node</code> or the
+selector didn't match.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">boolean</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="parent"><span class="type-signature"></span>parent<span class="signature">(node, selector<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Returns the closest parent node that matches the given query
+selector expression.</p>
+<p>This function is a convenience wrapper around the standard
+<code>Node.closest(&quot;selector&quot;)</code> function with the added benefit that
+the <code>node</code> argument may be a non-<code>Node</code> value, in which case
+this function simply returns <code>null</code>.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+ <th>Attributes</th>
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The <code>Node</code> argument to find the closest parent for.</p></td>
+ </tr>
+
+
+
+ <tr>
+
+ <td class="name"><code>selector</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+ </td>
+
+
+ <td class="attributes">
+
+ &lt;optional><br>
+
+
+
+
+
+ </td>
+
+
+
+
+ <td class="description last"><p>The query selector expression to test against each parent.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2167">line 2167</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the closest parent node matching the selector or
+<code>null</code> when the node argument is no valid DOM <code>Node</code> or the
+selector didn't match any parent.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Node</span>
+|
+
+<span class="param-type">null</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(s)</span><span class="type-signature"> &rarr; {Node}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>Parses a given string as HTML and returns the first child node.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>s</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>A string containing an HTML fragment to parse. Note that only
+the first result of the resulting structure is returned, so an
+input value of <code>&lt;div&gt;foo&lt;/div&gt; &lt;div&gt;bar&lt;/div&gt;</code> will only return
+the first <code>div</code> element node.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2098">line 2098</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Returns the first DOM <code>Node</code> extracted from the HTML fragment or
+<code>null</code> on parsing failures or if no element could be found.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">Node</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+ <h3 class="subsection-title">Type Definitions</h3>
+
+
+
+
+
+
+
+ <h4 class="name" id="~ignoreCallbackFn"><span class="type-signature"></span>ignoreCallbackFn<span class="signature">(node)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+
+
+
+
+
+
+<div class="description">
+ <p>The ignore callback function is invoked by <code>isEmpty()</code> for each
+child node to decide whether to ignore a child node or not.</p>
+<p>When this function returns <code>false</code>, the node passed to it is
+ignored, else not.</p>
+</div>
+
+
+
+
+
+
+
+
+
+ <h5>Parameters:</h5>
+
+
+<table class="params">
+ <thead>
+ <tr>
+
+ <th>Name</th>
+
+
+ <th>Type</th>
+
+
+
+
+
+ <th class="last">Description</th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+
+ <tr>
+
+ <td class="name"><code>node</code></td>
+
+
+ <td class="type">
+
+
+<span class="param-type">Node</span>
+
+
+
+ </td>
+
+
+
+
+
+ <td class="description last"><p>The child node to test.</p></td>
+ </tr>
+
+
+ </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <dt class="tag-source">Source:</dt>
+ <dd class="tag-source"><ul class="dummy"><li>
+ <a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2628">line 2628</a>
+ </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+ <p>Boolean indicating whether to ignore the node or not.</p>
+</div>
+
+
+
+<dl>
+ <dt>
+ Type
+ </dt>
+ <dd>
+
+<span class="param-type">boolean</span>
+
+
+ </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+</article>
+
+</section>
+
+
+
+
+</div>
+
+<nav>
+ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="LuCI.html">LuCI</a></li><li><a href="LuCI.Class.html">Class</a></li><li><a href="LuCI.dom.html">dom</a></li><li><a href="LuCI.fs.html">fs</a></li><li><a href="LuCI.Headers.html">Headers</a></li><li><a href="LuCI.Network.html">Network</a></li><li><a href="LuCI.Network.Device.html">Device</a></li><li><a href="LuCI.Network.Hosts.html">Hosts</a></li><li><a href="LuCI.Network.Protocol.html">Protocol</a></li><li><a href="LuCI.Network.WifiDevice.html">WifiDevice</a></li><li><a href="LuCI.Network.WifiNetwork.html">WifiNetwork</a></li><li><a href="LuCI.Poll.html">Poll</a></li><li><a href="LuCI.Request.html">Request</a></li><li><a href="LuCI.Request.poll.html">poll</a></li><li><a href="LuCI.Response.html">Response</a></li><li><a href="LuCI.rpc.html">rpc</a></li><li><a href="LuCI.uci.html">uci</a></li><li><a href="LuCI.view.html">view</a></li><li><a href="LuCI.XHR.html">XHR</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+ Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Nov 05 2019 09:33:05 GMT+0100 (Central European Standard Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 04:11:10 +0000