@cocreate/events 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* supports actions for defined events ([08e9a47](https://github.com/CoCreate-app/CoCreate-events/commit/08e9a4721660a3ba5f508fe3dbf840ec8f1a4a01))
+
 # 1.0.0 (2023-02-01)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.0.0",
+  "version": "1.2.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

@@ -1,7 +1,8 @@
 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
 	init: function() {
 		this.initElement(document, 'events');
 		this.initElement(document, 'click');
@@ -32,19 +33,48 @@ const CoCreateEvents = {
 			mainContainer.addEventListener(event_name, 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);
+						}
+						while (parentElement)
+
+					}
+
 				}
 			});
 		});
+
+		action.init({
+			name: prefix,
+			endEvent: `${prefix}End`,
+			callback: (btn, data) => {
+				this.__updateElements(btn, prefix)
+			}
+		});
+
 	},
 	
 	__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`);
@@ -88,6 +118,11 @@ const CoCreateEvents = {
 			targetElements.forEach((el) => self.setValue(el, targetAttribute, values));
 		} else
 			self.setValue(element, targetAttribute, values);
+
+		document.dispatchEvent(new CustomEvent(`${prefix}End`, {
+			detail: {}
+		}))
+		
 	},
 	
 	setValue: function(element, attrName, values, deactivate) {
@@ -155,6 +190,7 @@ const CoCreateEvents = {
 	}
 };
 
+
 CoCreateEvents.init();
 
 export default CoCreateEvents;