@cocreate/events 1.4.1 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.6.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.5.0...v1.6.0) (2023-03-16)
+
+
+### Features
+
+* replaced get-value and set-value with a super charged version of CoCreate-events ([5407615](https://github.com/CoCreate-app/CoCreate-events/commit/54076157dc1e3ae764bc1e8d8ce4a84786501449))
+
+# [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

@@ -68,9 +68,16 @@
 		
 		<!-- defining key example -->
 		<div >
-			<input input-target="#testing" input-value="" input-key="ty">
-			<span id="testing" class="{{ty}}">other content</span>
+			<div observe-target=".testing" observe-attribute="value">testing this new value</div>
+			<input input-target=".testing" input-attribute="value" input-events="input, onload" value="great test">
+			<input class="testing {{ty}}">
+			<div class="testing {{ty}}">other content</div>
 		</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/docs/index.html

@@ -134,7 +134,7 @@
                             </div>
         
                             <div id="demo-preview" class="position:relative overflow:auto background-color:white">
-                                <div get-value="#demo" class="padding:20px"></div>
+                                <div class="demopreview" class="padding:20px"></div>
                             </div>
                             
                             <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.4.1",
+  "version": "1.6.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,62 +1,52 @@
 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
+
 	init: function(prefix, events) {
 		if (prefix && events)
-			this.initElement(document, prefix, events);
+			this.initPrefix(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, 'input', ['input']);
-			this.initElement(document, 'change', ['change']);
-			this.initElement(document, 'selected', ['click']);
+			this.initPrefix('toggle', ['click']);
+			this.initPrefix('click', ['click']);
+			this.initPrefix('hover', ['mouseover', 'mouseout']);
+			this.initPrefix('mouseover', ['mouseover']);
+			this.initPrefix('mouseout', ['mouseout']);
+			this.initPrefix('input', ['input']);
+			this.initPrefix('change', ['change']);
+			this.initPrefix('selected', ['click']);
+			this.initPrefix('onload', ['onload']);
+			this.initPrefix('observe', ['observer']);
 		}
-	},
-	
-	initElement: function(element, prefix, events) {
-		this.__initElementEvent(element || document, prefix, events);
-	},
-	
-	__initElementEvent: 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]`);
-					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)
-	
-						}
-	
-					}
-					// }, 500);
 
-			});
+		let customEventEls = document.querySelectorAll('[event-name]')
+		let names = {}
+		for (let customEventEl of customEventEls) {
+			let name = customEventEl.getAttribute('event-name')
+			if(!names[name]) {
+				names[name] = name
+				this.initPrefix(name);
+			}
+		}
+
+		const self = this
+		observer.init({ 
+			name: 'CoCreateEventName', 
+			observe: ['addedNodes'],
+			target: `[event-name]`,
+			callback: function(mutation) {
+				let name = mutation.target.getAttribute('event-name')
+				self.initPrefix(name);
+			}
 		});
 
+	},
+
+	initPrefix: function(prefix, events) {
+		const self = this;
+
 		action.init({
 			name: prefix,
 			endEvent: `${prefix}End`,
@@ -65,12 +55,129 @@ const CoCreateEvents = {
 			}
 		});
 
+		let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+
+		observer.init({ 
+			name: 'CoCreateEventattributes', 
+			observe: ['attributes', 'addedNodes'],
+			attributeName: [`${prefix}-events`],
+			target: selector,
+			callback: function(mutation) {
+				self.initElements([mutation.target], prefix, events)
+			}
+		});
+
+		if (events.includes('observer')) {
+			observer.init({
+				name: 'observerAttributes',
+				observe: ['attributes'],
+				attributeName: [`${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
+				callback: function(mutation) {
+					// remove previous observer
+					self.initElements([mutation.target], prefix, events)
+				}
+			});
+		}
+		
+		let elements = document.querySelectorAll(selector)
+		this.initElements(elements, prefix, events);
 	},
