TheShopCritics2/TSC2/wwwroot/js/modules/conditional.js

162 lines
3.7 KiB
JavaScript

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
});
}
});
}
};
}();