@cocreate/elements 1.7.5 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "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",

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();