@twobirds/microcomponents 0.1.1 → 0.1.3
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/dist/MC.d.ts +0 -1
- package/dist/MC.js +6 -5
- package/dist/MC.min.js +39 -56
- package/dist/MC.ts +6 -4
- package/dist/elements.d.ts +0 -1
- package/dist/elements.js +0 -1
- package/dist/elements.min.js +1 -1
- package/dist/formValues.d.ts +0 -1
- package/dist/formValues.js +0 -1
- package/dist/formValues.min.js +1 -1
- package/dist/helpers.d.ts +0 -1
- package/dist/helpers.js +0 -1
- package/dist/microcomponents.d.ts +0 -1
- package/dist/microcomponents.js +0 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.d.ts +0 -1
- package/dist/observables.js +0 -1
- package/dist/observables.min.js +1 -1
- package/package.json +10 -2
- package/.gitlab-ci.yml +0 -18
- package/.vscode/settings.json +0 -3
- package/MicroComponents.svg +0 -15
- package/assets/documentation/MC.md +0 -547
- package/assets/documentation/MicroComponents.svg +0 -15
- package/assets/documentation/ajaxian-1.png +0 -0
- package/assets/documentation/ajaxian-2.png +0 -0
- package/assets/documentation/ajaxian-3.png +0 -0
- package/assets/documentation/elements.md +0 -277
- package/assets/documentation/formvalues.md +0 -25
- package/assets/documentation/functional_requirements.md +0 -8
- package/assets/documentation/history.md +0 -436
- package/assets/documentation/klemmstein.png +0 -0
- package/assets/documentation/magic.md +0 -29
- package/assets/documentation/observables.md +0 -187
- package/assets/documentation/rnd0023-1.jpg +0 -0
- package/assets/documentation/rnd0023-2.jpg +0 -0
- package/assets/documentation/rnd0023-3.jpg +0 -0
- package/assets/documentation/tB_react.md +0 -207
- package/assets/documentation/usage.md +0 -142
- package/assets/documentation/why.md +0 -25
- package/assets/fiddle/MicroComponents.svg +0 -15
- package/assets/fiddle/fiddle.css +0 -0
- package/assets/fiddle/fiddle.js +0 -0
- package/assets/fiddle/index.html +0 -0
- package/assets/test/MicroComponents.svg +0 -15
- package/assets/test/grandparent.css +0 -16
- package/assets/test/myButton.css +0 -19
- package/assets/test/style.css +0 -8
- package/assets/test/test.html +0 -29
- package/assets/test/testform.json +0 -27
- package/dist/MC.d.ts.map +0 -1
- package/dist/elements.d.ts.map +0 -1
- package/dist/formValues.d.ts.map +0 -1
- package/dist/helpers.d.ts.map +0 -1
- package/dist/microcomponents.d.ts.map +0 -1
- package/dist/observables.d.ts.map +0 -1
- package/public/.nojekyll +0 -1
- package/public/MC.d.ts +0 -39
- package/public/MC.d.ts.map +0 -1
- package/public/MC.js +0 -287
- package/public/MC.js.map +0 -1
- package/public/MC.min.js +0 -348
- package/public/MC.ts +0 -431
- package/public/MicroComponents.svg +0 -15
- package/public/documentation/MC.md +0 -547
- package/public/documentation/MicroComponents.svg +0 -15
- package/public/documentation/ajaxian-1.png +0 -0
- package/public/documentation/ajaxian-2.png +0 -0
- package/public/documentation/ajaxian-3.png +0 -0
- package/public/documentation/elements.md +0 -277
- package/public/documentation/formvalues.md +0 -25
- package/public/documentation/functional_requirements.md +0 -8
- package/public/documentation/history.md +0 -436
- package/public/documentation/klemmstein.png +0 -0
- package/public/documentation/magic.md +0 -29
- package/public/documentation/observables.md +0 -187
- package/public/documentation/rnd0023-1.jpg +0 -0
- package/public/documentation/rnd0023-2.jpg +0 -0
- package/public/documentation/rnd0023-3.jpg +0 -0
- package/public/documentation/tB_react.md +0 -207
- package/public/documentation/usage.md +0 -142
- package/public/documentation/why.md +0 -25
- package/public/elements.d.ts +0 -5
- package/public/elements.d.ts.map +0 -1
- package/public/elements.js +0 -68
- package/public/elements.js.map +0 -1
- package/public/elements.min.js +0 -1
- package/public/elements.ts +0 -119
- package/public/fiddle/MicroComponents.svg +0 -15
- package/public/fiddle/fiddle.css +0 -0
- package/public/fiddle/fiddle.js +0 -0
- package/public/fiddle/index.html +0 -0
- package/public/formValues.d.ts +0 -3
- package/public/formValues.d.ts.map +0 -1
- package/public/formValues.js +0 -162
- package/public/formValues.js.map +0 -1
- package/public/formValues.min.js +0 -1
- package/public/formValues.ts +0 -225
- package/public/helpers.d.ts +0 -14
- package/public/helpers.d.ts.map +0 -1
- package/public/helpers.js +0 -113
- package/public/helpers.js.map +0 -1
- package/public/helpers.ts +0 -149
- package/public/microcomponents.d.ts +0 -6
- package/public/microcomponents.d.ts.map +0 -1
- package/public/microcomponents.js +0 -7
- package/public/microcomponents.js.map +0 -1
- package/public/microcomponents.min.js +0 -1
- package/public/microcomponents.ts +0 -8
- package/public/observables.d.ts +0 -11
- package/public/observables.d.ts.map +0 -1
- package/public/observables.js +0 -244
- package/public/observables.js.map +0 -1
- package/public/observables.min.js +0 -1
- package/public/observables.ts +0 -416
- package/public/selectors._ts +0 -1269
- package/public/src/MC.d.ts +0 -39
- package/public/src/MC.d.ts.map +0 -1
- package/public/src/MC.js +0 -287
- package/public/src/MC.js.map +0 -1
- package/public/src/MC.ts +0 -431
- package/public/src/elements.d.ts +0 -5
- package/public/src/elements.d.ts.map +0 -1
- package/public/src/elements.js +0 -68
- package/public/src/elements.js.map +0 -1
- package/public/src/elements.ts +0 -119
- package/public/src/formValues.d.ts +0 -3
- package/public/src/formValues.d.ts.map +0 -1
- package/public/src/formValues.js +0 -162
- package/public/src/formValues.js.map +0 -1
- package/public/src/formValues.ts +0 -225
- package/public/src/helpers.d.ts +0 -14
- package/public/src/helpers.d.ts.map +0 -1
- package/public/src/helpers.js +0 -113
- package/public/src/helpers.js.map +0 -1
- package/public/src/helpers.ts +0 -149
- package/public/src/microcomponents.d.ts +0 -6
- package/public/src/microcomponents.d.ts.map +0 -1
- package/public/src/microcomponents.js +0 -7
- package/public/src/microcomponents.js.map +0 -1
- package/public/src/microcomponents.ts +0 -8
- package/public/src/observables.d.ts +0 -11
- package/public/src/observables.d.ts.map +0 -1
- package/public/src/observables.js +0 -244
- package/public/src/observables.js.map +0 -1
- package/public/src/observables.ts +0 -416
- package/public/src/selectors._ts +0 -1269
- package/public/src/test/grandparent.css +0 -14
- package/public/src/test/test/child.d.ts +0 -2
- package/public/src/test/test/child.d.ts.map +0 -1
- package/public/src/test/test/child.js +0 -26
- package/public/src/test/test/child.js.map +0 -1
- package/public/src/test/test/child.ts +0 -36
- package/public/src/test/test/grandchild.d.ts +0 -2
- package/public/src/test/test/grandchild.d.ts.map +0 -1
- package/public/src/test/test/grandchild.js +0 -22
- package/public/src/test/test/grandchild.js.map +0 -1
- package/public/src/test/test/grandchild.ts +0 -31
- package/public/src/test/test/grandparent.d.ts +0 -2
- package/public/src/test/test/grandparent.d.ts.map +0 -1
- package/public/src/test/test/grandparent.js +0 -1
- package/public/src/test/test/grandparent.js.map +0 -1
- package/public/src/test/test/grandparent.ts +0 -43
- package/public/src/test/test/greatgrandchild.d.ts +0 -2
- package/public/src/test/test/greatgrandchild.d.ts.map +0 -1
- package/public/src/test/test/greatgrandchild.js +0 -36
- package/public/src/test/test/greatgrandchild.js.map +0 -1
- package/public/src/test/test/greatgrandchild.ts +0 -51
- package/public/src/test/test/parent.d.ts +0 -2
- package/public/src/test/test/parent.d.ts.map +0 -1
- package/public/src/test/test/parent.js +0 -25
- package/public/src/test/test/parent.js.map +0 -1
- package/public/src/test/test/parent.ts +0 -35
- package/public/src/test/test/testform.d.ts +0 -2
- package/public/src/test/test/testform.d.ts.map +0 -1
- package/public/src/test/test/testform.js +0 -1
- package/public/src/test/test/testform.js.map +0 -1
- package/public/src/test/test/testform.ts +0 -153
- package/public/src/test/test/testfunction.d.ts +0 -3
- package/public/src/test/test/testfunction.d.ts.map +0 -1
- package/public/src/test/test/testfunction.js +0 -7
- package/public/src/test/test/testfunction.js.map +0 -1
- package/public/src/test/test/testfunction.ts +0 -12
- package/public/src/test/test/testmc.d.ts +0 -3
- package/public/src/test/test/testmc.d.ts.map +0 -1
- package/public/src/test/test/testmc.js +0 -10
- package/public/src/test/test/testmc.js.map +0 -1
- package/public/src/test/test/testmc.ts +0 -16
- package/public/src/test/test/testsimpleclass.d.ts +0 -3
- package/public/src/test/test/testsimpleclass.d.ts.map +0 -1
- package/public/src/test/test/testsimpleclass.js +0 -9
- package/public/src/test/test/testsimpleclass.js.map +0 -1
- package/public/src/test/test/testsimpleclass.ts +0 -15
- package/public/src/test/test.d.ts +0 -2
- package/public/src/test/test.d.ts.map +0 -1
- package/public/src/test/test.js +0 -72
- package/public/src/test/test.js.map +0 -1
- package/public/src/test/test.ts +0 -176
- package/public/src/test/testform.css +0 -47
- package/public/src/test/testform.html +0 -56
- package/public/src/test/testform.json +0 -27
- package/public/test/MC.d.ts +0 -39
- package/public/test/MC.d.ts.map +0 -1
- package/public/test/MC.js +0 -287
- package/public/test/MC.min.js +0 -348
- package/public/test/MC.ts +0 -431
- package/public/test/MicroComponents.svg +0 -15
- package/public/test/elements.d.ts +0 -5
- package/public/test/elements.d.ts.map +0 -1
- package/public/test/elements.js +0 -68
- package/public/test/elements.min.js +0 -1
- package/public/test/elements.ts +0 -119
- package/public/test/formValues.d.ts +0 -3
- package/public/test/formValues.d.ts.map +0 -1
- package/public/test/formValues.js +0 -162
- package/public/test/formValues.min.js +0 -1
- package/public/test/formValues.ts +0 -225
- package/public/test/grandparent.css +0 -14
- package/public/test/helpers.d.ts +0 -14
- package/public/test/helpers.d.ts.map +0 -1
- package/public/test/helpers.js +0 -113
- package/public/test/helpers.ts +0 -149
- package/public/test/microcomponents.d.ts +0 -6
- package/public/test/microcomponents.d.ts.map +0 -1
- package/public/test/microcomponents.js +0 -7
- package/public/test/microcomponents.min.js +0 -1
- package/public/test/microcomponents.ts +0 -8
- package/public/test/myButton.css +0 -19
- package/public/test/observables.d.ts +0 -11
- package/public/test/observables.d.ts.map +0 -1
- package/public/test/observables.js +0 -244
- package/public/test/observables.min.js +0 -1
- package/public/test/observables.ts +0 -416
- package/public/test/style.css +0 -8
- package/public/test/test/child.d.ts +0 -2
- package/public/test/test/child.d.ts.map +0 -1
- package/public/test/test/child.js +0 -26
- package/public/test/test/child.js.map +0 -1
- package/public/test/test/child.ts +0 -36
- package/public/test/test/grandchild.d.ts +0 -2
- package/public/test/test/grandchild.d.ts.map +0 -1
- package/public/test/test/grandchild.js +0 -22
- package/public/test/test/grandchild.js.map +0 -1
- package/public/test/test/grandchild.ts +0 -31
- package/public/test/test/grandparent.d.ts +0 -2
- package/public/test/test/grandparent.d.ts.map +0 -1
- package/public/test/test/grandparent.js +0 -1
- package/public/test/test/grandparent.js.map +0 -1
- package/public/test/test/grandparent.ts +0 -43
- package/public/test/test/greatgrandchild.d.ts +0 -2
- package/public/test/test/greatgrandchild.d.ts.map +0 -1
- package/public/test/test/greatgrandchild.js +0 -36
- package/public/test/test/greatgrandchild.js.map +0 -1
- package/public/test/test/greatgrandchild.ts +0 -51
- package/public/test/test/parent.d.ts +0 -2
- package/public/test/test/parent.d.ts.map +0 -1
- package/public/test/test/parent.js +0 -25
- package/public/test/test/parent.js.map +0 -1
- package/public/test/test/parent.ts +0 -35
- package/public/test/test/testform.d.ts +0 -2
- package/public/test/test/testform.d.ts.map +0 -1
- package/public/test/test/testform.js +0 -1
- package/public/test/test/testform.js.map +0 -1
- package/public/test/test/testform.ts +0 -153
- package/public/test/test/testfunction.d.ts +0 -3
- package/public/test/test/testfunction.d.ts.map +0 -1
- package/public/test/test/testfunction.js +0 -7
- package/public/test/test/testfunction.js.map +0 -1
- package/public/test/test/testfunction.ts +0 -12
- package/public/test/test/testmc.d.ts +0 -3
- package/public/test/test/testmc.d.ts.map +0 -1
- package/public/test/test/testmc.js +0 -10
- package/public/test/test/testmc.js.map +0 -1
- package/public/test/test/testmc.ts +0 -16
- package/public/test/test/testsimpleclass.d.ts +0 -3
- package/public/test/test/testsimpleclass.d.ts.map +0 -1
- package/public/test/test/testsimpleclass.js +0 -9
- package/public/test/test/testsimpleclass.js.map +0 -1
- package/public/test/test/testsimpleclass.ts +0 -15
- package/public/test/test.d.ts +0 -2
- package/public/test/test.d.ts.map +0 -1
- package/public/test/test.html +0 -29
- package/public/test/test.js +0 -72
- package/public/test/test.js.map +0 -1
- package/public/test/test.ts +0 -176
- package/public/test/testform.css +0 -47
- package/public/test/testform.html +0 -56
- package/public/test/testform.json +0 -27
- package/public/typedoc/.nojekyll +0 -1
- package/public/typedoc/assets/highlight.css +0 -106
- package/public/typedoc/assets/icons.js +0 -18
- package/public/typedoc/assets/icons.svg +0 -1
- package/public/typedoc/assets/main.js +0 -60
- package/public/typedoc/assets/navigation.js +0 -1
- package/public/typedoc/assets/search.js +0 -1
- package/public/typedoc/assets/style.css +0 -1493
- package/public/typedoc/classes/MC.DC.html +0 -13
- package/public/typedoc/classes/MC.MC.html +0 -3
- package/public/typedoc/classes/MC.McBase.html +0 -3
- package/public/typedoc/functions/MC.autoload.html +0 -1
- package/public/typedoc/functions/MC.off.html +0 -1
- package/public/typedoc/functions/MC.on.html +0 -1
- package/public/typedoc/functions/MC.one.html +0 -1
- package/public/typedoc/functions/MC.trigger.html +0 -1
- package/public/typedoc/functions/elements.defineCE.html +0 -1
- package/public/typedoc/functions/elements.getCE.html +0 -1
- package/public/typedoc/functions/formValues.formValues.html +0 -1
- package/public/typedoc/functions/observables.observe.html +0 -1
- package/public/typedoc/hierarchy.html +0 -1
- package/public/typedoc/index.html +0 -122
- package/public/typedoc/interfaces/MC.HTMLMcElement.html +0 -758
- package/public/typedoc/media/MicroComponents.svg +0 -15
- package/public/typedoc/modules/MC.html +0 -10
- package/public/typedoc/modules/elements.html +0 -3
- package/public/typedoc/modules/formValues.html +0 -2
- package/public/typedoc/modules/observables.html +0 -3
- package/public/typedoc/modules.html +0 -5
- package/public/typedoc/types/observables.Observable.html +0 -1
- package/src/MC.ts +0 -431
- package/src/elements.ts +0 -119
- package/src/formValues.ts +0 -225
- package/src/helpers.ts +0 -149
- package/src/microcomponents.ts +0 -8
- package/src/observables.ts +0 -416
- package/src/selectors._ts +0 -1269
- package/src/test/grandparent.css +0 -14
- package/src/test/test/child.ts +0 -36
- package/src/test/test/grandchild.ts +0 -31
- package/src/test/test/grandparent.ts +0 -43
- package/src/test/test/greatgrandchild.ts +0 -51
- package/src/test/test/parent.ts +0 -35
- package/src/test/test/testform.ts +0 -153
- package/src/test/test/testfunction.ts +0 -12
- package/src/test/test/testmc.ts +0 -16
- package/src/test/test/testsimpleclass.ts +0 -15
- package/src/test/test.ts +0 -176
- package/src/test/testform.css +0 -47
- package/src/test/testform.html +0 -56
- package/src/test/testform.json +0 -27
- package/tasks.md +0 -36
- package/tsconfig.json +0 -107
- package/typedoc.json +0 -7
- package/webpack.config.js +0 -346
package/public/test/MC.ts
DELETED
|
@@ -1,431 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
import { LooseObject } from './helpers.js';
|
|
4
|
-
|
|
5
|
-
const isBrowser = new Function(
|
|
6
|
-
'try {return this===window;}catch(e){ return false;}'
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
export interface HTMLMcElement extends HTMLElement {
|
|
10
|
-
_mc: LooseObject;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function isDOM(element: { [key: string]: any }) {
|
|
14
|
-
return element && element instanceof HTMLElement;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// add a microcomponent to a target DOM node
|
|
18
|
-
function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
|
|
19
|
-
let node = target as HTMLMcElement;
|
|
20
|
-
|
|
21
|
-
// create the _mc property if necessary
|
|
22
|
-
if (!node._mc) {
|
|
23
|
-
node._mc = new (DC as any)(target);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const _mc = node._mc;
|
|
27
|
-
|
|
28
|
-
// add the element with the given property key to the _mc property
|
|
29
|
-
if (key.length && !_mc[key]) {
|
|
30
|
-
_mc[key] = element;
|
|
31
|
-
// add attribute if HTMLElement
|
|
32
|
-
if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
|
|
33
|
-
target.setAttribute('data-mc', '');
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
return node;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// remove a micro component from the DOM
|
|
41
|
-
function remove(target: HTMLElement, key: string) {
|
|
42
|
-
if (!key) return; // silent fail
|
|
43
|
-
|
|
44
|
-
const _mc = (target as unknown as HTMLMcElement)?._mc || {};
|
|
45
|
-
|
|
46
|
-
// delete the property from the HTMLElement _mc collection
|
|
47
|
-
if (_mc && _mc[key]) {
|
|
48
|
-
delete _mc[key];
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// remove the _mc attribute if the DOM collection is empty
|
|
52
|
-
if (
|
|
53
|
-
!Object.keys(_mc).length &&
|
|
54
|
-
target instanceof HTMLElement &&
|
|
55
|
-
target.hasAttribute('data-mc')
|
|
56
|
-
) {
|
|
57
|
-
target.removeAttribute('data-mc');
|
|
58
|
-
}
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// run the "init" lifecycle event on the complete _mc structure
|
|
63
|
-
function init(element: DC) {
|
|
64
|
-
setTimeout(() => {
|
|
65
|
-
if (element.constructor === DC) return;
|
|
66
|
-
element.trigger('Init');
|
|
67
|
-
}, 0);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// 'eventName' => '_mcEventName'
|
|
71
|
-
function getMcEventName( eventName: string ): string {
|
|
72
|
-
return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/*
|
|
76
|
-
CustomEvent Section...
|
|
77
|
-
*/
|
|
78
|
-
function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
|
|
79
|
-
domNode.removeEventListener( getMcEventName(eventName), handler );
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
|
|
83
|
-
domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
|
|
84
|
-
return handler;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
|
|
88
|
-
on(domNode, eventName, handler, true );
|
|
89
|
-
return handler;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
class BubbleController{
|
|
93
|
-
stopped = false;
|
|
94
|
-
constructor(){
|
|
95
|
-
}
|
|
96
|
-
stop(){
|
|
97
|
-
this.stopped = true;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// create and dispatch custom event
|
|
102
|
-
function trigger(
|
|
103
|
-
domNode: HTMLElement,
|
|
104
|
-
event: string,
|
|
105
|
-
data: any = {},
|
|
106
|
-
bubble: string = 'l', // direction of bubbling
|
|
107
|
-
controller?: BubbleController
|
|
108
|
-
){
|
|
109
|
-
const eventName = /^_mc/.test( event ) ? event : getMcEventName( event ),
|
|
110
|
-
bubbleController = !!controller ? controller : new BubbleController(),
|
|
111
|
-
ev = new CustomEvent( eventName, { detail: {data,control: bubbleController}, bubbles: false } );
|
|
112
|
-
|
|
113
|
-
if ( bubbleController.stopped ) return;
|
|
114
|
-
|
|
115
|
-
domNode.dispatchEvent( ev );
|
|
116
|
-
ev.stopImmediatePropagation();
|
|
117
|
-
|
|
118
|
-
if ( bubbleController.stopped ) return;
|
|
119
|
-
|
|
120
|
-
// bubble if up or down is indicated
|
|
121
|
-
if( /[ud]/.test( bubble ) ){
|
|
122
|
-
//console.log( 'bubble', bubble, domNode );
|
|
123
|
-
|
|
124
|
-
// add missing 'l', or else no handlers are executed
|
|
125
|
-
if (bubble.indexOf('l') === -1) {
|
|
126
|
-
bubble += 'l';
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
setTimeout(
|
|
130
|
-
() => {
|
|
131
|
-
|
|
132
|
-
// bubble up towards document.body
|
|
133
|
-
if ( bubble.indexOf('u') > -1 ) {
|
|
134
|
-
let parentMc: HTMLMcElement | null | undefined = domNode.parentElement?.closest('[data-mc]') ;
|
|
135
|
-
if ( !!parentMc ){
|
|
136
|
-
parentMc?._mc.trigger( eventName, data, bubble, bubbleController );
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
// bubble down towards DOM children
|
|
141
|
-
if (bubble.indexOf('d') > -1) {
|
|
142
|
-
let childNodes: DC[] | null = ( domNode as HTMLMcElement)._mc.children();
|
|
143
|
-
if( !!childNodes ){
|
|
144
|
-
childNodes.forEach( (_mc: DC) => _mc.trigger( eventName, data, bubble ) ); // event multiplex - dont carry bubble controller
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
0
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
function autoAttachListeners(element: MC | DC) {
|
|
154
|
-
if (!isBrowser() || element.constructor === DC) return;
|
|
155
|
-
|
|
156
|
-
const target = element.target;
|
|
157
|
-
|
|
158
|
-
if (target instanceof HTMLElement) {
|
|
159
|
-
let that: LooseObject = element;
|
|
160
|
-
Object.getOwnPropertyNames(that.constructor.prototype)
|
|
161
|
-
.filter(
|
|
162
|
-
(key) =>
|
|
163
|
-
/^on[A-Z]|one[A-Z]/.test(key) &&
|
|
164
|
-
typeof that.constructor.prototype[key] === 'function'
|
|
165
|
-
)
|
|
166
|
-
.forEach((key) => {
|
|
167
|
-
let once = /^one/.test(key),
|
|
168
|
-
withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
|
|
169
|
-
nativeEventName = withoutOnOne.toLowerCase(); // lowercase for native event names
|
|
170
|
-
|
|
171
|
-
if ( ('on' + nativeEventName) in target ) { // it is a native HTML event
|
|
172
|
-
let listener = (ev: Event) => {
|
|
173
|
-
that[key]( ev );
|
|
174
|
-
}
|
|
175
|
-
// console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
|
|
176
|
-
target.addEventListener( nativeEventName, listener );
|
|
177
|
-
} else { // it is a customEvent
|
|
178
|
-
// console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
|
|
179
|
-
let listener = (ev: CustomEvent) => {
|
|
180
|
-
that[key]( ev );
|
|
181
|
-
}
|
|
182
|
-
on( target, withoutOnOne, listener as EventListenerOrEventListenerObject, once );
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
function getMcChildNodes(domNode: HTMLElement): DC[] | null {
|
|
189
|
-
const id = Math.random().toString().replace('.', '');
|
|
190
|
-
const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
|
|
191
|
-
domNode.setAttribute('temp_id', id);
|
|
192
|
-
const mcArray: unknown[] =
|
|
193
|
-
( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
|
|
194
|
-
.filter( (e) => !!e._mc )
|
|
195
|
-
.map( e => e._mc );
|
|
196
|
-
domNode.removeAttribute('temp_id');
|
|
197
|
-
return mcArray.length ? mcArray as DC[] : null;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
class McBase {
|
|
201
|
-
private _target: WeakRef<any>; // avoid circular reference
|
|
202
|
-
|
|
203
|
-
constructor(target?: { [key: string]: any } ) {
|
|
204
|
-
let element = this as unknown as MC | DC;
|
|
205
|
-
|
|
206
|
-
this._target = new WeakRef(target || {});
|
|
207
|
-
|
|
208
|
-
init(element as DC); // async lifecycle event
|
|
209
|
-
|
|
210
|
-
autoAttachListeners(element);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
get target(): any {
|
|
214
|
-
return this._target.deref();
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
class MC extends McBase {
|
|
220
|
-
constructor(target?: any) {
|
|
221
|
-
super(target);
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
class DC extends McBase {
|
|
226
|
-
constructor(target: HTMLElement) {
|
|
227
|
-
super(target);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
static add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
|
|
231
|
-
return add( target, key, element );
|
|
232
|
-
};
|
|
233
|
-
|
|
234
|
-
static remove(target: HTMLElement, key: string) {
|
|
235
|
-
remove(target, key);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
/* event handling */
|
|
239
|
-
off( eventName: string, handler: EventListenerOrEventListenerObject ) {
|
|
240
|
-
off( this.target, eventName, handler );
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
on( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
|
|
244
|
-
return on( this.target, eventName, handler );
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
one( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
|
|
248
|
-
return one( this.target, eventName, handler );
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
trigger( eventName: string, data: any = {}, bubble: string = 'l', controller?: BubbleController) {
|
|
252
|
-
trigger( this.target, eventName, data, bubble, controller);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
/* DOM traversal */
|
|
256
|
-
ancestors(): DC[] | null {
|
|
257
|
-
let
|
|
258
|
-
currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
|
|
259
|
-
result: DC[] = [];
|
|
260
|
-
|
|
261
|
-
if (!isDOM( currentNode )) return [];
|
|
262
|
-
|
|
263
|
-
while ( currentNode = (currentNode.closest('[data-mc]') ) ){
|
|
264
|
-
if ( (currentNode as HTMLMcElement)?._mc ){
|
|
265
|
-
result.push( (currentNode as HTMLMcElement)?._mc as DC );
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
return result.length ? result : null;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
closest(): DC | null {
|
|
273
|
-
let
|
|
274
|
-
target: HTMLElement = (this as DC).target;
|
|
275
|
-
if (!isDOM(target)) return null;
|
|
276
|
-
return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
children(): DC[] | null {
|
|
280
|
-
let target: any = (this as any)?.target;
|
|
281
|
-
if (!isDOM(target)) return null;
|
|
282
|
-
return getMcChildNodes(target);
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
descendants(): DC[] | null {
|
|
286
|
-
const target: any = (this as DC)?.target;
|
|
287
|
-
if (!isDOM(target)) return [];
|
|
288
|
-
const mcArray: unknown[] =
|
|
289
|
-
( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
|
|
290
|
-
.filter( (e) => !!e._mc )
|
|
291
|
-
.map( e => e._mc );
|
|
292
|
-
return mcArray.length ? mcArray as DC[] : null;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
/*
|
|
297
|
-
Autoload Section...
|
|
298
|
-
*/
|
|
299
|
-
|
|
300
|
-
const loadingDCs = new Set<string>();
|
|
301
|
-
|
|
302
|
-
function attachDC(element: string): Function {
|
|
303
|
-
|
|
304
|
-
//@ts-ignore
|
|
305
|
-
return () => {
|
|
306
|
-
const elements: HTMLElement[] = Array
|
|
307
|
-
.from(document.querySelectorAll(`[data-mc*="${element}"]`))
|
|
308
|
-
.filter( element => element instanceof HTMLElement );
|
|
309
|
-
|
|
310
|
-
if ( elements.length === 0 ) return;
|
|
311
|
-
|
|
312
|
-
//console.log( 'loadedPromise elements', elements );
|
|
313
|
-
|
|
314
|
-
const klass = customElements.get( element );
|
|
315
|
-
|
|
316
|
-
elements.forEach((node: HTMLElement) => {
|
|
317
|
-
//console.log( 'add', klass!.name, 'to', node );
|
|
318
|
-
DC.add(node, klass!.name, new klass!(node));
|
|
319
|
-
|
|
320
|
-
//@ts-ignore
|
|
321
|
-
const new_mc = node
|
|
322
|
-
.getAttribute( 'data-mc' )
|
|
323
|
-
.split(' ')
|
|
324
|
-
.filter( (name) => name !== element && name !== '' )
|
|
325
|
-
.join(' ')
|
|
326
|
-
.trim();
|
|
327
|
-
|
|
328
|
-
//@ts-ignore
|
|
329
|
-
node.setAttribute(
|
|
330
|
-
'data-mc',
|
|
331
|
-
//@ts-ignore
|
|
332
|
-
new_mc
|
|
333
|
-
)
|
|
334
|
-
});
|
|
335
|
-
};
|
|
336
|
-
};
|
|
337
|
-
|
|
338
|
-
function makeLoadScript( element: string ) {
|
|
339
|
-
|
|
340
|
-
if ( loadingDCs.has( element ) ) return; // already loading
|
|
341
|
-
|
|
342
|
-
loadingDCs.add( element );
|
|
343
|
-
|
|
344
|
-
//console.log( 'makeLoadScript:', element);
|
|
345
|
-
const fileName: string = './' + element.split('-').join('/')+'.js';
|
|
346
|
-
|
|
347
|
-
const se: HTMLScriptElement = document.createElement('script');
|
|
348
|
-
|
|
349
|
-
se.setAttribute('src', fileName);
|
|
350
|
-
se.setAttribute('blocking', 'render');
|
|
351
|
-
se.async = true;
|
|
352
|
-
se.setAttribute('type', 'module');
|
|
353
|
-
se.setAttribute( 'data-name', element);
|
|
354
|
-
se.setAttribute( 'loading', '');
|
|
355
|
-
|
|
356
|
-
const loadedPromise = customElements.whenDefined( element );
|
|
357
|
-
|
|
358
|
-
//@ts-ignore
|
|
359
|
-
loadedPromise.then( attachDC( element ) );
|
|
360
|
-
|
|
361
|
-
se.addEventListener( 'load', (ev: Event) => {
|
|
362
|
-
loadingDCs.delete( element );
|
|
363
|
-
|
|
364
|
-
document.head.querySelector(`script[data-name="${element}"]`)?.remove();
|
|
365
|
-
});
|
|
366
|
-
|
|
367
|
-
se.addEventListener( 'error', (ev: Event) => {
|
|
368
|
-
console.error('could not load DC code from', fileName);
|
|
369
|
-
});
|
|
370
|
-
|
|
371
|
-
document.head.append(se);
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
function loadUndefinedMCs() {
|
|
375
|
-
|
|
376
|
-
// load unresolved custom elements
|
|
377
|
-
[ ...document.querySelectorAll(':not(:defined)') ]
|
|
378
|
-
.filter( (element) => !!element
|
|
379
|
-
&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
|
|
380
|
-
&& !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
|
|
381
|
-
)
|
|
382
|
-
.forEach((el) => {
|
|
383
|
-
//console.log( 'detected CE', el.tagName.toLowerCase() );
|
|
384
|
-
makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
|
|
385
|
-
});
|
|
386
|
-
|
|
387
|
-
// if defined in _mc attribute: instanciate DCs, load if necessary
|
|
388
|
-
[ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
|
|
389
|
-
.filter( (element) => !!element )
|
|
390
|
-
.forEach((el) => {
|
|
391
|
-
const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
|
|
392
|
-
_mc?.forEach( element => {
|
|
393
|
-
//console.log( 'detected DC', dc );
|
|
394
|
-
const isDefined = customElements.get(element);
|
|
395
|
-
if ( !loadingDCs.has(element) && !isDefined ) {
|
|
396
|
-
makeLoadScript( element );
|
|
397
|
-
} else if ( isDefined ) {
|
|
398
|
-
attachDC(element)();
|
|
399
|
-
}
|
|
400
|
-
});
|
|
401
|
-
});
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
let autoloadEnabled: boolean = false;
|
|
405
|
-
let observer: MutationObserver | null = null;
|
|
406
|
-
|
|
407
|
-
function autoload(enable: boolean = true): boolean {
|
|
408
|
-
|
|
409
|
-
if (!enable) {
|
|
410
|
-
observer?.disconnect();
|
|
411
|
-
observer = null;
|
|
412
|
-
return autoloadEnabled;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
autoloadEnabled = enable;
|
|
416
|
-
observer = new MutationObserver(loadUndefinedMCs);
|
|
417
|
-
|
|
418
|
-
setTimeout(() => {
|
|
419
|
-
observer!.observe(document.body, { childList: true, subtree: true });
|
|
420
|
-
loadUndefinedMCs();
|
|
421
|
-
}, 5);
|
|
422
|
-
|
|
423
|
-
(window as any).autoload = (window as any).autoload || autoload;
|
|
424
|
-
|
|
425
|
-
return autoloadEnabled;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
(autoload as LooseObject).state = loadingDCs;
|
|
429
|
-
|
|
430
|
-
export { McBase, MC, DC, autoload, on, one, off, trigger };
|
|
431
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
|
2
|
-
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
3
|
-
<title>test</title>
|
|
4
|
-
<rect fill="transparent" x="0" y="0" width="200" height="200" fill-opacity="1"/>
|
|
5
|
-
<g style="fill:transparent">
|
|
6
|
-
<title>first bird</title>
|
|
7
|
-
<path fill="#18829c" d="
|
|
8
|
-
m15,160
|
|
9
|
-
a30,75 45 1 0 160,-150
|
|
10
|
-
a20,50 225 1 1 -110,100
|
|
11
|
-
a12,25 45 1 1 60,-50
|
|
12
|
-
a20,50 225 1 0 -110,100
|
|
13
|
-
" />
|
|
14
|
-
</g>
|
|
15
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export declare function defineCE(tagName: string, DefinitionClass: {
|
|
2
|
-
new (...args: any[]): any;
|
|
3
|
-
} | Function, observedAttributes?: string[]): void;
|
|
4
|
-
export declare function getCE(tagName: string): CustomElementConstructor | undefined;
|
|
5
|
-
//# sourceMappingURL=elements.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAoDA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA2DjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}
|
package/public/test/elements.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
import { DC, McBase } from './MC.js';
|
|
3
|
-
import { kebabToPascal } from './helpers.js';
|
|
4
|
-
class CeBaseClass extends HTMLElement {
|
|
5
|
-
constructor() {
|
|
6
|
-
super();
|
|
7
|
-
}
|
|
8
|
-
connectedCallback() {
|
|
9
|
-
this.dispatchEvent(new CustomEvent('_mcConnected'));
|
|
10
|
-
}
|
|
11
|
-
connectedMoveCallback() {
|
|
12
|
-
this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
|
|
13
|
-
}
|
|
14
|
-
disconnectedCallback() {
|
|
15
|
-
this.dispatchEvent(new CustomEvent('_mcDisconnected'));
|
|
16
|
-
}
|
|
17
|
-
adoptedCallback() {
|
|
18
|
-
this.dispatchEvent(new CustomEvent('_mcAdopted'));
|
|
19
|
-
}
|
|
20
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
21
|
-
this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
|
|
22
|
-
}
|
|
23
|
-
formResetCallback() {
|
|
24
|
-
this.dispatchEvent(new CustomEvent('_mcFormReset'));
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
function createNamedClass(name, ClassBody) {
|
|
28
|
-
return Object.defineProperty(ClassBody, 'name', { value: name });
|
|
29
|
-
}
|
|
30
|
-
function isClass(func) {
|
|
31
|
-
return typeof func === 'function'
|
|
32
|
-
&& /^class\s/.test(Function.prototype.toString.call(func));
|
|
33
|
-
}
|
|
34
|
-
export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
|
|
35
|
-
if (customElements.get(tagName)) {
|
|
36
|
-
console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
if (!tagName.includes('-')) {
|
|
40
|
-
throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
|
|
41
|
-
}
|
|
42
|
-
let name = kebabToPascal(tagName);
|
|
43
|
-
if (!isClass(DefinitionClass.prototype.constructor)) {
|
|
44
|
-
customElements.define(tagName, DefinitionClass);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
if (!(DefinitionClass.prototype instanceof McBase)) {
|
|
48
|
-
customElements.define(tagName, DefinitionClass);
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
customElements.define(tagName, createNamedClass(name, class extends CeBaseClass {
|
|
52
|
-
instance;
|
|
53
|
-
constructor(data) {
|
|
54
|
-
super();
|
|
55
|
-
const instance = isClass(DefinitionClass)
|
|
56
|
-
? new DefinitionClass(this, data)
|
|
57
|
-
: DefinitionClass;
|
|
58
|
-
DC.add(this, name, instance);
|
|
59
|
-
}
|
|
60
|
-
static get observedAttributes() {
|
|
61
|
-
return observedAttributes;
|
|
62
|
-
}
|
|
63
|
-
}));
|
|
64
|
-
}
|
|
65
|
-
export function getCE(tagName) {
|
|
66
|
-
return customElements.get(tagName);
|
|
67
|
-
}
|
|
68
|
-
//# sourceMappingURL=elements.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{defineCE:()=>d,getCE:()=>m});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function c(t,e,n,r=!1){return t.addEventListener(o(e),n,{capture:!1,once:r}),n}class s{stopped=!1;constructor(){}stop(){this.stopped=!0}}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==a&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===a)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else c(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class a extends i{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new a(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(o(e),n)}(this.target,t,e)}on(t,e){return c(this.target,t,e)}one(t,e){return function(t,e,n){return c(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",r){!function(t,e,n={},r="l",c){const i=/^_mc/.test(e)?e:o(e),a=c||new s,u=new CustomEvent(i,{detail:{data:n,control:a},bubbles:!1});a.stopped||(t.dispatchEvent(u),u.stopImmediatePropagation(),a.stopped||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(i,n,r,a)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(i,n,r)))}}),0)))}(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function l(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function d(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");l(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=l(e)?new e(this,t):e;a.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function m(t){return customElements.get(t)}return e})()));
|
package/public/test/elements.ts
DELETED
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
import { DC, McBase } from './MC.js';
|
|
4
|
-
import { kebabToPascal } from './helpers.js';
|
|
5
|
-
|
|
6
|
-
class CeBaseClass extends HTMLElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
connectedCallback() {
|
|
12
|
-
this.dispatchEvent( new CustomEvent('_mcConnected') );
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
connectedMoveCallback() {
|
|
16
|
-
this.dispatchEvent( new CustomEvent('_mcConnectedMove') );
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
disconnectedCallback() {
|
|
20
|
-
this.dispatchEvent( new CustomEvent('_mcDisconnected') );
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
adoptedCallback() {
|
|
24
|
-
this.dispatchEvent( new CustomEvent('_mcAdopted') );
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
attributeChangedCallback(name: string, oldValue: any, newValue: any) {
|
|
28
|
-
this.dispatchEvent(
|
|
29
|
-
new CustomEvent(
|
|
30
|
-
'_mcAttributeChanged',
|
|
31
|
-
{ detail: { name, oldValue, newValue } }
|
|
32
|
-
)
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
formResetCallback(){
|
|
37
|
-
this.dispatchEvent( new CustomEvent('_mcFormReset') );
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function createNamedClass(
|
|
42
|
-
name: string,
|
|
43
|
-
ClassBody: { new (...args: any[]): any }
|
|
44
|
-
) {
|
|
45
|
-
return Object.defineProperty(ClassBody, 'name', { value: name });
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function isClass(func: any) {
|
|
49
|
-
return typeof func === 'function'
|
|
50
|
-
&& /^class\s/.test(Function.prototype.toString.call(func));
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export function defineCE(
|
|
54
|
-
tagName: string,
|
|
55
|
-
DefinitionClass: { new (...args: any[]): any } | Function,
|
|
56
|
-
observedAttributes: string[] = []
|
|
57
|
-
) {
|
|
58
|
-
if (customElements.get(tagName)) {
|
|
59
|
-
console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
if (!tagName.includes('-')) {
|
|
64
|
-
throw new Error(
|
|
65
|
-
'createCustomElement: tagName must contain at least one hyphen ("-").'
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
let name = kebabToPascal(tagName);
|
|
70
|
-
|
|
71
|
-
// not a class, but a function
|
|
72
|
-
if ( !isClass( DefinitionClass.prototype.constructor ) ){
|
|
73
|
-
customElements.define(
|
|
74
|
-
tagName,
|
|
75
|
-
// @ts-ignore
|
|
76
|
-
DefinitionClass
|
|
77
|
-
);
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// a class, but not a MC
|
|
82
|
-
if ( !( DefinitionClass.prototype instanceof McBase ) ){
|
|
83
|
-
customElements.define(
|
|
84
|
-
tagName,
|
|
85
|
-
// @ts-ignore
|
|
86
|
-
DefinitionClass
|
|
87
|
-
);
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// a MC
|
|
92
|
-
customElements.define(
|
|
93
|
-
tagName,
|
|
94
|
-
createNamedClass(
|
|
95
|
-
name,
|
|
96
|
-
class extends CeBaseClass {
|
|
97
|
-
instance: any;
|
|
98
|
-
|
|
99
|
-
constructor(data?: any) {
|
|
100
|
-
super();
|
|
101
|
-
// @ts-ignore
|
|
102
|
-
const instance = isClass( DefinitionClass )
|
|
103
|
-
// @ts-ignore
|
|
104
|
-
? new DefinitionClass(this, data)
|
|
105
|
-
: DefinitionClass;
|
|
106
|
-
DC.add(this, name, instance);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
static get observedAttributes() {
|
|
110
|
-
return observedAttributes;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
)
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export function getCE(tagName: string): CustomElementConstructor | undefined {
|
|
118
|
-
return customElements.get(tagName);
|
|
119
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA0M/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAgB7B"}
|