@cocreate/events 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [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)
+
+
+### 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)
 
 

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.0",
+  "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
@@ -9,9 +11,9 @@ const CoCreateEvents = {
 		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']);
@@ -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]`);
+				// clearTimeout(debounce);
+				// debounce = setTimeout(function() {
+					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,31 +76,26 @@ const CoCreateEvents = {
 						if (parentElement) {
 							do {
 								parentElement = parentElement.closest(`[${prefix}], [${prefix}-value]`)
-								if (parentElement)
+								if (parentElement) {
 									self.__updateElements(parentElement, prefix);
+									parentElement = parentElement.parentElement
+								}
 							}
 							while (parentElement)
 	
 						}
 	
 					}
-					}, 500);
-
+					// }, 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') {
@@ -205,39 +265,102 @@ const CoCreateEvents = {
 };
 
 const eventElements = new Map();
-const elementPrefix = new Map();
+const eventKeys = new Map();
+const elementAttributes = new Map();
+
 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
+	let currentValue = key
+
 	if (eventElements.has(element)) {
-		key = eventElements.get(element).get(prefix);
+		currentValue = eventElements.get(element).get(key);
+	}
+	let value = CoCreateEvents.__getNextValue(values, currentValue);
+	eventKeys.set(key, value)
+	eventElements.set(element, eventKeys)
+
+	let attributes = elementAttributes.get(element)
+	if (!attributes) {
+		attributes = {}
+		elementAttributes.set(element, attributes)
 	}
-	let oldValue = key
-	let value = CoCreateEvents.__getNextValue(values, oldValue);
 
-	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 (attrName.includes(key)){
-			element.removeAttribute(key);
-			attrName = attrName.replace(regex, value);
-			setAttr = true;
+
+		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
+				attributes[attrName].valueKeys[key] = value;
+
+			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) || 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
+
+		// 	if (!attributes[attrName].nameKeys)
+		// 		attributes[attrName].nameKeys = {[key]: value}
+
+		// 	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(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
+		if (newHTML) {
+			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)
 		
 }