3942789dc6
Signed-off-by: Jo-Philipp Wich <jo@mein.io> (cherry picked from commit d9452d1157aef6b8752fac0f4ed1e0b9221abb31)
1125 lines
No EOL
16 KiB
HTML
1125 lines
No EOL
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Class: view</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: view</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
<header>
|
|
|
|
<h2><span class="attribs"><span class="type-signature"></span></span>
|
|
<span class="ancestors"><a href="LuCI.html">LuCI</a>.</span>view</h2>
|
|
|
|
<div class="class-description"><p>The <code>view</code> class forms the basis of views and provides a standard
|
|
set of methods to inherit from.</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#line2687">line 2687</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3 class="subsection-title">Methods</h3>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="addFooter"><span class="type-signature"></span>addFooter<span class="signature">()</span><span class="type-signature"> → {DocumentFragment}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>Renders a standard page action footer if any of the
|
|
<code>handleSave()</code>, <code>handleSaveApply()</code> or <code>handleReset()</code>
|
|
functions are defined.</p>
|
|
<p>The default implementation should be sufficient for most
|
|
views - it will render a standard page footer with action
|
|
buttons labeled <code>Save</code>, <code>Save & Apply</code> and <code>Reset</code>
|
|
triggering the <code>handleSave()</code>, <code>handleSaveApply()</code> and
|
|
<code>handleReset()</code> functions respectively.</p>
|
|
<p>When any of these <code>handle*()</code> functions is overwritten
|
|
with <code>null</code> by a view extending this class, the
|
|
corresponding button will not be rendered.</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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#line2905">line 2905</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>Returns a <code>DocumentFragment</code> containing the footer bar
|
|
with buttons for each corresponding <code>handle*()</code> action
|
|
or an empty <code>DocumentFragment</code> if all three <code>handle*()</code>
|
|
methods are overwritten with <code>null</code>.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">DocumentFragment</span>
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="handleReset"><span class="type-signature"></span>handleReset<span class="signature">(ev)</span><span class="type-signature"> → {*|Promise.<*>}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>The handleReset function is invoked when the user clicks
|
|
the <code>Reset</code> button in the page action footer.</p>
|
|
<p>The default implementation should be sufficient for most
|
|
views using <code>form.Map()</code> based forms - it
|
|
will iterate all forms present in the view and invoke
|
|
the <code>Map.reset()</code> method on each form.</p>
|
|
<p>Views not using <code>Map</code> instances or requiring other special
|
|
logic should overwrite <code>handleReset()</code> with a custom
|
|
implementation.</p>
|
|
<p>To disable the <code>Reset</code> page footer button, views extending
|
|
this base class should overwrite the <code>handleReset</code> function
|
|
with <code>null</code>.</p>
|
|
<p>The invocation of this function is wrapped by
|
|
<code>Promise.resolve()</code> so it may return Promises if needed.</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>ev</code></td>
|
|
|
|
|
|
<td class="type">
|
|
|
|
|
|
<span class="param-type">Event</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="description last"><p>The DOM event that triggered the function.</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#line2871">line 2871</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>Any return values of this function are discarded, but
|
|
passed through <code>Promise.resolve()</code> to ensure that any
|
|
returned promise runs to completion before the button
|
|
is reenabled.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">*</span>
|
|
|
|
|
|
|
<span class="param-type">Promise.<*></span>
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="handleSave"><span class="type-signature"></span>handleSave<span class="signature">(ev)</span><span class="type-signature"> → {*|Promise.<*>}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>The handleSave function is invoked when the user clicks
|
|
the <code>Save</code> button in the page action footer.</p>
|
|
<p>The default implementation should be sufficient for most
|
|
views using <code>form.Map()</code> based forms - it
|
|
will iterate all forms present in the view and invoke
|
|
the <code>Map.save()</code> method on each form.</p>
|
|
<p>Views not using <code>Map</code> instances or requiring other special
|
|
logic should overwrite <code>handleSave()</code> with a custom
|
|
implementation.</p>
|
|
<p>To disable the <code>Save</code> page footer button, views extending
|
|
this base class should overwrite the <code>handleSave</code> function
|
|
with <code>null</code>.</p>
|
|
<p>The invocation of this function is wrapped by
|
|
<code>Promise.resolve()</code> so it may return Promises if needed.</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>ev</code></td>
|
|
|
|
|
|
<td class="type">
|
|
|
|
|
|
<span class="param-type">Event</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="description last"><p>The DOM event that triggered the function.</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#line2790">line 2790</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>Any return values of this function are discarded, but
|
|
passed through <code>Promise.resolve()</code> to ensure that any
|
|
returned promise runs to completion before the button
|
|
is reenabled.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">*</span>
|
|
|
|
|
|
|
<span class="param-type">Promise.<*></span>
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="handleSaveApply"><span class="type-signature"></span>handleSaveApply<span class="signature">(ev)</span><span class="type-signature"> → {*|Promise.<*>}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>The handleSaveApply function is invoked when the user clicks
|
|
the <code>Save & Apply</code> button in the page action footer.</p>
|
|
<p>The default implementation should be sufficient for most
|
|
views using <code>form.Map()</code> based forms - it
|
|
will first invoke
|
|
<code>view.handleSave()</code> and then
|
|
call <code>ui.changes.apply()</code> to start the
|
|
modal config apply and page reload flow.</p>
|
|
<p>Views not using <code>Map</code> instances or requiring other special
|
|
logic should overwrite <code>handleSaveApply()</code> with a custom
|
|
implementation.</p>
|
|
<p>To disable the <code>Save & Apply</code> page footer button, views
|
|
extending this base class should overwrite the
|
|
<code>handleSaveApply</code> function with <code>null</code>.</p>
|
|
<p>The invocation of this function is wrapped by
|
|
<code>Promise.resolve()</code> so it may return Promises if needed.</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>ev</code></td>
|
|
|
|
|
|
<td class="type">
|
|
|
|
|
|
<span class="param-type">Event</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="description last"><p>The DOM event that triggered the function.</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#line2834">line 2834</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>Any return values of this function are discarded, but
|
|
passed through <code>Promise.resolve()</code> to ensure that any
|
|
returned promise runs to completion before the button
|
|
is reenabled.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">*</span>
|
|
|
|
|
|
|
<span class="param-type">Promise.<*></span>
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="load"><span class="type-signature">(abstract) </span>load<span class="signature">()</span><span class="type-signature"> → {*|Promise.<*>}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>The load function is invoked before the view is rendered.</p>
|
|
<p>The invocation of this function is wrapped by
|
|
<code>Promise.resolve()</code> so it may return Promises if needed.</p>
|
|
<p>The return value of the function (or the resolved values
|
|
of the promise returned by it) will be passed as first
|
|
argument to <code>render()</code>.</p>
|
|
<p>This function is supposed to be overwritten by subclasses,
|
|
the default implementation does nothing.</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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#line2725">line 2725</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>May return any value or a Promise resolving to any value.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">*</span>
|
|
|
|
|
|
|
<span class="param-type">Promise.<*></span>
|
|
|
|
|
|
</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="name" id="render"><span class="type-signature">(abstract) </span>render<span class="signature">(load_results)</span><span class="type-signature"> → {Node|Promise.<Node>}</span></h4>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>The render function is invoked after the
|
|
<a href="LuCI.view.html#load"><code>load()</code></a> function and responsible
|
|
for setting up the view contents. It must return a DOM
|
|
<code>Node</code> or <code>DocumentFragment</code> holding the contents to
|
|
insert into the view area.</p>
|
|
<p>The invocation of this function is wrapped by
|
|
<code>Promise.resolve()</code> so it may return Promises if needed.</p>
|
|
<p>The return value of the function (or the resolved values
|
|
of the promise returned by it) will be inserted into the
|
|
main content area using
|
|
<a href="LuCI.dom.html#append"><code>dom.append()</code></a>.</p>
|
|
<p>This function is supposed to be overwritten by subclasses,
|
|
the default implementation does nothing.</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>load_results</code></td>
|
|
|
|
|
|
<td class="type">
|
|
|
|
|
|
<span class="param-type">*</span>
|
|
|
|
|
|
|
<span class="param-type">null</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="description last"><p>This function will receive the return value of the
|
|
<a href="LuCI.view.html#load"><code>view.load()</code></a> function as first
|
|
argument.</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#line2757">line 2757</a>
|
|
</li></ul></dd>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
|
|
<div class="param-desc">
|
|
<p>Should return a DOM <code>Node</code> value or a <code>Promise</code> resolving
|
|
to a <code>Node</code> value.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<dl>
|
|
<dt>
|
|
Type
|
|
</dt>
|
|
<dd>
|
|
|
|
<span class="param-type">Node</span>
|
|
|
|
|
|
|
<span class="param-type">Promise.<Node></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> |