@twobirds/microcomponents 0.0.34 → 0.0.37
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/README.md +40 -27
- package/assets/documentation/{MicroComponents.md → MC.md} +17 -17
- package/assets/documentation/comparision.md +0 -0
- package/assets/documentation/elements.md +276 -0
- package/assets/documentation/magic.md +10 -68
- package/dist/MC.d.ts +2 -3
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.min.js +45 -43
- package/dist/MC.ts +173 -175
- package/dist/autoloader.ts +1 -1
- package/dist/{customElements.d.ts → elements.d.ts} +1 -1
- package/dist/elements.d.ts.map +1 -0
- package/dist/elements.min.js +1 -0
- package/dist/{customElements.ts → elements.ts} +23 -14
- package/dist/helpers.d.ts +6 -4
- package/dist/helpers.d.ts.map +1 -1
- package/dist/helpers.ts +95 -128
- package/dist/microcomponents.d.ts +3 -3
- package/dist/microcomponents.d.ts.map +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/microcomponents.ts +3 -3
- package/dist/{customObservables.d.ts → observables.d.ts} +3 -3
- package/dist/observables.d.ts.map +1 -0
- package/dist/observables.min.js +1 -0
- package/dist/observables.ts +354 -0
- package/dist/{customSelectors.d.ts → selectors.d.ts} +1 -1
- package/dist/selectors.d.ts.map +1 -0
- package/dist/selectors.min.js +1 -0
- package/dist/test.ts +133 -157
- package/klemmstein.png +0 -0
- package/package.json +52 -52
- package/public/MC.js +46 -44
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +45 -43
- package/public/assets/search.js +1 -1
- package/public/autoloader.js +1 -1
- package/public/autoloader.js.map +1 -1
- package/public/classes/{DC.html → MC.DC.html} +60 -59
- package/public/classes/{MC.html → MC.MC.html} +41 -35
- package/public/classes/{McBase.html → MC.McBase.html} +28 -20
- package/public/classes/{McEvent.html → MC.McEvent.html} +48 -42
- package/public/documentation/{MicroComponents.md → MC.md} +17 -17
- package/public/documentation/comparision.md +0 -0
- package/public/documentation/elements.md +276 -0
- package/public/documentation/magic.md +10 -68
- package/public/{customElements.js → elements.js} +9 -10
- package/public/elements.js.map +1 -0
- package/public/elements.min.js +1 -0
- package/public/functions/{addListener.html → MC.addListener.html} +18 -12
- package/public/functions/{removeListener.html → MC.removeListener.html} +18 -12
- package/public/functions/elements.defineCE.html +78 -0
- package/public/functions/elements.getCE.html +63 -0
- package/public/functions/formValues.formValues.html +68 -0
- package/public/functions/observables.observe.html +65 -0
- package/public/functions/selectors._d.html +69 -0
- package/public/functions/selectors._t.html +69 -0
- package/public/helpers.js +66 -89
- package/public/helpers.js.map +1 -1
- package/public/index.html +48 -33
- package/public/interfaces/{HTMLMcElement.html → MC.HTMLMcElement.html} +601 -595
- package/public/interfaces/selectors.DSelector.html +1013 -0
- package/public/interfaces/selectors.TSelector.html +712 -0
- package/public/microcomponents.js +3 -3
- package/public/microcomponents.js.map +1 -1
- package/public/microcomponents.min.js +1 -1
- package/public/modules/MC.html +78 -0
- package/public/modules/elements.html +62 -0
- package/public/modules/formValues.html +60 -0
- package/public/modules/observables.html +65 -0
- package/public/modules/selectors.html +76 -0
- package/public/modules.html +11 -23
- package/public/observables.js +255 -0
- package/public/observables.js.map +1 -0
- package/public/observables.min.js +1 -0
- package/public/{customSelectors.js → selectors.js} +1 -1
- package/public/selectors.js.map +1 -0
- package/public/selectors.min.js +1 -0
- package/public/src/MC.ts +376 -0
- package/public/src/McEvent.ts +96 -0
- package/public/src/autoloader.ts +98 -0
- package/{src/customElements.ts → public/src/elements.ts} +23 -14
- package/public/src/formValues.ts +275 -0
- package/public/src/helpers.ts +140 -0
- package/public/src/microcomponents.ts +8 -0
- package/public/src/observables.ts +354 -0
- package/public/src/test.ts +187 -0
- package/public/test.js +99 -115
- package/public/test.js.map +1 -1
- package/public/types/observables.Observable.html +91 -0
- package/public/types/selectors.selection.html +58 -0
- package/public/types/selectors.singleSelector.html +58 -0
- package/src/MC.ts +173 -175
- package/src/autoloader.ts +1 -1
- package/src/elements.ts +76 -0
- package/src/helpers.ts +95 -128
- package/src/microcomponents.ts +3 -3
- package/src/observables.ts +354 -0
- package/src/selectors.ts +1634 -0
- package/src/test.ts +133 -157
- package/typedoc.json +1 -1
- package/webpack.config.js +9 -9
- package/dist/customElements.d.ts.map +0 -1
- package/dist/customElements.min.js +0 -1
- package/dist/customObservables.d.ts.map +0 -1
- package/dist/customObservables.min.js +0 -1
- package/dist/customObservables.ts +0 -348
- package/dist/customSelectors.d.ts.map +0 -1
- package/dist/customSelectors.min.js +0 -1
- package/public/customElements.js.map +0 -1
- package/public/customElements.min.js +0 -1
- package/public/customObservables.js +0 -256
- package/public/customObservables.js.map +0 -1
- package/public/customObservables.min.js +0 -1
- package/public/customSelectors.js.map +0 -1
- package/public/customSelectors.min.js +0 -1
- package/src/customObservables.ts +0 -348
- /package/dist/{customSelectors.ts → selectors.ts} +0 -0
- /package/{src/customSelectors.ts → public/src/selectors.ts} +0 -0
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
# Custom Elements <span style="float:right; height:1em;"><img height="24px" src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" /></span>
|
|
2
|
+
|
|
3
|
+
Custom Elements provides two funktions:
|
|
4
|
+
- **defineCE()** lets you define a custom tag and add functionality to it. Internally it uses [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
|
|
5
|
+
- **getCE()** retrieves a custom element constructor from the web component registry via [CustomElementRegistry.get()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get).
|
|
6
|
+
|
|
7
|
+
# Prerequisites
|
|
8
|
+
|
|
9
|
+
You should at least know Micro Components **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass usage, since your own class code extends from it and uses its static functions. It is recommended that you have read and understood the **[Micro Component documentation](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads)**, since custom elements is just an extension that internally uses micro components.
|
|
10
|
+
|
|
11
|
+
# Usage
|
|
12
|
+
|
|
13
|
+
## Create a Custom Element
|
|
14
|
+
|
|
15
|
+
Before:
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<body></body>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
defineCE(
|
|
23
|
+
// equivalent to and internally using customElementRegistry.define()
|
|
24
|
+
"my-tag",
|
|
25
|
+
class MyTag extends DC {
|
|
26
|
+
|
|
27
|
+
constructor(target, data = {} ) {
|
|
28
|
+
super(target);
|
|
29
|
+
this.data = data;
|
|
30
|
+
target.innerHTML = "Hello World";
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
let MyTag = getCE("my-tag"),
|
|
36
|
+
data = { a: 1 },
|
|
37
|
+
myTag = new MyTag( data );
|
|
38
|
+
|
|
39
|
+
/*
|
|
40
|
+
HINT:
|
|
41
|
+
At this point the web component is not yet attached to the DOM.
|
|
42
|
+
But you can perform any operation on it, e.g. calling methods on its inner micro components.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
document.body.append( myTag );
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
After:
|
|
49
|
+
```html
|
|
50
|
+
<body>
|
|
51
|
+
<my-tag _mc>Hello World</my-tag>
|
|
52
|
+
</body>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### **Hints**
|
|
56
|
+
- Your code extends the **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass. This superclass provides methods to traverse the DOM and select other micro components contained in HTML elements.
|
|
57
|
+
- it is essential to understand that your web component code is only one of the numerous micro components that can reside inside `<my-tag>`
|
|
58
|
+
- After you created a custom element, the custom element will contain a **property `<my-tag>._mc`** which contains your class instance.
|
|
59
|
+
- Also the custom element then has an **attribute '_mc'** which will indicate that at least one micro component is attached to it.
|
|
60
|
+
- Note that you can hand over data natively via parameters, when handling custom elements in above way.
|
|
61
|
+
- The native way of usage, simply adding the tag to the template, is still possible. You have to use attributes then to hand in data.
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
## Web Component Lifecycle Events
|
|
65
|
+
|
|
66
|
+
```javascript
|
|
67
|
+
defineCE(
|
|
68
|
+
"my-tag",
|
|
69
|
+
class MyTag extends DC {
|
|
70
|
+
|
|
71
|
+
constructor(target) {
|
|
72
|
+
super(target);
|
|
73
|
+
target.setAttribute('my-attribute', 'change me');
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*
|
|
77
|
+
web component specific event handlers
|
|
78
|
+
*/
|
|
79
|
+
|
|
80
|
+
onConnected(ev) {
|
|
81
|
+
console.info("MyTag .onConnected() handler", ev);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
onAttributeChanged(ev) {
|
|
85
|
+
console.info("MyTag .onAttributeChanged() handler", ev);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
onAdopted(ev) {
|
|
89
|
+
console.info("MyTag .onAdopted() handler", ev);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
onDisconnected(ev) {
|
|
93
|
+
console.info("MyTag .onDisconnected() handler", ev);
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
['my-attribute'] // DOM node attributes to observe
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
let MyTag = getCE("my-tag"),
|
|
100
|
+
myTag = new MyTag();
|
|
101
|
+
|
|
102
|
+
document.body.append( myTag );
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
You can use your Web Component constructor to add other modules to the `<my-tag>` DOM node:
|
|
106
|
+
|
|
107
|
+
```javascript
|
|
108
|
+
|
|
109
|
+
class OtherModule extends DC {
|
|
110
|
+
|
|
111
|
+
constructor(target) {
|
|
112
|
+
super(target);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
onConnected(ev) {
|
|
116
|
+
console.info("[OtherModule] .onConnected() handler", ev);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
defineCE(
|
|
121
|
+
"my-tag",
|
|
122
|
+
class MyTag extends DC {
|
|
123
|
+
|
|
124
|
+
constructor(target) {
|
|
125
|
+
super(target);
|
|
126
|
+
DC.add( target, 'otherModule', new OtherModule(target) );
|
|
127
|
+
// equivalent:
|
|
128
|
+
// target._mc.otherModule = new OtherModule(target);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
onConnected(ev) {
|
|
132
|
+
console.info("[MyTag] .onConnected() handler", ev);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
let MyTag = getCE("my-tag");
|
|
139
|
+
|
|
140
|
+
document.body.append( new MyTag() );
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### **Hints**
|
|
144
|
+
- You can add as many other micro components to the DOM node as you like.
|
|
145
|
+
- The native web component lifecycle events will be triggered on **all** micro components.
|
|
146
|
+
- The event parameter handed over is an internal event instance, that contains the original native event in its `data` property.
|
|
147
|
+
|
|
148
|
+
## Native Event Handlers
|
|
149
|
+
|
|
150
|
+
Native event handlers will be auto-attached, when the method name follows one of these two schemes:
|
|
151
|
+
|
|
152
|
+
- **on[A-Z]...**: e.g. **onClick(){ ... }** will be called when the native event is triggered
|
|
153
|
+
- **one[A-Z]...**: e.g. **oneClick(){ ... }** will be called **once** only when the native event is triggered. Subsequent events will be ignored.
|
|
154
|
+
|
|
155
|
+
```javascript
|
|
156
|
+
defineCE(
|
|
157
|
+
"my-tag",
|
|
158
|
+
class MyTag extends DC {
|
|
159
|
+
|
|
160
|
+
constructor(target) {
|
|
161
|
+
super(target);
|
|
162
|
+
target.innerHTML = "Click Me";
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/*
|
|
166
|
+
native event handlers
|
|
167
|
+
*/
|
|
168
|
+
onClick(ev) {
|
|
169
|
+
console.info("MyTag .onClick() handler", ev);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
let MyTag = getCE("my-tag");
|
|
175
|
+
|
|
176
|
+
document.body.append( new MyTag() );
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### **Hints**
|
|
180
|
+
- The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the MC contains a matching named handler.
|
|
181
|
+
- The event parameter handed over is an internal event instance, that contains the original native event in its .data property.
|
|
182
|
+
|
|
183
|
+
## Lifecycle Event Handlers
|
|
184
|
+
|
|
185
|
+
Currently there is only one lifecycle event handler: the **oneInit(){ ... }** method you provide with your class.
|
|
186
|
+
|
|
187
|
+
This method is triggered asynchronous via a timeout after you made a new instance of your class.
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
defineCE(
|
|
191
|
+
"my-tag",
|
|
192
|
+
class MyTag extends DC {
|
|
193
|
+
|
|
194
|
+
constructor(target) {
|
|
195
|
+
super(target);
|
|
196
|
+
target.innerHTML = "Hello World";
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/*
|
|
200
|
+
lifecycle event handlers
|
|
201
|
+
*/
|
|
202
|
+
oneInit(ev) {
|
|
203
|
+
console.info("MyTag .onInit() handler", ev);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
|
|
208
|
+
let MyTag = getCE("my-tag");
|
|
209
|
+
|
|
210
|
+
document.body.append( new MyTag() );
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### **Hints**
|
|
214
|
+
- The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the specific micro component contains a matching named handler.
|
|
215
|
+
- The event parameter handed over is an internal event instance that contains no data.
|
|
216
|
+
|
|
217
|
+
## Custom Events
|
|
218
|
+
|
|
219
|
+
```javascript
|
|
220
|
+
defineCE(
|
|
221
|
+
"my-tag",
|
|
222
|
+
class MyTag extends DC {
|
|
223
|
+
|
|
224
|
+
constructor(target) {
|
|
225
|
+
super(target);
|
|
226
|
+
target.innerHTML = "Hello World";
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/*
|
|
230
|
+
custom event handlers
|
|
231
|
+
*/
|
|
232
|
+
onSpecialEvent(ev) {
|
|
233
|
+
console.log('MyTag .onSpecialEvent() handler', ev);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
);
|
|
237
|
+
|
|
238
|
+
let MyTag = getCE("my-tag");
|
|
239
|
+
|
|
240
|
+
document.body.append( new MyTag() );
|
|
241
|
+
|
|
242
|
+
document
|
|
243
|
+
.querySelector( 'my-tag' )
|
|
244
|
+
?._mc
|
|
245
|
+
.MyTag
|
|
246
|
+
.trigger('specialEvent');
|
|
247
|
+
|
|
248
|
+
/*
|
|
249
|
+
Alternatives:
|
|
250
|
+
*/
|
|
251
|
+
|
|
252
|
+
document
|
|
253
|
+
.querySelector( 'my-tag' )
|
|
254
|
+
?._mc
|
|
255
|
+
.trigger('specialEvent'); // ...on all micro components contained in <my-tag>
|
|
256
|
+
|
|
257
|
+
/*
|
|
258
|
+
traversing the DOM:
|
|
259
|
+
<my-tag>
|
|
260
|
+
<my-inner-tag />
|
|
261
|
+
</my-tag>
|
|
262
|
+
*/
|
|
263
|
+
|
|
264
|
+
// <my-tag> method:
|
|
265
|
+
onSpecialEvent(ev){
|
|
266
|
+
console.log( ev.data );
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
// <my-inner-tag> method:
|
|
270
|
+
sendSpecialEvent(){
|
|
271
|
+
this.trigger( 'specialEvent', "Hello World", 'u' ); // 'u' = bubble up.
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### **Hints**
|
|
276
|
+
- The event parameter handed over is an internal event instance, that contains the payload in its .data property.
|
|
@@ -1,63 +1,12 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
**Micro Components** can literally be anything you can put into an object as a property.
|
|
4
|
-
|
|
5
|
-
Here are some examples of what **Micro Components** can really archieve.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## The MC() class can be used as a selector of its own, even if you dont attach a micro component yourself
|
|
9
|
-
|
|
10
|
-
Since MC is a class you instanciate with a target element as your selection root element, and you can do this:
|
|
11
|
-
|
|
12
|
-
```javascript
|
|
13
|
-
const myElement = document.getElementById('myDiv');
|
|
14
|
-
|
|
15
|
-
// find the nearst MC parent elements to this HTMLElement
|
|
16
|
-
const myParent = ( new MC( myElement ) ).parent();
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Since MC() is a class, you can extend your own micro components with it and have the selectors nicely available
|
|
20
|
-
|
|
21
|
-
Here is some typical usage:
|
|
22
|
-
|
|
23
|
-
```javascript
|
|
24
|
-
class MyMicroComponent extends MC {
|
|
25
|
-
|
|
26
|
-
constructor( target ){
|
|
27
|
-
super(target);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
showParents(){
|
|
31
|
-
console.log( this.parents() ); // Logs all anchestor micro components
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
let myDiv = document.querySelector('div');
|
|
36
|
-
|
|
37
|
-
MC.add( myDiv, 'my_micro_component', new MyMicroComponent( myDiv ) );
|
|
38
|
-
|
|
39
|
-
// TADA!
|
|
40
|
-
myDiv
|
|
41
|
-
._mc
|
|
42
|
-
.my_micro_component
|
|
43
|
-
.showParents();
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
As you can see, without any effort you have a **second structural layer that hovers over the DOM**.
|
|
47
|
-
|
|
48
|
-
The browser knows nothing of this, except that there may be _mc properties on some HTMLElements.
|
|
49
|
-
|
|
50
|
-
It doesnt get more standard compliant than that.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
## Things I already did with this, in my own framework twoBirds, or in apps that I developed with it:
|
|
1
|
+
# Things I already did with this...
|
|
54
2
|
|
|
55
3
|
- `encapsulated and modular 3D rendering` in an HTMLElement viewport.
|
|
56
|
-
- `Data Driven Workflow` with micro components using
|
|
4
|
+
- `Data Driven Workflow` with micro components using observables.
|
|
57
5
|
- `DOM handling` in general, lots of `UI functionality`
|
|
58
|
-
- `2 way Data Binding` between forms and observable objects representing the form data
|
|
59
6
|
- `1 way Data Binding` from data observables to the DOM
|
|
60
|
-
- `
|
|
7
|
+
- `2 way Data Binding` between forms and observables representing the form data
|
|
8
|
+
- `progressive enhancement` / `graceful degradation` on standard websites
|
|
9
|
+
- `Loose Coupling` via custom event objects
|
|
61
10
|
- `Rule Engines`
|
|
62
11
|
- `Complex Runtime Templating` without JSX or virtual DOM
|
|
63
12
|
- `Single Page Applications`
|
|
@@ -65,23 +14,16 @@ It doesnt get more standard compliant than that.
|
|
|
65
14
|
- `Electron Apps`
|
|
66
15
|
- `Progressive Web Apps`
|
|
67
16
|
- `Complex Native Web Components`, that comprised of a set of modular `UI` and `business logic` micro components
|
|
68
|
-
|
|
17
|
+
|
|
18
|
+
- `server side` structure in general.
|
|
69
19
|
|
|
70
20
|
|
|
71
21
|
Funny stuff:
|
|
72
22
|
|
|
73
|
-
- `Vending Machine
|
|
74
|
-
-
|
|
75
|
-
- `UI for ocean going container ships`
|
|
23
|
+
- `Vending Machine Frontend` ( selling lottery tickets )
|
|
24
|
+
- `UI for ocean going container ships` ( a wave impact stress simulator frontend )
|
|
76
25
|
|
|
77
26
|
|
|
78
27
|
Not from me, but somehow based on my ideas:
|
|
79
28
|
|
|
80
|
-
- `SpaceX` uses web components as an interface in their `Dragon Capsule`. I
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
This list is far from complete, I used this as a core principle for 20 years. All of the above is modular, so you can use it together.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
**Whatever functionality you can do with Javascript, you can encapsule it in a micro component and reuse in any framework that allows for DOM access**.
|
|
29
|
+
- `SpaceX` uses web components as an interface in their `Dragon Capsule`. I regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Much later, [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had back then. So in a way, this already goes to space.
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
import { DC } from
|
|
3
|
-
import { kebabToPascal } from
|
|
2
|
+
import { DC } from "./MC.js";
|
|
3
|
+
import { kebabToPascal } from "./helpers.js";
|
|
4
4
|
class CeBaseClass extends HTMLElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super();
|
|
7
7
|
}
|
|
8
8
|
connectedCallback() {
|
|
9
|
-
DC.trigger(this,
|
|
9
|
+
DC.trigger(this, "Connected");
|
|
10
10
|
}
|
|
11
11
|
disconnectedCallback() {
|
|
12
|
-
DC.trigger(this,
|
|
12
|
+
DC.trigger(this, "Disconnected");
|
|
13
13
|
}
|
|
14
14
|
adoptedCallback() {
|
|
15
|
-
DC.trigger(this,
|
|
15
|
+
DC.trigger(this, "Adopted");
|
|
16
16
|
}
|
|
17
17
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
18
|
-
DC.trigger(this,
|
|
18
|
+
DC.trigger(this, "AttributeChanged", { name, oldValue, newValue });
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
function createNamedClass(name, ClassBody) {
|
|
22
|
-
return Object.defineProperty(ClassBody,
|
|
22
|
+
return Object.defineProperty(ClassBody, "name", { value: name });
|
|
23
23
|
}
|
|
24
24
|
export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
|
|
25
25
|
if (customElements.get(tagName)) {
|
|
26
26
|
console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
|
-
if (!tagName.includes(
|
|
29
|
+
if (!tagName.includes("-")) {
|
|
30
30
|
throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
|
|
31
31
|
}
|
|
32
32
|
let name = kebabToPascal(tagName);
|
|
@@ -42,8 +42,7 @@ export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
|
|
|
42
42
|
}
|
|
43
43
|
}));
|
|
44
44
|
}
|
|
45
|
-
;
|
|
46
45
|
export function getCE(tagName) {
|
|
47
46
|
return customElements.get(tagName);
|
|
48
47
|
}
|
|
49
|
-
//# sourceMappingURL=
|
|
48
|
+
//# sourceMappingURL=elements.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAA8C,EAC9C,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAElC,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YACR,IAAI,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,EAAU,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>h,getCE:()=>y});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=g?.debug;g.debug=!1,n._mc=new g(e),g.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={}){let n=e?._mc;n&&[...Object.values(n)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(t,r)}))}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class f{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==g&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===g)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends f{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r){let n=this;if(r=r||"l",n.constructor!==m&&n.constructor!==g){if(n instanceof m||n instanceof g){const n=this,c="string"!=typeof e?e:new o(e,t,r),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof n[s]||(n[s](c),n.hasOwnProperty(s)&&delete n[s])),c.stopped||"l"===c.bubble)return n;i()&&/[ud]/.test(c.bubble)&&n instanceof m&&setTimeout((()=>{-1===c.bubble.indexOf("l")&&(c.bubble+="l"),c.bubble.indexOf("u")>-1&&n.parent().forEach((e=>{e instanceof m&&e.trigger(c)})),c.bubble.indexOf("d")>-1&&n.children().forEach((e=>{e instanceof m&&e.trigger(c)}))}),0)}}else[...Object.getOwnPropertyNames(n)].forEach((o=>{n[o]?.trigger&&"function"==typeof n[o]?.trigger&&n[o]?.trigger(e,t,r)}))}}class g extends f{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}class b extends HTMLElement{constructor(){super()}connectedCallback(){g.trigger(this,"Connected")}disconnectedCallback(){g.trigger(this,"Disconnected")}adoptedCallback(){g.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){g.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function h(e,t,r=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends b{instance;constructor(e){super();let r=new t(this,e);g.add(this,n,r)}static get observedAttributes(){return r}}))}function y(e){return customElements.get(e)}return t})()));
|
|
@@ -13,10 +13,11 @@
|
|
|
13
13
|
<div class="tsd-page-title">
|
|
14
14
|
<ul class="tsd-breadcrumb">
|
|
15
15
|
<li><a href="../modules.html">Micro Components</a></li>
|
|
16
|
-
<li><a href="
|
|
16
|
+
<li><a href="../modules/MC.html">MC</a></li>
|
|
17
|
+
<li><a href="MC.addListener.html">addListener</a></li></ul>
|
|
17
18
|
<h1>Function addListener</h1></div>
|
|
18
19
|
<section class="tsd-panel">
|
|
19
|
-
<ul class="tsd-signatures tsd-kind-function">
|
|
20
|
+
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
|
|
20
21
|
<li class="tsd-signature tsd-anchor-link" id="addListener">add<wbr/>Listener<span class="tsd-signature-symbol">(</span>domNode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Node</span>, eventName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span>, capture<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, once<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#addListener" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
|
|
21
22
|
<li class="tsd-description">
|
|
22
23
|
<div class="tsd-parameters">
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
<h5>once: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5></li></ul></div>
|
|
35
36
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
|
|
36
37
|
<ul>
|
|
37
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
38
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/MC.ts#L62">src/MC.ts:62</a></li></ul></aside></li></ul></section></div>
|
|
38
39
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
39
40
|
<div class="tsd-navigation settings">
|
|
40
41
|
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
@@ -54,17 +55,22 @@
|
|
|
54
55
|
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
55
56
|
<div class="tsd-accordion-details">
|
|
56
57
|
<ul>
|
|
57
|
-
<li><a href="../modules.html">Micro <wbr/>Components</a>
|
|
58
|
-
<ul
|
|
58
|
+
<li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
|
|
59
|
+
<ul>
|
|
60
|
+
<li class="current tsd-kind-module"><a href="../modules/MC.html">MC</a></li>
|
|
61
|
+
<li class="tsd-kind-module"><a href="../modules/elements.html">elements</a></li>
|
|
62
|
+
<li class="tsd-kind-module"><a href="../modules/formValues.html">form<wbr/>Values</a></li>
|
|
63
|
+
<li class="tsd-kind-module"><a href="../modules/observables.html">observables</a></li>
|
|
64
|
+
<li class="tsd-kind-module"><a href="../modules/selectors.html">selectors</a></li></ul></li></ul></div></details></nav>
|
|
59
65
|
<nav class="tsd-navigation secondary menu-sticky">
|
|
60
66
|
<ul>
|
|
61
|
-
<li class="tsd-kind-class"><a href="../classes/DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
|
|
62
|
-
<li class="tsd-kind-class"><a href="../classes/MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
63
|
-
<li class="tsd-kind-class"><a href="../classes/McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
|
|
64
|
-
<li class="tsd-kind-class"><a href="../classes/McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
|
|
65
|
-
<li class="tsd-kind-interface"><a href="../interfaces/HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
|
|
66
|
-
<li class="current tsd-kind-function"><a href="addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
|
|
67
|
-
<li class="tsd-kind-function"><a href="removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
|
|
67
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
|
|
68
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
69
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
|
|
70
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
|
|
71
|
+
<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/MC.HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
|
|
72
|
+
<li class="current tsd-kind-function tsd-parent-kind-module"><a href="MC.addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
|
|
73
|
+
<li class="tsd-kind-function tsd-parent-kind-module"><a href="MC.removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
|
|
68
74
|
<div class="container tsd-generator">
|
|
69
75
|
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
70
76
|
<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
|
|
@@ -13,10 +13,11 @@
|
|
|
13
13
|
<div class="tsd-page-title">
|
|
14
14
|
<ul class="tsd-breadcrumb">
|
|
15
15
|
<li><a href="../modules.html">Micro Components</a></li>
|
|
16
|
-
<li><a href="
|
|
16
|
+
<li><a href="../modules/MC.html">MC</a></li>
|
|
17
|
+
<li><a href="MC.removeListener.html">removeListener</a></li></ul>
|
|
17
18
|
<h1>Function removeListener</h1></div>
|
|
18
19
|
<section class="tsd-panel">
|
|
19
|
-
<ul class="tsd-signatures tsd-kind-function">
|
|
20
|
+
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
|
|
20
21
|
<li class="tsd-signature tsd-anchor-link" id="removeListener">remove<wbr/>Listener<span class="tsd-signature-symbol">(</span>domNode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Node</span>, eventName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#removeListener" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
|
|
21
22
|
<li class="tsd-description">
|
|
22
23
|
<div class="tsd-parameters">
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
<h5>handler: <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span></h5></li></ul></div>
|
|
31
32
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
|
|
32
33
|
<ul>
|
|
33
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
34
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/MC.ts#L79">src/MC.ts:79</a></li></ul></aside></li></ul></section></div>
|
|
34
35
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
35
36
|
<div class="tsd-navigation settings">
|
|
36
37
|
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
@@ -50,17 +51,22 @@
|
|
|
50
51
|
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
51
52
|
<div class="tsd-accordion-details">
|
|
52
53
|
<ul>
|
|
53
|
-
<li><a href="../modules.html">Micro <wbr/>Components</a>
|
|
54
|
-
<ul
|
|
54
|
+
<li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
|
|
55
|
+
<ul>
|
|
56
|
+
<li class="current tsd-kind-module"><a href="../modules/MC.html">MC</a></li>
|
|
57
|
+
<li class="tsd-kind-module"><a href="../modules/elements.html">elements</a></li>
|
|
58
|
+
<li class="tsd-kind-module"><a href="../modules/formValues.html">form<wbr/>Values</a></li>
|
|
59
|
+
<li class="tsd-kind-module"><a href="../modules/observables.html">observables</a></li>
|
|
60
|
+
<li class="tsd-kind-module"><a href="../modules/selectors.html">selectors</a></li></ul></li></ul></div></details></nav>
|
|
55
61
|
<nav class="tsd-navigation secondary menu-sticky">
|
|
56
62
|
<ul>
|
|
57
|
-
<li class="tsd-kind-class"><a href="../classes/DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
|
|
58
|
-
<li class="tsd-kind-class"><a href="../classes/MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
59
|
-
<li class="tsd-kind-class"><a href="../classes/McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
|
|
60
|
-
<li class="tsd-kind-class"><a href="../classes/McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
|
|
61
|
-
<li class="tsd-kind-interface"><a href="../interfaces/HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
|
|
62
|
-
<li class="tsd-kind-function"><a href="addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
|
|
63
|
-
<li class="current tsd-kind-function"><a href="removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
|
|
63
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
|
|
64
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
|
|
65
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
|
|
66
|
+
<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
|
|
67
|
+
<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/MC.HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
|
|
68
|
+
<li class="tsd-kind-function tsd-parent-kind-module"><a href="MC.addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
|
|
69
|
+
<li class="current tsd-kind-function tsd-parent-kind-module"><a href="MC.removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
|
|
64
70
|
<div class="container tsd-generator">
|
|
65
71
|
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
66
72
|
<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
|