@crowdin/app-project-module/out/static/js/dependent.js

Module that generates for you all common endpoints for serving standalone Crowdin App

document.addEventListener('DOMContentLoaded', () => {
    const fields = document.querySelectorAll('[data-dependency]');

    if (fields.length > 0) {
        fields.forEach((field) => {
            const conditions = JSON.parse( field.dataset['dependency']);
            action(field, conditions);

            const success = check(conditions);
            showHide(field, success);
        });
    }
});

function action(field, conditions) {
    conditions.forEach((rules) => {
        for (const [selector, rule] of Object.entries(rules)) {
            ['input', 'change'].forEach((event) => {
                const element = document.querySelector(selector);
                if (element) {
                    element.addEventListener(event, () => {
                        const success = check(conditions);
                        showHide(field, success);
                    });
                }
            });
        }
    });
}

function showHide(element, success) {
    if (success) {
        element.classList.remove('dependency-show');
        element.classList.add('dependency-show');
        return true;
    } else {
        element.classList.remove('dependency-show');
        return false;
    }
}

function check(conditions) {
    return conditions.every((conditionObj) => {
        const selectors = Object.keys(conditionObj);
        return selectors.every((selector) => {
            const condition = conditionObj[selector];
            return decision(selector, condition);
        });
    });
}

