@cocreate/events 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.4.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.4.0...v1.4.1) (2023-02-21)
+
+
+### Bug Fixes
+
+* improved key usage ([a92e1f2](https://github.com/CoCreate-app/CoCreate-events/commit/a92e1f25d7b4c83dfa0beb9a7526c9ca3dc184fe))
+
+# [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.1",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",

package/src/index.js

@@ -2,16 +2,16 @@ 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);
 		else {
 			this.initElement(document, 'toggle', ['click']);
 			this.initElement(document, 'click', ['click']);
-			// this.initElement(document, 'hover', ['mouseover', 'mouseout');
-			// this.initElement(document, 'mouseover', ['mouseover');
-			// this.initElement(document, 'mouseout', ['mouseout');
+			this.initElement(document, 'hover', ['mouseover', 'mouseout']);
+			this.initElement(document, 'mouseover', ['mouseover']);
+			this.initElement(document, 'mouseout', ['mouseout']);
 			this.initElement(document, 'input', ['input']);
 			this.initElement(document, 'change', ['change']);
 			this.initElement(document, 'selected', ['click']);
@@ -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(',');
@@ -197,38 +205,77 @@ const CoCreateEvents = {
 };
 
 const eventElements = new Map();
-const elementPrefix = new Map();
-function replaceKey(prefix, element, key, values){
+const eventKeys = new Map();
+
+function replaceKey(prefix, element, key, values) {
+	let currentValue = key
+
 	if (eventElements.has(element)) {
-		key = eventElements.get(element).get(prefix);
+		currentValue = eventElements.get(element).get(key);
 	}
-	let oldValue = key
-	let value = CoCreateEvents.__getNextValue(values, oldValue);
+	let value = CoCreateEvents.__getNextValue(values, currentValue);
+	eventKeys.set(key, value)
+	eventElements.set(element, eventKeys)
 
-	const regex = new RegExp(key, "g");
 	for (let attribute of element.attributes){
+		let newName = attribute.name;
+		let newValue = attribute.value;
 		let attrName = attribute.name;
 		let attrValue = attribute.value;
 		let setAttr = false;
-		if (attrValue.includes(key)){
-			attrValue = attrValue.replace(regex, value);
-			setAttr = true;
+		if (attrValue.includes(currentValue) || attribute.valueKeys && attribute.valueKeys[key]){
+			if (!attribute.originalValue) 
+				attribute.originalValue = attrValue
+			if (!attribute.valueKeys)
+				attribute.valueKeys = {[key]: value}
+			else
+				attribute.valueKeys[key] = value;
+
+			newValue = attribute.originalValue
+			for (let valueKey of Object.keys(attribute.valueKeys)) {
+				const valueKeyRegex = new RegExp(valueKey, "g");
+				newValue = newValue.replace(valueKeyRegex, value);
+			}
+			setAttr = true;	
 		}
-		if (attrName.includes(key)){
-			element.removeAttribute(key);
-			attrName = attrName.replace(regex, value);
-			setAttr = true;
+		if (attrName.includes(currentValue) || attribute.nameKeys && attribute.nameKeys[key]){
+			if (!attribute.originalName) 
+				attribute.originalName = attrName
+			if (!attribute.nameKeys)
+				attribute.nameKeys = {[key]: value}
+			else
+				attribute.nameKeys[key] = value;
+
+			newName = attribute.originalName
+			for (let nameKey of Object.keys(attribute.nameKeys)) {
+				const nameKeyRegex = new RegExp(nameKey, "g");
+				newName = newName.replace(nameKeyRegex, value);
+			}
+
+			element.removeAttribute(attrName);
+			setAttr = true;	
+
 		}
 		if (setAttr)
-			element.setAttribute(attrName, attrValue);
+			element.setAttribute(newName, newValue);
 	}
 	let html = element.innerHTML;
-	if (html.indexOf(key) !== -1){
-		html = html.replace(regex, value);
-		element.innerHTML = html;
+	if (html.indexOf(currentValue) !== -1 || element.htmlKeys && element.htmlKeys[key]) {
+		if (!element.originalHtml) 
+			element.originalHtml = html
+		if (!element.htmlKeys)
+			element.htmlKeys = {[key]: value}
+		else
+			element.htmlKeys[key] = value;
+
+		let newHTML = element.originalHTML
+		for (let elementKey of Object.keys(element.htmlKeys)) {
+			const htmlKeyRegex = new RegExp(elementKey, "g");
+			newHTML = newHTML.replace(htmlKeyRegex, value);
+		}
+
+		element.innerHTML = newHTML;
 	}
-	elementPrefix.set(prefix, value)
-	eventElements.set(element, elementPrefix)
 		
 }