@cocreate/events 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.23.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.22.1...v1.23.0) (2024-09-21)
+
+
+### Bug Fixes
+
+* observer-target attribute ([92593d3](https://github.com/CoCreate-app/CoCreate-events/commit/92593d32c4b53fe97dab511e44dd1c9f345d708e))
+
+
+### Features
+
+* *-insert-adjacent attribute to apply value using insertAdjacentHTML() ([3d2151d](https://github.com/CoCreate-app/CoCreate-events/commit/3d2151d91d56ad53df006343e4f18b3aa1a99b1d))
+
+## [1.22.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.22.0...v1.22.1) (2024-08-24)
+
+
+### Bug Fixes
+
+* parse flag ([53ce700](https://github.com/CoCreate-app/CoCreate-events/commit/53ce700cca7d90919b933d102cda5f73fe3261c5))
+
 # [1.22.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.21.0...v1.22.0) (2024-06-19)
 
 

package/package.json

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

package/src/index.js

@@ -146,7 +146,10 @@ const CoCreateEvents = {
             if (events.includes('observer')) {
                 let target;
                 for (let attribute of el.attributes) {
-                    if ([`${prefix}-selector`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`].includes(attribute.name)) {
+                    if (attribute.name === 'observe-target') {
+                        target = attribute.value
+                        break;
+                    } else if ([`${prefix}-selector`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`].includes(attribute.name)) {
                         target = attribute.value
                         break;
                     }
@@ -225,6 +228,7 @@ const CoCreateEvents = {
         const self = this;
         // TODO: support empty value when prefix-attribute defined, add and remove the attribute
         let targetAttribute = element.getAttribute(`${prefix}-attribute`);
+        let targetPosition = element.getAttribute(`${prefix}-insert-adjacent`);
         // targetAttribute = checkMediaQueries(targetAttribute)
         // if (targetAttribute === false)
         //     return
@@ -318,6 +322,7 @@ const CoCreateEvents = {
 
                 groupValues = groupValues.map(x => x.trim());
                 let groupAttribute = el.getAttribute(`${prefix}-attribute`) || 'class';
+                let groupPosition = el.getAttribute(`${prefix}-insert-adjacent`);
                 // groupAttribute = checkMediaQueries(groupAttribute)
                 // if (!groupAttribute)
                 //     return
@@ -325,10 +330,10 @@ const CoCreateEvents = {
                 let groupKey = el.getAttribute(`${prefix}-key`)
 
                 // el.removeAttribute(prefix)
-                self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate', events)
+                self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate', events, groupPosition)
                 let targetElements = queryElements({ el, prefix });
                 for (let i = 0; i < targetElements.length; i++)
-                    self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate', events)
+                    self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate', events, groupPosition)
 
             });
         }
@@ -352,8 +357,9 @@ const CoCreateEvents = {
         for (let i = 0; i < targetElements.length; i++) {
             if (!targetAttribute && targetAttribute !== '' && ['click', 'focus', 'blur'].includes(prefix)) {
                 targetElements[i][prefix]()
-            } else
-                this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey, null, events)
+            } else {
+                this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey, null, events, targetPosition)
+            }
         }
 
         document.dispatchEvent(new CustomEvent(`${prefix}End`, {
@@ -362,11 +368,11 @@ const CoCreateEvents = {
 
     },
 
-    setValue: async function (prefix, element, attrName, values, key, deactivate, events) {
+    setValue: async function (prefix, element, attrName, values, key, deactivate, events, targetPosition) {
         if (events && events.includes('mouseout')) {
             if (element.matches(':hover')) {
                 element.addEventListener('mouseout', () => {
-                    this.setValue(prefix, element, attrName, values, key, deactivate, events);
+                    this.setValue(prefix, element, attrName, values, key, deactivate, events, targetPosition);
                 }, { once: true });
                 return;
             }
@@ -434,15 +440,15 @@ const CoCreateEvents = {
                     element[attrName.substring(1)]()
                 } else if (attrName) {
                     element.setAttribute(attrName, newValue);
+                } else if (targetPosition) {
+                    element.insertAdjacentHTML(targetPosition, newValue);
                 } else {
                     if (!attrName && ['click', 'focus', 'blur'].includes(newValue)) {
                         element[newValue]()
                     } else if (['click', 'focus', 'blur'].includes(attrName)) {
                         element[attrName]()
                     }
-
                 }
-
             }
         }
     },
@@ -578,15 +584,21 @@ function checkCondition(condition, value) {
     if (operatorMatch)
         condition = operatorMatch[2].trim()
 
+    let parse = true
     if (condition === 'true') {
         return !!value[0];
     } else if (condition === 'false') {
         return !value[0];
+    } else if (condition === '[]' && typeof value[0] === 'string') {
+        parse = false
     }
 
+
+
     // TODO: why parse updated conditin to boolean false
-    if (condition !== 'false')
+    if (parse && condition !== 'false')
         condition = parseCondition(condition);
+
     let result;
 
     if (condition === '$template') {