@cocreate/events 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.4.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.3.0...v1.4.0) (2023-02-19)
+
+
+### Features
+
+* debonce ([43748c4](https://github.com/CoCreate-app/CoCreate-events/commit/43748c45b9e76f58aaf1ad11d16964422c028bbc))
+
 # [1.3.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.2.0...v1.3.0) (2023-02-11)
 
 

package/demo/index.html

@@ -62,7 +62,13 @@
 			other content
 		</div>
 		<!-- defining key example -->
-		<div click-target="#testing" click-value="hello, bye" click-key="ty">
+		<!-- <div click-target="#testing" click-value="hello, bye" click-key="ty">
+			<span id="testing" class="{{ty}}">other content</span>
+		</div> -->
+		
+		<!-- defining key example -->
+		<div >
+			<input input-target="#testing" input-value="" input-key="ty">
 			<span id="testing" class="{{ty}}">other content</span>
 		</div>
 	

package/demo/set-value.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Value | CoCreateJS</title>
+  
+  <!-- CoCreate Favicon -->
+  <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+</head>
+<body>
+  <div click-target="#testing" click-value="hello, bye" click-key="ty">
+    <span id="testing" class="{{ty}}">other content</span>
+  </div>
+
+  <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
+  <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
+
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",

package/src/index.js

@@ -2,7 +2,7 @@ import {queryDocumentSelectorAll} from '@cocreate/utils';
 import action from '@cocreate/actions';
 
 const CoCreateEvents = {
-	// ToDo update to support config, ability to add custom prefix, for loop each deafualt and custom prefix to support action
+	// ToDo update to support config, ability to add custom prefix, for loop each defualt and custom prefix to support action
 	init: function(prefix, events) {
 		if (prefix && events)
 			this.initElement(document, prefix, events);
@@ -26,28 +26,34 @@ const CoCreateEvents = {
 		const self = this;
 			
 		events.forEach((eventName) => {
+			let debounce;
 			element.addEventListener(eventName, function(event) {
-				const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
-				if (target) {
-					let attribute = target.getAttribute('actions') || ""
-					if (attribute.includes(prefix))
-						return;
-					// if (target.closest(`[actions*="${prefix}"]`)) 
-					// 	return;
-					self.__updateElements(target, prefix);
-
-					let parentElement = target.parentElement;
-					if (parentElement) {
-						do {
-							parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
-							if (parentElement)
-								self.__updateElements(parentElement, prefix);
+				// ToDo: apply debounce
+				clearTimeout(debounce);
+				debounce = setTimeout(function() {
+					const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
+					if (target) {
+						let attribute = target.getAttribute('actions') || ""
+						if (attribute.includes(prefix))
+							return;
+						// if (target.closest(`[actions*="${prefix}"]`)) 
+						// 	return;
+						self.__updateElements(target, prefix);
+	
+						let parentElement = target.parentElement;
+						if (parentElement) {
+							do {
+								parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
+								if (parentElement)
+									self.__updateElements(parentElement, prefix);
+							}
+							while (parentElement)
+	
 						}
-						while (parentElement)
-
+	
 					}
+					}, 500);
 
-				}
 			});
 		});
 
@@ -64,6 +70,8 @@ const CoCreateEvents = {
 	__updateElements: function(element, prefix) {
 		const self = this;
 		let targetValue = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
+		if (!targetValue && element.value)
+			targetValue = element.getValue()
 		if (!targetValue) return
 		
 		let values = targetValue.split(',');
@@ -198,7 +206,8 @@ const CoCreateEvents = {
 
 const eventElements = new Map();
 const elementPrefix = new Map();
-function replaceKey(prefix, element, key, values){
+function replaceKey(prefix, element, key, values) {
+	// ToDo: improve updating key to prevent unwanted match by storing each attribute that originally had a key to know which attributes to update
 	if (eventElements.has(element)) {
 		key = eventElements.get(element).get(prefix);
 	}