cm-web-modules - npm Package Compare versions

Comparing version 1.14.0 to 1.15.0

examples/todo-app/components/InputComponent.js

@@ -7,3 +7,3 @@ /**
 import {ToDo} from "../model/ToDo.js";
-import {UiComponent} from "../../../src/cm-web-modules/app/UiComponent.js"
+import {UiComponent} from "../../../src/cm-web-modules/app/Component.js"
 
@@ -10,0 +10,0 @@ export class InputComponent extends UiComponent {

examples/todo-app/components/ListOutputComponent.js

@@ -7,3 +7,3 @@ /**
 
-import {UiComponent} from "../../../src/cm-web-modules/app/UiComponent.js"
+import {UiComponent} from "../../../src/cm-web-modules/app/Component.js"
 import {Observe} from "../../../src/cm-web-modules/observe/Observe.js";
@@ -10,0 +10,0 @@ import {EventUtils} from "../../../src/cm-web-modules/utils/EventUtils.js";

examples/todo-bind-component/ToDoComponent.js

@@ -7,3 +7,3 @@ /**
 import {Bind} from "../../node_modules/bind.mjs/src/bind.mjs/Bind.js";
-import {UiComponent} from "../../src/cm-web-modules/app/UiComponent.js"
+import {UiComponent} from "../../src/cm-web-modules/app/Component.js"
 
@@ -10,0 +10,0 @@ export class ToDoComponent extends UiComponent {

examples/todo-component/ToDoComponent.js

@@ -6,3 +6,3 @@ /**
  */
-import {UiComponent} from "../../src/cm-web-modules/app/UiComponent.js"
+import {UiComponent} from "../../src/cm-web-modules/app/Component.js"
 import {Observe} from "../../src/cm-web-modules/observe/Observe.js";
@@ -9,0 +9,0 @@

package.json

 {
   "name": "cm-web-modules",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Collection of clean and small ES6 modules for the web",
@@ -5,0 +5,0 @@ "main": "src/LibraryManager.js",

src/cm-web-modules/app/Component.js

@@ -0,1 +1,3 @@
+import {DomUtils} from "../utils/DomUtils.js"
+
 /**
@@ -14,2 +16,48 @@ * Author and copyright: Stefan Haack (https://shaack.com)
 
+}
+
+export class UiComponent extends Component {
+
+    constructor(context, props = {}, state = {}) {
+        super(props, state)
+        this.context = context
+        this.actions = {}
+    }
+
+    /**
+     * Searches for "data-event-listener" attributes in the HTML, and couples them with actions.
+     * Tag Attributes:
+     *  - `data-event-listener`: The event "click", "change",...
+     *  - `data-action`: The action in this.actions, called on the event
+     *  - `data-delegate`: Query selector, to delegate the event from a child element
+     */
+    addDataEventListeners(context = this.context) {
+        const eventListenerElements = context.querySelectorAll("[data-event-listener]")
+        if(this.props.debug) {
+            console.log("eventListenerElements", context, eventListenerElements)
+        }
+        for (const eventListenerElement of eventListenerElements) {
+            const eventName = eventListenerElement.dataset.eventListener
+            const action = eventListenerElement.dataset.action
+            const delegate = eventListenerElement.dataset.delegate
+            if (!this.actions[action]) {
+                console.error(context, "You have to add the action \"" + action + "\" to your component.")
+            }
+            if (delegate) {
+                DomUtils.delegate(eventListenerElement, eventName, delegate, (target) => {
+                    if(this.props.debug) {
+                        console.log("delegate", action, target)
+                    }
+                    this.actions[action](target)
+                })
+            } else {
+                if(this.props.debug) {
+                    console.log("addEventListener", eventName, action)
+                }
+                eventListenerElement.addEventListener(eventName, this.actions[action].bind(this))
+            }
+        }
+        return this
+    }
+
 }

No alert changes

Worsened metrics

Total package byte prevSize

97212

decreased by-0.21%

Number of package files

50

decreased by-1.96%

Lines of code

1779

decreased by-0.34%

No dependency changes