@twobirds/microcomponents 0.0.83 → 0.0.85

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.
Files changed (202) hide show
  1. package/README.md +22 -6
  2. package/assets/documentation/MC.md +60 -81
  3. package/assets/documentation/elements.md +6 -9
  4. package/assets/documentation/observables.md +97 -11
  5. package/assets/test/test.html +1 -1
  6. package/dist/MC.d.ts +14 -16
  7. package/dist/MC.d.ts.map +1 -1
  8. package/dist/MC.js +150 -218
  9. package/dist/MC.min.js +164 -308
  10. package/dist/MC.ts +213 -319
  11. package/dist/elements.d.ts.map +1 -1
  12. package/dist/elements.js +10 -4
  13. package/dist/elements.min.js +1 -1
  14. package/dist/elements.ts +17 -4
  15. package/dist/formValues.js +2 -2
  16. package/dist/formValues.min.js +1 -1
  17. package/dist/formValues.ts +3 -3
  18. package/dist/microcomponents.d.ts +0 -1
  19. package/dist/microcomponents.d.ts.map +1 -1
  20. package/dist/microcomponents.js +0 -1
  21. package/dist/microcomponents.min.js +1 -1
  22. package/dist/microcomponents.ts +1 -1
  23. package/dist/observables.d.ts.map +1 -1
  24. package/dist/observables.js +14 -12
  25. package/dist/observables.min.js +1 -1
  26. package/dist/observables.ts +32 -32
  27. package/package.json +1 -1
  28. package/public/MC.d.ts +14 -16
  29. package/public/MC.d.ts.map +1 -1
  30. package/public/MC.js +150 -218
  31. package/public/MC.js.map +1 -1
  32. package/public/MC.min.js +164 -308
  33. package/public/MC.ts +213 -319
  34. package/public/documentation/MC.md +60 -81
  35. package/public/documentation/elements.md +6 -9
  36. package/public/documentation/observables.md +97 -11
  37. package/public/elements.d.ts.map +1 -1
  38. package/public/elements.js +10 -4
  39. package/public/elements.js.map +1 -1
  40. package/public/elements.min.js +1 -1
  41. package/public/elements.ts +17 -4
  42. package/public/formValues.js +2 -2
  43. package/public/formValues.js.map +1 -1
  44. package/public/formValues.min.js +1 -1
  45. package/public/formValues.ts +3 -3
  46. package/public/microcomponents.d.ts +0 -1
  47. package/public/microcomponents.d.ts.map +1 -1
  48. package/public/microcomponents.js +0 -1
  49. package/public/microcomponents.js.map +1 -1
  50. package/public/microcomponents.min.js +1 -1
  51. package/public/microcomponents.ts +1 -1
  52. package/public/observables.d.ts.map +1 -1
  53. package/public/observables.js +14 -12
  54. package/public/observables.js.map +1 -1
  55. package/public/observables.min.js +1 -1
  56. package/public/observables.ts +32 -32
  57. package/public/src/MC.d.ts +14 -16
  58. package/public/src/MC.d.ts.map +1 -1
  59. package/public/src/MC.js +150 -218
  60. package/public/src/MC.js.map +1 -1
  61. package/public/src/MC.ts +213 -319
  62. package/public/src/elements.d.ts.map +1 -1
  63. package/public/src/elements.js +10 -4
  64. package/public/src/elements.js.map +1 -1
  65. package/public/src/elements.ts +17 -4
  66. package/public/src/formValues.js +2 -2
  67. package/public/src/formValues.js.map +1 -1
  68. package/public/src/formValues.ts +3 -3
  69. package/public/src/microcomponents.d.ts +0 -1
  70. package/public/src/microcomponents.d.ts.map +1 -1
  71. package/public/src/microcomponents.js +0 -1
  72. package/public/src/microcomponents.js.map +1 -1
  73. package/public/src/microcomponents.ts +1 -1
  74. package/public/src/observables.d.ts.map +1 -1
  75. package/public/src/observables.js +14 -12
  76. package/public/src/observables.js.map +1 -1
  77. package/public/src/observables.ts +32 -32
  78. package/public/src/test/test/grandparent.d.ts.map +1 -1
  79. package/public/src/test/test/grandparent.js +1 -1
  80. package/public/src/test/test/grandparent.js.map +1 -1
  81. package/public/src/test/test/grandparent.ts +12 -4
  82. package/public/src/test/test/testform.js +1 -1
  83. package/public/src/test/test/testform.js.map +1 -1
  84. package/public/src/test/test/testform.ts +6 -8
  85. package/public/src/test/test.js +6 -5
  86. package/public/src/test/test.js.map +1 -1
  87. package/public/src/test/test.ts +10 -9
  88. package/public/test/MC.d.ts +14 -16
  89. package/public/test/MC.d.ts.map +1 -1
  90. package/public/test/MC.js +150 -218
  91. package/public/test/MC.min.js +164 -308
  92. package/public/test/MC.ts +213 -319
  93. package/public/test/elements.d.ts.map +1 -1
  94. package/public/test/elements.js +10 -4
  95. package/public/test/elements.min.js +1 -1
  96. package/public/test/elements.ts +17 -4
  97. package/public/test/formValues.js +2 -2
  98. package/public/test/formValues.min.js +1 -1
  99. package/public/test/formValues.ts +3 -3
  100. package/public/test/microcomponents.d.ts +0 -1
  101. package/public/test/microcomponents.d.ts.map +1 -1
  102. package/public/test/microcomponents.js +0 -1
  103. package/public/test/microcomponents.min.js +1 -1
  104. package/public/test/microcomponents.ts +1 -1
  105. package/public/test/observables.d.ts.map +1 -1
  106. package/public/test/observables.js +14 -12
  107. package/public/test/observables.min.js +1 -1
  108. package/public/test/observables.ts +32 -32
  109. package/public/test/test/grandparent.d.ts.map +1 -1
  110. package/public/test/test/grandparent.js +1 -1
  111. package/public/test/test/grandparent.js.map +1 -1
  112. package/public/test/test/grandparent.ts +12 -4
  113. package/public/test/test/testform.js +1 -1
  114. package/public/test/test/testform.js.map +1 -1
  115. package/public/test/test/testform.ts +6 -8
  116. package/public/test/test.html +1 -1
  117. package/public/test/test.js +6 -5
  118. package/public/test/test.js.map +1 -1
  119. package/public/test/test.ts +10 -9
  120. package/public/typedoc/assets/navigation.js +1 -1
  121. package/public/typedoc/assets/search.js +1 -1
  122. package/public/typedoc/classes/MC.DC.html +7 -6
  123. package/public/typedoc/classes/MC.MC.html +3 -6
  124. package/public/typedoc/classes/MC.McBase.html +3 -4
  125. package/public/typedoc/functions/MC.autoload.html +1 -1
  126. package/public/typedoc/functions/MC.off.html +1 -0
  127. package/public/typedoc/functions/{selectors._d.html → MC.on.html} +1 -1
  128. package/public/typedoc/functions/MC.one.html +1 -0
  129. package/public/typedoc/functions/MC.trigger.html +1 -0
  130. package/public/typedoc/functions/elements.defineCE.html +1 -1
  131. package/public/typedoc/functions/elements.getCE.html +1 -1
  132. package/public/typedoc/functions/formValues.formValues.html +1 -1
  133. package/public/typedoc/functions/observables.observe.html +1 -1
  134. package/public/typedoc/index.html +21 -10
  135. package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
  136. package/public/typedoc/modules/MC.html +6 -5
  137. package/public/typedoc/modules/elements.html +1 -1
  138. package/public/typedoc/modules/formValues.html +1 -1
  139. package/public/typedoc/modules/observables.html +1 -1
  140. package/public/typedoc/modules.html +0 -1
  141. package/public/typedoc/types/observables.Observable.html +1 -1
  142. package/src/MC.ts +213 -319
  143. package/src/elements.ts +17 -4
  144. package/src/formValues.ts +3 -3
  145. package/src/microcomponents.ts +1 -1
  146. package/src/observables.ts +32 -32
  147. package/src/test/test/grandparent.ts +12 -4
  148. package/src/test/test/testform.ts +6 -8
  149. package/src/test/test.ts +10 -9
  150. package/tsconfig.json +2 -2
  151. package/typedoc.json +1 -1
  152. package/webpack.config.js +2 -2
  153. package/dist/McEvent.d.ts +0 -15
  154. package/dist/McEvent.d.ts.map +0 -1
  155. package/dist/McEvent.js +0 -71
  156. package/dist/selectors.d.ts +0 -106
  157. package/dist/selectors.d.ts.map +0 -1
  158. package/dist/selectors.js +0 -759
  159. package/dist/selectors.min.js +0 -1
  160. package/public/McEvent.d.ts +0 -15
  161. package/public/McEvent.d.ts.map +0 -1
  162. package/public/McEvent.js +0 -71
  163. package/public/McEvent.js.map +0 -1
  164. package/public/selectors.d.ts +0 -106
  165. package/public/selectors.d.ts.map +0 -1
  166. package/public/selectors.js +0 -759
  167. package/public/selectors.js.map +0 -1
  168. package/public/selectors.min.js +0 -1
  169. package/public/src/McEvent.d.ts +0 -15
  170. package/public/src/McEvent.d.ts.map +0 -1
  171. package/public/src/McEvent.js +0 -71
  172. package/public/src/McEvent.js.map +0 -1
  173. package/public/src/selectors.d.ts +0 -106
  174. package/public/src/selectors.d.ts.map +0 -1
  175. package/public/src/selectors.js +0 -759
  176. package/public/src/selectors.js.map +0 -1
  177. package/public/test/McEvent.d.ts +0 -15
  178. package/public/test/McEvent.d.ts.map +0 -1
  179. package/public/test/McEvent.js +0 -71
  180. package/public/test/McEvent.ts +0 -96
  181. package/public/test/selectors.d.ts +0 -106
  182. package/public/test/selectors.d.ts.map +0 -1
  183. package/public/test/selectors.js +0 -759
  184. package/public/test/selectors.min.js +0 -1
  185. package/public/test/selectors.ts +0 -1269
  186. package/public/typedoc/classes/MC.McEvent.html +0 -9
  187. package/public/typedoc/functions/MC.addListener.html +0 -1
  188. package/public/typedoc/functions/MC.removeListener.html +0 -1
  189. package/public/typedoc/functions/selectors._t.html +0 -1
  190. package/public/typedoc/interfaces/selectors.DSelector.html +0 -48
  191. package/public/typedoc/interfaces/selectors.TSelector.html +0 -34
  192. package/public/typedoc/modules/selectors.html +0 -7
  193. package/public/typedoc/types/selectors.selection.html +0 -1
  194. package/public/typedoc/types/selectors.singleSelector.html +0 -1
  195. package/src/McEvent.ts +0 -96
  196. package/src/selectors.ts +0 -1269
  197. /package/{dist/McEvent.ts → public/McEvent._ts} +0 -0
  198. /package/{dist/selectors.ts → public/selectors._ts} +0 -0
  199. /package/public/{McEvent.ts → src/McEvent._ts} +0 -0
  200. /package/public/{selectors.ts → src/selectors._ts} +0 -0
  201. /package/{public/src/McEvent.ts → src/McEvent._ts} +0 -0
  202. /package/{public/src/selectors.ts → src/selectors._ts} +0 -0
