Wplace-BlueMarble/docs/global.html
2025-08-08 16:10:50 -04:00

7664 lines
No EOL
99 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Global</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">Global</h1>
<section>
<header>
<h2></h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addBr"><span class="type-signature"></span>addBr<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `br` to the overlay.
This `br` element will have properties shared between all `br` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `br` that are NOT shared between all overlay `br` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `br`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.11</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line295">line 295</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;br> elements have a shared class (e.g. {'className': 'bar'})
overlay.addbr({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;br id="foo" class="bar">
&lt;/body></code></pre>
<h4 class="name" id="addButton"><span class="type-signature"></span>addButton<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `button` to the overlay.
This `button` element will have properties shared between all `button` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `button`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.12</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line352">line 352</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;button> elements have a shared class (e.g. {'className': 'bar'})
overlay.addButton({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;button id="foo" class="bar">Foobar.&lt;/button>
&lt;/body></code></pre>
<h4 class="name" id="addButtonHelp"><span class="type-signature"></span>addButtonHelp<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a help button to the overlay. It will have a "?" icon unless overridden in callback.
On click, the button will attempt to output the title to the output element (ID defined in Overlay constructor).
This `button` element will have properties shared between all `button` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `button` that are NOT shared between all overlay `button` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `button`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.12</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line386">line 386</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>// Assume all help button elements have a shared class (e.g. {'className': 'bar'})
overlay.addButtonHelp({'id': 'foo', 'title': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;button id="foo" class="bar" title="Help: Foobar.">?&lt;/button>
&lt;/body></code></pre>
<pre class="prettyprint"><code>// Assume all help button elements have a shared class (e.g. {'className': 'bar'})
overlay.addButtonHelp({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;button id="foo" class="bar" title="Help: Foobar.">?&lt;/button>
&lt;/body></code></pre>
<h4 class="name" id="addCheckbox"><span class="type-signature"></span>addCheckbox<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a checkbox to the overlay.
This checkbox element will have properties shared between all checkbox elements in the overlay.
You can override the shared properties by using a callback. Note: the checkbox element is inside a label element.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the checkbox that are NOT shared between all overlay checkbox elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the checkbox.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.10</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line323">line 323</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all checkbox elements have a shared class (e.g. {'className': 'bar'})
overlay.addCheckbox({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;label>
&lt;input type="checkbox" id="foo" class="bar">
"Foobar."
&lt;/label>
&lt;/body></code></pre>
<h4 class="name" id="addDiv"><span class="type-signature"></span>addDiv<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `div` to the overlay.
This `div` element will have properties shared between all `div` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `div` that are NOT shared between all overlay `div` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `div`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line144">line 144</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;div> elements have a shared class (e.g. {'className': 'bar'})
overlay.addDiv({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;div id="foo" class="bar">&lt;/div>
&lt;/body></code></pre>
<h4 class="name" id="addHeader"><span class="type-signature"></span>addHeader<span class="signature">(level, additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a header to the overlay.
This header element will have properties shared between all header elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>level</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The header level. Must be between 1 and 6 (inclusive)</td>
</tr>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the header that are NOT shared between all overlay header elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the header.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.7</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line245">line 245</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all header elements have a shared class (e.g. {'className': 'bar'})
overlay.addHeader(6, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;h6 id="foo" class="bar">Foobar.&lt;/h6>
&lt;/body></code></pre>
<h4 class="name" id="addHr"><span class="type-signature"></span>addHr<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `hr` to the overlay.
This `hr` element will have properties shared between all `hr` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `hr` that are NOT shared between all overlay `hr` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `hr`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.7</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line270">line 270</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;hr> elements have a shared class (e.g. {'className': 'bar'})
overlay.addhr({'id': 'foo'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;hr id="foo" class="bar">
&lt;/body></code></pre>
<h4 class="name" id="addImg"><span class="type-signature"></span>addImg<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `img` to the overlay.
This `img` element will have properties shared between all `img` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `img` that are NOT shared between all overlay `img` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `img`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line219">line 219</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;img> elements have a shared class (e.g. {'className': 'bar'})
overlay.addimg({'id': 'foo', 'src': './img.png'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;img id="foo" src="./img.png" class="bar">
&lt;/body></code></pre>
<h4 class="name" id="addInput"><span class="type-signature"></span>addInput<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `input` to the overlay.
This `input` element will have properties shared between all `input` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `input` that are NOT shared between all overlay `input` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `input`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.13</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line424">line 424</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;input> elements have a shared class (e.g. {'className': 'bar'})
overlay.addInput({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;input id="foo" class="bar">Foobar.&lt;/input>
&lt;/body></code></pre>
<h4 class="name" id="addInputFile"><span class="type-signature"></span>addInputFile<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a file input to the overlay with enhanced visibility controls.
This input element will have properties shared between all file input elements in the overlay.
Uses multiple hiding methods to prevent browser native text from appearing during minimize/maximize.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the file input that are NOT shared between all overlay file input elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the file input.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.17</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line453">line 453</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all file input elements have a shared class (e.g. {'className': 'bar'})
overlay.addInputFile({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;div>
&lt;input type="file" id="foo" class="bar" style="display: none">&lt;/input>
&lt;button>Foobar.&lt;/button>
&lt;/div>
&lt;/body></code></pre>
<h4 class="name" id="addP"><span class="type-signature"></span>addP<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `p` to the overlay.
This `p` element will have properties shared between all `p` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `p` that are NOT shared between all overlay `p` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `p`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line169">line 169</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;p> elements have a shared class (e.g. {'className': 'bar'})
overlay.addP({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;p id="foo" class="bar">Foobar.&lt;/p>
&lt;/body></code></pre>
<h4 class="name" id="addSmall"><span class="type-signature"></span>addSmall<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `small` to the overlay.
This `small` element will have properties shared between all `small` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `small` that are NOT shared between all overlay `small` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `small`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.55.8</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line194">line 194</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;small> elements have a shared class (e.g. {'className': 'bar'})
overlay.addSmall({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;small id="foo" class="bar">Foobar.&lt;/small>
&lt;/body></code></pre>
<h4 class="name" id="addTextarea"><span class="type-signature"></span>addTextarea<span class="signature">(additionalProperties<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Adds a `textarea` to the overlay.
This `textarea` element will have properties shared between all `textarea` elements in the overlay.
You can override the shared properties by using a callback.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>additionalProperties</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, any></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{}
</td>
<td class="description last">The DOM properties of the `textarea` that are NOT shared between all overlay `textarea` elements. These should be camelCase.</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
()=>{}
</td>
<td class="description last">Additional JS modification to the `textarea`.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.13</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line508">line 508</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>// Assume all &lt;textarea> elements have a shared class (e.g. {'className': 'bar'})
overlay.addTextarea({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
// Output:
// (Assume &lt;body> already exists in the webpage)
&lt;body>
&lt;textarea id="foo" class="bar">Foobar.&lt;/textarea>
&lt;/body></code></pre>
<h4 class="name" id="base64ToUint8"><span class="type-signature"></span>base64ToUint8<span class="signature">(base64)</span><span class="type-signature"> &rarr; {Uint8Array}</span></h4>
<div class="description">
Decodes a base 64 encoded Uint8 array using the browser's built-in ASCII to binary function
</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>base64</code></td>
<td class="type">
<span class="param-type">Uint8Array</span>
</td>
<td class="description last">The base 64 encoded Uint8Array to convert</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.72.9</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line121">line 121</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The decoded Uint8Array
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Uint8Array</span>
</dd>
</dl>
<h4 class="name" id="buildElement"><span class="type-signature"></span>buildElement<span class="signature">()</span><span class="type-signature"> &rarr; {Overlay}</span></h4>
<div class="description">
Finishes building an element.
Call this after you are finished adding children.
If the element will have no children, call it anyways.
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line100">line 100</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Overlay class instance (this)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Overlay</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>overlay
.addDiv()
.addHeader(1).buildElement() // Breaks out of the &lt;h1>
.addP().buildElement() // Breaks out of the &lt;p>
.buildElement() // Breaks out of the &lt;div>
.addHr() // Since there are no more elements, calling buildElement() is optional
.buildOverlay(document.body);</code></pre>
<h4 class="name" id="buildOverlay"><span class="type-signature"></span>buildOverlay<span class="signature">(parent)</span><span class="type-signature"></span></h4>
<div class="description">
Finishes building the overlay and displays it.
Call this when you are done chaining methods.
</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>parent</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">The parent HTMLElement this overlay should be appended to as a child.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line119">line 119</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>overlay
.addDiv()
.addP().buildElement()
.buildElement()
.buildOverlay(document.body); // Adds DOM structure to document body
// &lt;div>&lt;p>&lt;/p>&lt;/div></code></pre>
<h4 class="name" id="buildOverlayMain"><span class="type-signature"></span>buildOverlayMain<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Deploys the overlay to the page with minimize/maximize functionality.
Creates a responsive overlay UI that can toggle between full-featured and minimized states.
Parent/child relationships in the DOM structure below are indicated by indentation.
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.58.3</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="main.js.html">main.js</a>, <a href="main.js.html#line243">line 243</a>
</li></ul></dd>
</dl>
<h4 class="name" id="consoleError"><span class="type-signature"></span>consoleError<span class="signature">(&hellip;args)</span><span class="type-signature"></span></h4>
<div class="description">
Bypasses terser's stripping of console function calls.
This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't.
However, the distributed version needs to call the console somehow, so this wrapper function is how.
This is the same as `console.error()`.
</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>args</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="attributes">
&lt;repeatable><br>
</td>
<td class="description last">Arguments to be passed into the `error()` function of the Console</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.58.13</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line64">line 64</a>
</li></ul></dd>
</dl>
<h4 class="name" id="consoleLog"><span class="type-signature"></span>consoleLog<span class="signature">(&hellip;args)</span><span class="type-signature"></span></h4>
<div class="description">
Bypasses terser's stripping of console function calls.
This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't.
However, the distributed version needs to call the console somehow, so this wrapper function is how.
This is the same as `console.log()`.
</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>args</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="attributes">
&lt;repeatable><br>
</td>
<td class="description last">Arguments to be passed into the `log()` function of the Console</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.58.9</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line55">line 55</a>
</li></ul></dd>
</dl>
<h4 class="name" id="consoleWarn"><span class="type-signature"></span>consoleWarn<span class="signature">(&hellip;args)</span><span class="type-signature"></span></h4>
<div class="description">
Bypasses terser's stripping of console function calls.
This is so the non-obfuscated code will contain debugging console calls, but the distributed version won't.
However, the distributed version needs to call the console somehow, so this wrapper function is how.
This is the same as `console.warn()`.
</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>args</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="attributes">
&lt;repeatable><br>
</td>
<td class="description last">Arguments to be passed into the `warn()` function of the Console</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.58.13</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line73">line 73</a>
</li></ul></dd>
</dl>
<h4 class="name" id="createJSON"><span class="type-signature">(async) </span>createJSON<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
Creates the JSON object to store templates in
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.65.4</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line109">line 109</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The JSON object
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
<h4 class="name" id="createObserverBody"><span class="type-signature"></span>createObserverBody<span class="signature">(target)</span><span class="type-signature"> &rarr; {Observers}</span></h4>
<div class="description">
Creates the MutationObserver for document.body
</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>target</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">Targeted element to watch</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="observers.js.html">observers.js</a>, <a href="observers.js.html#line21">line 21</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
this (Observers class)
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Observers</span>
</dd>
</dl>
<h4 class="name" id="createTemplate"><span class="type-signature">(async) </span>createTemplate<span class="signature">(blob, name, coords)</span><span class="type-signature"></span></h4>
<div class="description">
Creates the template from the inputed file blob
</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>blob</code></td>
<td class="type">
<span class="param-type">File</span>
</td>
<td class="description last">The file blob to create a template from</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The display name of the template</td>
</tr>
<tr>
<td class="name"><code>coords</code></td>
<td class="type">
<span class="param-type">Array.&lt;number, number, number, number></span>
</td>
<td class="description last">The coordinates of the top left corner of the template</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.65.77</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line124">line 124</a>
</li></ul></dd>
</dl>
<h4 class="name" id="createTemplateTiles"><span class="type-signature">(async) </span>createTemplateTiles<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
Creates chunks of the template for each tile.
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.65.4</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Template.js.html">Template.js</a>, <a href="Template.js.html#line48">line 48</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Collection of template bitmaps & buffers organized by tile coordinates
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
<h4 class="name" id="deleteTemplate"><span class="type-signature"></span>deleteTemplate<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Deletes a template from the JSON object.
Also delete's the corrosponding Template class instance
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line185">line 185</a>
</li></ul></dd>
</dl>
<h4 class="name" id="disableTemplate"><span class="type-signature">(async) </span>disableTemplate<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Disables the template from view
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line191">line 191</a>
</li></ul></dd>
</dl>
<h4 class="name" id="drawTemplateOnTile"><span class="type-signature">(async) </span>drawTemplateOnTile<span class="signature">(tileBlob, tileCoords)</span><span class="type-signature"></span></h4>
<div class="description">
Draws all templates on the specified tile.
This method handles the rendering of template overlays on individual tiles.
</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>tileBlob</code></td>
<td class="type">
<span class="param-type">File</span>
</td>
<td class="description last">The pixels that are placed on a tile</td>
</tr>
<tr>
<td class="name"><code>tileCoords</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
</td>
<td class="description last">The tile coordinates [x, y]</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.65.77</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line205">line 205</a>
</li></ul></dd>
</dl>
<h4 class="name" id="escapeHTML"><span class="type-signature"></span>escapeHTML<span class="signature">(text)</span><span class="type-signature"> &rarr; {string}</span></h4>
<div class="description">
Sanitizes HTML to display as plain-text.
This prevents some Cross Site Scripting (XSS).
This is handy when you are displaying user-made data, and you *must* use innerHTML.
</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>text</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The text to sanitize</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.44.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line19">line 19</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
HTML escaped string
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>const paragraph = document.createElement('p');
paragraph.innerHTML = escapeHTML('&lt;u>Foobar.&lt;/u>');
// Output:
// (Does not include the paragraph element)
// (Output is not HTML formatted)
&lt;p>
"&lt;u>Foobar.&lt;/u>"
&lt;/p></code></pre>
<h4 class="name" id="getObserverBody"><span class="type-signature"></span>getObserverBody<span class="signature">()</span><span class="type-signature"> &rarr; {MutationObserver}</span></h4>
<div class="description">
Retrieves the MutationObserver that watches document.body
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="observers.js.html">observers.js</a>, <a href="observers.js.html#line45">line 45</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">MutationObserver</span>
</dd>
</dl>
<h4 class="name" id="handleDisplayError"><span class="type-signature"></span>handleDisplayError<span class="signature">(text)</span><span class="type-signature"></span></h4>
<div class="description">
Handles error display.
This will output plain text into the output Status box.
Additionally, this will output an error to the console.
</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>text</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The error text to display.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.41.6</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line693">line 693</a>
</li></ul></dd>
</dl>
<h4 class="name" id="handleDisplayStatus"><span class="type-signature"></span>handleDisplayStatus<span class="signature">(text)</span><span class="type-signature"></span></h4>
<div class="description">
Handles status display.
This will output plain text into the output Status box.
Additionally, this will output an info message to the console.
</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>text</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The status text to display.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.58.4</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line681">line 681</a>
</li></ul></dd>
</dl>
<h4 class="name" id="handleDrag"><span class="type-signature"></span>handleDrag<span class="signature">(moveMe, iMoveThings)</span><span class="type-signature"></span></h4>
<div class="description">
Handles dragging of the overlay.
Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
</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>moveMe</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The ID of the element to be moved</td>
</tr>
<tr>
<td class="name"><code>iMoveThings</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The ID of the drag handle element</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.8.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line550">line 550</a>
</li></ul></dd>
</dl>
<h4 class="name" id="importJSON"><span class="type-signature"></span>importJSON<span class="signature">(json)</span><span class="type-signature"></span></h4>
<div class="description">
Imports the JSON object, and appends it to any JSON object already loaded
</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>json</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The JSON string to parse</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line311">line 311</a>
</li></ul></dd>
</dl>
<h4 class="name" id="inject"><span class="type-signature"></span>inject<span class="signature">(callback)</span><span class="type-signature"></span></h4>
<div class="description">
Injects code into the client
This code will execute outside of TamperMonkey's sandbox
</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>callback</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last">The code to execute</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.11.15</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="main.js.html">main.js</a>, <a href="main.js.html#line20">line 20</a>
</li></ul></dd>
</dl>
<h4 class="name" id="negativeSafeModulo"><span class="type-signature"></span>negativeSafeModulo<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {number}</span></h4>
<div class="description">
Negative-Safe Modulo. You can pass negative numbers into this.
</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>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The first number</td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The second number</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.55.8</li></ul></dd>
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>osuplace</li>
</ul>
</dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line44">line 44</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Result
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
<h4 class="name" id="numberToEncoded"><span class="type-signature"></span>numberToEncoded<span class="signature">(number, encoding)</span><span class="type-signature"> &rarr; {string}</span></h4>
<div class="description">
Encodes a number into a custom encoded string.
</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>number</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">The number to encode</td>
</tr>
<tr>
<td class="name"><code>encoding</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The characters to use when encoding</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.65.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line87">line 87</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Encoded string
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>const encode = '012abcABC'; // Base 9
console.log(numberToEncoded(0, encode)); // 0
console.log(numberToEncoded(5, encode)); // c
console.log(numberToEncoded(15, encode)); // 1A
console.log(numberToEncoded(12345, encode)); // 1BCaA</code></pre>
<h4 class="name" id="observe"><span class="type-signature"></span>observe<span class="signature">(observer, watchChildList, watchSubtree)</span><span class="type-signature"></span></h4>
<div class="description">
Observe a MutationObserver
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>observer</code></td>
<td class="type">
<span class="param-type">MutationObserver</span>
</td>
<td class="default">
</td>
<td class="description last">The MutationObserver</td>
</tr>
<tr>
<td class="name"><code>watchChildList</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">(Optional) Should childList be watched? False by default</td>
</tr>
<tr>
<td class="name"><code>watchSubtree</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">(Optional) Should childList be watched? False by default</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.43.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="observers.js.html">observers.js</a>, <a href="observers.js.html#line55">line 55</a>
</li></ul></dd>
</dl>
<h4 class="name" id="observeBlack"><span class="type-signature"></span>observeBlack<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Observe the black color, and add the "Move" button.
</div>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.66.3</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="main.js.html">main.js</a>, <a href="main.js.html#line201">line 201</a>
</li></ul></dd>
</dl>
<h4 class="name" id="serverTPtoDisplayTP"><span class="type-signature"></span>serverTPtoDisplayTP<span class="signature">(tile, pixel)</span><span class="type-signature"> &rarr; {Array.&lt;number>}</span></h4>
<div class="description">
Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.
</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>tile</code></td>
<td class="type">
<span class="param-type">Array.&lt;string></span>
</td>
<td class="description last">The tile to convert (as an array like ["12", "124"])</td>
</tr>
<tr>
<td class="name"><code>pixel</code></td>
<td class="type">
<span class="param-type">Array.&lt;string></span>
</td>
<td class="description last">The pixel to convert (as an array like ["12", "124"])</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.42.4</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line33">line 33</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
[tile, pixel]
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.&lt;number></span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>console.log(serverTPtoDisplayTP(['12', '123'], ['34', '567'])); // [34, 3567]</code></pre>
<h4 class="name" id="setApiManager"><span class="type-signature"></span>setApiManager<span class="signature">(apiManager)</span><span class="type-signature"></span></h4>
<div class="description">
Populates the apiManager variable with the apiManager class.
</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>apiManager</code></td>
<td class="type">
<span class="param-type">apiManager</span>
</td>
<td class="description last">The apiManager class instance</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.41.4</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line50">line 50</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setTemplatesShouldBeDrawn"><span class="type-signature"></span>setTemplatesShouldBeDrawn<span class="signature">(value)</span><span class="type-signature"></span></h4>
<div class="description">
Sets the `templatesShouldBeDrawn` boolean to a value.
</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>value</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">The value to set the boolean to</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.73.7</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="templateManager.js.html">templateManager.js</a>, <a href="templateManager.js.html#line390">line 390</a>
</li></ul></dd>
</dl>
<h4 class="name" id="spontaneousResponseListener"><span class="type-signature"></span>spontaneousResponseListener<span class="signature">(overlay)</span><span class="type-signature"></span></h4>
<div class="description">
Determines if the spontaneously recieved response is something we want.
Otherwise, we can ignore it.
Note: Due to aggressive compression, make your calls like `data['jsonData']['name']` instead of `data.jsonData.name`
</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>overlay</code></td>
<td class="type">
<span class="param-type">Overlay</span>
</td>
<td class="description last">The Overlay class instance</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.11.1</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="apiManager.js.html">apiManager.js</a>, <a href="apiManager.js.html#line29">line 29</a>
</li></ul></dd>
</dl>
<h4 class="name" id="uint8ToBase64"><span class="type-signature"></span>uint8ToBase64<span class="signature">(uint8)</span><span class="type-signature"> &rarr; {Uint8Array}</span></h4>
<div class="description">
Converts a Uint8 array to base64 using the browser's built-in binary to ASCII function
</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>uint8</code></td>
<td class="type">
<span class="param-type">Uint8Array</span>
</td>
<td class="description last">The Uint8Array to convert</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.72.9</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line108">line 108</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The base64 encoded Uint8Array
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Uint8Array</span>
</dd>
</dl>
<h4 class="name" id="updateInnerHTML"><span class="type-signature"></span>updateInnerHTML<span class="signature">(id, html, doSafe<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
Updates the inner HTML of the element.
The element is discovered by it's id.
If the element is an `input`, it will modify the value attribute instead.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The ID of the element to change</td>
</tr>
<tr>
<td class="name"><code>html</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The HTML/text to update with</td>
</tr>
<tr>
<td class="name"><code>doSafe</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">(Optional) Should `textContent` be used instead of `innerHTML` to avoid XSS? False by default</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-since">Since:</dt>
<dd class="tag-since"><ul class="dummy"><li>0.24.2</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Overlay.js.html">Overlay.js</a>, <a href="Overlay.js.html#line525">line 525</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module.exports.html">exports</a></li><li><a href="module.exports_module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addBr">addBr</a></li><li><a href="global.html#addButton">addButton</a></li><li><a href="global.html#addButtonHelp">addButtonHelp</a></li><li><a href="global.html#addCheckbox">addCheckbox</a></li><li><a href="global.html#addDiv">addDiv</a></li><li><a href="global.html#addHeader">addHeader</a></li><li><a href="global.html#addHr">addHr</a></li><li><a href="global.html#addImg">addImg</a></li><li><a href="global.html#addInput">addInput</a></li><li><a href="global.html#addInputFile">addInputFile</a></li><li><a href="global.html#addP">addP</a></li><li><a href="global.html#addSmall">addSmall</a></li><li><a href="global.html#addTextarea">addTextarea</a></li><li><a href="global.html#base64ToUint8">base64ToUint8</a></li><li><a href="global.html#buildElement">buildElement</a></li><li><a href="global.html#buildOverlay">buildOverlay</a></li><li><a href="global.html#buildOverlayMain">buildOverlayMain</a></li><li><a href="global.html#consoleError">consoleError</a></li><li><a href="global.html#consoleLog">consoleLog</a></li><li><a href="global.html#consoleWarn">consoleWarn</a></li><li><a href="global.html#createJSON">createJSON</a></li><li><a href="global.html#createObserverBody">createObserverBody</a></li><li><a href="global.html#createTemplate">createTemplate</a></li><li><a href="global.html#createTemplateTiles">createTemplateTiles</a></li><li><a href="global.html#deleteTemplate">deleteTemplate</a></li><li><a href="global.html#disableTemplate">disableTemplate</a></li><li><a href="global.html#drawTemplateOnTile">drawTemplateOnTile</a></li><li><a href="global.html#escapeHTML">escapeHTML</a></li><li><a href="global.html#getObserverBody">getObserverBody</a></li><li><a href="global.html#handleDisplayError">handleDisplayError</a></li><li><a href="global.html#handleDisplayStatus">handleDisplayStatus</a></li><li><a href="global.html#handleDrag">handleDrag</a></li><li><a href="global.html#importJSON">importJSON</a></li><li><a href="global.html#inject">inject</a></li><li><a href="global.html#negativeSafeModulo">negativeSafeModulo</a></li><li><a href="global.html#numberToEncoded">numberToEncoded</a></li><li><a href="global.html#observe">observe</a></li><li><a href="global.html#observeBlack">observeBlack</a></li><li><a href="global.html#serverTPtoDisplayTP">serverTPtoDisplayTP</a></li><li><a href="global.html#setApiManager">setApiManager</a></li><li><a href="global.html#setTemplatesShouldBeDrawn">setTemplatesShouldBeDrawn</a></li><li><a href="global.html#spontaneousResponseListener">spontaneousResponseListener</a></li><li><a href="global.html#uint8ToBase64">uint8ToBase64</a></li><li><a href="global.html#updateInnerHTML">updateInnerHTML</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Fri Aug 08 2025 16:09:33 GMT-0400 (Eastern Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>