feat: supports using as a action. action name is showHide

Author: frankpagan

src/index.js

@@ -4,7 +4,7 @@
  * Released under the MIT license
  * https://github.com/CoCreate-app/CoCreate-conditional-logic/blob/master/LICENSE
  */
- 
+/*globals CustomEvent, CoCreate*/
 import observer from '@cocreate/observer'
 
 function init() {
@@ -20,12 +20,19 @@ function initElements(elements) {
 function initElement(el) {
 	if (el.tagName.toLowerCase() == "option")
 		el = el.closest('select');
+	let actions = el.getAttribute('actions');
+	if (actions && actions.includes('validate')){
+		el.removeEventListener('change', selectShowHideEle);
 
-	el.removeEventListener('change', selectShowHideEle);
-	el.removeEventListener("click", clickShowHideEle);
-
-	el.addEventListener("change", selectShowHideEle);
-	el.addEventListener("click", clickShowHideEle);
+		el.addEventListener("change", selectShowHideEle);
+	}
+	else {
+		el.removeEventListener('change', selectShowHideEle);
+		el.removeEventListener("click", clickShowHideEle);
+	
+		el.addEventListener("change", selectShowHideEle);
+		el.addEventListener("click", clickShowHideEle);
+	}
 }
 
 function selectShowHideEle(e) {
@@ -50,12 +57,15 @@ function selectShowHideEle(e) {
 }
 
 function clickShowHideEle(e) {
-	var show = this.getAttribute('show');
-	var hide = this.getAttribute('hide');
-	let tagName = this.tagName.toLowerCase();
-
-	if (tagName == 'input' && this.getAttribute("type").toLowerCase() == 'radio') {
-		let name = this.getAttribute("name");
+	let element = e.currentTarget;
+	if (!element)
+		element = e;
+	var show = element.getAttribute('show');
+	var hide = element.getAttribute('hide');
+	let tagName = element.tagName.toLowerCase();
+
+	if (tagName == 'input' && element.getAttribute("type").toLowerCase() == 'radio') {
+		let name = element.getAttribute("name");
 		let radios = document.querySelectorAll(tagName + '[name="' + name + '"]');
 		for (let radio of radios) {
 
@@ -93,6 +103,11 @@ function clickShowHideEle(e) {
 			if (!existEqual) el.classList.add('hidden');
 		}
 	}
+	
+	document.dispatchEvent(new CustomEvent('showHide', {
+		detail: {}
+	}));
+
 }
 
 document.addEventListener('fetchedTemplate', () => {
@@ -110,5 +125,14 @@ observer.init({
 	}
 });
 
+CoCreate.action.init({
+	action: "showHide",
+	endEvent: "showHide",
+	callback: (btn, data) => {
+		clickShowHideEle(btn);
+	}
+});
+
+
 const CoCreateConditionalLogic = { initElements, selectShowHideEle, clickShowHideEle };
 export default CoCreateConditionalLogic;