@cocreate/element-prototype 1.22.3 → 1.23.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.23.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.22.3...v1.23.0) (2024-05-08)
+
+
+### Bug Fixes
+
+* removed utils ([71a5003](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/71a5003bf7ca85b704140e10b132d8728600f518))
+
+
+### Features
+
+* update attibutes using keyObperators on storage change or event updateAttributes ([5a33bbd](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/5a33bbd90ba6564a8ee9583935e5e0c1663d5d39))
+* valueType boolean ([7f6777f](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/7f6777fb8ab6417d8b920cfbd2135c402423b6d6))
+
 ## [1.22.3](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.22.2...v1.22.3) (2024-04-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.22.3",
+  "version": "1.23.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",
@@ -57,7 +57,5 @@
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
-  "dependencies": {
-    "@cocreate/utils": "^1.33.6"
-  }
+  "dependencies": {}
 }

package/src/getAttribute.js

@@ -1,23 +1,51 @@
 // Store a reference to the original getAttribute function
 const originalGetAttribute = Element.prototype.getAttribute;
+const attributes = new Map()
+
+window.addEventListener('storage', updateAttributes);
+window.addEventListener('updateAttributes', function (e) {
+    updateAttributes(e.detail);
+});
+
+function updateAttributes(e) {
+    const keys = ['organization_id', 'user_id', 'clientId', 'session_id'];
+    if (keys.includes(e.key)) {
+        let attr = attributes.get(e.key) || []
+        for (let attribute of attr) {
+            attribute.element.setAttribute(attribute.name, e.newValue)
+        }
+    }
+}
 
 // Override the getAttribute function
 Element.prototype.getAttribute = function (name) {
     let value = originalGetAttribute.call(this, name);
 
-    if (value === '$organization_id')
-        value = localStorage.getItem('organization_id')
-    else if (value === '$user_id')
-        value = localStorage.getItem('user_id')
-    else if (value === '$clientId')
-        value = localStorage.getItem('clientId')
-    else if (value === '$session_id')
-        value = localStorage.getItem('session_id')
-    else if (value === '$innerWidth')
+    const localKeys = {
+        '$organization_id': 'organization_id',
+        '$user_id': 'user_id',
+        '$clientId': 'clientId',
+        '$session_id': 'session_id'
+    };
+
+    if (localKeys[value]) {
+        let newValue = localStorage.getItem(localKeys[value]);
+
+        if (!attributes.has(localKeys[value])) {
+            attributes.set(localKeys[value], []);
+        }
+
+        attributes.get(localKeys[value]).push({
+            element: this,
+            name,
+            value: newValue
+        });
+        value = newValue
+    } else if (value === '$innerWidth') {
         value = window.innerWidth
-    else if (value === '$innerHeight')
+    } else if (value === '$innerHeight') {
         value = window.innerHeight
-    else if (typeof value === 'string') {
+    } else if (typeof value === 'string') {
         if (value.startsWith('$search')) {
             const searchParams = new URLSearchParams(window.location.search);
             if (value.includes('.')) {

package/src/getValue.js

@@ -146,6 +146,13 @@ const getValue = (element) => {
         }
     }
 
+    if (valueType === 'boolean') {
+        if (!value || value === 'fasle')
+            return false
+        else
+            return true
+    }
+
     if (value === '$organization_id')
         value = localStorage.getItem('organization_id')
     else if (value === '$user_id')

package/src/setValue.js

@@ -1,4 +1,3 @@
-import { getAttributes } from '@cocreate/utils';
 import { storage } from './getValue';
 
 HTMLElement.prototype.setValue = function (value, dispatch) {
@@ -15,6 +14,10 @@ HTMLHeadingElement.prototype.setValue = function (value, dispatch) {
 
 // TODO: check if using a a switch case will provide better performance
 const setValue = (el, value, dispatch) => {
+    if (value === '$false') {
+        return dispatchEvents(el, dispatch)
+    };
+
     if (value === null || value === undefined) return;
     if (el.hasAttribute('component') || el.hasAttribute('plugin'))
         return storage.set(el, value)
@@ -36,10 +39,9 @@ const setValue = (el, value, dispatch) => {
     // TODO: el.options vs rendenring options from src
     if (el.tagName == 'INPUT' || el.tagName == 'TEXTAREA' || el.tagName == 'SELECT' && el.options.length) {
         // TODO: attribute config undefined when used with onload-value
-        let isCrdt = el.getAttribute('crdt')  // getAttributes(el)
-        // if (isCrdt == null || isCrdt == undefined)
-        //     isCrdt = el.getAttribute('crdt')
-        if (isCrdt == "true" || el.type === 'file') return;
+        let isCrdt = el.getAttribute('crdt')
+        if (isCrdt == "true" || el.type === 'file')
+            return;
 
         if (el.type == 'checkbox') {
             let inputs = [el]