@twobirds/microcomponents 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MicroComponentProposal_draft.md +34 -0
- package/MicroComponents.svg +15 -0
- package/README.md +103 -0
- package/checklist.md +93 -0
- package/dist/MicroComponents.svg +15 -0
- package/dist/microcomponents.d.ts +21 -0
- package/dist/microcomponents.d.ts.map +1 -0
- package/dist/microcomponents.es3.d.ts +16 -0
- package/dist/microcomponents.es3.d.ts.map +1 -0
- package/dist/microcomponents.es3.js +96 -0
- package/dist/microcomponents.es3.min.js +15 -0
- package/dist/microcomponents.js +133 -0
- package/dist/microcomponents.min.js +27 -0
- package/docs/.nojekyll +1 -0
- package/docs/assets/highlight.css +99 -0
- package/docs/assets/main.js +58 -0
- package/docs/assets/search.js +1 -0
- package/docs/assets/style.css +1280 -0
- package/docs/classes/microcomponents.MC.html +296 -0
- package/docs/classes/microcomponents_es3.MC.html +209 -0
- package/docs/functions/microcomponents_es3.__isEmpty.html +60 -0
- package/docs/index.html +136 -0
- package/docs/interfaces/microcomponents.HTMLElementMc.html +3605 -0
- package/docs/modules/microcomponents.html +62 -0
- package/docs/modules/microcomponents_es3.html +60 -0
- package/docs/modules.html +48 -0
- package/microcomponents_magic.md +87 -0
- package/microcomponents_usage.md +110 -0
- package/package.json +19 -0
- package/src/microcomponents.es3.js +106 -0
- package/src/microcomponents.ts +169 -0
- package/tsconfig.json +107 -0
- package/typedoc.json +7 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
|
|
2
|
+
<div class="tsd-toolbar-contents container">
|
|
3
|
+
<div class="table-cell" id="tsd-search" data-base="..">
|
|
4
|
+
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
|
|
5
|
+
<div class="field">
|
|
6
|
+
<div id="tsd-toolbar-links"></div></div>
|
|
7
|
+
<ul class="results">
|
|
8
|
+
<li class="state loading">Preparing search index...</li>
|
|
9
|
+
<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
|
|
10
|
+
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
|
|
11
|
+
<div class="container container-main">
|
|
12
|
+
<div class="col-8 col-content">
|
|
13
|
+
<div class="tsd-page-title">
|
|
14
|
+
<ul class="tsd-breadcrumb">
|
|
15
|
+
<li><a href="../modules.html">microcomponents</a></li>
|
|
16
|
+
<li><a href="microcomponents.html">microcomponents</a></li></ul>
|
|
17
|
+
<h1>Module microcomponents</h1></div><aside class="tsd-sources">
|
|
18
|
+
<ul>
|
|
19
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
|
|
20
|
+
<section class="tsd-panel-group">
|
|
21
|
+
<section class="tsd-panel tsd-typography"></section></section>
|
|
22
|
+
<section class="tsd-panel-group tsd-index-group">
|
|
23
|
+
<section class="tsd-panel tsd-index-panel">
|
|
24
|
+
<h3 class="tsd-index-heading uppercase">Index</h3>
|
|
25
|
+
<section class="tsd-index-section">
|
|
26
|
+
<h3 class="tsd-index-heading">Classes</h3>
|
|
27
|
+
<div class="tsd-index-list"><a href="../classes/microcomponents.MC.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>MC</span></a>
|
|
28
|
+
</div></section>
|
|
29
|
+
<section class="tsd-index-section">
|
|
30
|
+
<h3 class="tsd-index-heading">Interfaces</h3>
|
|
31
|
+
<div class="tsd-index-list"><a href="../interfaces/microcomponents.HTMLElementMc.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>HTMLElement<wbr/>Mc</span></a>
|
|
32
|
+
</div></section></section></section></div>
|
|
33
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
34
|
+
<div class="tsd-navigation settings">
|
|
35
|
+
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
36
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
|
|
37
|
+
<div class="tsd-accordion-details">
|
|
38
|
+
<div class="tsd-filter-visibility">
|
|
39
|
+
<h4 class="uppercase">Member Visibility</h4><form>
|
|
40
|
+
<ul id="tsd-filter-options">
|
|
41
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
|
|
42
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
|
|
43
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
|
|
44
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
|
|
45
|
+
<div class="tsd-theme-toggle">
|
|
46
|
+
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
|
|
47
|
+
<nav class="tsd-navigation primary">
|
|
48
|
+
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
|
|
49
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
50
|
+
<div class="tsd-accordion-details">
|
|
51
|
+
<ul>
|
|
52
|
+
<li class="current"><a href="../modules.html">microcomponents</a>
|
|
53
|
+
<ul>
|
|
54
|
+
<li class="current selected tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
|
|
55
|
+
<li class="tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
|
|
56
|
+
<nav class="tsd-navigation secondary menu-sticky">
|
|
57
|
+
<ul>
|
|
58
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/microcomponents.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
59
|
+
<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/microcomponents.HTMLElementMc.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>HTMLElement<wbr/>Mc</a></li></ul></nav></div></div>
|
|
60
|
+
<div class="container tsd-generator">
|
|
61
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
62
|
+
<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents.es3 | microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
|
|
2
|
+
<div class="tsd-toolbar-contents container">
|
|
3
|
+
<div class="table-cell" id="tsd-search" data-base="..">
|
|
4
|
+
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
|
|
5
|
+
<div class="field">
|
|
6
|
+
<div id="tsd-toolbar-links"></div></div>
|
|
7
|
+
<ul class="results">
|
|
8
|
+
<li class="state loading">Preparing search index...</li>
|
|
9
|
+
<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
|
|
10
|
+
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
|
|
11
|
+
<div class="container container-main">
|
|
12
|
+
<div class="col-8 col-content">
|
|
13
|
+
<div class="tsd-page-title">
|
|
14
|
+
<ul class="tsd-breadcrumb">
|
|
15
|
+
<li><a href="../modules.html">microcomponents</a></li>
|
|
16
|
+
<li><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul>
|
|
17
|
+
<h1>Module microcomponents.es3</h1></div>
|
|
18
|
+
<section class="tsd-panel-group">
|
|
19
|
+
<section class="tsd-panel tsd-typography"></section></section>
|
|
20
|
+
<section class="tsd-panel-group tsd-index-group">
|
|
21
|
+
<section class="tsd-panel tsd-index-panel">
|
|
22
|
+
<h3 class="tsd-index-heading uppercase">Index</h3>
|
|
23
|
+
<section class="tsd-index-section">
|
|
24
|
+
<h3 class="tsd-index-heading">Classes</h3>
|
|
25
|
+
<div class="tsd-index-list"><a href="../classes/microcomponents_es3.MC.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>MC</span></a>
|
|
26
|
+
</div></section>
|
|
27
|
+
<section class="tsd-index-section">
|
|
28
|
+
<h3 class="tsd-index-heading">Functions</h3>
|
|
29
|
+
<div class="tsd-index-list"><a href="../functions/microcomponents_es3.__isEmpty.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>__is<wbr/>Empty</span></a>
|
|
30
|
+
</div></section></section></section></div>
|
|
31
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
32
|
+
<div class="tsd-navigation settings">
|
|
33
|
+
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
34
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
|
|
35
|
+
<div class="tsd-accordion-details">
|
|
36
|
+
<div class="tsd-filter-visibility">
|
|
37
|
+
<h4 class="uppercase">Member Visibility</h4><form>
|
|
38
|
+
<ul id="tsd-filter-options">
|
|
39
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
|
|
40
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
|
|
41
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
|
|
42
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
|
|
43
|
+
<div class="tsd-theme-toggle">
|
|
44
|
+
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
|
|
45
|
+
<nav class="tsd-navigation primary">
|
|
46
|
+
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
|
|
47
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
48
|
+
<div class="tsd-accordion-details">
|
|
49
|
+
<ul>
|
|
50
|
+
<li class="current"><a href="../modules.html">microcomponents</a>
|
|
51
|
+
<ul>
|
|
52
|
+
<li class="tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
|
|
53
|
+
<li class="current selected tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
|
|
54
|
+
<nav class="tsd-navigation secondary menu-sticky">
|
|
55
|
+
<ul>
|
|
56
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/microcomponents_es3.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
57
|
+
<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/microcomponents_es3.__isEmpty.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>__is<wbr/>Empty</a></li></ul></nav></div></div>
|
|
58
|
+
<div class="container tsd-generator">
|
|
59
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
60
|
+
<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
|
|
2
|
+
<div class="tsd-toolbar-contents container">
|
|
3
|
+
<div class="table-cell" id="tsd-search" data-base=".">
|
|
4
|
+
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
|
|
5
|
+
<div class="field">
|
|
6
|
+
<div id="tsd-toolbar-links"></div></div>
|
|
7
|
+
<ul class="results">
|
|
8
|
+
<li class="state loading">Preparing search index...</li>
|
|
9
|
+
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">microcomponents</a></div>
|
|
10
|
+
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
|
|
11
|
+
<div class="container container-main">
|
|
12
|
+
<div class="col-8 col-content">
|
|
13
|
+
<div class="tsd-page-title">
|
|
14
|
+
<h2>microcomponents</h2></div>
|
|
15
|
+
<section class="tsd-panel-group tsd-index-group">
|
|
16
|
+
<section class="tsd-panel tsd-index-panel">
|
|
17
|
+
<h3 class="tsd-index-heading uppercase">Index</h3>
|
|
18
|
+
<section class="tsd-index-section">
|
|
19
|
+
<h3 class="tsd-index-heading">Modules</h3>
|
|
20
|
+
<div class="tsd-index-list"><a href="modules/microcomponents.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>microcomponents</span></a>
|
|
21
|
+
<a href="modules/microcomponents_es3.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>microcomponents.es3</span></a>
|
|
22
|
+
</div></section></section></section></div>
|
|
23
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
24
|
+
<div class="tsd-navigation settings">
|
|
25
|
+
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
26
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
|
|
27
|
+
<div class="tsd-accordion-details">
|
|
28
|
+
<div class="tsd-filter-visibility">
|
|
29
|
+
<h4 class="uppercase">Member Visibility</h4><form>
|
|
30
|
+
<ul id="tsd-filter-options">
|
|
31
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
|
|
32
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
|
|
33
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
|
|
34
|
+
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
|
|
35
|
+
<div class="tsd-theme-toggle">
|
|
36
|
+
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
|
|
37
|
+
<nav class="tsd-navigation primary">
|
|
38
|
+
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
|
|
39
|
+
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
40
|
+
<div class="tsd-accordion-details">
|
|
41
|
+
<ul>
|
|
42
|
+
<li class="current selected"><a href="modules.html">microcomponents</a>
|
|
43
|
+
<ul>
|
|
44
|
+
<li class="selected tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
|
|
45
|
+
<li class="tsd-kind-module"><a href="modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav></div></div>
|
|
46
|
+
<div class="container tsd-generator">
|
|
47
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
48
|
+
<div class="overlay"></div><script src="assets/main.js"></script></body></html>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Additional concepts: how to make the magic happen...
|
|
2
|
+
|
|
3
|
+
**Micro Components** can literally be anything you can put into an object as a property.
|
|
4
|
+
|
|
5
|
+
Here are some examples of what **Micro Components** can really archieve.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## The MC() class can be used as a selector of its own, even if you dont attach a micro component yourself
|
|
9
|
+
|
|
10
|
+
Since MC is a class you instanciate with a target element as your selection root element, and you can do this:
|
|
11
|
+
|
|
12
|
+
```javascript
|
|
13
|
+
const myElement = document.getElementById('myDiv');
|
|
14
|
+
|
|
15
|
+
// find the nearst MC parent elements to this HTMLElement
|
|
16
|
+
const myParent = ( new MC( myElement ) ).parent();
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Since MC() is a class, you can extend your own micro components with it and have the selectors nicely available
|
|
20
|
+
|
|
21
|
+
Here is some typical usage:
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
class MyMicroComponent extends MC {
|
|
25
|
+
|
|
26
|
+
constructor( target ){
|
|
27
|
+
super(target);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
showParents(){
|
|
31
|
+
console.log( this.parents() ); // Logs all anchestor micro components
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
let myDiv = document.querySelector('div');
|
|
36
|
+
|
|
37
|
+
MC.add( myDiv, 'my_micro_component', new MyMicroComponent( myDiv ) );
|
|
38
|
+
|
|
39
|
+
// TADA!
|
|
40
|
+
myDiv
|
|
41
|
+
._mc
|
|
42
|
+
.my_micro_component
|
|
43
|
+
.showParents();
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
As you can see, without any effort you have a **second structural layer that hovers over the DOM**.
|
|
47
|
+
|
|
48
|
+
The browser knows nothing of this, except that there may be _mc properties on some HTMLElements.
|
|
49
|
+
|
|
50
|
+
It doesnt get more standard compliant than that.
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## Things I already did with this, in my own framework twoBirds, or in apps that I developed with it:
|
|
54
|
+
|
|
55
|
+
- `encapsuled and modular 3D rendering` in an HTMLElement viewport.
|
|
56
|
+
- `Data Driven Workflow` with micro components using tB specific observables.
|
|
57
|
+
- `DOM handling` in general, lots of `UI functionality`
|
|
58
|
+
- `2 way Data Binding` between forms and observable objects representing the form data
|
|
59
|
+
- `1 way Data Binding` from data observables to the DOM
|
|
60
|
+
- `Loose Coupling` via my own event objects
|
|
61
|
+
- `Rule Engines`
|
|
62
|
+
- `Complex Runtime Templating` without JSX or virtual DOM
|
|
63
|
+
- `Single Page Applications`
|
|
64
|
+
- `Micro Frontends`
|
|
65
|
+
- `Electron Apps`
|
|
66
|
+
- `Progressive Web Apps`
|
|
67
|
+
- `Complex Native Web Components`, that comprised of a set of modular `UI` and `business logic` micro components
|
|
68
|
+
- this ran on the `server` also, in standalone linux nodeJs processes. I removed this some time ago because I didnt want server and client code in one library. Now its easy to make a server variant of the micro component code if required.
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
Funny stuff:
|
|
72
|
+
|
|
73
|
+
- `Vending Machine Frontends`
|
|
74
|
+
- some `Simulators`
|
|
75
|
+
- `UI for ocean going container ships`
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
Not from me, but somehow based on my ideas:
|
|
79
|
+
|
|
80
|
+
- `SpaceX` uses web components as an interface in their `Dragon Capsule`. I kind of regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Anyway, much later the [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had then. So in a way, this already goes to space.
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
This list is far from complete, I used this as a core principle for 20 years. All of the above is modular, so you can use it together.
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
**Whatever functionality you can do with Javascript, you can encapsule it in a micro component and reuse in any framework that allows for DOM access**.
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Micro Component Management
|
|
2
|
+
|
|
3
|
+
This system allows you to attach, manage, and interact with micro components.
|
|
4
|
+
|
|
5
|
+
**Micro Components** can literally be anything you can put into an object as a property.
|
|
6
|
+
|
|
7
|
+
Also it has selectors to find micro components in the DOM. It consists of a single class `MC`.
|
|
8
|
+
|
|
9
|
+
## Summary of MC() Methods
|
|
10
|
+
|
|
11
|
+
Static Methods:
|
|
12
|
+
- **`MC.add( domElement, key, microcomponent)`**: Add another micro component to an element's existing micro component container.
|
|
13
|
+
- **`MC.remove( domElement, key)`**: Remove a micro component from an element’s container.
|
|
14
|
+
|
|
15
|
+
Selector methods with an optional search string, returning an array of micro components:
|
|
16
|
+
- **`myElement._mc.siblings(search?)`**: Retrieve micro components attached to the same element.
|
|
17
|
+
- **`myElement._mc.parent(search?)`**: Retrieve micro components attached to the closest parent element that has an `_mc` attribute.
|
|
18
|
+
- **`myElement._mc.parents(search?)`**: Retrieve micro components attached to ancestor elements that have an `_mc` attribute.
|
|
19
|
+
- **`myElement._mc.children(search?)`**: Retrieve micro components attached to nearest child elements that have an `_mc` attribute.
|
|
20
|
+
- **`myElement._mc.descendants(search?)`**: Retrieve micro components attached to all descendant elements that have an `_mc` attribute.
|
|
21
|
+
|
|
22
|
+
**Micro Components** will most likely be **class instances** that expose inner methods **or an observable collection** for data driven workflows, e.g. business process logic.
|
|
23
|
+
|
|
24
|
+
## Typical Workflow
|
|
25
|
+
|
|
26
|
+
1. **Attach micro components** to elements using `MC.add()`.
|
|
27
|
+
2. **Access** micro components by their property key or navigating through DOM (e.g., `siblings()`, `parents()`, `children()`, etc.) **and use their inner functionality**.
|
|
28
|
+
3. **Manipulate** micro components by adding or removing them as needed or change their properties/call their methods.
|
|
29
|
+
|
|
30
|
+
## 1. Attaching Micro Components to DOM Elements
|
|
31
|
+
|
|
32
|
+
To attach a micro component to an HTML element, use the `MC.add()` static function.
|
|
33
|
+
|
|
34
|
+
### Example Usage:
|
|
35
|
+
```javascript
|
|
36
|
+
var myElement = document.getElementById('myDiv');
|
|
37
|
+
|
|
38
|
+
// Attach a micro component (most often a class instance, here a simple object for simplicity) with a specific key
|
|
39
|
+
MC.add( myElement, 'myComponent', { name: 'example' } );
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- After you added a micro component using this function, the HTMLElement will contain a property `_mc` which is an class instance that offers some methods.
|
|
43
|
+
- Also the HTMLElement then has an attribute _mc which will indicate that at least one micro component is attached to this dom element.
|
|
44
|
+
|
|
45
|
+
## 2. Removing Micro Components
|
|
46
|
+
|
|
47
|
+
Micro components can be removed using the `MC.remove()` static method.
|
|
48
|
+
|
|
49
|
+
### Removing a Micro component:
|
|
50
|
+
```javascript
|
|
51
|
+
MC.remove( myDomElement, 'myComponent');
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**When all micro components are removed** (the _mc object has no more properties), the `_mc` **attribute is also removed** from the HTML element. The `_mc` **property persists**.
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## 3. Retrieving Sibling Micro components
|
|
58
|
+
|
|
59
|
+
The `.siblings()` method retrieves all micro components attached to the same DOM element.
|
|
60
|
+
|
|
61
|
+
### Example:
|
|
62
|
+
```javascript
|
|
63
|
+
var siblings = myElement._mc.siblings();
|
|
64
|
+
console.log(siblings); // Logs an array of sibling micro components
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
To retrieve a specific micro component by its key:
|
|
68
|
+
```javascript
|
|
69
|
+
var specificSibling = myElement._mc.siblings('anotherComponent');
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
- **The following methods hop over HTMLElements that contain no micro component.**
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
## 4. Navigating Parent and Ancestor Micro components
|
|
77
|
+
|
|
78
|
+
The `_mc.parent()` and `_mc.parents()` methods allow you to retrieve micro components attached to parent elements.
|
|
79
|
+
|
|
80
|
+
### Example:
|
|
81
|
+
```javascript
|
|
82
|
+
var parentMc = myElement._mc.parent();
|
|
83
|
+
console.log(parentMc); // Logs micro components closest nachestor that has microcomponents
|
|
84
|
+
|
|
85
|
+
var allAncestorsMc = myElement._mc.parents();
|
|
86
|
+
console.log(allAncestorsMc); // Logs all ancestor micro components up to document
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
To retrieve a specific micro component attached to the parent or ancestors:
|
|
90
|
+
```javascript
|
|
91
|
+
var specificAncestorMc = myElement._mc.parents('myComponent');
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 5. Retrieving Child and Descendant Micro components
|
|
95
|
+
|
|
96
|
+
The `_mc.children()` and `_mc.descendants()` methods retrieve micro components attached to child elements or any descendants.
|
|
97
|
+
|
|
98
|
+
### Example:
|
|
99
|
+
```javascript
|
|
100
|
+
var childMicro components = myElement._mc.children();
|
|
101
|
+
console.log(childMicro components); // Logs an array of nearest child micro components
|
|
102
|
+
|
|
103
|
+
var descendantMicro components = myElement._mc.descendants();
|
|
104
|
+
console.log(descendantMicro components); // Logs micro components attached to all descendants
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
To search for a specific micro component by key:
|
|
108
|
+
```javascript
|
|
109
|
+
var specificMc = myElement._mc.<someComponent>;
|
|
110
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@twobirds/microcomponents",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Micro Components Organization Class",
|
|
5
|
+
"main": "microcomponents.js",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "tsc; npm run minify; npm run copyToDist; typedoc;",
|
|
9
|
+
"minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
|
|
10
|
+
"copyToDist": "cp build/* dist; cp MicroComponents.svg dist"
|
|
11
|
+
},
|
|
12
|
+
"author": "",
|
|
13
|
+
"license": "ISC",
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"jsmin": "^1.0.1",
|
|
16
|
+
"typedoc": "^0.23.24",
|
|
17
|
+
"typescript": "^5.6.2"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function __isEmpty(obj) {
|
|
4
|
+
if (!obj) return false;
|
|
5
|
+
for (var key in obj) {
|
|
6
|
+
if (obj.hasOwnProperty(key) && key !== "_target") {
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
return true;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function MC(target) {
|
|
14
|
+
this._target = target;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// static functions, chainable
|
|
18
|
+
MC.add = function (domElement, key, element) {
|
|
19
|
+
if (key && typeof key === "string" && domElement && !domElement._mc[key]) {
|
|
20
|
+
domElement.mc[key] = element;
|
|
21
|
+
domElement.setAttribute("_mc", "");
|
|
22
|
+
}
|
|
23
|
+
return this;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
MC.remove = function (domElement, key) {
|
|
27
|
+
delete domElement._mc[key];
|
|
28
|
+
if (isEmpty(this)) {
|
|
29
|
+
this._target.removeAttribute("_mc");
|
|
30
|
+
}
|
|
31
|
+
return this;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// other methods, not chainable
|
|
35
|
+
MC.prototype.siblings = function (search) {
|
|
36
|
+
var mcValues = [];
|
|
37
|
+
if (this._target._mc) {
|
|
38
|
+
for (var key in this._target._mc) {
|
|
39
|
+
if (
|
|
40
|
+
key !== "_target" &&
|
|
41
|
+
this._target._mc.hasOwnProperty(key) &&
|
|
42
|
+
(!search || key === search)
|
|
43
|
+
) {
|
|
44
|
+
mcValues.push(this._target._mc[key]);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return mcValues;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
MC.prototype.parent = function (search) {
|
|
52
|
+
var mcValues = [];
|
|
53
|
+
var current = this._target.parentNode;
|
|
54
|
+
while (current) {
|
|
55
|
+
if (current._mc) {
|
|
56
|
+
return current._mc.siblings(search);
|
|
57
|
+
}
|
|
58
|
+
current = current.parentNode;
|
|
59
|
+
}
|
|
60
|
+
return mcValues;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
MC.prototype.parents = function (search) {
|
|
64
|
+
var mcValues = [];
|
|
65
|
+
var current = this._target.parentNode;
|
|
66
|
+
while (current) {
|
|
67
|
+
if (current._mc) {
|
|
68
|
+
mcValues = mcValues.concat(current._mc.siblings(search));
|
|
69
|
+
}
|
|
70
|
+
current = current.parentNode;
|
|
71
|
+
}
|
|
72
|
+
return mcValues;
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
MC.prototype.children = function (search) {
|
|
76
|
+
var mcValues = [];
|
|
77
|
+
function traverseTree(element) {
|
|
78
|
+
var children = element.children;
|
|
79
|
+
for (var i = 0; i < children.length; i++) {
|
|
80
|
+
var child = children[i];
|
|
81
|
+
if (child._mc) {
|
|
82
|
+
mcValues = mcValues.concat(child._mc.siblings(search));
|
|
83
|
+
continue;
|
|
84
|
+
}
|
|
85
|
+
traverseTree(child);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
traverseTree(this._target);
|
|
89
|
+
return mcValues;
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
MC.prototype.descendants = function (search) {
|
|
93
|
+
var mcValues = [];
|
|
94
|
+
function traverseTree(element) {
|
|
95
|
+
var children = element.children;
|
|
96
|
+
for (var i = 0; i < children.length; i++) {
|
|
97
|
+
var child = children[i];
|
|
98
|
+
if (child._mc) {
|
|
99
|
+
mcValues = mcValues.concat(child._mc.siblings(search));
|
|
100
|
+
}
|
|
101
|
+
traverseTree(child);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
traverseTree(this._target);
|
|
105
|
+
return mcValues;
|
|
106
|
+
};
|