@cocreate/elements 1.7.5 → 1.8.2

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.8.2](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.8.1...v1.8.2) (2022-06-14)
+
+
+### Bug Fixes
+
+* if element has attribute render initEvents before returning ([3730429](https://github.com/CoCreate-app/CoCreate-elements/commit/3730429037c71796936fd6affcda3031f71c65e5))
+
+## [1.8.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.8.0...v1.8.1) (2022-06-12)
+
+
+### Bug Fixes
+
+* update dependencies ([0424726](https://github.com/CoCreate-app/CoCreate-elements/commit/04247260f353cabc2e2e8b2049bd5194a7730397))
+* update docs css document_id ([7565dff](https://github.com/CoCreate-app/CoCreate-elements/commit/7565dffe43ea3b78714f5ebcec1fbd4aa33d1a81))
+
+# [1.8.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.7.5...v1.8.0) (2022-06-04)
+
+
+### Features
+
+* supports adding src attribute to any element to fetch the file and render the results in the element ([0507159](https://github.com/CoCreate-app/CoCreate-elements/commit/0507159aa0a9311a2bbc7fd89e17b20d39d7622c))
+
 ## [1.7.5](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.7.4...v1.7.5) (2022-06-02)
 
 

package/docs/index.html

@@ -14,7 +14,7 @@
 
     <!-- CoCreate Favicon -->
     <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
-    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="62827d7e8082ce05b081430b" name="src" type="text/css" save="true" />
+    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.7.5",
+  "version": "1.8.2",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -61,9 +61,9 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.4.1",
-    "@cocreate/crud-client": "^1.6.2",
-    "@cocreate/docs": "^1.3.1",
-    "@cocreate/observer": "^1.5.1"
+    "@cocreate/actions": "^1.4.2",
+    "@cocreate/crud-client": "^1.7.0",
+    "@cocreate/docs": "^1.3.2",
+    "@cocreate/observer": "^1.5.2"
   }
 }

package/src/fetchSrc.js

@@ -0,0 +1,56 @@
+import observer from '@cocreate/observer';
+
+const selector = '[src]:not(img, video, script, input, iframe, frame)'
+const initializing = new Map();
+
+
+function init() {
+    var elements = document.querySelectorAll(selector);
+    initElements(elements);
+};
+
+function initElements(elements) {
+    for (let element of elements)
+        initElement(element);
+};
+
+async function initElement(element) {
+    let src = element.getAttribute('src');
+    let initialize = initializing.get(element)
+    if (!initialize || initialize.src != src){
+        initializing.set(element, {src});
+        if (src) 
+            try {
+                let response = await fetch(src); // Gets a promise
+                let text = await response.text(); // Replaces body with response
+                if (text){
+                    element.innerHTML = text; // Replaces body with response
+                    initializing.delete(el)
+                }
+            } catch (err) {
+                console.log('Fetch error:' + err); // Error handling
+            }
+    }   
+};
+
+observer.init({
+	name: 'CoCreateSrc',
+	observe: ['addedNodes'],
+	target: selector,
+	callback: function(mutation) {
+		initElement(mutation.target);
+	}
+});
+
+observer.init({
+	name: 'CoCreateSrcAttributes',
+	observe: ['attributes'],
+	attributeName: ['src'],
+	target: selector,
+	callback: function(mutation) {
+		initElement(mutation.target);
+	}
+});
+
+init()
+

package/src/index.js

@@ -3,6 +3,7 @@ import action from '@cocreate/actions';
 import crud from '@cocreate/crud-client';
 import { initSetValues, setValue } from './setValue';
 import { initGetValues, getValue } from './getValue';
+import './fetchSrc';
 
 const selector = "[collection][document_id][name]:not(cocreate-select, link), input, textarea, select, [contenteditable]";
 const initializing = new Map();
@@ -36,6 +37,9 @@ function initElement(el) {
 		el.getValue = getValue; 
 		el.setValue = setValue; 
 	}
+
+	__initEvents(el);
+
 	// if rendered in server side skip 
 	if (el.hasAttribute('rendered')) {
 		el.removeAttribute('rendered');
@@ -45,7 +49,6 @@ function initElement(el) {
 	if (el.closest('.template')) return;
 
 	const { collection, document_id, name, isRead } = crud.getAttr(el);
-	__initEvents(el);
 	if (!collection || !document_id || !name) return;
 	if (!document_id.match(/^[0-9a-fA-F]{24}$/)) return; 
 	if (!crud.checkAttrValue(collection) || !crud.checkAttrValue(name)) return;