poc form SDK (extends to form)

js/DI/dynamic.js

@@ -0,0 +1,116 @@
+/**
+ * Dynamics handling.
+ *
+ * @returns {{handleElement: handleElement}}
+ * @constructor
+ */
+const Dynamic = function(){
+
+	const aSelectors = {
+		dataHideWhen: '[data-hide-when]',
+		dataDisableWhen: '[data-disable-when]',
+		dataAttCode: '[data-att-code="{0}"]',
+		dataBlockContainer: '[data-block="container"]',
+	};
+
+	/**
+	 * hideEmptyContainers.
+	 *
+	 * The purpose of this function is to hide empty containers.
+	 * Ex: FieldSetType with no children
+	 *
+	 */
+	function hideEmptyContainers(oElement){
+		$('.combodo-field-set', oElement).each(function(){
+			$(this).parent().toggle($(this).children().length !== 0);
+		});
+	}
+
+	/**
+	 * initDynamicsInvisible.
+	 *
+	 *  @param oElement
+	 */
+	function initDynamicsInvisible(oElement){
+
+		// get all dynamic hide fields
+		const aInvisibleFields = oElement.querySelectorAll(aSelectors.dataHideWhen);
+
+		// iterate throw fields...
+		aInvisibleFields.forEach(function (oInvisibleField) {
+
+			// retrieve condition
+			const aHideWhenCondition = JSON.parse(oInvisibleField.dataset.hideWhen);
+
+			// retrieve condition data
+			const oHideWhenElement = oElement.querySelector(String.format(aSelectors.dataAttCode, aHideWhenCondition.att_code));
+
+			// initial hidden state
+			oInvisibleField.closest(aSelectors.dataBlockContainer).hidden = (oHideWhenElement.value === aHideWhenCondition.value);
+
+			// listen for changes
+			oHideWhenElement.addEventListener('change', (e) => {
+				oInvisibleField.closest(aSelectors.dataBlockContainer).hidden = (e.target.value === aHideWhenCondition.value);
+				oInvisibleField.closest(aSelectors.dataBlockContainer).style.visibility = (e.target.value === aHideWhenCondition.value) ? 'hidden' : '';
+			});
+		});
+
+	}
+
+	/**
+	 * initDynamicsDisable.
+	 *
+	 * @param oElement
+	 */
+	function initDynamicsDisable(oElement){
+
+		// get all dynamic hide fields
+		const aDisabledFields = oElement.querySelectorAll(aSelectors.dataDisableWhen);
+
+		// iterate throw fields...
+		aDisabledFields.forEach(function (oDisabledField) {
+
+			// retrieve condition
+			const aDisableWhenCondition = JSON.parse(oDisabledField.dataset.disableWhen);
+
+			// retrieve condition data
+			const oDisableWhenElement = oElement.querySelector(`[data-att-code="${aDisableWhenCondition.att_code}"]`);
+
+			// initial disabled state
+			oDisabledField.closest(aSelectors.dataBlockContainer).disabled = (oDisableWhenElement.value === aDisableWhenCondition.value);
+
+			// listen for changes
+			oDisableWhenElement.addEventListener('change', (e) => {
+				oDisabledField.closest(aSelectors.dataBlockContainer).disabled  = (e.target.value === aDisableWhenCondition.value);
+			});
+		});
+	}
+
+	/**
+	 * handleElement.
+	 *
+	 * @param element
+	 */
+	function handleElement(element){
+		hideEmptyContainers(element);
+		initDynamicsInvisible(element);
+		initDynamicsDisable(element);
+	}
+
+	return {
+		handleElement,
+	}
+};
+
+
+
+
+
+
+
+
+
+
+
+
+