@crowdin/app-project-module 0.50.0 → 0.51.0

package/out/static/js/dependent.js

@@ -0,0 +1,306 @@
+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 !== '');
+}