@cocreate/events 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.5.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.4.1...v1.5.0) (2023-03-15)
+
+
+### Bug Fixes
+
+* add events per element and observer to detect newely added elements ([dcbaa38](https://github.com/CoCreate-app/CoCreate-events/commit/dcbaa38a09fa75ddcf3c969c708fa1dbcf2e3ce4))
+
+
+### Features
+
+* attribute for targeting parent and sibling elements ([842be58](https://github.com/CoCreate-app/CoCreate-events/commit/842be58541401574cd4d093d08468abe39decf9b))
+
 ## [1.4.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.4.0...v1.4.1) (2023-02-21)
 
 

package/demo/index.html

@@ -71,6 +71,11 @@
 			<input input-target="#testing" input-value="" input-key="ty">
 			<span id="testing" class="{{ty}}">other content</span>
 		</div>
+
+		<span id="keyname" clone-data='{"attributes": {"key": "{{keyname}}", "value": ""}}' {{keyname}}="test" style="margin-right:10px; padding:5px">
+			<svg class="svg" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M5 5V0h1v5h5v1H6v5H5V6H0V5h5z" fill-rule="nonzero" fill-opacity="1" fill="#fff" stroke="none"></path></svg>
+		</span>
+		<input placeholder="Search all attributes" input-value input-key="keyname" input-target="#keyname">
 	
         <!--<script src="../dist/CoCreate-events.js"></script>-->
         <script src="../../../CoCreateJS/dist/CoCreate.js"></script>

package/package.json

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

package/src/index.js

@@ -1,5 +1,7 @@
 import {queryDocumentSelectorAll} from '@cocreate/utils';
 import action from '@cocreate/actions';
+import observer from '@cocreate/observer';
+
 
 const CoCreateEvents = {
 	// ToDo update to support config, ability to add custom prefix, for loop each defualt and custom prefix to support action
@@ -24,15 +26,45 @@ const CoCreateEvents = {
 	
 	__initElementEvent: function(element, prefix, events) {
 		const self = this;
-			
+		
+		let selector = `[${prefix}], [${prefix}-value]`
+		let elements = document.querySelectorAll(selector)
+		for (const el of elements) {
+			this.addEvent(el, prefix, events)
+		}
+
+		action.init({
+			name: prefix,
+			endEvent: `${prefix}End`,
+			callback: (btn, data) => {
+				this.__updateElements(btn, prefix)
+			}
+		});
+
+		observer.init({ 
+			name: 'CoCreateEventInit', 
+			observe: ['addedNodes'],
+			target: `[${prefix}], [${prefix}-value]`,
+			callback: function(mutation) {
+				self.addEvent(mutation.target, prefix, events);
+			}
+		});
+		
+
+	},
+	
+	addEvent: function(element, prefix, events) {
+		const self = this;
 		events.forEach((eventName) => {
 			let debounce;
 			element.addEventListener(eventName, function(event) {
 				// ToDo: apply debounce
 				// clearTimeout(debounce);
 				// debounce = setTimeout(function() {
-					const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
+					const target = event.currentTarget
 					if (target) {
+						if (target.id == "testtemplate1" || target.id == "testtemplate2")
+							console.log(target.id)
 						let attribute = target.getAttribute('actions') || ""
 						if (attribute.includes(prefix))
 							return;
@@ -44,8 +76,10 @@ const CoCreateEvents = {
 						if (parentElement) {
 							do {
 								parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
-								if (parentElement)
+								if (parentElement) {
 									self.__updateElements(parentElement, prefix);
+									parentElement = parentElement.parentElement
+								}
 							}
 							while (parentElement)
 	
@@ -53,22 +87,15 @@ const CoCreateEvents = {
 	
 					}
 					// }, 500);
-
+	
 			});
+	
 		});
-
-		action.init({
-			name: prefix,
-			endEvent: `${prefix}End`,
-			callback: (btn, data) => {
-				this.__updateElements(btn, prefix)
-			}
-		});
-
 	},
-	
+
 	__updateElements: function(element, prefix) {
 		const self = this;
+		// ToDo: support empty value when prefix-attribute defined, add and remove the attribute
 		let targetValue = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
 		if (!targetValue && element.value)
 			targetValue = element.getValue()
@@ -82,6 +109,10 @@ const CoCreateEvents = {
 		let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
 		let targetSelector = element.getAttribute(`${prefix}-target`);
 		let targetClosest = element.getAttribute(`${prefix}-closest`);
+		let targetParent = element.getAttribute(`${prefix}-parent`);
+		let targetNext = element.getAttribute(`${prefix}-next`);
+		let targetPrevious = element.getAttribute(`${prefix}-previous`);
+
 		let targetKey = element.getAttribute(`${prefix}-key`);
 
 		let targetGroup = element.getAttribute(`${prefix}-group`);
@@ -97,6 +128,9 @@ const CoCreateEvents = {
 
 				let groupTarget = el.getAttribute(`${prefix}-target`);
 				let groupClosest = el.getAttribute(`${prefix}-closest`);
+				let groupParent = el.getAttribute(`${prefix}-parent`);
+				let groupNext = el.getAttribute(`${prefix}-next`);
+				let groupPrevious = el.getAttribute(`${prefix}-previous`);		
 				let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';	
 				let groupKey = el.getAttribute(`${prefix}-key`)	
 
@@ -111,6 +145,19 @@ const CoCreateEvents = {
 					if (element)
 						self.setValue(prefix, element, groupAttribute, groupValues, groupKey, 'deactivate');
 				}
+				else if (groupParent)
+					el.parentElement.querySelectorAll(groupParent).forEach((el) => 
+						self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
+					);
+				else if (groupNext)
+					el.nextElementSibling.querySelectorAll(groupNext).forEach((el) => 
+						self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
+					);
+				else if (groupPrevious)
+					el.previousElementSibling.querySelectorAll(groupPrevious).forEach((el) => 
+						self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
+					);	
+
 			});
 		}
 
@@ -123,7 +170,20 @@ const CoCreateEvents = {
 			if (/{{\s*([\w\W]+)\s*}}/g.test(targetSelector)) return;
 			targetElements = queryDocumentSelectorAll(targetSelector);
 			targetElements.forEach((el) => self.setValue(prefix, el, targetAttribute, values, targetKey));
-		} else
+		}
+		else if (targetParent)
+			element.parentElement.querySelectorAll(targetParent).forEach((el) => 
+				self.setValue(prefix, el, targetAttribute, values, targetKey)
+			);
+		else if (targetNext)
+			el.nextElementSibling.querySelectorAll(targetNext).forEach((el) => 
+				self.setValue(prefix, el, targetAttribute, values, targetKey)
+			);
+		else if (targetPrevious)
+			el.previousElementSibling.querySelectorAll(targetPrevious).forEach((el) => 
+				self.setValue(prefix, el, targetAttribute, values, targetKey)
+			);	
+		else
 			self.setValue(prefix, element, targetAttribute, values, targetKey);
 
 		document.dispatchEvent(new CustomEvent(`${prefix}End`, {
@@ -174,14 +234,14 @@ const CoCreateEvents = {
 					newValue = ""
 
 				if (attrName === 'class') {
-					if (oldValue != '') {
+					if (oldValue) {
 						element.classList.remove(oldValue);
 						if (values.length === 1) {
 							return;
 						}
 					}
 					
-					if (newValue != '') {
+					if (newValue) {
 						element.classList.add(newValue);
 					}
 				} else if (attrName === 'value') {
@@ -206,6 +266,7 @@ const CoCreateEvents = {
 
 const eventElements = new Map();
 const eventKeys = new Map();
+const elementAttributes = new Map();
 
 function replaceKey(prefix, element, key, values) {
 	let currentValue = key
@@ -217,45 +278,67 @@ function replaceKey(prefix, element, key, values) {
 	eventKeys.set(key, value)
 	eventElements.set(element, eventKeys)
 
+	let attributes = elementAttributes.get(element)
+	if (!attributes) {
+		attributes = {}
+		elementAttributes.set(element, attributes)
+	}
+
+
 	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(currentValue) || attribute.valueKeys && attribute.valueKeys[key]){
-			if (!attribute.originalValue) 
-				attribute.originalValue = attrValue
-			if (!attribute.valueKeys)
-				attribute.valueKeys = {[key]: value}
+
+		if(attrName === 'clone-data')
+			console.log('clone-data')
+		if (attrValue.includes(currentValue) || attributes[attrName] && attributes[attrName].valueKeys && attributes[attrName].valueKeys[key]){
+			if (!attributes[attrName])
+				attributes[attrName] = { originalValue: attrValue }
+			else if (!attributes[attrName].originalValue) 
+				attributes[attrName].originalValue = attrValue
+			if (!attributes[attrName].valueKeys)
+				attributes[attrName].valueKeys = {[key]: value}
 			else
-				attribute.valueKeys[key] = value;
+				attributes[attrName].valueKeys[key] = value;
 
-			newValue = attribute.originalValue
-			for (let valueKey of Object.keys(attribute.valueKeys)) {
+			newValue = attributes[attrName].originalValue
+			for (let valueKey of Object.keys(attributes[attrName].valueKeys)) {
 				const valueKeyRegex = new RegExp(valueKey, "g");
 				newValue = newValue.replace(valueKeyRegex, 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;
+		// if (attrName.includes(currentValue) || attributes[attrName] && attributes[attrName].nameKeys && attributes[attrName].nameKeys[key]){
+		// 	if (!attributes[attrName])
+		// 		attributes[attrName] = { originalName: attrName }
+		// 	else if (!attributes[attrName].originalName) 
+		// 		attributes[attrName].originalName = attrName
 
-			newName = attribute.originalName
-			for (let nameKey of Object.keys(attribute.nameKeys)) {
-				const nameKeyRegex = new RegExp(nameKey, "g");
-				newName = newName.replace(nameKeyRegex, value);
-			}
+		// 	if (!attributes[attrName].nameKeys)
+		// 		attributes[attrName].nameKeys = {[key]: value}
 
-			element.removeAttribute(attrName);
-			setAttr = true;	
+		// 	newName = attributes[attrName].originalName
+		// 	for (let nameKey of Object.keys(attributes[attrName].nameKeys)) {
+		// 		let r
+		// 		if (attrName === nameKey)
+		// 			r = nameKey
+		// 		else
+		// 			r = attributes[attrName].nameKeys[nameKey]
 
-		}
+		// 		const nameKeyRegex = new RegExp(r, "g");
+		// 		newName = newName.replace(nameKeyRegex, value);
+		// 	}
+			
+		// 	attributes[attrName].nameKeys[key] = value;
+
+
+		// 	element.removeAttribute(attrName);
+		// 	setAttr = true;	
+
+		// }
 		if (setAttr)
 			element.setAttribute(newName, newValue);
 	}
@@ -269,12 +352,14 @@ function replaceKey(prefix, element, key, values) {
 			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);
-		}
+		if (newHTML) {
+			for (let elementKey of Object.keys(element.htmlKeys)) {
+				const htmlKeyRegex = new RegExp(elementKey, "g");
+				newHTML = newHTML.replace(htmlKeyRegex, value);
+			}
 
-		element.innerHTML = newHTML;
+			element.innerHTML = newHTML;
+		}
 	}
 		
 }