@cocreate/elements 1.4.9 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Bug Fixes
+
+* get-value observer typo ([1ab5e84](https://github.com/CoCreate-app/CoCreate-elements/commit/1ab5e84428a680bd0e4a1c62091fd55edf22f69d))
+
+## [1.4.11](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.10...v1.4.11) (2021-12-23)
+
+
+### Bug Fixes
+
+* renamed filter-value_type to filter-value-type ([5ec9280](https://github.com/CoCreate-app/CoCreate-elements/commit/5ec928076ba52fe83f526208091778eb00a81a03))
+
+## [1.4.10](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.9...v1.4.10) (2021-12-20)
+
+
+### Bug Fixes
+
+* firefox setValue content is removed if iframe.srcDoc is removed ([68da8ec](https://github.com/CoCreate-app/CoCreate-elements/commit/68da8ec1736997af6e814e50c737b8761013a5b7))
+
 ## [1.4.9](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.4.8...v1.4.9) (2021-12-15)
 
 

package/demo/input-and-fetch.html

@@ -50,13 +50,13 @@
 			<!--<table class="width:100% border-collapse:collapse">-->
 			<!--	<tr class="border-bottom:1px_solid_darkgray">-->
 			<!--		<td class="position:sticky top:0 background:white padding-top:0 padding:10px ">-->
-			<!--			<input type="text" class="floating-label" filter-name="name" filter-value_type="string" filter-operator="" template_id="datatable" placeholder="Name">-->
+			<!--			<input type="text" class="floating-label" filter-name="name" template_id="datatable" placeholder="Name">-->
 			<!--			<span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
 			<!--				<a order-by="name" toggle-order="asc" template_id="datatable"></a>-->
 			<!--			</span>-->
 			<!--		</td>-->
 			<!--		<td class="position:sticky top:0 background:white padding:10px padding-top:0">-->
-			<!--			<input type="text" class="floating-label" filter-name="Document Id" filter-value_type="string" template_id="datatable" placeholder="Type" />-->
+			<!--			<input type="text" class="floating-label" filter-name="Document Id" template_id="datatable" placeholder="Type" />-->
 			<!--			<span class="position:absolute bottom:18px right:20px float:right font-size:18px z-index:6">-->
 			<!--				<a order-by="_id" toggle-order="asc" template_id="datatable"></a>-->
 			<!--			</span>-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.4.9",
+  "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,17 +16,20 @@ 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)
+	// if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
 	
-	valueEl.addEventListener('input', (e) => {
-		setValueByFind(e.target)
-	})
+	// valueEl.addEventListener('input', (e) => {
+	// 	setValueByFind(e.target)
+	// })
 	
-	valueEl.addEventListener('updated_by_fetch', (e) => {
-		setValueByFind(e.target)
-	})
+	// valueEl.addEventListener('updated_by_fetch', (e) => {
+	// 	setValueByFind(e.target)
+	// })
+	
+	initEvents(valueEl);
 
 	element.dispatchEvent(new Event("input", {
 		"bubbles": true
@@ -34,6 +37,21 @@ function initElement(element) {
 
 }
 
+const valueEls = new Map();
+function initEvents(valueEl){
+	if (!valueEls.has(valueEl)) {
+		valueEls.set(valueEl);
+		if (['INPUT', 'TEXTAREA', 'SELECT'].includes(valueEl.tagName)  || valueEl.contentEditable)
+			valueEl.addEventListener('input', (e) => {
+				setValueByFind(e.target)
+			})
+		
+		valueEl.addEventListener('updated_by_fetch', (e) => {
+			setValueByFind(e.target)
+		})
+	}
+}
+
 function setValueByFind(valueEl){
 	let value = getValue(valueEl)
     let id = valueEl.getAttribute('id')
@@ -95,11 +113,11 @@ function __encryptPassword(str) {
 }
 
 observer.init({
-	name: 'CoCreateLogic',
+	name: 'get-value',
 	observe: ['addedNodes'],
 	target: '[get-value]',
 	callback: function(mutation) {
-		CoCreateLogic.getValues.initElement(mutation.target);
+		initElement(mutation.target);
 	}
 });
 

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;
@@ -38,6 +106,11 @@ var setValue = (el, value) => {
 	
 	else if (el.tagName === 'IFRAME') {
 		el.srcdoc = value;
+		// el.contentDocument.documentElement.innerHTML = value;
+		if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
+		     // Do Firefox-related activities
+		}
+		else
 		el.onload = function(e) {
 			el.removeAttribute('srcdoc');
 		};
@@ -139,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};