@twobirds/microcomponents 0.0.3 → 0.0.6

package/public/jsdoc/es5+/symbols/MC.html

@@ -0,0 +1,621 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<meta name="generator" content="JsDoc Toolkit" />
+		
+		<title>JsDoc Reference - MC</title>
+
+		<style type="text/css">
+			/* default.css */
+body
+{
+	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+	width: 800px;
+}
+
+.header
+{
+	clear: both;
+	background-color: #ccc;
+	padding: 8px;
+}
+
+h1
+{
+	font-size: 150%;
+	font-weight: bold;
+	padding: 0;
+	margin: 1em 0 0 .3em;
+}
+
+hr
+{
+	border: none 0;
+	border-top: 1px solid #7F8FB1;
+	height: 1px;
+}
+
+pre.code
+{
+	display: block;
+	padding: 8px;
+	border: 1px dashed #ccc;
+}
+
+#index
+{
+	margin-top: 24px;
+	float: left;
+	width: 160px;
+	position: absolute;
+	left: 8px;
+	background-color: #F3F3F3;
+	padding: 8px;
+}
+
+#content
+{
+	margin-left: 190px;
+	width: 600px;
+}
+
+.classList
+{
+	list-style-type: none;
+	padding: 0;
+	margin: 0 0 0 8px;
+	font-family: arial, sans-serif;
+	font-size: 1em;
+	overflow: auto;
+}
+
+.classList li
+{
+	padding: 0;
+	margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+	font-size:170%;
+	line-height:130%;
+}
+
+h2 { font-size: 110%; }
+caption, div.sectionTitle
+{
+	background-color: #7F8FB1;
+	color: #fff;
+	font-size:130%;
+	text-align: left;
+	padding: 2px 6px 2px 6px;
+	border: 1px #7F8FB1 solid;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+	vertical-align: top;
+	padding: 4px;
+	border-bottom: 1px #7F8FB1 solid;
+	border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+	border-left: 1px #7F8FB1 solid;
+	width: 140px;
+	text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+	line-height: 15px;
+	color: #002EBE;
+	font-family: "Courier New",Courier,monospace;
+	font-size: 13px;
+}
+
+.summaryTable td.nameDescription
+{
+	text-align: left;
+	font-size: 13px;
+	line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+	line-height: 15px;
+	padding: 4px;
+	padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+	list-style: square;
+	margin-left: 20px;
+	padding-left: 0;
+}
+
+.detailList {
+	margin-left: 20px; 
+	line-height: 15px;
+}
+.detailList dt { margin-left: 20px; }
+
+.detailList .heading
+{
+	font-weight: bold;
+	padding-bottom: 6px;
+	margin-left: 0;
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+	color: #777;
+	font-style: italic;
+}
+
+.fineprint
+{
+	text-align: right;
+	font-size: 10px;
+}
+		</style>
+	</head>
+
+	<body>
+<!-- ============================== header ================================= -->	
+		<!-- begin static/header.html -->
+		<div id="header">
+</div>
+		<!-- end static/header.html -->
+
+<!-- ============================== classes index ============================ -->
+		<div id="index">
+			<!-- begin publish.classesIndex -->
+			<div align="center"><a href="../index.html">Class Index</a>
+| <a href="../files.html">File Index</a></div>
+<hr />
+<h2>Classes</h2>
+<ul class="classList">
+	
+	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
+	
+	<li><a href="../symbols/MC.html">MC</a></li>
+	
+</ul>
+<hr />
+			<!-- end publish.classesIndex -->
+		</div>
+		
+		<div id="content">
+<!-- ============================== class title ============================ -->
+			<h1 class="classTitle">
+				
+				Class MC
+			</h1>
+
+<!-- ============================== class summary ========================== -->			
+			<p class="description">
+				
+				
+			
+				
+				
+				
+					<br /><i>Defined in: </i> <a href="../symbols/src/build_microcomponents.js.html">microcomponents.js</a>.
+				
+			</p>
+
+<!-- ============================== constructor summary ==================== -->			
+			
+			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class MC.">
+				<caption>Class Summary</caption>
+				<thead>
+					<tr>
+						<th scope="col">Constructor Attributes</th>
+						<th scope="col">Constructor Name and Description</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td class="attributes">&nbsp;</td>
+						<td class="nameDescription" >
+							<div class="fixedFont">
+								<b><a href="../symbols/MC.html#constructor">MC</a></b>()
+							</div>
+							<div class="description">Manages microcomponents (MCs) attached to DOM elements, allowing for the
+addition, removal, and traversal of microcomponents across siblings, parents,
+children, and descendants.</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			
+
+<!-- ============================== properties summary ===================== -->
+			
+				
+				
+				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class MC.">
+					<caption>Field Summary</caption>
+					<thead>
+						<tr>
+							<th scope="col">Field Attributes</th>
+							<th scope="col">Field Name and Description</th>
+						</tr>
+					</thead>
+					<tbody>
+					
+						<tr>
+							<td class="attributes">&lt;static&gt; &nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">
+								MC.<b><a href="../symbols/MC.html#.debug">debug</a></b>
+								</div>
+								<div class="description">A static flag to enable or disable debugging mode.</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+
+<!-- ============================== methods summary ======================== -->
+			
+				
+				
+				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class MC.">
+					<caption>Method Summary</caption>
+					<thead>
+						<tr>
+							<th scope="col">Method Attributes</th>
+							<th scope="col">Method Name and Description</th>
+						</tr>
+					</thead>
+					<tbody>
+					
+						<tr>
+							<td class="attributes">&lt;static&gt; &nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">MC.<b><a href="../symbols/MC.html#.add">add</a></b>(target, key, element)
+								</div>
+								<div class="description">Adds a top level microcomponent to a target DOM node.</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&lt;static&gt; &nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">MC.<b><a href="../symbols/MC.html#.remove">remove</a></b>(target, key)
+								</div>
+								<div class="description">Removes a top level microcomponent from the target DOM node.</div>
+							</td>
+						</tr>
+					
+						<tr>
+							<td class="attributes">&lt;static&gt; &nbsp;</td>
+							<td class="nameDescription">
+								<div class="fixedFont">MC.<b><a href="../symbols/MC.html#.siblings">siblings</a></b>(target, search)
+								</div>
+								<div class="description">Retrieves all top-level microcomponents from a target HTMLElement.</div>
+							</td>
+						</tr>
+					
+					</tbody>
+				</table>
+				
+				
+				
+			
+<!-- ============================== events summary ======================== -->
+			
+
+<!-- ============================== constructor details ==================== -->		
+			
+			<div class="details"><a name="constructor"> </a>
+				<div class="sectionTitle">
+					Class Detail
+				</div>
+				
+				<div class="fixedFont">
+						<b>MC</b>()
+				</div>
+				
+				<div class="description">
+					Manages microcomponents (MCs) attached to DOM elements, allowing for the
+addition, removal, and traversal of microcomponents across siblings, parents,
+children, and descendants.
+
+This class provides an API for interacting with microcomponents on DOM elements.
+Public microcomponents are stored on the `_mc` attribute of the DOM element, while
+private microcomponents are managed internally.
+					
+				</div>
+				
+				
+				
+				<pre class="code">```javascript
+
+// create the micro component class
+class MyMC extends MC{
+
+&nbsp;constructor( target ){
+&nbsp;&nbsp;super( target );
+&nbsp;&nbsp;this.target = target;
+&nbsp;}
+}
+
+const element = document.querySelector('div')
+
+// Add the top level microcomponent to the target element
+let mcc = MC.add(
+&nbsp;element,
+&nbsp;'myMC',
+&nbsp;new MyMC( element )
+);
+
+// Add an inner (private) microcomponent to mcc
+let mcc.add(
+&nbsp;'myInnerMC',
+&nbsp;new MyMC( element )
+);
+
+console.log( element._mc );
+// { 'myMC': { target: (element) } }
+
+console.log( element._mc.myMC );
+// { target: (element) }
+
+console.log( mcc.siblings() );
+// [ { target: (element) } ]
+
+```</pre>
+				
+				
+				
+				
+					
+					
+					
+					
+					
+					
+					
+
+			</div>
+			
+
+<!-- ============================== field details ========================== -->		
+			
+				<div class="sectionTitle">
+					Field Detail
+				</div>
+				
+					<a name=".debug"> </a>
+					<div class="fixedFont">&lt;static&gt; 
+					
+					<span class="light">{A static flag to enable or disable debugging mode.}</span>
+					<span class="light">MC.</span><b>debug</b>
+					
+					</div>
+					<div class="description">
+						A static flag to enable or disable debugging mode.
+						
+						
+					</div>
+					
+					
+
+						
+						
+						
+						
+
+					
+				
+			
+
+<!-- ============================== method details ========================= -->		
+			
+				<div class="sectionTitle">
+					Method Detail
+				</div>
+				
+					<a name=".add"> </a>
+					<div class="fixedFont">&lt;static&gt; 
+					
+					<span class="light">{any}</span>
+					<span class="light">MC.</span><b>add</b>(target, key, element)
+					
+					</div>
+					<div class="description">
+						Adds a top level microcomponent to a target DOM node.
+						
+						
+					</div>
+					
+					
+					
+					<pre class="code">const component = MC.add(
+&nbsp;document.getElementById('myElement'),
+&nbsp;'myComponent',
+&nbsp;{}
+);</pre>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{HTMLElement}</span> <b>target</b>
+									
+								</dt>
+								<dd>- The target DOM element.</dd>
+							
+								<dt>
+									<span class="light fixedFont">{string}</span> <b>key</b>
+									
+								</dt>
+								<dd>- The key to identify the microcomponent.</dd>
+							
+								<dt>
+									<span class="light fixedFont">{any}</span> <b>element</b>
+									<i>Optional, Default: {}</i>
+								</dt>
+								<dd>- The microcomponent to add.</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+							<dl class="detailList">
+							<dt class="heading">Returns:</dt>
+							
+								<dd><span class="light fixedFont">{any}</span> The added microcomponent.</dd>
+							
+							</dl>
+						
+						
+						
+
+					<hr />
+				
+					<a name=".remove"> </a>
+					<div class="fixedFont">&lt;static&gt; 
+					
+					
+					<span class="light">MC.</span><b>remove</b>(target, key)
+					
+					</div>
+					<div class="description">
+						Removes a top level microcomponent from the target DOM node.
+						
+						
+					</div>
+					
+					
+					
+					<pre class="code">MC.remove(
+&nbsp;document.getElementById('myElement'),
+&nbsp;'myComponent'
+);</pre>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{HTMLElement}</span> <b>target</b>
+									
+								</dt>
+								<dd>- The target DOM element.</dd>
+							
+								<dt>
+									<span class="light fixedFont">{string}</span> <b>key</b>
+									
+								</dt>
+								<dd>- The key identifying the microcomponent.</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+						
+						
+
+					<hr />
+				
+					<a name=".siblings"> </a>
+					<div class="fixedFont">&lt;static&gt; 
+					
+					<span class="light">{Array<any>}</span>
+					<span class="light">MC.</span><b>siblings</b>(target, search)
+					
+					</div>
+					<div class="description">
+						Retrieves all top-level microcomponents from a target HTMLElement.
+						
+						
+					</div>
+					
+					
+					
+					<pre class="code">const siblings = MC.siblings(
+&nbsp;document.getElementById('myElement'),
+&nbsp;'myComponent'
+);</pre>
+					
+					
+					
+						
+							<dl class="detailList">
+							<dt class="heading">Parameters:</dt>
+							
+								<dt>
+									<span class="light fixedFont">{HTMLElement}</span> <b>target</b>
+									
+								</dt>
+								<dd>- The target DOM element.</dd>
+							
+								<dt>
+									<span class="light fixedFont">{string}</span> <b>search</b>
+									<i>Optional</i>
+								</dt>
+								<dd>- The key of the specific microcomponent to find.</dd>
+							
+							</dl>
+						
+						
+						
+						
+						
+							<dl class="detailList">
+							<dt class="heading">Returns:</dt>
+							
+								<dd><span class="light fixedFont">{Array<any>}</span> An array of microcomponents or an empty array if none found.</dd>
+							
+							</dl>
+						
+						
+						
+
+					
+				
+			
+			
+<!-- ============================== event details ========================= -->		
+			
+			
+			<hr />
+		</div>
+
+		
+<!-- ============================== footer ================================= -->
+		<div class="fineprint" style="clear:both">
+			
+			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Wed Oct 30 2024 23:18:47 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>