@@ -1,1269 +0,0 @@
1
- import { MC, DC, HTMLMcElement, addListener, removeListener } from './MC.js';
2
- import { LooseObject } from './helpers.js';
3
-
4
- /*
5
- helpers
6
- */
7
-
8
- const isObject = ( value: any ): boolean => {
9
- return value != null && typeof value === 'object';
10
- }
11
-
12
- const words = ( classes: Array<string> ): Array<string> => {
13
-
14
- let classSet: Set<string> = new Set();
15
-
16
- // read classes into set
17
- classes.forEach( c => {
18
- c = c.trim();
19
- c.split(' ').forEach( e => {
20
- if ( e !== '' ){
21
- classSet.add(e);
22
- }
23
- });
24
- });
25
-
26
- // now we have a sanitized array
27
- classes = Array.from( classSet );
28
-
29
- return classes;
30
- }
31
-
32
- /*
33
- selector classes
34
- */
35
-
36
- class DomSelector{
37
-
38
- #set: Set<HTMLElement> = new Set();
39
-
40
- public get set(): Set<HTMLElement> {
41
- return this.#set;
42
- }
43
-
44
- public get array(): HTMLElement[] {
45
- return Array.from( this.#set );
46
- }
47
-
48
- public set set( set: Set<HTMLElement> ) {
49
- this.#set = set;
50
- return;
51
- }
52
-
53
- public get length(): number {
54
- return this.#set.size;
55
- }
56
-
57
- constructor( selection?: selection, element: any = document.body ){
58
-
59
- let
60
- that = this,
61
- undefinedTags: Set<any> = new Set();
62
-
63
- if ( !selection ) {
64
- return that;
65
- }
66
- }
67
-
68
- $t( nameSpace?: string ): TSelector {
69
- let
70
- result = new TbSelector()
71
- ;
72
-
73
- this.#set.forEach( (e: HTMLElement) => {
74
- if ( (e as HTMLMcElement)._mc ){
75
- Object.values( (e as HTMLMcElement)._mc ).forEach( ( mc: MC | DC ) => {
76
- result.set.add( mc );
77
- });
78
- }
79
- });
80
-
81
- if ( nameSpace ) {
82
- result.filter( mc => (mc as LooseObject).nameSpace === nameSpace );
83
- }
84
-
85
- return result;
86
- }
87
-
88
- add( selection: selection, target?: HTMLElement ): DSelector {
89
-
90
- let
91
- that = this
92
- ;
93
-
94
- $d( selection, target ).forEach( element => {
95
- that.#set.add( element );
96
- });
97
-
98
- return that;
99
- }
100
-
101
- addClass( ...classes: string[] ): DSelector {
102
-
103
- // sanitize classes
104
- classes = words( classes );
105
-
106
- // now set those classes
107
- this.forEach( element => {
108
- element.classList.add( ...classes );
109
- });
110
-
111
- return this;
112
- }
113
-
114
- after( selection: selection, target?: HTMLElement ): DSelector {
115
-
116
- let
117
- that = this,
118
- after = $d( selection, target );
119
- ;
120
-
121
- if ( !after.length ) return that;
122
-
123
- after
124
- .first()
125
- .forEach( element => {
126
- that.array.reverse().forEach( (e: HTMLElement) => {
127
- e.after( element );
128
- });
129
- });
130
-
131
- return that;
132
- }
133
-
134
- append( selection: selection, target?: HTMLElement ): DSelector {
135
-
136
- let
137
- that = this,
138
- addTo = that.array['0'],
139
- append = $d( selection, target )
140
- ;
141
-
142
- if ( addTo ){
143
- append.forEach( (e: HTMLElement) => {
144
- addTo.append( e );
145
- });
146
- }
147
-
148
- return that;
149
- }
150
-
151
- appendTo( selection: selection, target?: HTMLElement ): DSelector {
152
-
153
- let
154
- that = this,
155
- appendTo = $d( selection, target ).array['0']
156
- ;
157
-
158
- if ( appendTo ){
159
- that.forEach( (e: HTMLElement) => {
160
- appendTo.append( e );
161
- });
162
- }
163
-
164
- return that;
165
- }
166
-
167
- attr(): LooseObject;
168
- attr( obj: LooseObject ): DSelector;
169
- attr( name: string ): string | null;
170
- attr( first?: string | LooseObject, second?: string | object | null ): DSelector;
171
- attr( first?: unknown, second?: unknown ): DSelector | LooseObject | string | null {
172
- let
173
- that = this,
174
- attributes: LooseObject = {}
175
- ;
176
-
177
- // if no elements in set -> skip
178
- if ( !that.length ) return that;
179
-
180
- // if no arguments, return attributes of first in list as hash object
181
- if (!arguments.length) {
182
- Array.from( [ ...that.set ][0].attributes ).forEach( (attribute: LooseObject) => {
183
- attributes[attribute.name] = attribute.value;
184
- });
185
- return attributes;
186
- }
187
-
188
- // if first is a string
189
- // if no value (second) is given -> return attribute value of first element in node selection
190
- // if value (second) is null -> remove attribute and return this
191
- // else set attribute values and return this
192
- if ( typeof first === 'string' ) {
193
-
194
- // return attributes
195
- if ( second === undefined ){
196
- return [ ...that.set ][0].getAttribute( first );
197
- }
198
-
199
- // remove attribute
200
- if ( second === null ){
201
- [ ...that.set ].forEach( (e: HTMLElement) =>{
202
- e.removeAttribute( first );
203
- });
204
- return that;
205
- }
206
-
207
- // if attribute value is an object -> convert to json string
208
- if ( typeof second === 'object' ){
209
- second = JSON.stringify( second );
210
- }
211
-
212
- // set attribute
213
- [ ...that.set ].forEach( (e: HTMLElement) =>{
214
- e.setAttribute( first, second as string );
215
- });
216
-
217
- return that;
218
- }
219
-
220
- // if first is an object set attributes to all nodes
221
- if ( typeof first === 'object' ) {
222
- [ ...that.set ].forEach( (e: HTMLElement) =>{
223
- Object.keys( first as LooseObject ).forEach( (key: string) => {
224
- $d(e).attr( key, ( first as LooseObject ).key );
225
- });
226
- });
227
- return that;
228
- }
229
-
230
- return that;
231
- }
232
-
233
- before( selection: selection, target?: HTMLElement ): DSelector {
234
-
235
- let
236
- that = this,
237
- before = $d( selection, target );
238
- ;
239
-
240
- if ( !before.length ) return that;
241
-
242
- before
243
- .first()
244
- .forEach( element => {
245
- that.forEach( (e: HTMLElement) => {
246
- e.before( element );
247
- });
248
- });
249
-
250
- return that;
251
- }
252
-
253
- children( selection?: selection, rootNode?: HTMLElement ): DSelector{
254
-
255
- let
256
- that: DomSelector = this,
257
- set: Set<HTMLElement> = new Set()
258
- ;
259
-
260
- that.#set.forEach( (e: HTMLElement) => {
261
- Array.from( e.children ).forEach( ( c ) => {
262
- set.add( c as HTMLElement );
263
- });
264
- });
265
-
266
- that = $d( [ ...set] );
267
-
268
- if ( selection ){
269
- let compare = $d( selection, rootNode );
270
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
271
- }
272
-
273
- return that;
274
- }
275
-
276
- descendants( selection?: selection, rootNode?: HTMLElement ): DSelector{
277
- let
278
- that: DomSelector = this,
279
- set: Set<HTMLElement> = new Set()
280
- ;
281
-
282
- that.#set.forEach( (e: HTMLElement) => {
283
- e.querySelectorAll('*').forEach( ( h ) => {
284
- set.add( h as HTMLElement );
285
- });
286
- });
287
-
288
- that = $d( [ ...set] );
289
-
290
- if ( selection ){
291
- let compare = $d( selection, rootNode );
292
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
293
- }
294
-
295
- return that;
296
- }
297
-
298
- empty(): DSelector {
299
- return this.filter( (e: any)=>false );
300
- }
301
-
302
- first( selection?: selection, rootNode?: HTMLElement ): DSelector{
303
- let
304
- that: DomSelector = this,
305
- set: Set<HTMLElement> = new Set(),
306
- compare: any = false;
307
- ;
308
-
309
- // get compare selection if specified
310
- if ( selection ){
311
- compare = $d( selection, rootNode );
312
- }
313
-
314
- // get compare selection if specified
315
- that.#set.forEach( (e: HTMLElement) => {
316
- if ( e.parentNode ){
317
- set.add( e.parentNode.children[0] as HTMLElement );
318
- }
319
- });
320
-
321
- // make result
322
- that = $d( [ ...set ] );
323
-
324
- // compare if necessay
325
- if ( selection ){
326
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
327
- }
328
-
329
- return that;
330
- }
331
-
332
- has( element: HTMLElement ): boolean{
333
- return this.#set.has( element );
334
- }
335
-
336
- hasClass( ...classes: string[] ): boolean {
337
-
338
- // sanitize classes
339
- classes = words( classes );
340
-
341
- // now test those classes
342
- return this.every( e => {
343
- return Array.from( e.classList ).every( c => e.contains( c ) );
344
- });
345
-
346
- }
347
-
348
-
349
- html( html?: string ): string | DSelector{
350
- let that = this;
351
-
352
- if ( html ){
353
- that.forEach( (e: HTMLElement) => {
354
- !e.parentNode
355
- ? (()=>{
356
- console.warn('Cannot access the .innerHTML of a HTMLElement that hasnt been inserted yet', e );
357
- console.trace( e, this );
358
- console.info( 'If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;' )
359
- })()
360
- : e.innerHTML = html;
361
- });
362
- return that;
363
- }
364
-
365
- return that.array[0].innerHTML;
366
- }
367
-
368
- last( selection?: selection, rootNode?: HTMLElement ): DSelector{
369
- let
370
- that: DomSelector = this,
371
- set: Set<HTMLElement> = new Set()
372
- ;
373
-
374
- that.#set.forEach( (e: HTMLElement) => {
375
- let
376
- siblings = e.parentNode?.children as HTMLCollection
377
- ;
378
- if ( siblings ) {
379
- set.add( Array.from(siblings).at(-1) as HTMLElement );
380
- }
381
- });
382
-
383
- that = $d( [ ...set] );
384
-
385
- if ( selection ){
386
- let compare = $d( selection, rootNode );
387
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
388
- }
389
-
390
- return that;
391
- }
392
-
393
- next( selection?: selection, rootNode?: HTMLElement ): DSelector{
394
- let
395
- that: DomSelector = this,
396
- set: Set<HTMLElement> = new Set()
397
- ;
398
-
399
- that.#set.forEach( (e: HTMLElement) => {
400
- let
401
- siblings = e.parentNode?.children as HTMLCollection
402
- ;
403
- if ( siblings ) {
404
- let
405
- arr = Array.from(siblings),
406
- pos = arr.indexOf(e) + 1
407
- ;
408
- if ( pos < arr.length ){
409
- set.add( arr.at(pos) as HTMLElement );
410
- }
411
- }
412
- });
413
-
414
- that = $d( [ ...set] );
415
-
416
- if ( selection ){
417
- let compare = $d( selection, rootNode );
418
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
419
- }
420
-
421
- return that;
422
- }
423
-
424
- normalize(): DSelector {
425
- let that = this;
426
- that.#set.forEach( (e: HTMLElement) => { e.normalize() });
427
- return that;
428
- }
429
-
430
- off( eventName: string, cb: Function ): DSelector{
431
- let
432
- that = this,
433
- eventNames =
434
- eventName.indexOf(' ') > -1
435
- ? eventName.split(' ')
436
- : [ eventName ]
437
- ;
438
-
439
- // remove handler
440
- that.array.forEach( (e: HTMLElement) => {
441
- eventNames.forEach(function ( n: string ) {
442
- removeListener(
443
- e,
444
- n,
445
- cb as EventListenerOrEventListenerObject
446
- );
447
- });
448
- });
449
-
450
- return that;
451
- }
452
-
453
- on( eventName: string, cb: Function, capture: boolean = false, once: boolean = false ): Function{
454
-
455
- let
456
- that = this,
457
- eventNames =
458
- eventName.indexOf(' ') > -1
459
- ? eventName.split(' ').filter( (s) => s !== '' )
460
- : [ eventName ]
461
- ;
462
-
463
- function wrapper(){ wrapper.cb.apply(that, Array.from(arguments) ); };
464
- wrapper.cb = cb;
465
-
466
- // attach handler
467
- that.forEach( (e: HTMLElement) => {
468
- eventNames.forEach(function ( n: string ) {
469
- addListener(
470
- e,
471
- n,
472
- (wrapper as EventListenerOrEventListenerObject),
473
- capture,
474
- once
475
- );
476
- });
477
- });
478
-
479
- return wrapper;
480
- }
481
-
482
- one( eventName: string, cb: Function, capture: boolean = false ): Function{
483
- let
484
- that = this,
485
- eventNames =
486
- eventName.indexOf(' ') > -1
487
- ? eventName.split(' ').filter( (s) => s !== '' )
488
- : [ eventName ]
489
- ;
490
-
491
- function wrapper(){ wrapper.cb.apply(that, Array.from(arguments) ); };
492
- wrapper.cb = cb;
493
-
494
- // attach handler
495
- that.forEach( (e: HTMLElement) => {
496
- eventNames.forEach(function ( n: string ) {
497
- addListener(
498
- e,
499
- n,
500
- (wrapper as EventListenerOrEventListenerObject),
501
- capture,
502
- true
503
- );
504
- });
505
- });
506
-
507
- return wrapper;
508
- }
509
-
510
- parent( selection?: selection, rootNode?: HTMLElement ): DSelector {
511
- let
512
- that: DomSelector = this,
513
- set: Set<HTMLElement> = new Set()
514
- ;
515
-
516
- that.#set.forEach( (e: HTMLElement) => {
517
- if ( e.parentNode && (e.parentNode as HTMLElement).tagName !== 'HTML') {
518
- set.add( e.parentNode as HTMLElement );
519
- }
520
- });
521
-
522
- that = $d( [ ...set] );
523
-
524
- if ( selection ){
525
- let compare = $d( selection, rootNode );
526
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
527
- }
528
-
529
- return that;
530
- }
531
-
532
- ancestors( selection?: selection, rootNode?: HTMLElement ): DSelector {
533
- let
534
- that: DomSelector = this,
535
- set: Set<HTMLElement> = new Set()
536
- ;
537
-
538
- that.#set.forEach( (e: HTMLElement) => {
539
- let
540
- current = e
541
- ;
542
- while ( current.parentNode && (current.parentNode as HTMLElement).tagName !== 'HTML' ){
543
- current = current.parentNode as HTMLElement;
544
- set.add( current );
545
- }
546
- });
547
-
548
- that = $d( [ ...set] );
549
-
550
- if ( selection ){
551
- let compare = $d( selection, rootNode );
552
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
553
- }
554
-
555
- return that;
556
- }
557
-
558
- prepend( selection: selection, target?: HTMLElement ): DSelector {
559
-
560
- let
561
- that = this,
562
- addTo = that.array['0'],
563
- prepend = $d( selection, target )
564
- ;
565
-
566
- if ( addTo ){
567
- prepend.forEach( (e: HTMLElement) => {
568
- addTo.prepend( e );
569
- });
570
- }
571
-
572
- return that;
573
- }
574
-
575
-
576
- prev( selection?: selection, rootNode?: HTMLElement ): DSelector{
577
- let
578
- that: DomSelector = this,
579
- set: Set<HTMLElement> = new Set()
580
- ;
581
-
582
- that.#set.forEach( (e: HTMLElement) => {
583
- let
584
- siblings = e.parentNode?.children as HTMLCollection
585
- ;
586
- if ( siblings ) {
587
- let
588
- arr = Array.from(siblings),
589
- pos = arr.indexOf(e) - 1
590
- ;
591
- if ( pos > -1 ){
592
- set.add( arr.at(pos) as HTMLElement );
593
- }
594
- }
595
- });
596
-
597
- that = $d( [ ...set] );
598
-
599
- if ( selection ){
600
- let compare = $d( selection, rootNode );
601
- that.filter( ( e: HTMLElement ) => compare.has( e ) );
602
- }
603
-
604
- return that;
605
- }
606
-
607
- removeClass( ...classes: string[] ): DSelector {
608
-
609
- // sanitize classes
610
- classes = words( classes );
611
-
612
- // now set those classes
613
- this.forEach( element => {
614
- element.classList.remove( ...classes );
615
- });
616
-
617
- return this;
618
- }
619
-
620
- text( text?: string ): string | DSelector{
621
- let that = this;
622
- if ( text ){
623
- that.forEach( (e: HTMLElement) => {
624
- !e.parentNode
625
- ? (()=>{
626
- console.warn('Cannot access the .textContent of a HTMLElement that hasnt been inserted yet', e );
627
- console.trace( e, this );
628
- console.info( 'If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;' )
629
- })()
630
- : e.innerText = text;
631
- });
632
- return that as DomSelector;
633
- }
634
-
635
- let t = that.array[0].innerText;
636
- return t ?? '' as string;
637
- }
638
-
639
- toggleClass( ...classes: string[] ): DSelector {
640
-
641
- // sanitize classes
642
- classes = words( classes );
643
-
644
- // now set those classes
645
- this.forEach( element => {
646
- element.classList.toggle( ...classes );
647
- });
648
-
649
- return this;
650
- }
651
-
652
- trigger( eventName: string, data: any = {}, bubbles: boolean = false, cancelable: boolean = false, composed: boolean = false ): DSelector{
653
- let
654
- that = this,
655
- ev: Event,
656
- options: LooseObject = { bubbles, cancelable, composed },
657
- eventNames =
658
- eventName.indexOf(' ') > -1
659
- ? eventName.split(' ')
660
- : [ eventName ]
661
- ;
662
-
663
- that.#set.forEach( (e: HTMLElement) => {
664
- eventNames.forEach(function ( n: string ) {
665
- // console.log()
666
- ev = new Event( n, options );
667
- (ev as LooseObject ).data = data;
668
- e.dispatchEvent( ev );
669
- });
670
- });
671
-
672
- return that;
673
- }
674
-
675
- /*
676
- array method mapping
677
- */
678
-
679
- at( index: number ): DSelector {
680
- return $d( this.array.at( index ) as HTMLElement ) as DomSelector;
681
- }
682
-
683
- concat( items: DSelector | any[] ): DSelector{
684
- let
685
- that = this,
686
- arr = items instanceof DomSelector
687
- ? items.array
688
- : items as HTMLElement[]
689
- ;
690
-
691
- arr.forEach( (e: HTMLElement) => {
692
- that.#set.add( e );
693
- });
694
-
695
- return that;
696
- }
697
-
698
- entries(): IterableIterator<[number, any]> {
699
- return this.array.entries();
700
- }
701
-
702
- every( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): boolean {
703
- return this.array.every( predicate, thisArg );
704
- }
705
-
706
- filter( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): DSelector {
707
- this.#set = new Set( this.array.filter( predicate, thisArg ) );
708
- return this;
709
- }
710
-
711
- forEach( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): DSelector {
712
- this.array.forEach( predicate, thisArg );
713
- return this;
714
- }
715
-
716
- includes( item: HTMLElement ): boolean{
717
- return this.array.indexOf( item, 0 ) !== -1;
718
- }
719
-
720
- indexOf( item: HTMLElement, start?: number ): number{
721
- return this.array.indexOf( item, start );
722
- }
723
-
724
- map( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): Array<any>{
725
- return this.array.map( predicate, thisArg );
726
- }
727
-
728
- pop(): HTMLElement {
729
- return this.array.pop() as HTMLElement;
730
- }
731
-
732
- push( ...items: HTMLElement[] ): DSelector {
733
- items.forEach( (item: HTMLElement) => {
734
- this.#set.add( item );
735
- });
736
- return this;
737
- }
738
-
739
- shift(): HTMLElement | undefined {
740
- let
741
- that = this,
742
- element = that.#set.size ? that.array[0] : undefined
743
- ;
744
-
745
- if ( element ){
746
- that.#set.delete( element );
747
- }
748
-
749
- return element;
750
- }
751
-
752
- slice( start: number, end?: number ): DSelector {
753
- return $d( this.array.slice( start, end ) );
754
- }
755
-
756
- some( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): boolean{
757
- return this.array.some( predicate, thisArg );
758
- }
759
-
760
- splice( start: number, deleteCount?: number | undefined ): DSelector;
761
- splice( start: number, deleteCount: number, ...items: HTMLElement[] ): DSelector {
762
- let
763
- that = this,
764
- arr = that.array
765
- ;
766
-
767
- arr.splice( start, deleteCount, ...items );
768
- return $d( arr );
769
- }
770
-
771
- }
772
-
773
- export interface DSelector extends DomSelector{};
774
-
775
- class TbSelector{
776
-
777
- #set: Set<any> = new Set();
778
-
779
- public get set(): Set<any> {
780
- return this.#set;
781
- }
782
-
783
- public get array(): any[] {
784
- return Array.from( this.#set );
785
- }
786
-
787
- public set set( set: Set<any> ) {
788
- this.#set = set;
789
- return;
790
- }
791
-
792
- public get length(): number {
793
- return this.#set.size;
794
- }
795
-
796
- public set length( value: number ){
797
- //ignore
798
- }
799
-
800
- constructor( selection?: selection, element: HTMLElement = document.body ){
801
-
802
- if ( !selection ) {
803
- return this;
804
- }
805
-
806
- $d( selection, element ).forEach( (e: HTMLMcElement) => {
807
- $t( e ).forEach( (t: any ) => {
808
- this.#set.add(t);
809
- });
810
- });
811
-
812
- }
813
-
814
- $d( selection?: selection, element: HTMLElement = document.body ): DSelector {
815
- let
816
- result = new DomSelector(),
817
- set: Set<HTMLElement> = new Set(),
818
- compare: boolean = !!selection || false,
819
- compareSelection: Set<HTMLElement> = new Set()
820
- ;
821
-
822
- if ( compare ){
823
- compareSelection = $d( selection, element ).set;
824
- }
825
-
826
- this.#set.forEach( (e: any) => {
827
- if ( !compare || compareSelection.has( (e as any)._tg ) ) {
828
- set.add( (e as any)._tg );
829
- }
830
- });
831
-
832
- result.set = set;
833
-
834
- return result;
835
- }
836
-
837
- children( nameSpace?: string ): TSelector{
838
-
839
- let
840
- that: TbSelector = this,
841
- set: Set<any> = new Set()
842
- ;
843
-
844
- that.#set.forEach( (e: any) => {
845
- e.children( nameSpace ).forEach( ( tb: any ) => {
846
- set.add( tb );
847
- });
848
- });
849
-
850
- that.#set = set;
851
-
852
- return that;
853
- }
854
-
855
- descendants( nameSpace?: string ): TSelector{
856
-
857
- let
858
- that: TbSelector = this,
859
- set: Set<any> = new Set()
860
- ;
861
-
862
- that.#set.forEach( (e: any) => {
863
- e.descendants( nameSpace ).forEach( ( tb: any ) => {
864
- set.add( tb );
865
- });
866
- });
867
-
868
- that.#set = set;
869
-
870
- return that;
871
- }
872
-
873
- first( nameSpace?: string ): TSelector{
874
-
875
- let
876
- that: TbSelector = this,
877
- set: Set<any> = new Set()
878
- ;
879
-
880
- that.#set.forEach( (e: any) => {
881
- e
882
- .parent()
883
- .children()
884
- .$d()
885
- .first()
886
- .$t()
887
- .forEach( (tb: any) => {
888
- set.add( tb );
889
- });
890
- });
891
-
892
- that.#set = set;
893
-
894
- if ( nameSpace ){
895
- that.filter( ( tb: any ) => (tb as any).nameSpace = nameSpace );
896
- }
897
-
898
- return that;
899
- }
900
-
901
- has( element: any ): boolean{
902
- return this.#set.has( element );
903
- }
904
-
905
- last( nameSpace?: string ): TSelector{
906
- let
907
- that: TbSelector = this,
908
- set: Set<any> = new Set()
909
- ;
910
-
911
- that.#set.forEach( (e: any) => {
912
- e
913
- .parent()
914
- .children()
915
- .$d()
916
- .last()
917
- .$t()
918
- .forEach( (tb: any) => {
919
- set.add( tb );
920
- });
921
- });
922
-
923
- that.#set = set;
924
-
925
- if ( nameSpace ){
926
- that.filter( ( e: any ) => ( e as LooseObject).nameSpace = nameSpace );
927
- }
928
-
929
- return that;
930
- }
931
-
932
- next( nameSpace?: string ): TSelector{
933
-
934
- let
935
- that: TbSelector = this,
936
- set: Set<any> = new Set()
937
- ;
938
-
939
- that.#set.forEach( (e: any) => {
940
- let
941
- elements: Set<HTMLElement> = new Set(),
942
- element: HTMLElement
943
- ;
944
-
945
- element = (e as any)._tg;
946
- while ( element.nextElementSibling !== null ){
947
- element = element.nextElementSibling as HTMLElement;
948
- elements.add( element );
949
- }
950
-
951
- $t([...elements])
952
- .$d()
953
- .first()
954
- .$t()
955
- .forEach( (tb: any) => {
956
- set.add( tb );
957
- });
958
- });
959
-
960
- that.#set = set;
961
-
962
- if ( nameSpace ){
963
- that.filter( ( e: any ) => ( e as LooseObject).nameSpace = nameSpace );
964
- }
965
-
966
- return that;
967
- }
968
-
969
- ns( nameSpace: string ): TSelector{
970
- return this.filter( (tb: any) => (tb as any).nameSpace === nameSpace );
971
- }
972
-
973
- off( name: string, cb: Function ): TSelector{
974
- let
975
- that = this,
976
- eventNames =
977
- name.indexOf(' ') > -1
978
- ? name.split(' ').filter( (s) => s !== '' )
979
- : [ name ]
980
- ;
981
-
982
- // remove handlers
983
- that.$d().array.forEach( (e: HTMLElement) => {
984
- eventNames.forEach(function ( n: string ) {
985
- // console.log('Tb Selector remove event', `[TB]${n}`, e, cb );
986
- removeListener(
987
- e,
988
- `[TB]${n}`,
989
- cb as EventListenerOrEventListenerObject
990
- );
991
- });
992
- });
993
-
994
- return that;
995
- }
996
-
997
- on( name: string, cb: Function, once: boolean = false ): Function{
998
-
999
- let
1000
- that = this,
1001
- eventNames =
1002
- name.indexOf(' ') > -1
1003
- ? name.split(' ').filter( (s) => s !== '' )
1004
- : [ name ]
1005
- ;
1006
-
1007
- function wrapper(){ wrapper.cb.apply(that, Array.from(arguments) ); };
1008
- wrapper.cb = cb;
1009
-
1010
- // attach handler
1011
- that.forEach( ( tb: any) => {
1012
- eventNames.forEach(function ( n: string ) {
1013
- addListener(
1014
- (tb as any)._tg,
1015
- `[TB]${n}`,
1016
- (wrapper as EventListenerOrEventListenerObject),
1017
- false,
1018
- once
1019
- );
1020
- });
1021
- });
1022
-
1023
- return wrapper;
1024
- }
1025
-
1026
- one( name: string, cb: Function ): Function{
1027
- let
1028
- that = this,
1029
- eventNames =
1030
- name.indexOf(' ') > -1
1031
- ? name.split(' ').filter( (s) => s !== '' )
1032
- : [ name ]
1033
- ;
1034
-
1035
- function wrapper(){ wrapper.cb.apply(that, Array.from(arguments) ); };
1036
- wrapper.cb = cb;
1037
-
1038
- // attach handler
1039
- that.forEach( ( tb: any) => {
1040
- eventNames.forEach(function ( n: string ) {
1041
- addListener(
1042
- (tb as any)._tg,
1043
- `[TB]${n}`,
1044
- (wrapper as EventListenerOrEventListenerObject),
1045
- false,
1046
- true
1047
- );
1048
- });
1049
- });
1050
-
1051
- return wrapper;
1052
- }
1053
-
1054
- parent( nameSpace?: string ): TSelector {
1055
-
1056
- let
1057
- that: TbSelector = this,
1058
- set: Set<any> = new Set()
1059
- ;
1060
-
1061
- that.#set.forEach( (e: any) => {
1062
- e.parent( nameSpace ).forEach( ( tb: any ) => {
1063
- set.add( tb );
1064
- });
1065
- });
1066
-
1067
- that.#set = set;
1068
-
1069
- return that;
1070
- }
1071
-
1072
- ancestors( nameSpace?: string ): TSelector {
1073
-
1074
- let
1075
- that: TbSelector = this,
1076
- set: Set<any> = new Set()
1077
- ;
1078
-
1079
- that.#set.forEach( (e: any) => {
1080
- e.parents( nameSpace ).forEach( ( tb: any ) => {
1081
- set.add( tb );
1082
- });
1083
- });
1084
-
1085
- that.#set = set;
1086
-
1087
- return that;
1088
- }
1089
-
1090
- prev( nameSpace?: string ): TSelector{
1091
-
1092
- let
1093
- that: TbSelector = this,
1094
- set: Set<any> = new Set()
1095
- ;
1096
-
1097
- that.#set.forEach( (e: any) => {
1098
- let
1099
- elements: Set<HTMLElement> = new Set(),
1100
- element: HTMLElement
1101
- ;
1102
-
1103
- element = (e as any)._tg;
1104
- while ( element.previousElementSibling !== null ){
1105
- element = element.previousElementSibling as HTMLElement;
1106
- elements.add( element );
1107
- }
1108
-
1109
- $t([...elements])
1110
- .$d()
1111
- .last()
1112
- .$t()
1113
- .forEach( (tb: any) => {
1114
- set.add( tb );
1115
- });
1116
- });
1117
-
1118
- that.#set = set;
1119
-
1120
- if ( nameSpace ){
1121
- that.filter( ( e: any ) => ( e as LooseObject).nameSpace = nameSpace );
1122
- }
1123
-
1124
- return that;
1125
- }
1126
-
1127
- trigger( ev: string, data: any = {}, bubble: string = 'l' ): TSelector{
1128
- let
1129
- that = this
1130
- ;
1131
-
1132
- that.forEach( ( tb: any ) => {
1133
- tb.trigger( ev, data, bubble );
1134
- });
1135
-
1136
- return that;
1137
- }
1138
-
1139
- /*
1140
- array method mapping
1141
- */
1142
-
1143
- at( index: number ): TSelector {
1144
- return $t( this.array.at( index ) ) as TbSelector;
1145
- }
1146
-
1147
- concat( items: TSelector ): TSelector {
1148
-
1149
- let
1150
- that = this
1151
- ;
1152
-
1153
- items.forEach( ( tb: any) => {
1154
- that.#set.add( tb );
1155
- });
1156
-
1157
- return that;
1158
- }
1159
-
1160
- entries(): IterableIterator<[number, any]> {
1161
- return this.array.entries();
1162
- }
1163
-
1164
- every( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): boolean {
1165
- return this.array.every( predicate, thisArg );
1166
- }
1167
-
1168
- filter( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): TSelector {
1169
- return $t( this.array.filter( predicate, thisArg ) );
1170
- }
1171
-
1172
- forEach( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): TSelector {
1173
- let
1174
- that = this
1175
- ;
1176
- that.array.forEach( predicate, thisArg );
1177
- return that;
1178
- }
1179
-
1180
- includes( item: any ): boolean{
1181
- return this.array.indexOf( item ) !== -1;
1182
- }
1183
-
1184
- indexOf( item: any, start?: number ): number{
1185
- return this.array.indexOf( item, start );
1186
- }
1187
-
1188
- map( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): Array<any>{
1189
- return this.array.map( predicate, thisArg );
1190
- }
1191
-
1192
- pop(): any {
1193
-
1194
- let
1195
- that = this,
1196
- arr = that.array,
1197
- result = arr.pop()
1198
- ;
1199
-
1200
- that.#set = new Set( arr );
1201
-
1202
- return result as any;
1203
- }
1204
-
1205
- push( item: any ): TSelector {
1206
- let
1207
- that = this
1208
- ;
1209
- that.#set.add( item );
1210
- return that;
1211
- }
1212
-
1213
- shift(): any | undefined {
1214
- let
1215
- that = this,
1216
- first = this.array.shift() as any
1217
- ;
1218
- that.#set.delete( first );
1219
- return first;
1220
- }
1221
-
1222
- slice( start: number, end?: number ): TSelector {
1223
- return $t( this.array.slice( start, end ) );
1224
- }
1225
-
1226
- some( predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any ): boolean{
1227
- return this.array.some( predicate, thisArg );
1228
- }
1229
-
1230
- splice( start: number, deleteCount?: number | undefined ): TSelector;
1231
- splice( start: number, deleteCount: number, ...items: never[] ): TSelector {
1232
- let
1233
- that = this,
1234
- arr = that.array,
1235
- result = arr.splice( start, deleteCount, ...items )
1236
- ;
1237
-
1238
- return $t( result );
1239
- }
1240
-
1241
- }
1242
-
1243
- export interface TSelector extends TbSelector{};
1244
-
1245
- export const $d = ( selection: selection, element: any = document ): DSelector => {
1246
-
1247
- let
1248
- set = new Set<HTMLElement>()
1249
- ;
1250
-
1251
- if ( selection instanceof Array ){
1252
- selection.forEach( value => {
1253
- $d( value, element ).forEach( n => {
1254
- set.add( n );
1255
- });
1256
- });
1257
- return new DomSelector( [...set] );
1258
- } else {
1259
- return new DomSelector( selection, element );
1260
- }
1261
- }
1262
-
1263
- export const $t = ( selection?: selection, element: any = document ): TSelector => {
1264
- return $d( selection, element ).$t();
1265
- }
1266
-
1267
- export type singleSelector = string | ShadowRoot | HTMLElement | HTMLElement[] | HTMLCollection | NodeList | DSelector | MC | DC | TSelector | undefined;
1268
-
1269
- export type selection = singleSelector | singleSelector[];