@cocreate/element-prototype 1.2.28 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.4.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.3.0...v1.4.0) (2023-01-10)
+
+
+### Features
+
+* run CoCReate,pass on elementsprior t inserting. merge domEditor and alements together ([d39f8ff](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/d39f8ffd287ed82754314a401b7c33e7bf902450))
+
+# [1.3.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.2.28...v1.3.0) (2023-01-09)
+
+
+### Features
+
+* improved handling of checkbox and radio ([b7444f2](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b7444f275a6cad77d6d1678e823ca654b3e4df63))
+
 ## [1.2.28](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.2.27...v1.2.28) (2023-01-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.2.28",
+  "version": "1.4.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",

package/src/getValue.js

@@ -22,7 +22,7 @@ const getValue = (element) => {
 
 	if (element.type === "checkbox") {
 		let el_name = element.getAttribute('name');
-		let checkboxs = document.querySelectorAll(`input[type=checkbox][name='${el_name}']`);
+		let checkboxs = document.querySelectorAll(`input[type='checkbox'][name='${el_name}']`);
 		if (checkboxs.length > 1) {
 			value = [];
 			checkboxs.forEach(el => {
@@ -34,7 +34,10 @@ const getValue = (element) => {
 			if (el.checked) 
 				value = el.value
 		}
-	} 
+	} else if (element.type === 'radio') {
+		let name = element.getAttribute('name');
+		value = document.querySelector(`input[name="${name}"]:checked`).value
+	}
 	else if (element.type === "number") {
 		value = Number(value);
 	}

package/src/setValue.js

@@ -26,11 +26,13 @@ const setValue = (el, value) => {
 		if (isCrdt == "true" || el.type === 'file') return;
 
 		if (el.type == 'checkbox') {
-			if (value.includes(el.value)) {
-				el.checked = true;
-			}
-			else {
-				el.checked = false;
+			let name = el.getAttribute('name');
+			let inputs = document.querySelectorAll(`input[type="${el.type}"][name="${name}"]`);
+			for (let i = 0; i < inputs.length; i++) {
+				if (value.includes(inputs[i].value))
+					inputs[i].checked = true;
+				else
+					inputs[i].checked = false;
 			}
 		}
 		else if (el.type === 'radio') {
@@ -59,15 +61,36 @@ const setValue = (el, value) => {
 	else if (el.tagName === 'IFRAME')
 		el.srcdoc = value;
 	
-	else if (el.tagName === 'DIV') {
-		if (el.hasAttribute("value")) {
-			el.setAttribute("value", value);
+	else if (el.tagName === 'SCRIPT')
+		setScript(el, value);
+	
+	else {
+		if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
+		if (el.tagName === 'DIV') {
+			if (!el.classList.contains('domEditor') || !el.hasAttribute('get-value') || !el.hasAttribute('get-value-closest'))
+				return
 		}
 
-		if (el.classList.contains('domEditor') || el.hasAttribute('get-value') || el.hasAttribute('get-value-closest')) {
-			if (el.getAttribute('data-domEditor') == "replace") {
-				let newElement = document.createElement("div");
-				newElement.innerHTML = value;
+		if (valueType == 'string' || valueType == 'text')
+			el.textContent = value;
+		else {
+			let newElement = document.createElement("div");
+			newElement.innerHTML = value;
+			setPass(newElement)
+
+			let CoCreateJS = newElement.querySelector('script[src*="CoCreate.js"], script[src*="CoCreate.min.js"]')
+			if (CoCreateJS)
+				CoCreateJS.remove()
+
+			let CoCreateCSS = newElement.querySelector('link[href*="CoCreate.css"], link[href*="CoCreate.min.css"]')
+			if (CoCreateCSS)
+				CoCreateCSS.remove()
+
+			let css = newElement.querySelector('link[collection], link[document]')
+			if (css)
+				css.remove()
+
+			if (el.getAttribute('domEditor') == "replace") {
 				let parentNode = el.parentNode;
 				if (parentNode) {
 					if (newElement.children[0]) {
@@ -77,29 +100,16 @@ const setValue = (el, value) => {
 						parentNode.replaceChild(newElement, el);
 					}
 				}
-			}
-			else {
-				if (valueType == 'string' || valueType == 'text')
-					el.textContent = value;
-				else
-					el.innerHTML = value;
+			} else {
+				el.innerHTML = newElement.innerHTML;
 			}
 		}
-	}
 	
-	else if (el.tagName === 'SCRIPT'){
-		setScript(el, value);
-	}
-	else {
-		if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
-		if (valueType == 'string' || valueType == 'text')
-			el.textContent = value;
-		else
-			el.innerHTML = value;
 		if (el.hasAttribute("value")) {
 			el.setAttribute("value", value);
 		}
 	}
+
 	if (el.getAttribute('contenteditable'))
 		dispatchEvents(el);
 		
@@ -115,6 +125,14 @@ const setValue = (el, value) => {
 	}
 };
 
+function setPass(el) {
+	if (CoCreate.pass) {
+		let passElements = el.querySelectorAll('[pass_id]');
+		if (passElements)
+			CoCreate.pass.initElements(passElements)
+	}
+}
+
 function setScript(script, value) {
 	let newScript = document.createElement('script');
 	newScript.attributes = script.attributes;