@cocreate/events 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.3.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.2.0...v1.3.0) (2023-02-11)
+
+
+### Features
+
+* define and replace a key ([f321bba](https://github.com/CoCreate-app/CoCreate-events/commit/f321bbad58ed361b5d7185cf5fe33e6c4ed79d2b))
+
+# [1.2.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.1.0...v1.2.0) (2023-02-02)
+
+
+### Features
+
+* add @cocreate/actions, events bubble up and triggers parent events ([9946b30](https://github.com/CoCreate-app/CoCreate-events/commit/9946b302b5ed19e3f20d850f0734dde6e28852fe))
+
 # [1.1.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.0.0...v1.1.0) (2023-02-02)
 
 

package/demo/click.html

@@ -63,7 +63,7 @@
 	
 	    
         <!-- <script src="../dist/CoCreate-events.js"></script> -->
-	    <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
-	    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
+	    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
+	    <!-- <script src="../../../CoCreateJS/dist/CoCreate.js" ></script> -->
 	</body>
 </html>

package/demo/index.html

@@ -57,9 +57,18 @@
 			some content
 		</div>
 	
+		<!-- custom event example -->
+		<div test-value="active" test-events="click" event>
+			other content
+		</div>
+		<!-- defining key example -->
+		<div click-target="#testing" click-value="hello, bye" click-key="ty">
+			<span id="testing" class="{{ty}}">other content</span>
+		</div>
 	
-	    
         <!--<script src="../dist/CoCreate-events.js"></script>-->
-	    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
+        <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
+	    <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
+
 	</body>
 </html>

package/demo/selected.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	  <title>Selected | CoCreateJS</title>
+	  
+	  <!-- CoCreate Favicon -->
+	  <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+	<!-- Custom CSS -->
+	<style type="text/css">
+	  .test{background:red}
+	  .green{background:green}
+	  .yellow{background:yellow}
+	  .blue{background:blue}
+	  .red{background:red}
+	  .active{
+		background-color:blue;
+		
+	  }
+		.hfhfh[selected]{}
+	
+	</style>
+	</head>
+	<body>
+		
+	<!--<article>-->
+
+	  
+	
+			   
+		   <div id="yyy" selected-target=".tester" selected-value="active," selected-attribute="data-test" selected-group="uno" data-test="" class="test">1 tab</div>
+		   <div selected-value="active" selected-group="uno" class="test">2 tab</div>
+		   <div selected-value="active" selected-group="uno" class="test">3 tab</div>
+	
+		<hr/>    
+			   
+		   <div selected-value="yellow" selected-group="2" class="green">1 tab</div>
+		   <div selected-value="blue" selected-group="2" class="green">2 tab</div>
+		   <div selected-value="red" selected-group="2" class="green">3 tab</div>
+	
+		<hr/>
+		<div class="tester">
+		   <div selected-value="active" selected-closest="div.tester" class="test">4 tab</div>
+		   <div selected-value="active" class="test">4 tab</div>
+		   
+		   <div selected-value="color:black; background:grey" selected-attribute="style" style="">color tab</div>
+		
+		   <div id="yyyy" data-test="" class="test">1 tab</div>
+		</div>
+
+        <!-- <script src="../dist/CoCreate-selected.js"></script> -->
+        <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.1.0",
+  "version": "1.3.0",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",
@@ -60,6 +60,7 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
+    "@cocreate/actions": "^1.5.59",
     "@cocreate/docs": "^1.5.12",
     "@cocreate/utils": "^1.18.0"
   }

package/src/index.js

@@ -3,38 +3,50 @@ 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
-	init: function() {
-		this.initElement(document, 'events');
-		this.initElement(document, 'click');
-		this.initElement(document, 'hover');
-		this.initElement(document, 'mouseover');
-		this.initElement(document, 'mouseout');
-		this.initElement(document, 'input');
-		this.initElement(document, 'change');
+	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, 'input', ['input']);
+			this.initElement(document, 'change', ['change']);
+			this.initElement(document, 'selected', ['click']);
+		}
 	},
 	
-	initElement: function(container, prefix) {
-		this.__initElementEvent(container || document, prefix);
+	initElement: function(element, prefix, events) {
+		this.__initElementEvent(element || document, prefix, events);
 	},
 	
-	__initElementEvent: function(mainContainer, prefix) {
+	__initElementEvent: function(element, prefix, events) {
 		const self = this;
-		let eventNames = []; 
-		
-		if (prefix === 'toggle') eventNames = ['click'];
-		if (prefix === 'click') eventNames = ['click'];
-		if (prefix === 'hover') eventNames = ['mouseover', 'mouseout'];
-		if (prefix === 'mouseover') eventNames = ['mouseover'];
-		if (prefix === 'mouseout') eventNames = ['mouseout'];
-		if (prefix === 'input') eventNames = ['input'];
-		if (prefix === 'change') eventNames = ['change'];
-	
-		eventNames.forEach((event_name) => {
-			mainContainer.addEventListener(event_name, function(event) {
+			
+		events.forEach((eventName) => {
+			element.addEventListener(eventName, function(event) {
 				const target = event.target.closest(`[${prefix}], [${prefix}-value]`);
 				if (target) {
-					if (target.closest(`[actions=*"${prefix}"]`)) return;
+					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)
+
+					}
+
 				}
 			});
 		});
@@ -52,14 +64,18 @@ const CoCreateEvents = {
 	__updateElements: function(element, prefix) {
 		const self = this;
 		let targetValue = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
+		if (!targetValue) return
+		
 		let values = targetValue.split(',');
 		if (!values || values.length == 0) {
 			return;
 		}
-		
+
 		let targetAttribute = element.getAttribute(`${prefix}-attribute`) || 'class';
 		let targetSelector = element.getAttribute(`${prefix}-target`);
 		let targetClosest = element.getAttribute(`${prefix}-closest`);
+		let targetKey = element.getAttribute(`${prefix}-key`);
+
 		let targetGroup = element.getAttribute(`${prefix}-group`);
 		if (targetGroup) {
 			document.querySelectorAll(`[${prefix}-group="${targetGroup}"]`).forEach((el) => {
@@ -68,22 +84,24 @@ const CoCreateEvents = {
 				if (!groupValues || groupValues.length == 0) {
 					return;
 				}
+	
 				groupValues = groupValues.map(x => x.trim());
 
 				let groupTarget = el.getAttribute(`${prefix}-target`);
 				let groupClosest = el.getAttribute(`${prefix}-closest`);
 				let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';	
+				let groupKey = el.getAttribute(`${prefix}-key`)	
 
 				// el.removeAttribute(prefix)
-				self.setValue(el, groupAttribute, groupValue, 'deactivate')
+				self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
 				if (groupTarget)
 					document.querySelectorAll(groupTarget).forEach((el) => 
-						self.setValue(el, groupAttribute, groupValue, 'deactivate')
+						self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
 					);
 				else if (groupClosest) {
 					let element = el.closest(groupClosest)
 					if (element)
-						self.setValue(element, groupAttribute, groupValue, 'deactivate');
+						self.setValue(prefix, element, groupAttribute, groupValues, groupKey, 'deactivate');
 				}
 			});
 		}
@@ -96,9 +114,9 @@ const CoCreateEvents = {
 		if (targetSelector) {
 			if (/{{\s*([\w\W]+)\s*}}/g.test(targetSelector)) return;
 			targetElements = queryDocumentSelectorAll(targetSelector);
-			targetElements.forEach((el) => self.setValue(el, targetAttribute, values));
+			targetElements.forEach((el) => self.setValue(prefix, el, targetAttribute, values, targetKey));
 		} else
-			self.setValue(element, targetAttribute, values);
+			self.setValue(prefix, element, targetAttribute, values, targetKey);
 
 		document.dispatchEvent(new CustomEvent(`${prefix}End`, {
 			detail: {}
@@ -106,56 +124,63 @@ const CoCreateEvents = {
 		
 	},
 	
-	setValue: function(element, attrName, values, deactivate) {
+	setValue: function(prefix, element, attrName, values, key, deactivate) {
 		let attrValues, oldValue;
-	
-		if (attrName === 'style') {
-			if (element.getAttribute(attrName)) {
-				attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
-			attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
-			attrValues = attrValues.map(function(item, index){
-			  return item.replace(' ','');
-			});
-			oldValue = values.filter(x => attrValues.includes(x))[0] || '';
-			}
-			let newValue = this.__getNextValue(values, oldValue);
-			
-			if (oldValue) {
-				let [property, value] = oldValue.split(":");
-				element.style[property] = '';
-			}
-			
-			if (newValue != '') {
-				let [property, value] = newValue.split(":");
-				element.style[property] = value;
-			}
+		if (key) {
+			key = `{{${key}}}`;
+			// let value = values[0]
+			replaceKey(prefix, element, key, values)
 		} else {
-			if (attrName === 'value') {
-				oldValue = element.getValue()	
-			} else if (element.getAttribute(attrName)) {
-				attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
+			if (attrName === 'style') {
+				if (element.getAttribute(attrName)) {
+					attrValues = element.getAttribute(attrName).split(';').map(x => x.trim());
+					attrValues = attrValues.map(function(item, index){
+					return item.replace(' ','');
+				});
 				oldValue = values.filter(x => attrValues.includes(x))[0] || '';
-			}
-
-			let newValue = this.__getNextValue(values, oldValue);
-			if (deactivate)
-				newValue = ""
-
-			if (attrName === 'class') {
-				if (oldValue != '') {
-					element.classList.remove(oldValue);
-					if (values.length === 1) {
-						return;
-					}
+				}
+				let newValue = this.__getNextValue(values, oldValue);
+				
+				if (oldValue) {
+					let [property, value] = oldValue.split(":");
+					element.style[property] = '';
 				}
 				
 				if (newValue != '') {
-					element.classList.add(newValue);
+					newValue = newValue.split(';').map(x => x.trim())
+					for (let style of newValue) {
+						let [property, value] = style.split(":");
+						element.style[property] = value;
+					}
 				}
-			} else if (attrName === 'value') {
-				element.setValue(newValue);
 			} else {
-				element.setAttribute(attrName, newValue);
+				if (attrName === 'value') {
+					oldValue = element.getValue()	
+				} else if (element.getAttribute(attrName)) {
+					attrValues = element.getAttribute(attrName).split(' ').map(x => x.trim());
+					oldValue = values.filter(x => attrValues.includes(x))[0] || '';
+				}
+
+				let newValue = this.__getNextValue(values, oldValue);
+				if (deactivate)
+					newValue = ""
+
+				if (attrName === 'class') {
+					if (oldValue != '') {
+						element.classList.remove(oldValue);
+						if (values.length === 1) {
+							return;
+						}
+					}
+					
+					if (newValue != '') {
+						element.classList.add(newValue);
+					}
+				} else if (attrName === 'value') {
+					element.setValue(newValue);
+				} else {
+					element.setAttribute(attrName, newValue);
+				}
 			}
 		}
 	},
@@ -171,6 +196,41 @@ const CoCreateEvents = {
 	}
 };
 
+const eventElements = new Map();
+const elementPrefix = new Map();
+function replaceKey(prefix, element, key, values){
+	if (eventElements.has(element)) {
+		key = eventElements.get(element).get(prefix);
+	}
+	let oldValue = key
+	let value = CoCreateEvents.__getNextValue(values, oldValue);
+
+	const regex = new RegExp(key, "g");
+	for (let attribute of element.attributes){
+		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 (setAttr)
+			element.setAttribute(attrName, attrValue);
+	}
+	let html = element.innerHTML;
+	if (html.indexOf(key) !== -1){
+		html = html.replace(regex, value);
+		element.innerHTML = html;
+	}
+	elementPrefix.set(prefix, value)
+	eventElements.set(element, elementPrefix)
+		
+}
 
 CoCreateEvents.init();