@twobirds/microcomponents 0.0.4 → 0.0.6
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 +1 -1
- package/README.md +44 -26
- package/dist/microcomponents.d.ts +218 -2
- package/dist/microcomponents.d.ts.map +1 -1
- package/dist/microcomponents.js +237 -43
- package/dist/microcomponents.min.js +7 -6
- package/dist/microcomponents.ts +391 -201
- package/jsdoc.conf.json +19 -0
- package/microcomponents_usage.md +56 -24
- package/package.json +13 -2
- package/public/docs/assets/highlight.css +14 -14
- package/public/docs/assets/search.js +1 -1
- package/public/docs/classes/microcomponents.MC.html +179 -41
- package/public/docs/classes/microcomponents_es3.MC.html +12 -12
- package/public/docs/functions/microcomponents_es3.__isEmpty.html +1 -1
- package/public/docs/index.html +18 -16
- package/public/docs/interfaces/microcomponents.HTMLElementMc.html +2 -2
- package/public/docs/modules/microcomponents.html +1 -1
- package/public/jsdoc/es3/files.html +216 -0
- package/public/jsdoc/es3/index.html +210 -0
- package/public/jsdoc/es3/symbols/_global_.html +368 -0
- package/public/jsdoc/es3/symbols/src/build_microcomponents.es3.js.html +104 -0
- package/public/jsdoc/es5+/files.html +218 -0
- package/public/jsdoc/es5+/index.html +218 -0
- package/public/jsdoc/es5+/symbols/MC.html +621 -0
- package/public/jsdoc/es5+/symbols/_global_.html +720 -0
- package/public/jsdoc/es5+/symbols/microcomponents.MC.html +323 -0
- package/public/jsdoc/es5+/symbols/src/build_microcomponents.js.html +375 -0
- package/src/microcomponents.ts +391 -201
|
@@ -0,0 +1,375 @@
|
|
|
1
|
+
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
|
|
2
|
+
.KEYW {color: #933;}
|
|
3
|
+
.COMM {color: #bbb; font-style: italic;}
|
|
4
|
+
.NUMB {color: #393;}
|
|
5
|
+
.STRN {color: #393;}
|
|
6
|
+
.REGX {color: #339;}
|
|
7
|
+
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
|
|
8
|
+
</style></head><body><pre><span class='line'> 1</span> <span class="STRN">'use strict'</span><span class="PUNC">;</span><span class="WHIT">
|
|
9
|
+
<span class='line'> 2</span> </span><span class="COMM">/**
|
|
10
|
+
<span class='line'> 3</span> * @module microcomponenents
|
|
11
|
+
<span class='line'> 4</span> */</span><span class="WHIT">
|
|
12
|
+
<span class='line'> 5</span> </span><span class="COMM">/**
|
|
13
|
+
<span class='line'> 6</span> * A static flag to enable or disable debugging mode.
|
|
14
|
+
<span class='line'> 7</span> * @name debug
|
|
15
|
+
<span class='line'> 8</span> * @memberOf MC
|
|
16
|
+
<span class='line'> 9</span> * @static
|
|
17
|
+
<span class='line'> 10</span> * @type {boolean} A static flag to enable or disable debugging mode.
|
|
18
|
+
<span class='line'> 11</span> */</span><span class="WHIT">
|
|
19
|
+
<span class='line'> 12</span> </span><span class="COMM">/**
|
|
20
|
+
<span class='line'> 13</span> * Retrieves all top-level microcomponents from a target HTMLElement.
|
|
21
|
+
<span class='line'> 14</span> * @name siblings
|
|
22
|
+
<span class='line'> 15</span> * @memberOf MC
|
|
23
|
+
<span class='line'> 16</span> * @static
|
|
24
|
+
<span class='line'> 17</span> * @function
|
|
25
|
+
<span class='line'> 18</span> * @param {HTMLElement} target - The target DOM element.
|
|
26
|
+
<span class='line'> 19</span> * @param {string} [search] - The key of the specific microcomponent to find.
|
|
27
|
+
<span class='line'> 20</span> * @returns {Array<any>} An array of microcomponents or an empty array if none found.
|
|
28
|
+
<span class='line'> 21</span> * @example
|
|
29
|
+
<span class='line'> 22</span> * const siblings = MC.siblings(
|
|
30
|
+
<span class='line'> 23</span> * document.getElementById('myElement'),
|
|
31
|
+
<span class='line'> 24</span> * 'myComponent'
|
|
32
|
+
<span class='line'> 25</span> * );
|
|
33
|
+
<span class='line'> 26</span> */</span><span class="WHIT">
|
|
34
|
+
<span class='line'> 27</span> </span><span class="COMM">/**
|
|
35
|
+
<span class='line'> 28</span> * Adds a top level microcomponent to a target DOM node.
|
|
36
|
+
<span class='line'> 29</span> * @name add
|
|
37
|
+
<span class='line'> 30</span> * @memberOf MC
|
|
38
|
+
<span class='line'> 31</span> * @static
|
|
39
|
+
<span class='line'> 32</span> * @function
|
|
40
|
+
<span class='line'> 33</span> * @param {HTMLElement} target - The target DOM element.
|
|
41
|
+
<span class='line'> 34</span> * @param {string} key - The key to identify the microcomponent.
|
|
42
|
+
<span class='line'> 35</span> * @param {any} [element={}] - The microcomponent to add.
|
|
43
|
+
<span class='line'> 36</span> * @returns {any} The added microcomponent.
|
|
44
|
+
<span class='line'> 37</span> * @example
|
|
45
|
+
<span class='line'> 38</span> * const component = MC.add(
|
|
46
|
+
<span class='line'> 39</span> * document.getElementById('myElement'),
|
|
47
|
+
<span class='line'> 40</span> * 'myComponent',
|
|
48
|
+
<span class='line'> 41</span> * {}
|
|
49
|
+
<span class='line'> 42</span> * );
|
|
50
|
+
<span class='line'> 43</span> */</span><span class="WHIT">
|
|
51
|
+
<span class='line'> 44</span> </span><span class="COMM">/**
|
|
52
|
+
<span class='line'> 45</span> * Removes a top level microcomponent from the target DOM node.
|
|
53
|
+
<span class='line'> 46</span> * @name remove
|
|
54
|
+
<span class='line'> 47</span> * @memberOf MC
|
|
55
|
+
<span class='line'> 48</span> * @static
|
|
56
|
+
<span class='line'> 49</span> * @function
|
|
57
|
+
<span class='line'> 50</span> * @param {HTMLElement} target - The target DOM element.
|
|
58
|
+
<span class='line'> 51</span> * @param {string} key - The key identifying the microcomponent.
|
|
59
|
+
<span class='line'> 52</span> * @example
|
|
60
|
+
<span class='line'> 53</span> * MC.remove(
|
|
61
|
+
<span class='line'> 54</span> * document.getElementById('myElement'),
|
|
62
|
+
<span class='line'> 55</span> * 'myComponent'
|
|
63
|
+
<span class='line'> 56</span> * );
|
|
64
|
+
<span class='line'> 57</span> */</span><span class="WHIT">
|
|
65
|
+
<span class='line'> 58</span> </span><span class="COMM">/**
|
|
66
|
+
<span class='line'> 59</span> * Manages microcomponents (MCs) attached to DOM elements, allowing for the
|
|
67
|
+
<span class='line'> 60</span> * addition, removal, and traversal of microcomponents across siblings, parents,
|
|
68
|
+
<span class='line'> 61</span> * children, and descendants.
|
|
69
|
+
<span class='line'> 62</span> *
|
|
70
|
+
<span class='line'> 63</span> * This class provides an API for interacting with microcomponents on DOM elements.
|
|
71
|
+
<span class='line'> 64</span> * Public microcomponents are stored on the `_mc` attribute of the DOM element, while
|
|
72
|
+
<span class='line'> 65</span> * private microcomponents are managed internally.
|
|
73
|
+
<span class='line'> 66</span> *
|
|
74
|
+
<span class='line'> 67</span> * @example
|
|
75
|
+
<span class='line'> 68</span> * ```javascript
|
|
76
|
+
<span class='line'> 69</span> *
|
|
77
|
+
<span class='line'> 70</span> * // create the micro component class
|
|
78
|
+
<span class='line'> 71</span> * class MyMC extends MC{
|
|
79
|
+
<span class='line'> 72</span> *
|
|
80
|
+
<span class='line'> 73</span> * constructor( target ){
|
|
81
|
+
<span class='line'> 74</span> * super( target );
|
|
82
|
+
<span class='line'> 75</span> * this.target = target;
|
|
83
|
+
<span class='line'> 76</span> * }
|
|
84
|
+
<span class='line'> 77</span> * }
|
|
85
|
+
<span class='line'> 78</span> *
|
|
86
|
+
<span class='line'> 79</span> * const element = document.querySelector('div')
|
|
87
|
+
<span class='line'> 80</span> *
|
|
88
|
+
<span class='line'> 81</span> * // Add the top level microcomponent to the target element
|
|
89
|
+
<span class='line'> 82</span> * let mcc = MC.add(
|
|
90
|
+
<span class='line'> 83</span> * element,
|
|
91
|
+
<span class='line'> 84</span> * 'myMC',
|
|
92
|
+
<span class='line'> 85</span> * new MyMC( element )
|
|
93
|
+
<span class='line'> 86</span> * );
|
|
94
|
+
<span class='line'> 87</span> *
|
|
95
|
+
<span class='line'> 88</span> * // Add an inner (private) microcomponent to mcc
|
|
96
|
+
<span class='line'> 89</span> * let mcc.add(
|
|
97
|
+
<span class='line'> 90</span> * 'myInnerMC',
|
|
98
|
+
<span class='line'> 91</span> * new MyMC( element )
|
|
99
|
+
<span class='line'> 92</span> * );
|
|
100
|
+
<span class='line'> 93</span> *
|
|
101
|
+
<span class='line'> 94</span> * console.log( element._mc );
|
|
102
|
+
<span class='line'> 95</span> * // { 'myMC': { target: (element) } }
|
|
103
|
+
<span class='line'> 96</span> *
|
|
104
|
+
<span class='line'> 97</span> * console.log( element._mc.myMC );
|
|
105
|
+
<span class='line'> 98</span> * // { target: (element) }
|
|
106
|
+
<span class='line'> 99</span> *
|
|
107
|
+
<span class='line'>100</span> * console.log( mcc.siblings() );
|
|
108
|
+
<span class='line'>101</span> * // [ { target: (element) } ]
|
|
109
|
+
<span class='line'>102</span> *
|
|
110
|
+
<span class='line'>103</span> * ```
|
|
111
|
+
<span class='line'>104</span> * @class
|
|
112
|
+
<span class='line'>105</span> * @name MC
|
|
113
|
+
<span class='line'>106</span> */</span><span class="WHIT">
|
|
114
|
+
<span class='line'>107</span> </span><span class="NAME">class</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
115
|
+
<span class='line'>108</span> </span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
|
|
116
|
+
<span class='line'>109</span> </span><span class="WHIT"> </span><span class="NAME">privateMCs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
|
|
117
|
+
<span class='line'>110</span> </span><span class="WHIT"> </span><span class="NAME">_mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
|
|
118
|
+
<span class='line'>111</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">debug</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
|
|
119
|
+
<span class='line'>112</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
120
|
+
<span class='line'>113</span> * Constructs an MC instance with a target DOM element.
|
|
121
|
+
<span class='line'>114</span> * @constructor
|
|
122
|
+
<span class='line'>115</span> * @param {HTMLElement | { [key: string]: any }} - The target DOM element or any object.
|
|
123
|
+
<span class='line'>116</span> */</span><span class="WHIT">
|
|
124
|
+
<span class='line'>117</span> </span><span class="WHIT"> </span><span class="NAME">constructor</span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
125
|
+
<span class='line'>118</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
126
|
+
<span class='line'>119</span> * target is a DOM element or a parent MC
|
|
127
|
+
<span class='line'>120</span> * @type {object}
|
|
128
|
+
<span class='line'>121</span> * @public
|
|
129
|
+
<span class='line'>122</span> */</span><span class="WHIT">
|
|
130
|
+
<span class='line'>123</span> </span><span class="WHIT"> </span><span class="NAME">this.target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
|
|
131
|
+
<span class='line'>124</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
132
|
+
<span class='line'>125</span> * The collection of private microcomponents.
|
|
133
|
+
<span class='line'>126</span> * @private
|
|
134
|
+
<span class='line'>127</span> * @type {Object.<string, any>}
|
|
135
|
+
<span class='line'>128</span> */</span><span class="WHIT">
|
|
136
|
+
<span class='line'>129</span> </span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
|
|
137
|
+
<span class='line'>130</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">MC.debug</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
138
|
+
<span class='line'>131</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
139
|
+
<span class='line'>132</span> * exposes private microcomponents in debug mode.
|
|
140
|
+
<span class='line'>133</span> * @public
|
|
141
|
+
<span class='line'>134</span> * @type {Object.<string, any>}
|
|
142
|
+
<span class='line'>135</span> */</span><span class="WHIT">
|
|
143
|
+
<span class='line'>136</span> </span><span class="WHIT"> </span><span class="NAME">this._mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">;</span><span class="WHIT">
|
|
144
|
+
<span class='line'>137</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
145
|
+
<span class='line'>138</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
146
|
+
<span class='line'>139</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">siblings</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
147
|
+
<span class='line'>140</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">t</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
|
|
148
|
+
<span class='line'>141</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">t</span><span class="PUNC">?</span><span class="PUNC">.</span><span class="NAME">_mc</span><span class="PUNC">)</span><span class="WHIT">
|
|
149
|
+
<span class='line'>142</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
150
|
+
<span class='line'>143</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">t._mc</span><span class="PUNC">;</span><span class="WHIT">
|
|
151
|
+
<span class='line'>144</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">.</span><span class="PUNC">.</span><span class="PUNC">.</span><span class="NAME">Object.entries</span><span class="PUNC">(</span><span class="NAME">t._mc</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
152
|
+
<span class='line'>145</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
153
|
+
<span class='line'>146</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">add</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">key</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
154
|
+
<span class='line'>147</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
|
|
155
|
+
<span class='line'>148</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">mc._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
156
|
+
<span class='line'>149</span> </span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
157
|
+
<span class='line'>150</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
158
|
+
<span class='line'>151</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
159
|
+
<span class='line'>152</span> </span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
|
|
160
|
+
<span class='line'>153</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
161
|
+
<span class='line'>154</span> </span><span class="WHIT"> </span><span class="NAME">target.setAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
162
|
+
<span class='line'>155</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
163
|
+
<span class='line'>156</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
164
|
+
<span class='line'>157</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
|
|
165
|
+
<span class='line'>158</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
166
|
+
<span class='line'>159</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">remove</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
167
|
+
<span class='line'>160</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
|
|
168
|
+
<span class='line'>161</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
|
|
169
|
+
<span class='line'>162</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
|
|
170
|
+
<span class='line'>163</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">mc._mc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
171
|
+
<span class='line'>164</span> </span><span class="WHIT"> </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
172
|
+
<span class='line'>165</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
173
|
+
<span class='line'>166</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">Object.keys</span><span class="PUNC">(</span><span class="NAME">mc._mc</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">length</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">target.hasAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
174
|
+
<span class='line'>167</span> </span><span class="WHIT"> </span><span class="NAME">target.removeAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
175
|
+
<span class='line'>168</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
176
|
+
<span class='line'>169</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
177
|
+
<span class='line'>170</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
178
|
+
<span class='line'>171</span> * returns top level microcomponents from a list of HTMLElements.
|
|
179
|
+
<span class='line'>172</span> * @name getMicroComponents
|
|
180
|
+
<span class='line'>173</span> * @instance
|
|
181
|
+
<span class='line'>174</span> * @function
|
|
182
|
+
<span class='line'>175</span> * @private
|
|
183
|
+
<span class='line'>176</span> * @param {Array<any>} elements - The elements to search for microcomponents.
|
|
184
|
+
<span class='line'>177</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
185
|
+
<span class='line'>178</span> * @returns {Array<any>} An array of microcomponents.
|
|
186
|
+
<span class='line'>179</span> */</span><span class="WHIT">
|
|
187
|
+
<span class='line'>180</span> </span><span class="WHIT"> </span><span class="NAME">getMicroComponents</span><span class="PUNC">(</span><span class="NAME">elements</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
188
|
+
<span class='line'>181</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
189
|
+
<span class='line'>182</span> </span><span class="WHIT"> </span><span class="NAME">elements.forEach</span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
190
|
+
<span class='line'>183</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
191
|
+
<span class='line'>184</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
192
|
+
<span class='line'>185</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
193
|
+
<span class='line'>186</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
194
|
+
<span class='line'>187</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
195
|
+
<span class='line'>188</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
196
|
+
<span class='line'>189</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
197
|
+
<span class='line'>190</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
198
|
+
<span class='line'>191</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
199
|
+
<span class='line'>192</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
200
|
+
<span class='line'>193</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
201
|
+
<span class='line'>194</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
202
|
+
<span class='line'>195</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
203
|
+
<span class='line'>196</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
204
|
+
<span class='line'>197</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
205
|
+
<span class='line'>198</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
206
|
+
<span class='line'>199</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
207
|
+
<span class='line'>200</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
208
|
+
<span class='line'>201</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
209
|
+
<span class='line'>202</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
|
|
210
|
+
<span class='line'>203</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
211
|
+
<span class='line'>204</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
212
|
+
<span class='line'>205</span> * returns ancestor MCs
|
|
213
|
+
<span class='line'>206</span> * @name traverseNodes
|
|
214
|
+
<span class='line'>207</span> * @instance
|
|
215
|
+
<span class='line'>208</span> * @function
|
|
216
|
+
<span class='line'>209</span> * @private
|
|
217
|
+
<span class='line'>210</span> * @param {Node | null} node - The starting DOM node.
|
|
218
|
+
<span class='line'>211</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
219
|
+
<span class='line'>212</span> * @param {boolean} [firstonly=true] - If true, returns the first match only.
|
|
220
|
+
<span class='line'>213</span> * @returns {Array<any>} An array of matching microcomponents.
|
|
221
|
+
<span class='line'>214</span> */</span><span class="WHIT">
|
|
222
|
+
<span class='line'>215</span> </span><span class="WHIT"> </span><span class="NAME">traverseNodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">firstonly</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
223
|
+
<span class='line'>216</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
224
|
+
<span class='line'>217</span> </span><span class="WHIT"> </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
225
|
+
<span class='line'>218</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
226
|
+
<span class='line'>219</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
227
|
+
<span class='line'>220</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
228
|
+
<span class='line'>221</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
229
|
+
<span class='line'>222</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">node._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
230
|
+
<span class='line'>223</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
231
|
+
<span class='line'>224</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
232
|
+
<span class='line'>225</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">firstonly</span><span class="PUNC">)</span><span class="WHIT">
|
|
233
|
+
<span class='line'>226</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
|
|
234
|
+
<span class='line'>227</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
235
|
+
<span class='line'>228</span> </span><span class="WHIT"> </span><span class="NAME">node</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.parentNode</span><span class="PUNC">;</span><span class="WHIT">
|
|
236
|
+
<span class='line'>229</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
237
|
+
<span class='line'>230</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
|
|
238
|
+
<span class='line'>231</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
239
|
+
<span class='line'>232</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
240
|
+
<span class='line'>233</span> * returns true if the element is an instance of HTMLElement.
|
|
241
|
+
<span class='line'>234</span> * @instance
|
|
242
|
+
<span class='line'>235</span> * @function
|
|
243
|
+
<span class='line'>236</span> * @name isDOM
|
|
244
|
+
<span class='line'>237</span> * @private
|
|
245
|
+
<span class='line'>238</span> * @type {Function}
|
|
246
|
+
<span class='line'>239</span> * @param {any} element - The element to check.
|
|
247
|
+
<span class='line'>240</span> * @returns {boolean}
|
|
248
|
+
<span class='line'>241</span> */</span><span class="WHIT">
|
|
249
|
+
<span class='line'>242</span> </span><span class="WHIT"> </span><span class="NAME">isDOM</span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
250
|
+
<span class='line'>243</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">;</span><span class="WHIT">
|
|
251
|
+
<span class='line'>244</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
252
|
+
<span class='line'>245</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
253
|
+
<span class='line'>246</span> * adds a microcomponent to the private collection.
|
|
254
|
+
<span class='line'>247</span> * @name add
|
|
255
|
+
<span class='line'>248</span> * @instance
|
|
256
|
+
<span class='line'>249</span> * @function
|
|
257
|
+
<span class='line'>250</span> * @param {string} [key] - The key to identify the microcomponent.
|
|
258
|
+
<span class='line'>251</span> * @param {any} [element={}] - The microcomponent to add.
|
|
259
|
+
<span class='line'>252</span> * @returns {any} The added microcomponent.
|
|
260
|
+
<span class='line'>253</span> * @example
|
|
261
|
+
<span class='line'>254</span> * const privateComp = this.add('privateComponent', {});
|
|
262
|
+
<span class='line'>255</span> */</span><span class="WHIT">
|
|
263
|
+
<span class='line'>256</span> </span><span class="WHIT"> </span><span class="NAME">add</span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
264
|
+
<span class='line'>257</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
265
|
+
<span class='line'>258</span> </span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
|
|
266
|
+
<span class='line'>259</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
267
|
+
<span class='line'>260</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
|
|
268
|
+
<span class='line'>261</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
269
|
+
<span class='line'>262</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
270
|
+
<span class='line'>263</span> * removes a microcomponent from the private collection.
|
|
271
|
+
<span class='line'>264</span> * @name remove
|
|
272
|
+
<span class='line'>265</span> * @instance
|
|
273
|
+
<span class='line'>266</span> * @function
|
|
274
|
+
<span class='line'>267</span> * @param {string} [key] - The key to identify the microcomponent.
|
|
275
|
+
<span class='line'>268</span> * @example
|
|
276
|
+
<span class='line'>269</span> * this.remove('privateComponent');
|
|
277
|
+
<span class='line'>270</span> */</span><span class="WHIT">
|
|
278
|
+
<span class='line'>271</span> </span><span class="WHIT"> </span><span class="NAME">remove</span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
279
|
+
<span class='line'>272</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
280
|
+
<span class='line'>273</span> </span><span class="WHIT"> </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
281
|
+
<span class='line'>274</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
282
|
+
<span class='line'>275</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
283
|
+
<span class='line'>276</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
284
|
+
<span class='line'>277</span> * removes a microcomponent from the private collection.
|
|
285
|
+
<span class='line'>278</span> * @name siblings
|
|
286
|
+
<span class='line'>279</span> * @instance
|
|
287
|
+
<span class='line'>280</span> * @function
|
|
288
|
+
<span class='line'>281</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
289
|
+
<span class='line'>282</span> * @returns {Array<any>} An array of matching sibling microcomponents.
|
|
290
|
+
<span class='line'>283</span> * @example
|
|
291
|
+
<span class='line'>284</span> * const siblings = this.siblings('siblingComponent');
|
|
292
|
+
<span class='line'>285</span> */</span><span class="WHIT">
|
|
293
|
+
<span class='line'>286</span> </span><span class="WHIT"> </span><span class="NAME">siblings</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
294
|
+
<span class='line'>287</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
295
|
+
<span class='line'>288</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
296
|
+
<span class='line'>289</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">this.target</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
297
|
+
<span class='line'>290</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
298
|
+
<span class='line'>291</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
299
|
+
<span class='line'>292</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">result</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
300
|
+
<span class='line'>293</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">result</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">result</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">Object.entries</span><span class="PUNC">(</span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
301
|
+
<span class='line'>294</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
302
|
+
<span class='line'>295</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
303
|
+
<span class='line'>296</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
304
|
+
<span class='line'>297</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
305
|
+
<span class='line'>298</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
306
|
+
<span class='line'>299</span> * retrieves the first ancestor DOM node with a matching microcomponent.
|
|
307
|
+
<span class='line'>300</span> * @name parent
|
|
308
|
+
<span class='line'>301</span> * @instance
|
|
309
|
+
<span class='line'>302</span> * @function
|
|
310
|
+
<span class='line'>303</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
311
|
+
<span class='line'>304</span> * @returns {Array<any>} An array with the matching microcomponent.
|
|
312
|
+
<span class='line'>305</span> * @example
|
|
313
|
+
<span class='line'>306</span> * const parent = mcInstance.parent('parentComponent');
|
|
314
|
+
<span class='line'>307</span> */</span><span class="WHIT">
|
|
315
|
+
<span class='line'>308</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
316
|
+
<span class='line'>309</span> */</span><span class="WHIT">
|
|
317
|
+
<span class='line'>310</span> </span><span class="WHIT"> </span><span class="NAME">parent</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
318
|
+
<span class='line'>311</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
|
|
319
|
+
<span class='line'>312</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
320
|
+
<span class='line'>313</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.traverseNodes</span><span class="PUNC">(</span><span class="NAME">this.target.parentNode</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
321
|
+
<span class='line'>314</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
322
|
+
<span class='line'>315</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
323
|
+
<span class='line'>316</span> * retrieves the first ancestor DOM node with a matching microcomponent.
|
|
324
|
+
<span class='line'>317</span> * @name parents
|
|
325
|
+
<span class='line'>318</span> * @instance
|
|
326
|
+
<span class='line'>319</span> * @function
|
|
327
|
+
<span class='line'>320</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
328
|
+
<span class='line'>321</span> * @returns {Array<any>} An array of matching ancestor microcomponents.
|
|
329
|
+
<span class='line'>322</span> * @example
|
|
330
|
+
<span class='line'>323</span> * const parents = mcInstance.parents('ancestorComponent');
|
|
331
|
+
<span class='line'>324</span> */</span><span class="WHIT">
|
|
332
|
+
<span class='line'>325</span> </span><span class="WHIT"> </span><span class="NAME">parents</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
333
|
+
<span class='line'>326</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
|
|
334
|
+
<span class='line'>327</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
335
|
+
<span class='line'>328</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.traverseNodes</span><span class="PUNC">(</span><span class="NAME">this.target.parentNode</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
336
|
+
<span class='line'>329</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
337
|
+
<span class='line'>330</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
338
|
+
<span class='line'>331</span> * retrieves nearest child _mc DOM nodes, gets their matching microcomponents, and stops there.
|
|
339
|
+
<span class='line'>332</span> * @name children
|
|
340
|
+
<span class='line'>333</span> * @instance
|
|
341
|
+
<span class='line'>334</span> * @function
|
|
342
|
+
<span class='line'>335</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
343
|
+
<span class='line'>336</span> * @returns {Array<any>} An array of matching child microcomponents.
|
|
344
|
+
<span class='line'>337</span> * @example
|
|
345
|
+
<span class='line'>338</span> * const children = mcInstance.children('childComponent');
|
|
346
|
+
<span class='line'>339</span> */</span><span class="WHIT">
|
|
347
|
+
<span class='line'>340</span> </span><span class="WHIT"> </span><span class="NAME">children</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
348
|
+
<span class='line'>341</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
|
|
349
|
+
<span class='line'>342</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
350
|
+
<span class='line'>343</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">crypto.randomUUID</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
351
|
+
<span class='line'>344</span> </span><span class="WHIT"> </span><span class="NAME">this.target.setAttribute</span><span class="PUNC">(</span><span class="STRN">'temp-id'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
352
|
+
<span class='line'>345</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">myDomElements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.target.querySelectorAll</span><span class="PUNC">(</span><span class="TOKN">`</span><span class="PUNC">*</span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="PUNC">:</span><span class="NAME">not</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">temp</span><span class="PUNC">-</span><span class="NAME">id</span><span class="PUNC">=</span><span class="STRN">"${id}"</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="TOKN">`</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
353
|
+
<span class='line'>346</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="NAME">Array.from</span><span class="PUNC">(</span><span class="NAME">myDomElements</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
354
|
+
<span class='line'>347</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
|
|
355
|
+
<span class='line'>348</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
356
|
+
<span class='line'>349</span> </span><span class="WHIT"> </span><span class="COMM">/**
|
|
357
|
+
<span class='line'>350</span> * retrieves all decendant _mc DOM nodes and gets their matching microcomponents.
|
|
358
|
+
<span class='line'>351</span> * @name children
|
|
359
|
+
<span class='line'>352</span> * @instance
|
|
360
|
+
<span class='line'>353</span> * @function
|
|
361
|
+
<span class='line'>354</span> * @param {string} [search] - The key of the specific microcomponent.
|
|
362
|
+
<span class='line'>355</span> * @returns {Array<any>} An array of matching descendant microcomponents.
|
|
363
|
+
<span class='line'>356</span> * @example
|
|
364
|
+
<span class='line'>357</span> * const descendants = mcInstance.descendants('descendantComponent');
|
|
365
|
+
<span class='line'>358</span> */</span><span class="WHIT">
|
|
366
|
+
<span class='line'>359</span> </span><span class="WHIT"> </span><span class="NAME">descendants</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
|
|
367
|
+
<span class='line'>360</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
|
|
368
|
+
<span class='line'>361</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
|
|
369
|
+
<span class='line'>362</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">myDomElements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.target.querySelectorAll</span><span class="PUNC">(</span><span class="STRN">'*[_mc]'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
370
|
+
<span class='line'>363</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="NAME">Array.from</span><span class="PUNC">(</span><span class="NAME">myDomElements</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
|
|
371
|
+
<span class='line'>364</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
|
|
372
|
+
<span class='line'>365</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
|
|
373
|
+
<span class='line'>366</span> </span><span class="PUNC">}</span><span class="WHIT">
|
|
374
|
+
<span class='line'>367</span> </span><span class="NAME">export</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
|
|
375
|
+
<span class='line'>368</span> </span></pre></body></html>
|