-	
-	__updateElements: function(element, prefix) {
+
+	elements: new Map(),
+	initElements: function(elements, prefix, events = []) {
+		const self = this
+		for (const el of elements) {
+			let prefixes = this.elements.get(el)
+			if (!prefixes) {
+				prefixes = {[prefix]: events}
+				this.elements.set(el, prefixes)
+			} else {
+				events = prefixes[prefix]
+			}
+
+			let customEvents = el.getAttribute(`${prefix}-events`)
+			if (customEvents) {
+				customEvents = customEvents.split(',')
+				for (let i = 0; i < customEvents.length; i++)
+					customEvents[i] = customEvents[i].trim()
+
+				for (let i = 0; i < events.length; i++)
+					el.removeEventListener(events[i], eventFunction)
+				
+				events = customEvents
+				prefixes[prefix] = events
+			}
+
+			if (events.includes('onload'))
+				this.__updateElements(el, prefix);
+					
+			if (events.includes('observer')) {
+				let target;
+				for (let attribute of el.attributes) {
+					if ([`${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`].includes(attribute.name)) {
+						target = attribute.value
+						break;
+					}						
+				}
+
+				observer.init({ 
+					observe: ['addedNodes'],
+					target,
+					callback: function(mutation) {
+						self.__updateElements(el, prefix, mutation.target);
+					}
+				});
+			}
+
+			for (let i = 0; i < events.length; i++) {
+				if (events[i] !== 'onload' && events[i] !== 'observer')
+					el.addEventListener(events[i], eventFunction);
+			}
+		
+			function eventFunction(event) {
+				// ToDo: apply debounce
+				// let debounce;
+				// 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;
+					// if (target.closest(`[actions*="${prefix}"]`)) 
+					// 	return;
+					self.__updateElements(target, prefix);
+
+					let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+
+					let parentElement = target.parentElement;
+					if (parentElement) {
+						do {
+							parentElement = parentElement.closest(selector)
+							if (parentElement) {
+								self.__updateElements(parentElement, prefix);
+								parentElement = parentElement.parentElement
+							}
+						}
+						while (parentElement)
+		
+					}
+		
+				}
+				// }, 500);
+			}
+		
+
+		}
+	},
+
+	__updateElements: function(element, prefix, target) {
 		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)
+		if (!targetValue)
 			targetValue = element.getValue()
 		if (!targetValue) return
 		
@@ -80,8 +187,14 @@ const CoCreateEvents = {
 		}
 
 		let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
+		let targetText = element.getAttribute(`${prefix}-text`);
+		let targetHtml = element.getAttribute(`${prefix}-html`);
 		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 +210,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,20 +227,46 @@ 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')
+					);	
+
 			});
 		}
 
-		let targetElements = [element];
-		if (targetClosest) {
-			element = element.closest(targetClosest);
-		}
 		values = values.map(x => x.trim());
-		if (targetSelector) {
+		let targetElements = [element];
+		if (target) {
+			self.setValue(prefix, target, targetAttribute, values, targetKey);
+		} else if (targetSelector) {
 			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 (targetClosest) {
+			element = element.closest(targetClosest);
 			self.setValue(prefix, element, targetAttribute, values, targetKey);
+		} 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)
+			);	
+		 }
 
 		document.dispatchEvent(new CustomEvent(`${prefix}End`, {
 			detail: {}
@@ -164,6 +306,12 @@ const CoCreateEvents = {
 			} else {
 				if (attrName === 'value') {
 					oldValue = element.getValue()	
+				} else if (attrName === 'text') {
+					attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
+					oldValue = values.filter(x => attrValues.includes(x))[0] || '';
+				} else if (attrName === 'html') {
+					attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
+					oldValue = values.filter(x => attrValues.includes(x))[0] || '';
 				} else if (element.getAttribute(attrName)) {
 					attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
 					oldValue = values.filter(x => attrValues.includes(x))[0] || '';
@@ -174,14 +322,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 +354,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 +366,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 +440,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;
+		}
 	}
 		
 }