@cocreate/elements 1.4.12 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.5.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.12...v1.5.0) (2021-12-27)
+
+
+### Features
+
+* set-value and set-value-key attribute to add placeholders that can be replaced by value onChange ([266cf5f](https://github.com/CoCreate-app/CoCreate-elements/commit/266cf5f7f72869a9a390889d24ddab2fed038c26))
+
 ## [1.4.12](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.11...v1.4.12) (2021-12-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.4.12",
+  "version": "1.5.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/getValue.js

@@ -16,6 +16,7 @@ function initElement(element) {
 	let valueEl = document.getElementById(id);
 	if(!valueEl) return;
 	let value = getValue(valueEl)
+	if (value)
 	setValue(element, value)
 	
 	// if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)

package/src/setValue.js

@@ -1,4 +1,72 @@
+import observer from '@cocreate/observer';
 import crud from '@cocreate/crud-client';
+import {getValue} from './getValue';
+
+function initSetValues() {
+	var elements = document.querySelectorAll('[set-value]');
+	initElements(elements);
+}
+
+function initElements(elements) {
+	for (let element of elements)
+		initElement(element);
+}
+
+function initElement(element) {
+	initEvents(element);
+}
+
+function initEvents(element){
+	if (['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName)  || element.contentEditable)
+		element.addEventListener('input', (e) => {
+			setValueByFind(e.target);
+		});
+	
+	element.addEventListener('updated_by_fetch', (e) => {
+		setValueByFind(e.target);
+	});
+}
+
+function setValueByFind(element){
+	let key = element.getAttribute('set-value-key');
+	if (key)
+		key = `{{${key}}}`;
+	let value = getValue(element);
+	if (!value) return;
+    let selector = element.getAttribute('set-value');
+    if(!selector) return;
+	let elements = document.querySelectorAll(selector);
+	
+	for(let element of elements){
+		if (key){
+			const regex = new RegExp(key, "g");
+			for (let attribute of element.attributes){
+				let attrName = attribute.name;
+				let attrValue = attribute.value;
+				let setAttr = false;
+				if (attrValue.includes(key)){
+					attrValue = attrValue.replace(regex, value);
+					setAttr = true;
+				}
+				if (attrName.includes(key)){
+					element.removeAttribute(key);
+					attrName = attrName.replace(regex, value);
+					setAttr = true;
+				}
+				if(setAttr)
+					element.setAttribute(attrName, attrValue);
+			}
+			let html = element.innerHTML;
+			if (html.indexOf(key) !== -1){
+				html.replace(regex, value);
+				element.innerHTML = html;
+			}
+		}
+		else
+			setValue(element, value);
+	}
+		
+}
 
 var setValue = (el, value) => {
 	if (value === null || value === undefined) return;
@@ -144,4 +212,16 @@ function dispatchEvents(el) {
 	el.dispatchEvent(changeEvent);
 }
 
+observer.init({
+	name: 'set-value',
+	observe: ['addedNodes'],
+	target: '[set-value]',
+	callback: function(mutation) {
+		initElement(mutation.target);
+	}
+});
+
+
+initSetValues();
+
 export {setValue};