162 lines
3.7 KiB
JavaScript
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
|
|
});
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}();
|