function decision(selector, condition) {
    const type = condition['type'];
    const currentValue = getValue(selector);

    let checkValue = typeof condition['value'] === 'undefined' ? false : condition['value'];

    let minValue = typeof condition['min'] === 'undefined' ? false : parseInt(condition['min']);
    let maxValue = typeof condition['max'] === 'undefined' ? false : parseInt(condition['max']);

    const allowEmpty = typeof condition['empty'] === 'undefined' ? false : condition['empty'];
    const isEmpty = !allowEmpty && currentValue.length < 1;

    const likeSelector = typeof condition['like'] === 'undefined' ? false : condition['like'];
    const likeSelectorValue = getValue(likeSelector);

    const regExpPattern = typeof condition['pattern'] === 'undefined' ? false : condition['pattern'];
    const regExpModifier = typeof condition['modifier'] === 'undefined' ? 'gi' : condition['modifier'];
    const sign = typeof condition['sign'] === 'undefined' ? false : condition['sign'];
    const strict = typeof condition['strict'] === 'undefined' ? false : condition['strict'];

    const emptyTypes = ['empty', 'blank'];
    const notEmptyTypes = ['!empty', 'notEmpty', 'not-empty', 'notempty'];

    const equalTypes = ['equal', '=', '==', '==='];
    const notEqualTypes = ['!equal', '!=', '!==', '!===', 'notEqual', 'not-equal', 'notequal'];

    const regularExpressionTypes = ['regexp', 'exp', 'expression', 'match'];

    // if empty return true
    if (emptyTypes.includes(type)) {
        return currentValue.length < 1;
    }

    // if not empty return true
    if (notEmptyTypes.includes(type)) {
        return currentValue.length > 0;
    }

    // if equal return true
    if (equalTypes.includes(type)) {
        if (isEmpty) {
            return false;
        }

        // Match two selector value/s
        if (likeSelector) {
            if (strict) {
                return likeSelectorValue.every((value) => {
                    return currentValue.includes(value);
                });
            } else {
                return likeSelectorValue.some((value) => {
                    return currentValue.includes(value);
                });
            }
        }

        // Match pre-defined value/s
        if (strict) {
            if (checkValue && Array.isArray(checkValue)) {
                return checkValue.every((value) => {
                    return currentValue.includes(value);
                });
            }

            if (checkValue && !Array.isArray(checkValue)) {
                return currentValue.includes(checkValue);
            }
        } else {
            if (checkValue && Array.isArray(checkValue)) {
                return checkValue.some((value) => {
                    return currentValue.includes(value);
                });
            }

            if (checkValue && !Array.isArray(checkValue)) {
                return currentValue.includes(checkValue);
            }
        }
    }

    // if not equal return true
    if (notEqualTypes.includes(type)) {
        if (isEmpty) {
            return false;
        }

        // Match two selector value/s
        if (likeSelector) {
            if (strict) {
                return likeSelectorValue.every((value) => {
                    return !currentValue.includes(value);
                });
            } else {
                return likeSelectorValue.some((value) => {
                    return !currentValue.includes(value);
                });
            }
        }

        // Match pre-defined value/s
        if (strict) {
            if (checkValue && Array.isArray(checkValue)) {
                return checkValue.every((value) => {
                    return !currentValue.includes(value);
                });
            }

            if (checkValue && !Array.isArray(checkValue)) {
                return !currentValue.includes(checkValue);
            }
        } else {
            if (checkValue && Array.isArray(checkValue)) {
                return checkValue.some((value) => {
                    return !currentValue.includes(value);
                });
            }

            if (checkValue && !Array.isArray(checkValue)) {
                return !currentValue.includes(checkValue);
            }
        }
    }

    // if regexp match
    if (regularExpressionTypes.includes(type) && regExpPattern) {
        if (isEmpty) {
            return false;
        }

        const exp = new RegExp(regExpPattern, regExpModifier);
        return currentValue.every((value) => {
            return exp.test(value);
        });
    }

    // if length
    if ('length' === type) {
        if (isEmpty) {
            return false;
        }

        if (checkValue && Array.isArray(checkValue)) {
            minValue = parseInt(checkValue[0]);
            maxValue = typeof checkValue[1] === 'undefined' ? false : parseInt(checkValue[1]);
        }

        if (checkValue && !Array.isArray(checkValue)) {
            minValue = parseInt(checkValue);
            maxValue = false;
        }

        return currentValue.every((value) => {
            if (!maxValue) {
                return value.length >= minValue;
            }

            if (!minValue) {
                return value.length <= maxValue;
            }

            return value.length >= minValue && value.length <= maxValue;
        });
    }

    // if range
    if ('range' === type) {
        if (isEmpty) {
            return false;
        }

        if (checkValue && Array.isArray(checkValue)) {
            minValue = parseInt(checkValue[0]);
            maxValue = typeof checkValue[1] === 'undefined' ? false : parseInt(checkValue[1]);
        }

        return currentValue.every((value) => {
            if (!maxValue) {
                return parseInt(value) > minValue;
            }

            if (!minValue) {
                return parseInt(value) < maxValue;
            }

            return parseInt(value) > minValue && parseInt(value) < maxValue;
        });
    }

    // if compare
    if ('compare' === type && sign && checkValue) {
        if (isEmpty) {
            return false;
        }

        checkValue = parseInt(checkValue);

        switch (sign) {
            case '<':
                return currentValue.every((value) => {
                    return parseInt(value) < checkValue;
                });
                break;

            case '<=':
                return currentValue.every((value) => {
                    return parseInt(value) <= checkValue;
                });
                break;

            case '>':
                return currentValue.every((value) => {
                    return parseInt(value) > checkValue;
                });
                break;

            case '>=':
                return currentValue.every((value) => {
                    return parseInt(value) >= checkValue;
                });
                break;

            case '=':
            case '==':
                return currentValue.every((value) => {
                    return parseInt(value) === checkValue;
                });
                break;
        }
    }
}

function getValue(selector) {
    const values = [];
    if (selector && document.querySelector(selector)) {
        const inputType = document.querySelector(selector).tagName.toLowerCase();``

        let currentSelector = selector;

        if ('crowdin-select' === inputType) {
            currentSelector = `${selector} option:checked`;
        }

        if ('crowdin-checkbox' === inputType) {
            currentSelector = `${selector}:not(input)`;
        }

        document.querySelectorAll(`${currentSelector}`).forEach((element) => {
            const value = element.value || element.checked;
            values.push(value);
        });
    }

    return values.filter((value) => value !== '');
}