first commit

public/js/modules/conditional.js

@@ -0,0 +1,161 @@
+CNVS.Conditional = function() {
+	var __core = SEMICOLON.Core;
+
+	var _eval = function(field, value, conditions, check, target) {
+		if( ! field || ! conditions ) {
+			return false;
+		}
+
+		var fulfilled = false;
+
+		if( check == 'validate' ) {
+			if( value ) {
+				if ( target.getAttribute('aria-invalid') == 'false' ) {
+					fulfilled = true;
+				} else {
+					fulfilled = false;
+				}
+			}
+		} else {
+			switch( conditions.operator ) {
+				case '==':
+					if( value == conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case '!=':
+					if( value != conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case '>':
+					if( value > conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case '<':
+					if( value < conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case '<=':
+					if( value <= conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case '>=':
+					if( value >= conditions.value ) {
+						fulfilled = true;
+					}
+					break;
+
+				case 'in':
+					if( conditions.value.includes( value ) ) {
+						fulfilled = true;
+					}
+					break;
+
+				default:
+					fulfilled = false;
+					break;
+			}
+		}
+
+		if( fulfilled ) {
+			field.classList.add('condition-fulfilled');
+			field.querySelectorAll('input,select,textarea,button').forEach( function(el) {
+				el.disabled = false;
+			});
+		} else {
+			field.classList.remove('condition-fulfilled');
+			field.querySelectorAll('input,select,textarea,button').forEach( function(el) {
+				el.disabled = true;
+			});
+		}
+	};
+
+	return {
+		init: function(selector) {
+			if( __core.getSelector(selector, false, false).length < 1 ){
+				return true;
+			}
+
+			__core.initFunction({ class: 'has-plugin-conditional', event: 'pluginConditionalReady' });
+
+			selector = __core.getSelector( selector, false );
+			if( selector.length < 1 ){
+				return true;
+			}
+
+			selector.forEach( function(el) {
+				var field = el,
+					condition = field.getAttribute( 'data-condition' ) || '==',
+					conditionTarget = field.getAttribute( 'data-condition-target' ),
+					conditionValue = field.getAttribute( 'data-condition-value' ),
+					conditionCheck = field.getAttribute( 'data-condition-check' ) || 'value',
+					target = document.querySelector('[id*="'+conditionTarget+'"]'),
+					value = target.value,
+					targetType = target.type,
+					eventType;
+
+				var conditions = {
+					operator: condition,
+					field: conditionTarget,
+					value: conditionValue
+				}
+
+				var targetTag = target.tagName.toLowerCase();
+
+				if( targetType == 'checkbox' || targetTag == 'select' || targetType == 'radio' ) {
+					eventType = 'change';
+				} else {
+					eventType = 'input';
+				}
+
+				if( targetType == 'checkbox' ) {
+					value = target.checked ? target.value : 0;
+				}
+
+				if( targetType == 'radio' ) {
+					value = target.checked ? target.value : '';
+				}
+
+				_eval(field, value, conditions, conditionCheck, target);
+
+				target.addEventListener( eventType, function() {
+					if( targetType == 'checkbox' ) {
+						value = target.checked ? target.value : 0;
+					} else if( targetType == 'radio' ) {
+						value = target.checked ? target.value : '';
+					} else {
+						value = target.value;
+					}
+
+					_eval(field, value, conditions, conditionCheck, target);
+				});
+
+				if( conditionCheck == 'validate' ) {
+					var mutationObserver = new MutationObserver( function(mutations) {
+						mutations.forEach( function(mutation) {
+							_eval(field, value, conditions, conditionCheck, target);
+						});
+					});
+
+					mutationObserver.observe( target, {
+						attributes: true,
+						characterData: true,
+						childList: true,
+						subtree: true,
+						attributeOldValue: true,
+						characterDataOldValue: true
+					});
+				}
+			});
+		}
+	};
+}();