diff --git a/development/issues/closed/269.html b/development/issues/closed/269.html
new file mode 100644
index 0000000000000000000000000000000000000000..0875ae364a8e411fbd800de87f0266786e3c1caa
--- /dev/null
+++ b/development/issues/closed/269.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>optimize message and notify #269</title>
+ <script src="269.mjs" type="module"></script>
+</head>
+<body>
+ <h1>optimize message and notify #269</h1>
+ <p></p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/269">Issue #269</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+ <main >
+
+ <monster-notify id="notify" data-monster-option-classes-control="inline">
+ </monster-notify>
+
+ </main>
+</body>
+</html>
diff --git a/development/issues/closed/269.mjs b/development/issues/closed/269.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..2f7944fa77338b8b9705734a896998c43481b970
--- /dev/null
+++ b/development/issues/closed/269.mjs
@@ -0,0 +1,33 @@
+/**
+* @file development/issues/open/269.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/269
+* @description optimize message and notify
+* @issue 269
+*/
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/notify/notify.mjs";
+import "../../../source/components/notify/message.mjs";
+
+
+const notify = document.getElementById('notify');
+notify.push("sdfsdfsdf")
+
+const xhr = new XMLHttpRequest();
+xhr.open('POST', '/upload');
+
+xhr.upload.addEventListener('progress', (e) => {
+ if (e.lengthComputable) {
+ const percentComplete = (e.loaded / e.total) * 100;
+ console.log(`Upload-Fortschritt: ${percentComplete}%`);
+ }
+});
+
+const formData = new FormData();
+
+xhr.send(formData);
diff --git a/source/components/navigation/table-of-content.mjs b/source/components/navigation/table-of-content.mjs
index b768dbbf7ac3c3044b9ee2d5e964cfddc37eb9af..5f95cc81feee73d3862a7e9d7cc0ef6b0c7774ea 100644
--- a/source/components/navigation/table-of-content.mjs
+++ b/source/components/navigation/table-of-content.mjs
@@ -71,7 +71,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
/**
* A TableOfContent
*
- * @fragments /fragments/components/form/table-of-content/
+ * @fragments /fragments/components/form/table-of-content
*
* @example /examples/components/form/table-of-content-simple
*
diff --git a/source/components/notify/message.mjs b/source/components/notify/message.mjs
index 1c875184f004ae9e9f3e5489981a5b831b2f5518..d2de963998abeaf104e42c599ca653ba50f53bd5 100644
--- a/source/components/notify/message.mjs
+++ b/source/components/notify/message.mjs
@@ -66,35 +66,17 @@ const mouseleaveEventHandlerSymbol = Symbol("mouseleaveEventHandler");
const removeEventHandlerSymbol = Symbol("removeEventHandler");
/**
- * This CustomControl creates a notification element with a variety of options.
+ * A Message is a notification element that can be used to display messages to the user.
*
- * <img src="./images/message.png">
+ * @fragments /fragments/components/notify/message
*
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library.
+ * @example /examples/components/notify/message-simple
*
- * You can create this control either by specifying the HTML tag `<monster-notify-message />` directly in the HTML
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
*
- * ```html
- * <monster-notify-message></monster-notify-message>
- * ```
- *
- * or using Javascript via the `document.createElement('monster-notify');` method.
- *
- * ```javascript
- * import '@schukai/monster/source/components/notify/message.js';
- * document.createElement('monster-notify-message');
- * ```
- *
- * @externalExample ../../../example/components/notify/message.mjs
- * @startuml message.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Message
- * @enduml
* @since 1.0.0
* @copyright schukai GmbH
- * @summary A highly configurable select control
+ * @summary The message is a notification element that can be used to display messages to the user. Typically, it is only used in conjunction with the notify container.
*/
class Message extends CustomElement {
/**
@@ -117,14 +99,13 @@ class Message extends CustomElement {
* })),'application/json',true).toString()
* ```
*
- * @property {string} templates Template definitions
* @property {Object} templates Template definitions
- * @property {integer} timeout time in milliseconds until the message should be removed. The timeout can be disabled via the feature `disappear`.
- * @property {Object} features
- * @property {boolean} features.close show close button
- * @property {boolean} features.disappear automatically remove the message after the timeout
* @property {string} templates.main Main template
- *
+ * @property {number} timeout The time in milliseconds after which the message disappears
+ * @property {Object} features The features of the message
+ * @property {boolean} features.close Whether the message can be closed
+ * @property {boolean} features.disappear Whether the message disappears after a certain time
+ * @property {string} content The content of the message
*/
get defaults() {
return Object.assign(
@@ -141,7 +122,6 @@ class Message extends CustomElement {
main: getTemplate(),
},
},
- initOptionsFromArguments.call(this),
);
}
@@ -152,7 +132,7 @@ class Message extends CustomElement {
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
initControlReferences.call(this);
- initEventhandler.call(this);
+ initEventHandler.call(this);
return this;
}
@@ -244,30 +224,6 @@ function stopFadeout() {
}
}
-/**
- * This attribute can be used to pass a URL to this select.
- *
- * @private
- * @return {object}
- */
-function initOptionsFromArguments() {
- const options = {};
-
- const timeout = this.getAttribute(ATTRIBUTE_PREFIX + "timeout");
- if (isString(timeout)) {
- try {
- options["timeout"] = parseInt(timeout, 10);
- } catch (e) {
- this.setAttribute(
- ATTRIBUTE_ERRORMESSAGE,
- this.getAttribute(ATTRIBUTE_ERRORMESSAGE + ", " + e.toString()),
- );
- }
- }
-
- return options;
-}
-
/**
* @private
* @return {Message}
@@ -289,7 +245,7 @@ function initControlReferences() {
/**
* @private
*/
-function initEventhandler() {
+function initEventHandler() {
/**
* @param {Event} event
*/
diff --git a/source/components/notify/notify.mjs b/source/components/notify/notify.mjs
index d867a4ae06493f372dd89366f3dbee4db19c6135..d639ac25dfb39b34be783ca85079c7aeeb0e07c7 100644
--- a/source/components/notify/notify.mjs
+++ b/source/components/notify/notify.mjs
@@ -45,44 +45,18 @@ const containerElementSymbol = Symbol("containerElement");
const queueSymbol = Symbol("queue");
/**
- * This CustomControl creates a notification element with a variety of options.
+ * The Notify control
*
- * <img src="./images/notify.png">
+ * @fragments /fragments/components/notify/notify
*
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library.
+ * @example /examples/components/notify/notify-simple
+ * @example /examples/components/notify/notify-inline
*
- * You can create this control either by specifying the HTML tag `<monster-notify />` directly in the HTML
- *
- * ```html
- * <monster-notify></monster-notify>
- * ```
- *
- * or using Javascript via the `document.createElement('monster-notify');` method.
- *
- * ```js
- * import '@schukai/monster/source/components/notify/notify.js';
- * document.createElement('monster-notify');
- * ```
- *
- * ## Events
- *
- * The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
- *
- * ```
- * node.addEventListener('monster-notify-message',(e)=>console.log(e.detail))
- * ```
- *
- * @externalExample ../../../example/components/notify/notify.mjs
- * @startuml notify.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Notify
- * @enduml
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
*
* @since 1.0.0
* @copyright schukai GmbH
- * @summary A highly configurable select control
+ * @summary The Notify control is a notification container that can be used to display messages to the user.
*/
class Notify extends CustomElement {
constructor() {
@@ -91,24 +65,12 @@ class Notify extends CustomElement {
}
/**
- * The defaults can be set either directly in the object or via an attribute in the HTML tag.
- * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
- *
- * ```html
- * <monster-notify data-monster-options="{}"></monster-notify>
- * ```
- *
- * Since 1.18.0 the JSON can be specified as a DataURI.
- *
- * ```
- * new Monster.Types.DataUrl(btoa(JSON.stringify({
- * orientation: 'right top'
- * })),'application/json',true).toString()
- * ```
- *
- * @property {string} templates Template definitions
- * @property {Object} templates Template definitions
- * @property {string} templates.main Main template
+ * @property {string} orientation The orientation of the notify element. Allowed values for horizontal orientation are "left", "center", "right". Allowed values for vertical orientation are "top" and "bottom".
+ * @property {object} templates The templates of the notify element.
+ * @property {string} templates.main The main template of the notify element.
+ * @property {object} classes The classes of the notify element.
+ * @property {string} classes.container The container class of the notify element.
+ * @property {string} classes.control The control class of the notify element.
*/
get defaults() {
return Object.assign(
@@ -119,13 +81,15 @@ class Notify extends CustomElement {
templates: {
main: getTemplate(),
},
+ classes: {
+ container: "",
+ control: "center"
+ }
},
- initOptionsFromArguments.call(this),
);
}
/**
- *
* @return {Notify}
*/
[assembleMethodSymbol]() {
@@ -142,7 +106,6 @@ class Notify extends CustomElement {
}
/**
- *
* @return {string}
*/
static getTag() {
@@ -158,9 +121,8 @@ class Notify extends CustomElement {
}
/**
- *
- * @param {Monster.Components.Notify.Massage|String} message
- * @return {Monster.Components.Notify.Notify}
+ * @param {Massage|String} message
+ * @return {Notify}
*/
push(message) {
let messageElement = message;
@@ -188,22 +150,6 @@ class Notify extends CustomElement {
}
}
-/**
- * This attribute can be used to pass a URL to this select.
- *
- * ```
- * <monster-select data-monster-url="https://example.com/"></monster-select>
- * ```
- *
- * @private
- * @return {object}
- */
-function initOptionsFromArguments() {
- const options = {};
-
- return options;
-}
-
/**
* @private
* @return {Select}
@@ -229,10 +175,10 @@ function initControlReferences() {
function getTemplate() {
// language=HTML
return `
- <div data-monster-role="control" part="control" class="center"
- data-monster-attributes="data-monster-orientation path:orientation">
- <div data-monster-role="container">
- </div>
+ <div data-monster-role="control" part="control"
+ data-monster-attributes="data-monster-orientation path:orientation, class path:classes.control">
+ <div data-monster-attributes="class path:classes.container" part="container"
+ data-monster-role="container"></div>
</div>
`;
}
diff --git a/source/components/notify/style/notify.pcss b/source/components/notify/style/notify.pcss
index bc85b079c417b95c20b4f12894302af80afa0bd9..d8ee46ca03c442e5d0a7a271338be5f57a212dbe 100644
--- a/source/components/notify/style/notify.pcss
+++ b/source/components/notify/style/notify.pcss
@@ -19,7 +19,6 @@ div[data-monster-role=control] {
max-height: 100vH;
margin: 0;
- position: absolute;
top: 0;
right: 0;
@@ -31,6 +30,14 @@ div[data-monster-role=control] {
}
+div[data-monster-role=control]:not(.inline) {
+ position: absolute;
+}
+
+div[data-monster-role=control].inline {
+ --monster-message-border-shadow: none;
+}
+
[data-monster-role=control][data-monster-orientation*=left] {
left: 0;
right: auto;
@@ -65,11 +72,9 @@ div[data-monster-role=control] {
width: 100%;
}
-
[data-monster-role=message] {
display: flex;
- pointer-events: auto;
user-select: text;
width: 100%;
max-height: 200px;
@@ -98,7 +103,7 @@ div[data-monster-role=control] {
font-size: .875rem;
pointer-events: auto;
- box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
+ box-shadow: var(--monster-message-border-shadow, 0 0.5rem 1rem rgb(0 0 0 / 15%));
}
@@ -109,8 +114,8 @@ div[data-monster-role=control] {
[data-monster-role=message].fadeout {
transition: all 0.2s cubic-bezier(1, -0.04, 0, 1.03);
max-height: 0;
- margin-top: 0px;
- margin-bottom: 0px;
+ margin-top: 0;
+ margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
border: 0;
diff --git a/source/components/notify/stylesheet/notify.mjs b/source/components/notify/stylesheet/notify.mjs
index 9f50fad20d6741dd19cbe6eb31a3025ba64252f2..7ec1339d88294fc1dd43d0c756cf159524285491 100644
--- a/source/components/notify/stylesheet/notify.mjs
+++ b/source/components/notify/stylesheet/notify.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
-export { NotifyStyleSheet };
+export {NotifyStyleSheet}
/**
* @private
@@ -22,17 +22,10 @@ export { NotifyStyleSheet };
const NotifyStyleSheet = new CSSStyleSheet();
try {
- NotifyStyleSheet.insertRule(
- `
+ NotifyStyleSheet.insertRule(`
@layer notify {
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)}
-}`,
- 0,
- );
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}div[data-monster-role=control]:not(.inline){position:absolute}div[data-monster-role=control].inline{--monster-message-border-shadow:none}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:var(--monster-message-border-shadow,0 .5rem 1rem rgba(0,0,0,.15));color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)}
+}`, 0);
} catch (e) {
- addAttributeToken(
- document.getRootNode().querySelector("html"),
- ATTRIBUTE_ERRORMESSAGE,
- e + "",
- );
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
diff --git a/source/dom/updater.mjs b/source/dom/updater.mjs
index 6f402c3bfb22a729b7eb5822abb0ed087fceeba4..d7f295e16100424b21c152b3d36f5f907fb86db3 100644
--- a/source/dom/updater.mjs
+++ b/source/dom/updater.mjs
@@ -12,36 +12,36 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import { internalSymbol } from "../constants.mjs";
-import { diff } from "../data/diff.mjs";
-import { Pathfinder } from "../data/pathfinder.mjs";
-import { Pipe } from "../data/pipe.mjs";
+import {internalSymbol} from "../constants.mjs";
+import {diff} from "../data/diff.mjs";
+import {Pathfinder} from "../data/pathfinder.mjs";
+import {Pipe} from "../data/pipe.mjs";
import {
- ATTRIBUTE_ERRORMESSAGE,
- ATTRIBUTE_UPDATER_ATTRIBUTES,
- ATTRIBUTE_UPDATER_BIND,
- ATTRIBUTE_UPDATER_BIND_TYPE,
- ATTRIBUTE_UPDATER_INSERT,
- ATTRIBUTE_UPDATER_INSERT_REFERENCE,
- ATTRIBUTE_UPDATER_REMOVE,
- ATTRIBUTE_UPDATER_REPLACE,
- ATTRIBUTE_UPDATER_SELECT_THIS,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_UPDATER_ATTRIBUTES,
+ ATTRIBUTE_UPDATER_BIND,
+ ATTRIBUTE_UPDATER_BIND_TYPE,
+ ATTRIBUTE_UPDATER_INSERT,
+ ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+ ATTRIBUTE_UPDATER_REMOVE,
+ ATTRIBUTE_UPDATER_REPLACE,
+ ATTRIBUTE_UPDATER_SELECT_THIS,
} from "./constants.mjs";
-import { Base } from "../types/base.mjs";
-import { isArray, isString, isInstance, isIterable } from "../types/is.mjs";
-import { Observer } from "../types/observer.mjs";
-import { ProxyObserver } from "../types/proxyobserver.mjs";
-import { validateArray, validateInstance } from "../types/validate.mjs";
-import { clone } from "../util/clone.mjs";
-import { trimSpaces } from "../util/trimspaces.mjs";
-import { addAttributeToken, addToObjectLink } from "./attributes.mjs";
-import { updaterTransformerMethodsSymbol } from "./customelement.mjs";
-import { findTargetElementFromEvent } from "./events.mjs";
-import { findDocumentTemplate } from "./template.mjs";
-import { getWindow } from "./util.mjs";
-
-export { Updater, addObjectWithUpdaterToElement };
+import {Base} from "../types/base.mjs";
+import {isArray, isString, isInstance, isIterable} from "../types/is.mjs";
+import {Observer} from "../types/observer.mjs";
+import {ProxyObserver} from "../types/proxyobserver.mjs";
+import {validateArray, validateInstance} from "../types/validate.mjs";
+import {clone} from "../util/clone.mjs";
+import {trimSpaces} from "../util/trimspaces.mjs";
+import {addAttributeToken, addToObjectLink} from "./attributes.mjs";
+import {updaterTransformerMethodsSymbol} from "./customelement.mjs";
+import {findTargetElementFromEvent} from "./events.mjs";
+import {findDocumentTemplate} from "./template.mjs";
+import {getWindow} from "./util.mjs";
+
+export {Updater, addObjectWithUpdaterToElement};
/**
* The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
@@ -68,190 +68,190 @@ export { Updater, addObjectWithUpdaterToElement };
* @summary The updater class connects an object with the dom
*/
class Updater extends Base {
- /**
- * @since 1.8.0
- * @param {HTMLElement} element
- * @param {object|ProxyObserver|undefined} subject
- * @throws {TypeError} value is not a object
- * @throws {TypeError} value is not an instance of HTMLElement
- * @see {@link Monster.DOM.findDocumentTemplate}
- */
- constructor(element, subject) {
- super();
-
- /**
- * @type {HTMLElement}
- */
- if (subject === undefined) subject = {};
- if (!isInstance(subject, ProxyObserver)) {
- subject = new ProxyObserver(subject);
- }
-
- this[internalSymbol] = {
- element: validateInstance(element, HTMLElement),
- last: {},
- callbacks: new Map(),
- eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
- subject: subject,
- };
-
- this[internalSymbol].callbacks.set(
- "checkstate",
- getCheckStateCallback.call(this),
- );
-
- this[internalSymbol].subject.attachObserver(
- new Observer(() => {
- const s = this[internalSymbol].subject.getRealSubject();
-
- const diffResult = diff(this[internalSymbol].last, s);
- this[internalSymbol].last = clone(s);
-
- const promises = [];
-
- for (const [, change] of Object.entries(diffResult)) {
- promises.push(
- new Promise((resolve, reject) => {
- getWindow().requestAnimationFrame(() => {
- try {
- removeElement.call(this, change);
- insertElement.call(this, change);
- updateContent.call(this, change);
- updateAttributes.call(this, change);
-
- resolve();
- } catch (error) {
- reject(error);
- }
- });
- }),
- );
- }
-
- return Promise.all(promises);
- }),
- );
- }
-
- /**
- * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
- *
- * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
- * @since 1.9.0
- * @param {Array} types
- * @return {Updater}
- */
- setEventTypes(types) {
- this[internalSymbol].eventTypes = validateArray(types);
- return this;
- }
-
- /**
- * With this method, the eventlisteners are hooked in and the magic begins.
- *
- * ```js
- * updater.run().then(() => {
- * updater.enableEventProcessing();
- * });
- * ```
- *
- * @since 1.9.0
- * @return {Updater}
- * @throws {Error} the bind argument must start as a value with a path
- */
- enableEventProcessing() {
- this.disableEventProcessing();
-
- for (const type of this[internalSymbol].eventTypes) {
- // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- this[internalSymbol].element.addEventListener(
- type,
- getControlEventHandler.call(this),
- {
- capture: true,
- passive: true,
- },
- );
- }
-
- return this;
- }
-
- /**
- * This method turns off the magic or who loves it more profane it removes the eventListener.
- *
- * @since 1.9.0
- * @return {Updater}
- */
- disableEventProcessing() {
- for (const type of this[internalSymbol].eventTypes) {
- this[internalSymbol].element.removeEventListener(
- type,
- getControlEventHandler.call(this),
- );
- }
-
- return this;
- }
-
- /**
- * The run method must be called for the update to start working.
- * The method ensures that changes are detected.
- *
- * ```js
- * updater.run().then(() => {
- * updater.enableEventProcessing();
- * });
- * ```
- *
- * @summary Let the magic begin
- * @return {Promise}
- */
- run() {
- // the key __init__has no further meaning and is only
- // used to create the diff for empty objects.
- this[internalSymbol].last = { __init__: true };
- return this[internalSymbol].subject.notifyObservers();
- }
-
- /**
- * Gets the values of bound elements and changes them in subject
- *
- * @since 1.27.0
- * @return {Monster.DOM.Updater}
- */
- retrieve() {
- retrieveFromBindings.call(this);
- return this;
- }
-
- /**
- * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
- * However, if you passed a simple object, here you will get a proxy for that object.
- *
- * For changes, the ProxyObserver must be used.
- *
- * @since 1.8.0
- * @return {Proxy}
- */
- getSubject() {
- return this[internalSymbol].subject.getSubject();
- }
-
- /**
- * This method can be used to register commands that can be called via call: instruction.
- * This can be used to provide a pipe with its own functionality.
- *
- * @param {string} name
- * @param {function} callback
- * @return {Transformer}
- * @throws {TypeError} value is not a string
- * @throws {TypeError} value is not a function
- */
- setCallback(name, callback) {
- this[internalSymbol].callbacks.set(name, callback);
- return this;
- }
+ /**
+ * @since 1.8.0
+ * @param {HTMLElement} element
+ * @param {object|ProxyObserver|undefined} subject
+ * @throws {TypeError} value is not a object
+ * @throws {TypeError} value is not an instance of HTMLElement
+ * @see {@link Monster.DOM.findDocumentTemplate}
+ */
+ constructor(element, subject) {
+ super();
+
+ /**
+ * @type {HTMLElement}
+ */
+ if (subject === undefined) subject = {};
+ if (!isInstance(subject, ProxyObserver)) {
+ subject = new ProxyObserver(subject);
+ }
+
+ this[internalSymbol] = {
+ element: validateInstance(element, HTMLElement),
+ last: {},
+ callbacks: new Map(),
+ eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
+ subject: subject,
+ };
+
+ this[internalSymbol].callbacks.set(
+ "checkstate",
+ getCheckStateCallback.call(this),
+ );
+
+ this[internalSymbol].subject.attachObserver(
+ new Observer(() => {
+ const s = this[internalSymbol].subject.getRealSubject();
+
+ const diffResult = diff(this[internalSymbol].last, s);
+ this[internalSymbol].last = clone(s);
+
+ const promises = [];
+
+ for (const [, change] of Object.entries(diffResult)) {
+ promises.push(
+ new Promise((resolve, reject) => {
+ getWindow().requestAnimationFrame(() => {
+ try {
+ removeElement.call(this, change);
+ insertElement.call(this, change);
+ updateContent.call(this, change);
+ updateAttributes.call(this, change);
+
+ resolve();
+ } catch (error) {
+ reject(error);
+ }
+ });
+ }),
+ );
+ }
+
+ return Promise.all(promises);
+ }),
+ );
+ }
+
+ /**
+ * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
+ *
+ * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
+ * @since 1.9.0
+ * @param {Array} types
+ * @return {Updater}
+ */
+ setEventTypes(types) {
+ this[internalSymbol].eventTypes = validateArray(types);
+ return this;
+ }
+
+ /**
+ * With this method, the eventlisteners are hooked in and the magic begins.
+ *
+ * ```js
+ * updater.run().then(() => {
+ * updater.enableEventProcessing();
+ * });
+ * ```
+ *
+ * @since 1.9.0
+ * @return {Updater}
+ * @throws {Error} the bind argument must start as a value with a path
+ */
+ enableEventProcessing() {
+ this.disableEventProcessing();
+
+ for (const type of this[internalSymbol].eventTypes) {
+ // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+ this[internalSymbol].element.addEventListener(
+ type,
+ getControlEventHandler.call(this),
+ {
+ capture: true,
+ passive: true,
+ },
+ );
+ }
+
+ return this;
+ }
+
+ /**
+ * This method turns off the magic or who loves it more profane it removes the eventListener.
+ *
+ * @since 1.9.0
+ * @return {Updater}
+ */
+ disableEventProcessing() {
+ for (const type of this[internalSymbol].eventTypes) {
+ this[internalSymbol].element.removeEventListener(
+ type,
+ getControlEventHandler.call(this),
+ );
+ }
+
+ return this;
+ }
+
+ /**
+ * The run method must be called for the update to start working.
+ * The method ensures that changes are detected.
+ *
+ * ```js
+ * updater.run().then(() => {
+ * updater.enableEventProcessing();
+ * });
+ * ```
+ *
+ * @summary Let the magic begin
+ * @return {Promise}
+ */
+ run() {
+ // the key __init__has no further meaning and is only
+ // used to create the diff for empty objects.
+ this[internalSymbol].last = {__init__: true};
+ return this[internalSymbol].subject.notifyObservers();
+ }
+
+ /**
+ * Gets the values of bound elements and changes them in subject
+ *
+ * @since 1.27.0
+ * @return {Monster.DOM.Updater}
+ */
+ retrieve() {
+ retrieveFromBindings.call(this);
+ return this;
+ }
+
+ /**
+ * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
+ * However, if you passed a simple object, here you will get a proxy for that object.
+ *
+ * For changes, the ProxyObserver must be used.
+ *
+ * @since 1.8.0
+ * @return {Proxy}
+ */
+ getSubject() {
+ return this[internalSymbol].subject.getSubject();
+ }
+
+ /**
+ * This method can be used to register commands that can be called via call: instruction.
+ * This can be used to provide a pipe with its own functionality.
+ *
+ * @param {string} name
+ * @param {function} callback
+ * @return {Transformer}
+ * @throws {TypeError} value is not a string
+ * @throws {TypeError} value is not a function
+ */
+ setCallback(name, callback) {
+ this[internalSymbol].callbacks.set(name, callback);
+ return this;
+ }
}
/**
@@ -262,20 +262,20 @@ class Updater extends Base {
* @this Updater
*/
function getCheckStateCallback() {
- return function (current) {
- // this is a reference to the current object (therefore no array function here)
- if (this instanceof HTMLInputElement) {
- if (["radio", "checkbox"].indexOf(this.type) !== -1) {
- return `${this.value}` === `${current}` ? "true" : undefined;
- }
- } else if (this instanceof HTMLOptionElement) {
- if (isArray(current) && current.indexOf(this.value) !== -1) {
- return "true";
- }
-
- return undefined;
- }
- };
+ return function (current) {
+ // this is a reference to the current object (therefore no array function here)
+ if (this instanceof HTMLInputElement) {
+ if (["radio", "checkbox"].indexOf(this.type) !== -1) {
+ return `${this.value}` === `${current}` ? "true" : undefined;
+ }
+ } else if (this instanceof HTMLOptionElement) {
+ if (isArray(current) && current.indexOf(this.value) !== -1) {
+ return "true";
+ }
+
+ return undefined;
+ }
+ };
}
/**
@@ -290,27 +290,27 @@ const symbol = Symbol("@schukai/monster/updater@@EventHandler");
* @throws {Error} the bind argument must start as a value with a path
*/
function getControlEventHandler() {
- if (this[symbol]) {
- return this[symbol];
- }
-
- /**
- * @throws {Error} the bind argument must start as a value with a path.
- * @throws {Error} unsupported object
- * @param {Event} event
- */
- this[symbol] = (event) => {
- const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
-
- if (element === undefined) {
- return;
- }
- queueMicrotask(() => {
- retrieveAndSetValue.call(this, element);
- });
- };
-
- return this[symbol];
+ if (this[symbol]) {
+ return this[symbol];
+ }
+
+ /**
+ * @throws {Error} the bind argument must start as a value with a path.
+ * @throws {Error} unsupported object
+ * @param {Event} event
+ */
+ this[symbol] = (event) => {
+ const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
+
+ if (element === undefined) {
+ return;
+ }
+ queueMicrotask(() => {
+ retrieveAndSetValue.call(this, element);
+ });
+ };
+
+ return this[symbol];
}
/**
@@ -320,101 +320,101 @@ function getControlEventHandler() {
* @private
*/
function retrieveAndSetValue(element) {
- const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
-
- let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
- if (path === null)
- throw new Error("the bind argument must start as a value with a path");
-
- if (path.indexOf("path:") !== 0) {
- throw new Error("the bind argument must start as a value with a path");
- }
-
- path = path.substring(5); // remove path: from the string
-
- let value;
-
- if (element instanceof HTMLInputElement) {
- switch (element.type) {
- case "checkbox":
- value = element.checked ? element.value : undefined;
- break;
- default:
- value = element.value;
- break;
- }
- } else if (element instanceof HTMLTextAreaElement) {
- value = element.value;
- } else if (element instanceof HTMLSelectElement) {
- switch (element.type) {
- case "select-one":
- value = element.value;
- break;
- case "select-multiple":
- value = element.value;
-
- let options = element?.selectedOptions;
- if (options === undefined)
- options = element.querySelectorAll(":scope option:checked");
- value = Array.from(options).map(({ value }) => value);
-
- break;
- }
-
- // values from custom elements
- } else if (
- (element?.constructor?.prototype &&
- !!Object.getOwnPropertyDescriptor(
- element.constructor.prototype,
- "value",
- )?.["get"]) ||
- element.hasOwnProperty("value")
- ) {
- value = element?.["value"];
- } else {
- throw new Error("unsupported object");
- }
-
- if (isString(value)) {
- const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
- switch (type) {
- case "number":
- case "int":
- case "float":
- case "integer":
- value = Number(value);
- if (isNaN(value)) {
- value = 0;
- }
- break;
- case "boolean":
- case "bool":
- case "checkbox":
- value = value === "true" || value === "1" || value === "on";
- break;
- case "array":
- case "list":
- value = value.split(",");
- break;
- case "object":
- case "json":
- value = JSON.parse(value);
- break;
- default:
- break;
- }
- }
-
- const copy = clone(this[internalSymbol].subject.getRealSubject());
-
- const pf = new Pathfinder(copy);
- pf.setVia(path, value);
-
- const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
-
- if (diffResult.length > 0) {
- pathfinder.setVia(path, value);
- }
+ const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
+
+ let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
+ if (path === null)
+ throw new Error("the bind argument must start as a value with a path");
+
+ if (path.indexOf("path:") !== 0) {
+ throw new Error("the bind argument must start as a value with a path");
+ }
+
+ path = path.substring(5); // remove path: from the string
+
+ let value;
+
+ if (element instanceof HTMLInputElement) {
+ switch (element.type) {
+ case "checkbox":
+ value = element.checked ? element.value : undefined;
+ break;
+ default:
+ value = element.value;
+ break;
+ }
+ } else if (element instanceof HTMLTextAreaElement) {
+ value = element.value;
+ } else if (element instanceof HTMLSelectElement) {
+ switch (element.type) {
+ case "select-one":
+ value = element.value;
+ break;
+ case "select-multiple":
+ value = element.value;
+
+ let options = element?.selectedOptions;
+ if (options === undefined)
+ options = element.querySelectorAll(":scope option:checked");
+ value = Array.from(options).map(({value}) => value);
+
+ break;
+ }
+
+ // values from custom elements
+ } else if (
+ (element?.constructor?.prototype &&
+ !!Object.getOwnPropertyDescriptor(
+ element.constructor.prototype,
+ "value",
+ )?.["get"]) ||
+ element.hasOwnProperty("value")
+ ) {
+ value = element?.["value"];
+ } else {
+ throw new Error("unsupported object");
+ }
+
+ if (isString(value)) {
+ const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
+ switch (type) {
+ case "number":
+ case "int":
+ case "float":
+ case "integer":
+ value = Number(value);
+ if (isNaN(value)) {
+ value = 0;
+ }
+ break;
+ case "boolean":
+ case "bool":
+ case "checkbox":
+ value = value === "true" || value === "1" || value === "on";
+ break;
+ case "array":
+ case "list":
+ value = value.split(",");
+ break;
+ case "object":
+ case "json":
+ value = JSON.parse(value);
+ break;
+ default:
+ break;
+ }
+ }
+
+ const copy = clone(this[internalSymbol].subject.getRealSubject());
+
+ const pf = new Pathfinder(copy);
+ pf.setVia(path, value);
+
+ const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
+
+ if (diffResult.length > 0) {
+ pathfinder.setVia(path, value);
+ }
}
/**
@@ -424,15 +424,15 @@ function retrieveAndSetValue(element) {
* @private
*/
function retrieveFromBindings() {
- if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
- retrieveAndSetValue.call(this, this[internalSymbol].element);
- }
-
- for (const [, element] of this[internalSymbol].element
- .querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
- .entries()) {
- retrieveAndSetValue.call(this, element);
- }
+ if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
+ retrieveAndSetValue.call(this, this[internalSymbol].element);
+ }
+
+ for (const [, element] of this[internalSymbol].element
+ .querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
+ .entries()) {
+ retrieveAndSetValue.call(this, element);
+ }
}
/**
@@ -443,11 +443,11 @@ function retrieveFromBindings() {
* @return {void}
*/
function removeElement(change) {
- for (const [, element] of this[internalSymbol].element
- .querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
- .entries()) {
- element.parentNode.removeChild(element);
- }
+ for (const [, element] of this[internalSymbol].element
+ .querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
+ .entries()) {
+ element.parentNode.removeChild(element);
+ }
}
/**
@@ -463,133 +463,133 @@ function removeElement(change) {
* @this Updater
*/
function insertElement(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
+ const subject = this[internalSymbol].subject.getRealSubject();
- const mem = new WeakSet();
- let wd = 0;
+ const mem = new WeakSet();
+ let wd = 0;
- const container = this[internalSymbol].element;
+ const container = this[internalSymbol].element;
- while (true) {
- let found = false;
- wd++;
-
- const p = clone(change?.["path"]);
- if (!isArray(p)) return;
-
- while (p.length > 0) {
- const current = p.join(".");
-
- let iterator = new Set();
- const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
-
- const e = container.querySelectorAll(query);
-
- if (e.length > 0) {
- iterator = new Set([...e]);
- }
-
- if (container.matches(query)) {
- iterator.add(container);
- }
-
- for (const [, containerElement] of iterator.entries()) {
- if (mem.has(containerElement)) continue;
- mem.add(containerElement);
-
- found = true;
-
- const attributes = containerElement.getAttribute(
- ATTRIBUTE_UPDATER_INSERT,
- );
- if (attributes === null) continue;
-
- const def = trimSpaces(attributes);
- const i = def.indexOf(" ");
- const key = trimSpaces(def.substr(0, i));
- const refPrefix = `${key}-`;
- const cmd = trimSpaces(def.substr(i));
-
- // this case is actually excluded by the query but is nevertheless checked again here
- if (cmd.indexOf("|") > 0) {
- throw new Error("pipes are not allowed when cloning a node.");
- }
-
- const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f);
- });
-
- let value;
- try {
- containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
-
- const dataPath = cmd.split(":").pop();
-
- let insertPoint;
- if (containerElement.hasChildNodes()) {
- insertPoint = containerElement.lastChild;
- }
-
- if (!isIterable(value)) {
- throw new Error("the value is not iterable");
- }
-
- const available = new Set();
-
- for (const [i] of Object.entries(value)) {
- const ref = refPrefix + i;
- const currentPath = `${dataPath}.${i}`;
-
- available.add(ref);
- const refElement = containerElement.querySelector(
- `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
- );
-
- if (refElement instanceof HTMLElement) {
- insertPoint = refElement;
- continue;
- }
-
- appendNewDocumentFragment(containerElement, key, ref, currentPath);
- }
-
- const nodes = containerElement.querySelectorAll(
- `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
- );
-
- for (const [, node] of Object.entries(nodes)) {
- if (
- !available.has(
- node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
- )
- ) {
- try {
- containerElement.removeChild(node);
- } catch (e) {
- containerElement.setAttribute(
- ATTRIBUTE_ERRORMESSAGE,
- `${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
- e.message
- }`.trim(),
- );
- }
- }
- }
- }
-
- p.pop();
- }
-
- if (found === false) break;
- if (wd++ > 200) {
- throw new Error("the maximum depth for the recursion is reached.");
- }
- }
+ while (true) {
+ let found = false;
+ wd++;
+
+ const p = clone(change?.["path"]);
+ if (!isArray(p)) return;
+
+ while (p.length > 0) {
+ const current = p.join(".");
+
+ let iterator = new Set();
+ const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
+
+ const e = container.querySelectorAll(query);
+
+ if (e.length > 0) {
+ iterator = new Set([...e]);
+ }
+
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
+
+ for (const [, containerElement] of iterator.entries()) {
+ if (mem.has(containerElement)) continue;
+ mem.add(containerElement);
+
+ found = true;
+
+ const attributes = containerElement.getAttribute(
+ ATTRIBUTE_UPDATER_INSERT,
+ );
+ if (attributes === null) continue;
+
+ const def = trimSpaces(attributes);
+ const i = def.indexOf(" ");
+ const key = trimSpaces(def.substr(0, i));
+ const refPrefix = `${key}-`;
+ const cmd = trimSpaces(def.substr(i));
+
+ // this case is actually excluded by the query but is nevertheless checked again here
+ if (cmd.indexOf("|") > 0) {
+ throw new Error("pipes are not allowed when cloning a node.");
+ }
+
+ const pipe = new Pipe(cmd);
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f);
+ });
+
+ let value;
+ try {
+ containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
+
+ const dataPath = cmd.split(":").pop();
+
+ let insertPoint;
+ if (containerElement.hasChildNodes()) {
+ insertPoint = containerElement.lastChild;
+ }
+
+ if (!isIterable(value)) {
+ throw new Error("the value is not iterable");
+ }
+
+ const available = new Set();
+
+ for (const [i] of Object.entries(value)) {
+ const ref = refPrefix + i;
+ const currentPath = `${dataPath}.${i}`;
+
+ available.add(ref);
+ const refElement = containerElement.querySelector(
+ `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
+ );
+
+ if (refElement instanceof HTMLElement) {
+ insertPoint = refElement;
+ continue;
+ }
+
+ appendNewDocumentFragment(containerElement, key, ref, currentPath);
+ }
+
+ const nodes = containerElement.querySelectorAll(
+ `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
+ );
+
+ for (const [, node] of Object.entries(nodes)) {
+ if (
+ !available.has(
+ node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
+ )
+ ) {
+ try {
+ containerElement.removeChild(node);
+ } catch (e) {
+ containerElement.setAttribute(
+ ATTRIBUTE_ERRORMESSAGE,
+ `${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+ e.message
+ }`.trim(),
+ );
+ }
+ }
+ }
+ }
+
+ p.pop();
+ }
+
+ if (found === false) break;
+ if (wd++ > 200) {
+ throw new Error("the maximum depth for the recursion is reached.");
+ }
+ }
}
/**
@@ -604,17 +604,17 @@ function insertElement(change) {
* @throws {Error} no template was found with the specified key.
*/
function appendNewDocumentFragment(container, key, ref, path) {
- const template = findDocumentTemplate(key, container);
+ const template = findDocumentTemplate(key, container);
- const nodes = template.createDocumentFragment();
- for (const [, node] of Object.entries(nodes.childNodes)) {
- if (node instanceof HTMLElement) {
- applyRecursive(node, key, path);
- node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
- }
+ const nodes = template.createDocumentFragment();
+ for (const [, node] of Object.entries(nodes.childNodes)) {
+ if (node instanceof HTMLElement) {
+ applyRecursive(node, key, path);
+ node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
+ }
- container.appendChild(node);
- }
+ container.appendChild(node);
+ }
}
/**
@@ -627,27 +627,27 @@ function appendNewDocumentFragment(container, key, ref, path) {
* @return {void}
*/
function applyRecursive(node, key, path) {
- if (node instanceof HTMLElement) {
- if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
- const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
- node.setAttribute(
- ATTRIBUTE_UPDATER_REPLACE,
- value.replaceAll(`path:${key}`, `path:${path}`),
- );
- }
-
- if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
- const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
- node.setAttribute(
- ATTRIBUTE_UPDATER_ATTRIBUTES,
- value.replaceAll(`path:${key}`, `path:${path}`),
- );
- }
-
- for (const [, child] of Object.entries(node.childNodes)) {
- applyRecursive(child, key, path);
- }
- }
+ if (node instanceof HTMLElement) {
+ if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
+ const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+ node.setAttribute(
+ ATTRIBUTE_UPDATER_REPLACE,
+ value.replaceAll(`path:${key}`, `path:${path}`),
+ );
+ }
+
+ if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+ const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+ node.setAttribute(
+ ATTRIBUTE_UPDATER_ATTRIBUTES,
+ value.replaceAll(`path:${key}`, `path:${path}`),
+ );
+ }
+
+ for (const [, child] of Object.entries(node.childNodes)) {
+ applyRecursive(child, key, path);
+ }
+ }
}
/**
@@ -659,19 +659,19 @@ function applyRecursive(node, key, path) {
* @this Updater
*/
function updateContent(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
-
- const p = clone(change?.["path"]);
- runUpdateContent.call(this, this[internalSymbol].element, p, subject);
-
- const slots = this[internalSymbol].element.querySelectorAll("slot");
- if (slots.length > 0) {
- for (const [, slot] of Object.entries(slots)) {
- for (const [, element] of Object.entries(slot.assignedNodes())) {
- runUpdateContent.call(this, element, p, subject);
- }
- }
- }
+ const subject = this[internalSymbol].subject.getRealSubject();
+
+ const p = clone(change?.["path"]);
+ runUpdateContent.call(this, this[internalSymbol].element, p, subject);
+
+ const slots = this[internalSymbol].element.querySelectorAll("slot");
+ if (slots.length > 0) {
+ for (const [, slot] of Object.entries(slots)) {
+ for (const [, element] of Object.entries(slot.assignedNodes())) {
+ runUpdateContent.call(this, element, p, subject);
+ }
+ }
+ }
}
/**
@@ -684,69 +684,69 @@ function updateContent(change) {
* @return {void}
*/
function runUpdateContent(container, parts, subject) {
- if (!isArray(parts)) return;
- if (!(container instanceof HTMLElement)) return;
- parts = clone(parts);
-
- const mem = new WeakSet();
-
- while (parts.length > 0) {
- const current = parts.join(".");
- parts.pop();
-
- // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
- const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
- const e = container.querySelectorAll(`${query}`);
-
- const iterator = new Set([...e]);
-
- if (container.matches(query)) {
- iterator.add(container);
- }
-
- /**
- * @type {HTMLElement}
- */
- for (const [element] of iterator.entries()) {
- if (mem.has(element)) return;
- mem.add(element);
-
- const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
- const cmd = trimSpaces(attributes);
-
- const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f);
- });
-
- let value;
- try {
- element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
-
- if (value instanceof HTMLElement) {
- while (element.firstChild) {
- element.removeChild(element.firstChild);
- }
-
- try {
- element.appendChild(value);
- } catch (e) {
- element.setAttribute(
- ATTRIBUTE_ERRORMESSAGE,
- `${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
- e.message
- }`.trim(),
- );
- }
- } else {
- element.innerHTML = value;
- }
- }
- }
+ if (!isArray(parts)) return;
+ if (!(container instanceof HTMLElement)) return;
+ parts = clone(parts);
+
+ const mem = new WeakSet();
+
+ while (parts.length > 0) {
+ const current = parts.join(".");
+ parts.pop();
+
+ // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
+ const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
+ const e = container.querySelectorAll(`${query}`);
+
+ const iterator = new Set([...e]);
+
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
+
+ /**
+ * @type {HTMLElement}
+ */
+ for (const [element] of iterator.entries()) {
+ if (mem.has(element)) return;
+ mem.add(element);
+
+ const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+ const cmd = trimSpaces(attributes);
+
+ const pipe = new Pipe(cmd);
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f);
+ });
+
+ let value;
+ try {
+ element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
+
+ if (value instanceof HTMLElement) {
+ while (element.firstChild) {
+ element.removeChild(element.firstChild);
+ }
+
+ try {
+ element.appendChild(value);
+ } catch (e) {
+ element.setAttribute(
+ ATTRIBUTE_ERRORMESSAGE,
+ `${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+ e.message
+ }`.trim(),
+ );
+ }
+ } else {
+ element.innerHTML = value;
+ }
+ }
+ }
}
/**
@@ -756,9 +756,9 @@ function runUpdateContent(container, parts, subject) {
* @return {void}
*/
function updateAttributes(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
- const p = clone(change?.["path"]);
- runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
+ const subject = this[internalSymbol].subject.getRealSubject();
+ const p = clone(change?.["path"]);
+ runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
}
/**
@@ -770,70 +770,70 @@ function updateAttributes(change) {
* @this Updater
*/
function runUpdateAttributes(container, parts, subject) {
- if (!isArray(parts)) return;
- parts = clone(parts);
+ if (!isArray(parts)) return;
+ parts = clone(parts);
- const mem = new WeakSet();
+ const mem = new WeakSet();
- while (parts.length > 0) {
- const current = parts.join(".");
- parts.pop();
+ while (parts.length > 0) {
+ const current = parts.join(".");
+ parts.pop();
- let iterator = new Set();
+ let iterator = new Set();
- const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
+ const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
- const e = container.querySelectorAll(query);
+ const e = container.querySelectorAll(query);
- if (e.length > 0) {
- iterator = new Set([...e]);
- }
+ if (e.length > 0) {
+ iterator = new Set([...e]);
+ }
- if (container.matches(query)) {
- iterator.add(container);
- }
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
- for (const [element] of iterator.entries()) {
- if (mem.has(element)) return;
- mem.add(element);
+ for (const [element] of iterator.entries()) {
+ if (mem.has(element)) return;
+ mem.add(element);
- // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
- if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
- continue;
- }
+ // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
+ if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+ continue;
+ }
- const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+ const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
- for (let [, def] of Object.entries(attributes.split(","))) {
- def = trimSpaces(def);
- const i = def.indexOf(" ");
- const name = trimSpaces(def.substr(0, i));
- const cmd = trimSpaces(def.substr(i));
+ for (let [, def] of Object.entries(attributes.split(","))) {
+ def = trimSpaces(def);
+ const i = def.indexOf(" ");
+ const name = trimSpaces(def.substr(0, i));
+ const cmd = trimSpaces(def.substr(i));
- const pipe = new Pipe(cmd);
+ const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f, element);
- });
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f, element);
+ });
- let value;
- try {
- element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
+ let value;
+ try {
+ element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
- if (value === undefined) {
- element.removeAttribute(name);
- } else if (element.getAttribute(name) !== value) {
- element.setAttribute(name, value);
- }
+ if (value === undefined) {
+ element.removeAttribute(name);
+ } else if (element.getAttribute(name) !== value) {
+ element.setAttribute(name, value);
+ }
- handleInputControlAttributeUpdate.call(this, element, name, value);
- }
- }
- }
+ handleInputControlAttributeUpdate.call(this, element, name, value);
+ }
+ }
+ }
}
/**
@@ -846,58 +846,58 @@ function runUpdateAttributes(container, parts, subject) {
*/
function handleInputControlAttributeUpdate(element, name, value) {
- if (element instanceof HTMLSelectElement) {
- switch (element.type) {
- case "select-multiple":
- for (const [index, opt] of Object.entries(element.options)) {
- if (value.indexOf(opt.value) !== -1) {
- opt.selected = true;
- } else {
- opt.selected = false;
- }
- }
-
- break;
- case "select-one":
- // Only one value may be selected
-
- for (const [index, opt] of Object.entries(element.options)) {
- if (opt.value === value) {
- element.selectedIndex = index;
- break;
- }
- }
-
- break;
- }
- } else if (element instanceof HTMLInputElement) {
- switch (element.type) {
- case "radio":
- if (name === "checked") {
- element.checked = value !== undefined;
- }
-
- break;
-
- case "checkbox":
- if (name === "checked") {
- element.checked = value !== undefined;
- }
-
- break;
- case "text":
- default:
- if (name === "value") {
- element.value = value === undefined ? "" : value;
- }
-
- break;
- }
- } else if (element instanceof HTMLTextAreaElement) {
- if (name === "value") {
- element.value = value === undefined ? "" : value;
- }
- }
+ if (element instanceof HTMLSelectElement) {
+ switch (element.type) {
+ case "select-multiple":
+ for (const [index, opt] of Object.entries(element.options)) {
+ if (value.indexOf(opt.value) !== -1) {
+ opt.selected = true;
+ } else {
+ opt.selected = false;
+ }
+ }
+
+ break;
+ case "select-one":
+ // Only one value may be selected
+
+ for (const [index, opt] of Object.entries(element.options)) {
+ if (opt.value === value) {
+ element.selectedIndex = index;
+ break;
+ }
+ }
+
+ break;
+ }
+ } else if (element instanceof HTMLInputElement) {
+ switch (element.type) {
+ case "radio":
+ if (name === "checked") {
+ element.checked = value !== undefined;
+ }
+
+ break;
+
+ case "checkbox":
+ if (name === "checked") {
+ element.checked = value !== undefined;
+ }
+
+ break;
+ case "text":
+ default:
+ if (name === "value") {
+ element.value = value === undefined ? "" : value;
+ }
+
+ break;
+ }
+ } else if (element instanceof HTMLTextAreaElement) {
+ if (name === "value") {
+ element.value = value === undefined ? "" : value;
+ }
+ }
}
/**
@@ -916,83 +916,83 @@ function handleInputControlAttributeUpdate(element, name, value) {
* @throws {TypeError} symbol must be an instance of Symbol
*/
function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
- if (!(this instanceof HTMLElement)) {
- throw new TypeError(
- "the context of this function must be an instance of HTMLElement",
- );
- }
-
- if (!(typeof symbol === "symbol")) {
- throw new TypeError("symbol must be an instance of Symbol");
- }
-
- const updaters = new Set();
-
- if (elements instanceof NodeList) {
- elements = new Set([...elements]);
- } else if (elements instanceof HTMLElement) {
- elements = new Set([elements]);
- } else if (elements instanceof Set) {
- } else {
- throw new TypeError(
- `elements is not a valid type. (actual: ${typeof elements})`,
- );
- }
-
- const result = [];
-
- const updaterCallbacks = [];
- const cb = this?.[updaterTransformerMethodsSymbol];
- if (this instanceof HTMLElement && typeof cb === "function") {
- const callbacks = cb.call(this);
- if (typeof callbacks === "object") {
- for (const [name, callback] of Object.entries(callbacks)) {
- if (typeof callback === "function") {
- updaterCallbacks.push([name, callback]);
- } else {
- addAttributeToken(
- this,
- ATTRIBUTE_ERRORMESSAGE,
- `onUpdaterPipeCallbacks: ${name} is not a function`,
- );
- }
- }
- } else {
- addAttributeToken(
- this,
- ATTRIBUTE_ERRORMESSAGE,
- `onUpdaterPipeCallbacks do not return an object with functions`,
- );
- }
- }
-
- elements.forEach((element) => {
- if (!(element instanceof HTMLElement)) return;
- if (element instanceof HTMLTemplateElement) return;
-
- const u = new Updater(element, object);
- updaters.add(u);
-
- if (updaterCallbacks.length > 0) {
- for (const [name, callback] of updaterCallbacks) {
- u.setCallback(name, callback);
- }
- }
-
- result.push(
- u.run().then(() => {
- if (config.eventProcessing === true) {
- u.enableEventProcessing();
- }
-
- return u;
- }),
- );
- });
-
- if (updaters.size > 0) {
- addToObjectLink(this, symbol, updaters);
- }
-
- return result;
+ if (!(this instanceof HTMLElement)) {
+ throw new TypeError(
+ "the context of this function must be an instance of HTMLElement",
+ );
+ }
+
+ if (!(typeof symbol === "symbol")) {
+ throw new TypeError("symbol must be an instance of Symbol");
+ }
+
+ const updaters = new Set();
+
+ if (elements instanceof NodeList) {
+ elements = new Set([...elements]);
+ } else if (elements instanceof HTMLElement) {
+ elements = new Set([elements]);
+ } else if (elements instanceof Set) {
+ } else {
+ throw new TypeError(
+ `elements is not a valid type. (actual: ${typeof elements})`,
+ );
+ }
+
+ const result = [];
+
+ const updaterCallbacks = [];
+ const cb = this?.[updaterTransformerMethodsSymbol];
+ if (this instanceof HTMLElement && typeof cb === "function") {
+ const callbacks = cb.call(this);
+ if (typeof callbacks === "object") {
+ for (const [name, callback] of Object.entries(callbacks)) {
+ if (typeof callback === "function") {
+ updaterCallbacks.push([name, callback]);
+ } else {
+ addAttributeToken(
+ this,
+ ATTRIBUTE_ERRORMESSAGE,
+ `onUpdaterPipeCallbacks: ${name} is not a function`,
+ );
+ }
+ }
+ } else {
+ addAttributeToken(
+ this,
+ ATTRIBUTE_ERRORMESSAGE,
+ `onUpdaterPipeCallbacks do not return an object with functions`,
+ );
+ }
+ }
+
+ elements.forEach((element) => {
+ if (!(element instanceof HTMLElement)) return;
+ if (element instanceof HTMLTemplateElement) return;
+
+ const u = new Updater(element, object);
+ updaters.add(u);
+
+ if (updaterCallbacks.length > 0) {
+ for (const [name, callback] of updaterCallbacks) {
+ u.setCallback(name, callback);
+ }
+ }
+
+ result.push(
+ u.run().then(() => {
+ if (config.eventProcessing === true) {
+ u.enableEventProcessing();
+ }
+
+ return u;
+ }),
+ );
+ });
+
+ if (updaters.size > 0) {
+ addToObjectLink(this, symbol, updaters);
+ }
+
+ return result;
}