@schukai/monster 1.17.1 → 1.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG +32 -0
- package/README.md +4 -4
- package/dist/modules/constants.js +1 -1
- package/dist/modules/constraints/abstract.js +1 -1
- package/dist/modules/constraints/abstractoperator.js +1 -1
- package/dist/modules/constraints/andoperator.js +1 -1
- package/dist/modules/constraints/invalid.js +1 -1
- package/dist/modules/constraints/isarray.js +1 -1
- package/dist/modules/constraints/isobject.js +1 -1
- package/dist/modules/constraints/namespace.js +1 -1
- package/dist/modules/constraints/oroperator.js +1 -1
- package/dist/modules/constraints/valid.js +1 -1
- package/dist/modules/data/buildmap.js +1 -1
- package/dist/modules/data/diff.js +2 -2
- package/dist/modules/data/extend.js +1 -1
- package/dist/modules/data/namespace.js +1 -1
- package/dist/modules/data/pathfinder.js +1 -1
- package/dist/modules/data/pipe.js +1 -1
- package/dist/modules/data/transformer.js +1 -1
- package/dist/modules/dom/assembler.js +1 -1
- package/dist/modules/dom/attributes.js +1 -1
- package/dist/modules/dom/constants.js +1 -1
- package/dist/modules/dom/customcontrol.js +1 -1
- package/dist/modules/dom/customelement.js +2 -2
- package/dist/modules/dom/events.js +2 -2
- package/dist/modules/dom/locale.js +1 -1
- package/dist/modules/dom/namespace.js +1 -1
- package/dist/modules/dom/template.js +1 -1
- package/dist/modules/dom/theme.js +1 -1
- package/dist/modules/dom/updater.js +1 -1
- package/dist/modules/dom/util.js +1 -1
- package/dist/modules/i18n/locale.js +1 -1
- package/dist/modules/i18n/namespace.js +1 -1
- package/dist/modules/i18n/provider.js +1 -1
- package/dist/modules/i18n/providers/fetch.js +1 -1
- package/dist/modules/i18n/providers/namespace.js +1 -1
- package/dist/modules/i18n/translations.js +1 -1
- package/dist/modules/logging/handler/console.js +1 -1
- package/dist/modules/logging/handler/namespace.js +1 -1
- package/dist/modules/logging/handler.js +1 -1
- package/dist/modules/logging/logentry.js +1 -1
- package/dist/modules/logging/logger.js +1 -1
- package/dist/modules/logging/namespace.js +1 -1
- package/dist/modules/math/namespace.js +1 -1
- package/dist/modules/math/random.js +1 -1
- package/dist/modules/monster.js +1 -1
- package/dist/modules/namespace.js +1 -1
- package/dist/modules/text/formatter.js +1 -1
- package/dist/modules/text/namespace.js +1 -1
- package/dist/modules/types/base.js +1 -1
- package/dist/modules/types/basewithoptions.js +1 -1
- package/dist/modules/types/binary.js +2 -0
- package/dist/modules/types/dataurl.js +2 -0
- package/dist/modules/types/global.js +1 -1
- package/dist/modules/types/id.js +1 -1
- package/dist/modules/types/is.js +2 -2
- package/dist/modules/types/mediatype.js +2 -0
- package/dist/modules/types/namespace.js +1 -1
- package/dist/modules/types/observer.js +1 -1
- package/dist/modules/types/observerlist.js +1 -1
- package/dist/modules/types/proxyobserver.js +1 -1
- package/dist/modules/types/queue.js +1 -1
- package/dist/modules/types/randomid.js +1 -1
- package/dist/modules/types/stack.js +1 -1
- package/dist/modules/types/tokenlist.js +1 -1
- package/dist/modules/types/typeof.js +1 -1
- package/dist/modules/types/uniquequeue.js +1 -1
- package/dist/modules/types/validate.js +1 -1
- package/dist/modules/types/version.js +2 -2
- package/dist/modules/util/clone.js +1 -1
- package/dist/modules/util/comparator.js +1 -1
- package/dist/modules/util/freeze.js +1 -1
- package/dist/modules/util/namespace.js +1 -1
- package/dist/monster.dev.js +1018 -341
- package/dist/monster.dev.js.map +1 -1
- package/dist/monster.js +2 -2
- package/package.json +6 -1
- package/source/constraints/andoperator.js +5 -5
- package/source/constraints/invalid.js +3 -3
- package/source/constraints/isarray.js +3 -3
- package/source/constraints/isobject.js +3 -3
- package/source/constraints/oroperator.js +5 -5
- package/source/constraints/valid.js +3 -3
- package/source/data/buildmap.js +6 -6
- package/source/data/diff.js +4 -4
- package/source/data/extend.js +2 -2
- package/source/data/pathfinder.js +4 -4
- package/source/data/pipe.js +3 -3
- package/source/data/transformer.js +3 -3
- package/source/dom/assembler.js +3 -2
- package/source/dom/attributes.js +27 -27
- package/source/dom/customcontrol.js +22 -13
- package/source/dom/customelement.js +126 -6
- package/source/dom/events.js +21 -9
- package/source/dom/locale.js +3 -2
- package/source/dom/template.js +18 -6
- package/source/dom/theme.js +4 -3
- package/source/dom/updater.js +9 -6
- package/source/dom/util.js +6 -6
- package/source/i18n/locale.js +4 -4
- package/source/i18n/provider.js +3 -3
- package/source/i18n/providers/fetch.js +5 -5
- package/source/i18n/translations.js +2 -2
- package/source/logging/handler/console.js +2 -2
- package/source/logging/handler.js +2 -2
- package/source/logging/logentry.js +2 -2
- package/source/logging/logger.js +2 -2
- package/source/math/random.js +2 -2
- package/source/namespace.js +1 -1
- package/source/text/formatter.js +2 -2
- package/source/types/base.js +2 -2
- package/source/types/basewithoptions.js +2 -2
- package/source/types/binary.js +92 -0
- package/source/types/dataurl.js +176 -0
- package/source/types/global.js +4 -4
- package/source/types/id.js +2 -2
- package/source/types/is.js +21 -21
- package/source/types/mediatype.js +236 -0
- package/source/types/observer.js +3 -3
- package/source/types/observerlist.js +2 -2
- package/source/types/package.d.ts +1 -0
- package/source/types/proxyobserver.js +5 -5
- package/source/types/queue.js +4 -3
- package/source/types/randomid.js +3 -2
- package/source/types/stack.js +2 -2
- package/source/types/tokenlist.js +2 -2
- package/source/types/typeof.js +3 -3
- package/source/types/uniquequeue.js +3 -2
- package/source/types/validate.js +20 -20
- package/source/types/version.js +7 -6
- package/source/util/clone.js +2 -2
- package/source/util/comparator.js +3 -3
- package/source/util/freeze.js +2 -2
- package/test/cases/data/diff.js +29 -2
- package/test/cases/dom/customelement.js +85 -12
- package/test/cases/dom/events.js +5 -3
- package/test/cases/monster.js +1 -1
- package/test/cases/types/binary.js +27 -0
- package/test/cases/types/dataurl.js +58 -0
- package/test/cases/types/mediatype.js +60 -0
- package/test/web/import.js +3 -0
- package/test/web/monster-dev.html +3 -3
- package/test/web/monster.html +2 -2
- package/test/web/test.html +3 -3
- package/test/web/tests.js +3 -3
@@ -20,6 +20,8 @@ const internalSymbol = Symbol('internalSymbol');
|
|
20
20
|
* IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
|
21
21
|
* with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
|
22
22
|
*
|
23
|
+
* <img src="./images/customcontrol-class.png">
|
24
|
+
*
|
23
25
|
* This control uses `attachInternals()` to integrate the control into a form.
|
24
26
|
* If the target environment does not support this method, the [polyfill](https://www.npmjs.com/package/element-internals-polyfill ) can be used.
|
25
27
|
*
|
@@ -27,7 +29,7 @@ const internalSymbol = Symbol('internalSymbol');
|
|
27
29
|
*
|
28
30
|
* ```
|
29
31
|
* <script type="module">
|
30
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
32
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
|
31
33
|
* console.log(new Monster.DOM.CustomControl())
|
32
34
|
* </script>
|
33
35
|
* ```
|
@@ -36,15 +38,22 @@ const internalSymbol = Symbol('internalSymbol');
|
|
36
38
|
*
|
37
39
|
* ```
|
38
40
|
* <script type="module">
|
39
|
-
* import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
41
|
+
* import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
|
40
42
|
* console.log(new CustomControl())
|
41
43
|
* </script>
|
42
44
|
* ```
|
43
|
-
*
|
44
|
-
* @
|
45
|
-
*
|
46
|
-
*
|
47
|
-
*
|
45
|
+
*
|
46
|
+
* @startuml customcontrol-class.png
|
47
|
+
* skinparam monochrome true
|
48
|
+
* skinparam shadowing false
|
49
|
+
* HTMLElement <|-- CustomElement
|
50
|
+
* CustomElement <|-- CustomControl
|
51
|
+
* @enduml
|
52
|
+
*
|
53
|
+
* @summary A base class for customcontrols based on CustomElement
|
54
|
+
* @see {@link https://www.npmjs.com/package/element-internals-polyfill}
|
55
|
+
* @see {@link https://github.com/WICG/webcomponents}
|
56
|
+
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements}
|
48
57
|
* @since 1.14.0
|
49
58
|
* @copyright schukai GmbH
|
50
59
|
* @memberOf Monster.DOM
|
@@ -73,7 +82,7 @@ class CustomControl extends CustomElement {
|
|
73
82
|
|
74
83
|
/**
|
75
84
|
*
|
76
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
85
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
|
77
86
|
* @since 1.14.0
|
78
87
|
* @return {boolean}
|
79
88
|
*/
|
@@ -92,8 +101,8 @@ class CustomControl extends CustomElement {
|
|
92
101
|
* }
|
93
102
|
* ```
|
94
103
|
*
|
95
|
-
* @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
|
96
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
104
|
+
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example}
|
105
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
|
97
106
|
* @return {object}
|
98
107
|
* @since 1.14.0
|
99
108
|
*/
|
@@ -131,7 +140,7 @@ class CustomControl extends CustomElement {
|
|
131
140
|
*
|
132
141
|
* @return {NodeList}
|
133
142
|
* @since 1.14.0
|
134
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels
|
143
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels}
|
135
144
|
* @throws {Error} the ElementInternals is not supported and a polyfill is necessary
|
136
145
|
*/
|
137
146
|
get labels() {
|
@@ -161,8 +170,8 @@ class CustomControl extends CustomElement {
|
|
161
170
|
*
|
162
171
|
* @return {ValidityState}
|
163
172
|
* @throws {Error} the ElementInternals is not supported and a polyfill is necessary
|
164
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
165
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/validity
|
173
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
|
174
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/validity}
|
166
175
|
*/
|
167
176
|
get validity() {
|
168
177
|
return getInternal.call(this)?.validity;
|
@@ -7,11 +7,12 @@ import {Pathfinder} from "../data/pathfinder.js";
|
|
7
7
|
* @author schukai GmbH
|
8
8
|
*/
|
9
9
|
import {assignToNamespace, Monster} from '../namespace.js';
|
10
|
+
import {parseDataURL} from "../types/dataurl.js";
|
10
11
|
import {getGlobalObject} from "../types/global.js";
|
11
12
|
import {isArray, isString} from "../types/is.js";
|
12
13
|
import {Observer} from "../types/observer.js";
|
13
14
|
import {ProxyObserver} from "../types/proxyobserver.js";
|
14
|
-
import {validateFunction, validateObject} from "../types/validate.js";
|
15
|
+
import {validateFunction, validateInstance, validateObject} from "../types/validate.js";
|
15
16
|
import {clone} from "../util/clone.js";
|
16
17
|
import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
|
17
18
|
import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
|
@@ -47,6 +48,43 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
|
|
47
48
|
* HTMLElement
|
48
49
|
* @external HTMLElement
|
49
50
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
|
51
|
+
*
|
52
|
+
* @startuml customelement-sequencediagram.png
|
53
|
+
* skinparam monochrome true
|
54
|
+
* skinparam shadowing false
|
55
|
+
*
|
56
|
+
* autonumber
|
57
|
+
*
|
58
|
+
* Script -> DOM: element = document.createElement('my-element')
|
59
|
+
* DOM -> CustomElement: constructor()
|
60
|
+
* CustomElement -> CustomElement: [initMethodSymbol]()
|
61
|
+
*
|
62
|
+
* CustomElement --> DOM: Element
|
63
|
+
* DOM --> Script : element
|
64
|
+
*
|
65
|
+
*
|
66
|
+
* Script -> DOM: document.querySelector('body').append(element)
|
67
|
+
*
|
68
|
+
* DOM -> CustomElement : connectedCallback()
|
69
|
+
*
|
70
|
+
* note right CustomElement: is only called at\nthe first connection
|
71
|
+
* CustomElement -> CustomElement : [assembleMethodSymbol]()
|
72
|
+
*
|
73
|
+
* ... ...
|
74
|
+
*
|
75
|
+
* autonumber
|
76
|
+
*
|
77
|
+
* Script -> DOM: document.querySelector('monster-confirm-button').parentNode.removeChild(element)
|
78
|
+
* DOM -> CustomElement: disconnectedCallback()
|
79
|
+
*
|
80
|
+
*
|
81
|
+
* @enduml
|
82
|
+
*
|
83
|
+
* @startuml customelement-class.png
|
84
|
+
* skinparam monochrome true
|
85
|
+
* skinparam shadowing false
|
86
|
+
* HTMLElement <|-- CustomElement
|
87
|
+
* @enduml
|
50
88
|
*/
|
51
89
|
|
52
90
|
|
@@ -56,11 +94,13 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
|
|
56
94
|
* IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
|
57
95
|
* with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
|
58
96
|
*
|
97
|
+
* <img src="./images/customelement-class.png">
|
98
|
+
*
|
59
99
|
* You can create the object via the monster namespace `new Monster.DOM.CustomElement()`.
|
60
100
|
*
|
61
101
|
* ```
|
62
102
|
* <script type="module">
|
63
|
-
* import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
103
|
+
* import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
|
64
104
|
* console.log(new Monster.DOM.CustomElement())
|
65
105
|
* </script>
|
66
106
|
* ```
|
@@ -69,11 +109,15 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
|
|
69
109
|
*
|
70
110
|
* ```
|
71
111
|
* <script type="module">
|
72
|
-
* import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
112
|
+
* import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
|
73
113
|
* console.log(new CustomElement())
|
74
114
|
* </script>
|
75
115
|
* ```
|
76
116
|
*
|
117
|
+
* ## Interaction
|
118
|
+
*
|
119
|
+
* <img src="./images/customelement-sequencediagram.png">
|
120
|
+
*
|
77
121
|
* ## Styling
|
78
122
|
*
|
79
123
|
* For optimal display of custom-elements the pseudo-class :defined can be used.
|
@@ -156,6 +200,7 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
|
|
156
200
|
* @copyright schukai GmbH
|
157
201
|
* @memberOf Monster.DOM
|
158
202
|
* @extends external:HTMLElement
|
203
|
+
* @summary A base class for HTML5 customcontrols
|
159
204
|
*/
|
160
205
|
class CustomElement extends HTMLElement {
|
161
206
|
|
@@ -184,7 +229,6 @@ class CustomElement extends HTMLElement {
|
|
184
229
|
}
|
185
230
|
|
186
231
|
/**
|
187
|
-
*
|
188
232
|
* Derived classes can override and extend this method as follows.
|
189
233
|
*
|
190
234
|
* ```
|
@@ -195,6 +239,21 @@ class CustomElement extends HTMLElement {
|
|
195
239
|
* }
|
196
240
|
* ```
|
197
241
|
*
|
242
|
+
* to set the options via the html tag the attribute data-monster-options must be set.
|
243
|
+
* As value a JSON object with the desired values must be defined.
|
244
|
+
*
|
245
|
+
* Since 1.18.0 the JSON can be specified as a DataURI.
|
246
|
+
*
|
247
|
+
* ```
|
248
|
+
* new Monster.Types.DataUrl(btoa(JSON.stringify({
|
249
|
+
* shadowMode: 'open',
|
250
|
+
* delegatesFocus: true,
|
251
|
+
* templates: {
|
252
|
+
* main: undefined
|
253
|
+
* }
|
254
|
+
* })),'application/json',true).toString()
|
255
|
+
* ```
|
256
|
+
*
|
198
257
|
* @property {string} shadowMode=open `open` Elements of the shadow root are accessible from JavaScript outside the root, for example using. `close` Denies access to the node(s) of a closed shadow root from JavaScript outside it
|
199
258
|
* @property {Boolean} delegatesFocus=true A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
|
200
259
|
* @property {Object} templates Templates
|
@@ -247,7 +306,7 @@ class CustomElement extends HTMLElement {
|
|
247
306
|
* ;
|
248
307
|
* ```
|
249
308
|
*
|
250
|
-
* @return {CSSStyleSheet|undefined}
|
309
|
+
* @return {CSSStyleSheet|CSSStyleSheet[]|string|undefined}
|
251
310
|
*/
|
252
311
|
static getCSSStyleSheet() {
|
253
312
|
return undefined;
|
@@ -445,6 +504,53 @@ class CustomElement extends HTMLElement {
|
|
445
504
|
|
446
505
|
}
|
447
506
|
|
507
|
+
/**
|
508
|
+
*
|
509
|
+
* @param {Node} node
|
510
|
+
* @return {boolean}
|
511
|
+
* @throws {TypeError} value is not an instance of
|
512
|
+
* @since 1.19.0
|
513
|
+
*/
|
514
|
+
hasNode(node) {
|
515
|
+
const self = this;
|
516
|
+
|
517
|
+
|
518
|
+
if (containChildNode.call(self, validateInstance(node, Node))) {
|
519
|
+
return true;
|
520
|
+
}
|
521
|
+
|
522
|
+
if (!(self.shadowRoot instanceof ShadowRoot)) {
|
523
|
+
return false;
|
524
|
+
}
|
525
|
+
|
526
|
+
return containChildNode.call(self.shadowRoot, node);
|
527
|
+
|
528
|
+
}
|
529
|
+
|
530
|
+
}
|
531
|
+
|
532
|
+
/**
|
533
|
+
* @private
|
534
|
+
* @param {Node} node
|
535
|
+
* @return {boolean}
|
536
|
+
*/
|
537
|
+
function containChildNode(node) {
|
538
|
+
const self = this;
|
539
|
+
|
540
|
+
if (self.contains(node)) {
|
541
|
+
return true;
|
542
|
+
}
|
543
|
+
|
544
|
+
for (const [, e] of Object.entries(self.childNodes)) {
|
545
|
+
if (e.contains(node)) {
|
546
|
+
return true;
|
547
|
+
}
|
548
|
+
|
549
|
+
containChildNode.call(e, node);
|
550
|
+
}
|
551
|
+
|
552
|
+
|
553
|
+
return false;
|
448
554
|
}
|
449
555
|
|
450
556
|
/**
|
@@ -492,9 +598,23 @@ function getOptionsFromAttributes() {
|
|
492
598
|
return {};
|
493
599
|
}
|
494
600
|
|
495
|
-
|
601
|
+
/**
|
602
|
+
* @private
|
603
|
+
* @param data
|
604
|
+
* @return {Object}
|
605
|
+
*/
|
496
606
|
function parseOptionsJSON(data) {
|
497
607
|
if (isString(data)) {
|
608
|
+
|
609
|
+
// the configuration can be specified as a data url.
|
610
|
+
try {
|
611
|
+
let dataUrl = parseDataURL(data);
|
612
|
+
data = dataUrl.content;
|
613
|
+
} catch (e) {
|
614
|
+
|
615
|
+
}
|
616
|
+
|
617
|
+
|
498
618
|
try {
|
499
619
|
let obj = JSON.parse(data);
|
500
620
|
validateObject(obj);
|
package/source/dom/events.js
CHANGED
@@ -4,8 +4,8 @@
|
|
4
4
|
* @author schukai GmbH
|
5
5
|
*/
|
6
6
|
import {assignToNamespace, Monster} from '../namespace.js';
|
7
|
+
import {isArray} from "../types/is.js";
|
7
8
|
import {validateInstance, validateString} from "../types/validate.js";
|
8
|
-
import {findClosestByAttribute} from "./attributes.js";
|
9
9
|
import {getDocument} from "./util.js";
|
10
10
|
|
11
11
|
/**
|
@@ -13,7 +13,7 @@ import {getDocument} from "./util.js";
|
|
13
13
|
*
|
14
14
|
* ```
|
15
15
|
* <script type="module">
|
16
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
16
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
|
17
17
|
* console.log(new Monster.DOM.fireEvent())
|
18
18
|
* </script>
|
19
19
|
* ```
|
@@ -22,7 +22,7 @@ import {getDocument} from "./util.js";
|
|
22
22
|
*
|
23
23
|
* ```
|
24
24
|
* <script type="module">
|
25
|
-
* import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
25
|
+
* import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
|
26
26
|
* console.log(fireEvent())
|
27
27
|
* </script>
|
28
28
|
* ```
|
@@ -34,6 +34,7 @@ import {getDocument} from "./util.js";
|
|
34
34
|
* @copyright schukai GmbH
|
35
35
|
* @memberOf Monster.DOM
|
36
36
|
* @throws {TypeError} value is not an instance of HTMLElement or HTMLCollection
|
37
|
+
* @summary Construct and send and event
|
37
38
|
*/
|
38
39
|
function fireEvent(element, type) {
|
39
40
|
|
@@ -65,13 +66,14 @@ function fireEvent(element, type) {
|
|
65
66
|
|
66
67
|
/**
|
67
68
|
* This function gets the path `Event.composedPath()` from an event and tries to find the next element
|
68
|
-
* up the tree `element.closest()` with the attribute and value. If no value
|
69
|
+
* up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null,
|
70
|
+
* is specified, only the attribute is searched.
|
69
71
|
*
|
70
72
|
* You can call the function via the monster namespace `new Monster.DOM.findTargetElementFromEvent()`.
|
71
73
|
*
|
72
74
|
* ```
|
73
75
|
* <script type="module">
|
74
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
76
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
|
75
77
|
* console.log(new Monster.DOM.findTargetElementFromEvent())
|
76
78
|
* </script>
|
77
79
|
* ```
|
@@ -80,7 +82,7 @@ function fireEvent(element, type) {
|
|
80
82
|
*
|
81
83
|
* ```
|
82
84
|
* <script type="module">
|
83
|
-
* import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
85
|
+
* import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
|
84
86
|
* console.log(findTargetElementFromEvent())
|
85
87
|
* </script>
|
86
88
|
* ```
|
@@ -88,11 +90,12 @@ function fireEvent(element, type) {
|
|
88
90
|
* @since 1.14.0
|
89
91
|
* @param {Event} event
|
90
92
|
* @param {string} attributeName
|
91
|
-
* @param {string|null} attributeValue
|
93
|
+
* @param {string|null|undefined} attributeValue
|
92
94
|
* @throws {Error} unsupported event
|
93
95
|
* @memberOf Monster.DOM
|
94
96
|
* @throws {TypeError} value is not a string
|
95
97
|
* @throws {TypeError} value is not an instance of HTMLElement
|
98
|
+
* @summary Help function to find the appropriate control
|
96
99
|
*/
|
97
100
|
function findTargetElementFromEvent(event, attributeName, attributeValue) {
|
98
101
|
validateInstance(event, Event);
|
@@ -104,8 +107,17 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
|
|
104
107
|
const path = event.composedPath();
|
105
108
|
const element = path?.[0];
|
106
109
|
|
107
|
-
|
108
|
-
|
110
|
+
// closest cannot be used here, because closest is not correct for slotted elements
|
111
|
+
if (isArray(path)) {
|
112
|
+
for (let i = 0; i < path.length; i++) {
|
113
|
+
const o = path[i];
|
114
|
+
|
115
|
+
if (o instanceof HTMLElement &&
|
116
|
+
o.hasAttribute(attributeName)
|
117
|
+
&& (attributeValue===undefined || o.getAttribute(attributeName) === attributeValue)) {
|
118
|
+
return o;
|
119
|
+
}
|
120
|
+
}
|
109
121
|
}
|
110
122
|
|
111
123
|
return undefined;
|
package/source/dom/locale.js
CHANGED
@@ -21,7 +21,7 @@ const DEFAULT_LANGUAGE = 'en';
|
|
21
21
|
*
|
22
22
|
* ```
|
23
23
|
* <script type="module">
|
24
|
-
* import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
24
|
+
* import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
|
25
25
|
* console.log(new Monster.DOM.getLocaleOfDocument())
|
26
26
|
* </script>
|
27
27
|
* ```
|
@@ -30,7 +30,7 @@ const DEFAULT_LANGUAGE = 'en';
|
|
30
30
|
*
|
31
31
|
* ```
|
32
32
|
* <script type="module">
|
33
|
-
* import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
33
|
+
* import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
|
34
34
|
* console.log(new getLocaleOfDocument())
|
35
35
|
* </script>
|
36
36
|
* ```
|
@@ -40,6 +40,7 @@ const DEFAULT_LANGUAGE = 'en';
|
|
40
40
|
* @memberOf Monster.DOM
|
41
41
|
* @throws {TypeError} value is not a string
|
42
42
|
* @throws {Error} unsupported locale
|
43
|
+
* @summary Tries to determine the locale used
|
43
44
|
*/
|
44
45
|
function getLocaleOfDocument() {
|
45
46
|
|
package/source/dom/template.js
CHANGED
@@ -14,7 +14,7 @@ import {getDocumentTheme} from "./theme.js";
|
|
14
14
|
*
|
15
15
|
* ```
|
16
16
|
* <script type="module">
|
17
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
17
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
|
18
18
|
* console.log(new Monster.DOM.Template())
|
19
19
|
* </script>
|
20
20
|
* ```
|
@@ -23,7 +23,7 @@ import {getDocumentTheme} from "./theme.js";
|
|
23
23
|
*
|
24
24
|
* ```
|
25
25
|
* <script type="module">
|
26
|
-
* import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
26
|
+
* import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
|
27
27
|
* console.log(new Template())
|
28
28
|
* </script>
|
29
29
|
* ```
|
@@ -31,6 +31,7 @@ import {getDocumentTheme} from "./theme.js";
|
|
31
31
|
* @since 1.6.0
|
32
32
|
* @copyright schukai GmbH
|
33
33
|
* @memberOf Monster.DOM
|
34
|
+
* @summary A template class
|
34
35
|
*/
|
35
36
|
class Template extends Base {
|
36
37
|
/**
|
@@ -67,13 +68,24 @@ class Template extends Base {
|
|
67
68
|
}
|
68
69
|
|
69
70
|
/**
|
71
|
+
* This method loads a template with the given ID and returns it.
|
70
72
|
*
|
73
|
+
* To do this, it first fetches the theme of the document and looks for the `data-monster-theme-name` attribute in the HTML tag.
|
71
74
|
*
|
72
|
-
*
|
75
|
+
* ```
|
76
|
+
* <html data-monster-theme-name="my-theme">
|
77
|
+
* ```
|
78
|
+
*
|
79
|
+
* If no theme was specified, the default theme is `monster`.
|
80
|
+
*
|
81
|
+
* Now it is looked if there is a template with the given ID and theme `id-theme` and if yes it is returned.
|
82
|
+
* If there is no template a search for a template with the given ID `id` is done. If this is also not found, an error is thrown.
|
83
|
+
*
|
84
|
+
* You can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
|
73
85
|
*
|
74
86
|
* ```
|
75
87
|
* <script type="module">
|
76
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
88
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
|
77
89
|
* console.log(Monster.DOM.findDocumentTemplate())
|
78
90
|
* </script>
|
79
91
|
* ```
|
@@ -82,14 +94,14 @@ class Template extends Base {
|
|
82
94
|
*
|
83
95
|
* ```
|
84
96
|
* <script type="module">
|
85
|
-
* import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
97
|
+
* import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
|
86
98
|
* console.log(findDocumentTemplate())
|
87
99
|
* </script>
|
88
100
|
* ```
|
89
101
|
*
|
90
102
|
* @param {string} id
|
91
103
|
* @param {Node} currentNode
|
92
|
-
* @return {Template}
|
104
|
+
* @return {Monster.DOM.Template}
|
93
105
|
* @since 1.7.0
|
94
106
|
* @copyright schukai GmbH
|
95
107
|
* @memberOf Monster.DOM
|
package/source/dom/theme.js
CHANGED
@@ -15,7 +15,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
|
|
15
15
|
*
|
16
16
|
* ```
|
17
17
|
* <script type="module">
|
18
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
18
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
|
19
19
|
* console.log(new Monster.DOM.Theme())
|
20
20
|
* </script>
|
21
21
|
* ```
|
@@ -24,14 +24,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
|
|
24
24
|
*
|
25
25
|
* ```
|
26
26
|
* <script type="module">
|
27
|
-
* import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
27
|
+
* import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
|
28
28
|
* console.log(new Theme())
|
29
29
|
* </script>
|
30
30
|
* ```
|
31
31
|
*
|
32
32
|
* @example
|
33
33
|
*
|
34
|
-
* import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
34
|
+
* import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
|
35
35
|
*
|
36
36
|
* const theme = getDocumentTheme();
|
37
37
|
* console.log(theme.getName());
|
@@ -40,6 +40,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
|
|
40
40
|
* @since 1.7.0
|
41
41
|
* @copyright schukai GmbH
|
42
42
|
* @memberOf Monster.DOM
|
43
|
+
* @summary A theme class
|
43
44
|
*/
|
44
45
|
class Theme extends Base {
|
45
46
|
|
package/source/dom/updater.js
CHANGED
@@ -26,15 +26,16 @@ import {getDocument} from "./util.js";
|
|
26
26
|
|
27
27
|
|
28
28
|
/**
|
29
|
-
* The updater class connects an object with the dom.
|
29
|
+
* The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
|
30
30
|
*
|
31
|
-
* For example, to include a string from an object, the attribute `data-monster-replace` can be used.
|
31
|
+
* For example, to include a string from an object, the attribute `data-monster-replace` can be used.
|
32
|
+
* a further explanation can be found under {@tutorial dom-based-templating-implementation}.
|
32
33
|
*
|
33
34
|
* you can call the method via the monster namespace `new Monster.DOM.Updater()`.
|
34
35
|
*
|
35
36
|
* ```
|
36
37
|
* <script type="module">
|
37
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
38
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
|
38
39
|
* console.log(new Monster.DOM.Updater())
|
39
40
|
* </script>
|
40
41
|
* ```
|
@@ -43,14 +44,14 @@ import {getDocument} from "./util.js";
|
|
43
44
|
*
|
44
45
|
* ```
|
45
46
|
* <script type="module">
|
46
|
-
* import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
47
|
+
* import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
|
47
48
|
* console.log(new Updater())
|
48
49
|
* </script>
|
49
50
|
* ```
|
50
51
|
*
|
51
52
|
* @example
|
52
53
|
*
|
53
|
-
* import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
54
|
+
* import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
|
54
55
|
*
|
55
56
|
* // First we prepare the html document.
|
56
57
|
* // This is done here via script, but can also be inserted into the document as pure html.
|
@@ -83,6 +84,7 @@ import {getDocument} from "./util.js";
|
|
83
84
|
* @throws {Error} the maximum depth for the recursion is reached.
|
84
85
|
* @throws {TypeError} value is not a object
|
85
86
|
* @throws {TypeError} value is not an instance of HTMLElement
|
87
|
+
* @summary The updater class connects an object with the dom
|
86
88
|
*/
|
87
89
|
class Updater extends Base {
|
88
90
|
|
@@ -92,6 +94,7 @@ class Updater extends Base {
|
|
92
94
|
* @param {object|ProxyObserver|undefined} subject
|
93
95
|
* @throws {TypeError} value is not a object
|
94
96
|
* @throws {TypeError} value is not an instance of HTMLElement
|
97
|
+
* @see {@link Monster.DOM.findDocumentTemplate}
|
95
98
|
*/
|
96
99
|
constructor(element, subject) {
|
97
100
|
super();
|
@@ -136,7 +139,7 @@ class Updater extends Base {
|
|
136
139
|
/**
|
137
140
|
* Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
|
138
141
|
*
|
139
|
-
* @see https://developer.mozilla.org/de/docs/Web/Events
|
142
|
+
* @see {@link https://developer.mozilla.org/de/docs/Web/Events}
|
140
143
|
* @since 1.9.0
|
141
144
|
* @param {Array} types
|
142
145
|
* @return {Updater}
|
package/source/dom/util.js
CHANGED
@@ -13,7 +13,7 @@ import {validateString} from "../types/validate.js";
|
|
13
13
|
*
|
14
14
|
* ```
|
15
15
|
* <script type="module">
|
16
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
16
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
17
17
|
* console.log(Monster.DOM.getDocument())
|
18
18
|
* </script>
|
19
19
|
* ```
|
@@ -22,7 +22,7 @@ import {validateString} from "../types/validate.js";
|
|
22
22
|
*
|
23
23
|
* ```
|
24
24
|
* <script type="module">
|
25
|
-
* import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
25
|
+
* import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
26
26
|
* console.log(getDocument())
|
27
27
|
* </script>
|
28
28
|
* ```
|
@@ -74,7 +74,7 @@ function getDocument() {
|
|
74
74
|
*
|
75
75
|
* ```
|
76
76
|
* <script type="module">
|
77
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
77
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
78
78
|
* console.log(Monster.DOM.getWindow())
|
79
79
|
* </script>
|
80
80
|
* ```
|
@@ -83,7 +83,7 @@ function getDocument() {
|
|
83
83
|
*
|
84
84
|
* ```
|
85
85
|
* <script type="module">
|
86
|
-
* import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
86
|
+
* import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
87
87
|
* console.log(getWindow(null))
|
88
88
|
* </script>
|
89
89
|
* ```
|
@@ -140,7 +140,7 @@ function getWindow() {
|
|
140
140
|
*
|
141
141
|
* ```
|
142
142
|
* <script type="module">
|
143
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
143
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
144
144
|
* console.log(Monster.DOM.getDocumentFragmentFromString())
|
145
145
|
* </script>
|
146
146
|
* ```
|
@@ -149,7 +149,7 @@ function getWindow() {
|
|
149
149
|
*
|
150
150
|
* ```
|
151
151
|
* <script type="module">
|
152
|
-
* import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
152
|
+
* import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
|
153
153
|
* console.log(getDocumentFragmentFromString('<div></div>'))
|
154
154
|
* </script>
|
155
155
|
* ```
|
package/source/i18n/locale.js
CHANGED
@@ -25,7 +25,7 @@ const localeStringSymbol = Symbol('localeString');
|
|
25
25
|
*
|
26
26
|
* ```
|
27
27
|
* <script type="module">
|
28
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
28
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
|
29
29
|
* console.log(new Monster.I18n.Locale())
|
30
30
|
* </script>
|
31
31
|
* ```
|
@@ -34,7 +34,7 @@ const localeStringSymbol = Symbol('localeString');
|
|
34
34
|
*
|
35
35
|
* ```
|
36
36
|
* <script type="module">
|
37
|
-
* import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
37
|
+
* import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
|
38
38
|
* console.log(new Locale())
|
39
39
|
* </script>
|
40
40
|
* ```
|
@@ -201,7 +201,7 @@ class Locale extends Base {
|
|
201
201
|
*
|
202
202
|
* ```
|
203
203
|
* <script type="module">
|
204
|
-
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
204
|
+
* import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
|
205
205
|
* console.log(new Monster.I18n.createLocale())
|
206
206
|
* </script>
|
207
207
|
* ```
|
@@ -210,7 +210,7 @@ class Locale extends Base {
|
|
210
210
|
*
|
211
211
|
* ```
|
212
212
|
* <script type="module">
|
213
|
-
* import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.
|
213
|
+
* import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
|
214
214
|
* console.log(createLocale())
|
215
215
|
* </script>
|
216
216
|
* ```
|