fix: init and update demos scripts

Author: frankpagan

demo/index.html

@@ -131,12 +131,13 @@ <h6 style='color:blue'>7 example  SELECT (show multiples)</h6>
     <script>
       var config = {
         apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
-                organization_Id: '5de0387b12e200ea63204d6c'
+        organization_Id: '5de0387b12e200ea63204d6c',
+        host: 'ws.cocreate.app'
       }
     </script>
-    
-    <!-- CoCreate JS CDN -->
-    <script src="https://cdn.cocreate.app/conditional-logic/latest/CoCreate-conditional-logic.min.js" ></script>
+     
+    <!--<script src="../dist/CoCreate-conditional-logic.js"></script>-->
+    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
 
   </body>
 </html>

src/index.js

@@ -5,75 +5,72 @@
  * https://github.com/CoCreate-app/Conditional_Logic/blob/master/LICENSE
  */
 import observer from '@cocreate/observer'
-import {logger} from '@cocreate/utils';
+import { logger } from '@cocreate/utils';
 
 let console = logger('off');
-initShowHideEles();
+init();
 
 document.addEventListener('fetchedTemplate', () => {
-	initShowHideEles();
+	init();
 })
 
 //. cocreate init section
-function initShowHideEles(container) {
-	let mainContainer = container || document;
-	if (!mainContainer.querySelectorAll) {
-		return;
-	}
-	let elements = mainContainer.querySelectorAll(`[data-show],[data-hide]`);
-	if (elements.length === 0 && mainContainer != document && 
-		(mainContainer.hasAttribute(`[data-show]`) || mainContainer.hasAttributes("[data-hide"))) {
-		elements = [mainContainer];
-	}
-	for (let el of elements) {
-
-		if(el.tagName.toLowerCase() == "option")
-			el = el.closest('select');
-		
-		el.removeEventListener('change', selectShowHideEle);
-		el.removeEventListener("click", clickShowHideEle);
-		
-		el.addEventListener("change", selectShowHideEle);
-		el.addEventListener("click", clickShowHideEle);	
-	}	
+function init() {
+	let elements = document.querySelectorAll(`[data-show],[data-hide]`);
+	initElements(elements)
+}
+
+function initElements(elements) {
+	for (let el of elements)
+		initElement(el)
 }
-// CoCreateInit.register('CoCreateConditionalLogic', window, window.initShowHideEles);
 
-observer.init({ 
-	name: 'CoCreateConditionalLogic', 
+function initElement(el) {
+	if (el.tagName.toLowerCase() == "option")
+		el = el.closest('select');
+
+	el.removeEventListener('change', selectShowHideEle);
+	el.removeEventListener("click", clickShowHideEle);
+
+	el.addEventListener("change", selectShowHideEle);
+	el.addEventListener("click", clickShowHideEle);
+}
+// CoCreateInit.register('CoCreateConditionalLogic', window, window.init);
+
+observer.init({
+	name: 'CoCreateConditionalLogic',
 	observe: ['addedNodes'],
-	attributes: ['data-show', 'data-hide'],
+	target: '[data-show], [data-hide]',
 	callback: function(mutation) {
-		
-		initShowHideEles(mutation.target)
+		initElement(mutation.target)
 	}
 })
 
 //. upgrade by jin (using document event)
-// function initShowHideEles() {
-	
+// function init() {
+
 // 	const selector = "[data-show],[data-hide]";
 // 	document.removeEventListener("change", function(event) {
 // 		const target = event.target.closest(selector);
 // 		if (target) {
 // 			selectShowHideEle(event)
 // 		}
 // 	});
-	
+
 // 	document.removeEventListener("click", function(event) {
 // 		const target = event.target.closest(selector);
 // 		if (target) {
 // 			clickShowHideEle(event)
 // 		}
 // 	});
-	
+
 // 	document.addEventListener("change", function(event) {
 // 		const target = event.target.closest(selector);
 // 		if (target) {
 // 			selectShowHideEle(event)
 // 		}
 // 	});
-	
+
 // 		document.addEventListener("click", function(event) {
 // 		const target = event.target.closest(selector);
 // 		if (target) {
@@ -87,71 +84,72 @@ function selectShowHideEle(e) {
 	e.preventDefault()
 	var select = this;
 	if (typeof select.options != 'undefined')
-  	for ( var i = 0, len = select.options.length; i < len; i++ ) {
-  		var opt = select.options[i];
-      var value = opt.value
-      if (value != ''){
-        var show = opt.dataset.show
-       // var show_class = opt.dataset.showClass
-        if(typeof show!='undefined'){
-        	for (let el of document.querySelectorAll(show)) 
-        		el.classList.add('hidden');
-        	if ( opt.selected === true ) {
-	        	for (let el of document.querySelectorAll(show))
-        			el.classList.remove('hidden');
-	        }
-        }
-      }//end value is not empty
-  }//end for
+		for (var i = 0, len = select.options.length; i < len; i++) {
+			var opt = select.options[i];
+			var value = opt.value
+			if (value != '') {
+				var show = opt.dataset.show
+				// var show_class = opt.dataset.showClass
+				if (typeof show != 'undefined') {
+					for (let el of document.querySelectorAll(show))
+						el.classList.add('hidden');
+					if (opt.selected === true) {
+						for (let el of document.querySelectorAll(show))
+							el.classList.remove('hidden');
+					}
+				}
+			} //end value is not empty
+		} //end for
 }
 
 function clickShowHideEle(e) {
 	console.log(this, 'click');
 	var show = this.dataset.show;
 	var hide = this.dataset.hide;
 	let tagName = this.tagName.toLowerCase();
-	
-	if(tagName =='input' && this.getAttribute("type").toLowerCase()=='radio') {
+
+	if (tagName == 'input' && this.getAttribute("type").toLowerCase() == 'radio') {
 		let name = this.getAttribute("name")
-		let radios = document.querySelectorAll(tagName+'[name="'+name+'"]');
+		let radios = document.querySelectorAll(tagName + '[name="' + name + '"]');
 		for (let radio of radios) {
-			
+
 			show = radio.dataset.show;
-			
+
 			for (let el of document.querySelectorAll(show)) {
 				el.classList.add('hidden');
 			}
-				
-			if(radio.checked){
-				for (let el of document.querySelectorAll(show)) 
+
+			if (radio.checked) {
+				for (let el of document.querySelectorAll(show))
 					el.classList.remove('hidden');
 			}
 		}
-		
-	} else {
-		
+
+	}
+	else {
+
 		let updated_els = [];
-		
+
 		for (let el of document.querySelectorAll(show)) {
-			if(el.classList.contains('hidden')){
+			if (el.classList.contains('hidden')) {
 				el.classList.remove('hidden');
 				updated_els.push(el);
 			}
 		}
-		
+
 		for (let el of document.querySelectorAll(hide)) {
 			let existEqual = false;
-			for(let uel of updated_els){
-				if(el.isEqualNode(uel)){
+			for (let uel of updated_els) {
+				if (el.isEqualNode(uel)) {
 					existEqual = true;
 					break;
-				}	
+				}
 			}
-			
-			if(!existEqual) el.classList.add('hidden');
+
+			if (!existEqual) el.classList.add('hidden');
 		}
 	}
 }
 
-const CoCreateConditionalLogic = { initShowHideEles, selectShowHideEle, clickShowHideEle };
+const CoCreateConditionalLogic = { initElements, selectShowHideEle, clickShowHideEle };
 export default CoCreateConditionalLogic;