@cocreate/conditional-logic - npm Package Compare versions

Comparing version 1.12.0 to 1.12.1

package.json

 {
   "name": "@cocreate/conditional-logic",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc. Easy Configuration using HTML5 data attributes and/or JavaScript API.",
@@ -5,0 +5,0 @@ "keywords": [

src/index.js

@@ -8,130 +8,152 @@ /*
 /*globals CustomEvent, CoCreate*/
-import observer from '@cocreate/observer';
-import action from '@cocreate/actions';
-import { queryElements } from '@cocreate/utils';
+import observer from "@cocreate/observer";
+import action from "@cocreate/actions";
+import { queryElements } from "@cocreate/utils";
 
 // TODO: update to listen to document events, find closest action return
 function init() {
-    let elements = document.querySelectorAll(`[show],[hide]`);
-    initElements(elements);
+	let elements = document.querySelectorAll(`[show],[hide]`);
+	initElements(elements);
 }
 
 function initElements(elements) {
-    for (let el of elements)
-        initElement(el);
+	for (let el of elements) initElement(el);
 }
 
 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);
+	if (el.tagName.toLowerCase() == "option") el = el.closest("select");
+	let actions = el.getAttribute("actions");
+	if (actions && actions.includes("validate")) {
+		el.removeEventListener("change", selectShowHideEle);
 
-        el.addEventListener("change", selectShowHideEle);
-    } else {
-        el.removeEventListener('change', selectShowHideEle);
-        el.removeEventListener("click", clickShowHideEle);
+		el.addEventListener("change", selectShowHideEle);
+	} else {
+		el.removeEventListener("change", selectShowHideEle);
+		el.removeEventListener("click", clickShowHideEle);
 
-        el.addEventListener("change", selectShowHideEle);
-        el.addEventListener("click", clickShowHideEle);
-    }
+		el.addEventListener("change", selectShowHideEle);
+		el.addEventListener("click", clickShowHideEle);
+	}
 }
 
 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.getAttribute('show');
-                if (typeof show != 'undefined') {
-                    for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
-                        el.setAttribute('hidden', '');
-                    if (opt.selected === true) {
-                        for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
-                            el.removeAttribute('hidden');
-                    }
-                }
-            }
-        }
+	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.getAttribute("show");
+				if (typeof show != "undefined") {
+					for (let el of queryElements({
+						element: document,
+						selector: show,
+						type: "selector"
+					}))
+						el.setAttribute("hidden", "");
+					if (opt.selected === true) {
+						for (let el of queryElements({
+							element: document,
+							selector: show,
+							type: "selector"
+						}))
+							el.removeAttribute("hidden");
+					}
+				}
+			}
+		}
 }
 
 function clickShowHideEle(e) {
-    let element = e.currentTarget;
-    if (!element)
-        element = e;
-    var show = element.getAttribute('show');
-    var hide = element.getAttribute('hide');
-    let tagName = element.tagName.toLowerCase();
+	let element = e.currentTarget;
+	if (!element) element = e.element;
+	var show = element.getAttribute("show");
+	var hide = element.getAttribute("hide");
+	let tagName = element.tagName.toLowerCase();
 
-    if (tagName == 'input' && element.getAttribute("type").toLowerCase() == 'radio') {
-        let key = element.getAttribute("key");
-        let radios = document.querySelectorAll(tagName + '[key="' + key + '"]');
-        for (let radio of radios) {
+	if (
+		tagName == "input" &&
+		element.getAttribute("type").toLowerCase() == "radio"
+	) {
+		let key = element.getAttribute("key");
+		let radios = document.querySelectorAll(tagName + '[key="' + key + '"]');
+		for (let radio of radios) {
+			show = radio.getAttribute("show");
 
-            show = radio.getAttribute('show');
+			for (let el of queryElements({
+				element: document,
+				selector: show,
+				type: "selector"
+			}))
+				el.setAttribute("hidden", "");
 
-            for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
-                el.setAttribute('hidden', '');
+			if (radio.checked) {
+				for (let el of queryElements({
+					element: document,
+					selector: show,
+					type: "selector"
+				}))
+					el.removeAttribute("hidden");
+			}
+		}
+	} else {
+		let updated_els = [];
 
-            if (radio.checked) {
-                for (let el of queryElements({ element: document, selector: show, type: 'selector' }))
-                    el.removeAttribute('hidden');
-            }
-        }
-    } else {
+		if (show)
+			for (let el of queryElements({
+				element: document,
+				selector: show,
+				type: "selector"
+			})) {
+				if (el.hasAttribute("hidden")) {
+					el.removeAttribute("hidden");
+					updated_els.push(el);
+				}
+			}
 
-        let updated_els = [];
+		if (hide)
+			for (let el of queryElements({
+				element: document,
+				selector: hide,
+				type: "selector"
+			})) {
+				let existEqual = false;
+				for (let uel of updated_els) {
+					if (el.isEqualNode(uel)) {
+						existEqual = true;
+						break;
+					}
+				}
 
-        if (show)
-            for (let el of queryElements({ element: document, selector: show, type: 'selector' })) {
-                if (el.hasAttribute('hidden')) {
-                    el.removeAttribute('hidden');
-                    updated_els.push(el);
-                }
-            }
+				if (!existEqual) el.setAttribute("hidden", "");
+			}
+	}
 
-        if (hide)
-            for (let el of queryElements({ element: document, selector: hide, type: 'selector' })) {
-                let existEqual = false;
-                for (let uel of updated_els) {
-                    if (el.isEqualNode(uel)) {
-                        existEqual = true;
-                        break;
-                    }
-                }
-
-                if (!existEqual)
-                    el.setAttribute('hidden', '')
-            }
-    }
-
-    document.dispatchEvent(new CustomEvent('showHide', {
-        detail: {}
-    }));
-
+	element.dispatchEvent(
+		new CustomEvent("showHide", {
+			detail: {}
+		})
+	);
 }
 
-document.addEventListener('fetchedData', () => {
-    init();
+document.addEventListener("fetchedData", () => {
+	init();
 });
 
 observer.init({
-    name: 'CoCreateConditionalLogic',
-    observe: ['addedNodes'],
-    selector: '[show], [hide]',
-    callback: function (mutation) {
-        initElement(mutation.target);
-    }
+	name: "CoCreateConditionalLogic",
+	types: ["addedNodes"],
+	selector: "[show], [hide]",
+	callback: function (mutation) {
+		initElement(mutation.target);
+	}
 });
 
 action.init({
-    name: "showHide",
-    endEvent: "showHide",
-    callback: (data) => {
-        clickShowHideEle(data.element);
-    }
+	name: "showHide",
+	endEvent: "showHide",
+	callback: (action) => {
+		clickShowHideEle(action);
+	}
 });
@@ -141,3 +163,7 @@
 
-const CoCreateConditionalLogic = { initElements, selectShowHideEle, clickShowHideEle };
+const CoCreateConditionalLogic = {
+	initElements,
+	selectShowHideEle,
+	clickShowHideEle
+};
 export default CoCreateConditionalLogic;

No alert changes

Improved metrics

Lines of code

289

11.15%

Worsened metrics

Total package byte prevSize

110468

-0.03%

Number of downloads

6

-99.11%

No dependency changes