wk-sync-bundle/public/wk-sync.js

/*
 * W&K-Sync: blendet abhängige Felder des Anmeldeformulars ein und aus (wie Subpaletten im Backend).
 * Die Regeln kommen als JSON aus dem Modul (data-wk-booking-rules); serverseitig gelten dieselben Regeln.
 */
(function () {
    'use strict';

    function widgetOf(form, name) {
        var input = form.querySelector('[name="' + name + '"], [name="' + name + '[]"]');
        return input ? input.closest('.widget') || input.parentElement : null;
    }

    function valueOf(form, name) {
        var inputs = form.querySelectorAll('[name="' + name + '"], [name="' + name + '[]"]');
        var value = '';

        inputs.forEach(function (input) {
            if ((input.type === 'checkbox' || input.type === 'radio')) {
                if (input.checked) value = input.value;
            } else if (input.tagName === 'SELECT' || input.type !== 'hidden') {
                value = input.value;
            }
        });

        return value;
    }

    function setVisible(widget, visible) {
        if (!widget) return;
        widget.hidden = !visible;
        widget.querySelectorAll('input, select, textarea').forEach(function (field) {
            field.disabled = !visible;
        });
    }

    function init(container) {
        var form = container.querySelector('form');
        var rules;

        try {
            rules = JSON.parse(container.getAttribute('data-wk-booking-rules') || '{}');
        } catch (e) {
            return;
        }

        if (!form || !rules.dependencies) return;

        var dependencies = rules.dependencies;
        var controllers = {};

        Object.keys(dependencies).forEach(function (field) {
            var dependency = dependencies[field];
            controllers[dependency.field] = controllers[dependency.field] || [];
            controllers[dependency.field].push(field);
        });

        function update() {
            Object.keys(dependencies).forEach(function (field) {
                var dependency = dependencies[field];
                var controllerWidget = widgetOf(form, dependency.field);
                var controllerVisible = controllerWidget ? !controllerWidget.hidden : true;
                var value = valueOf(form, dependency.field);
                var visible = controllerVisible && dependency.values.indexOf(String(value)) !== -1;
                setVisible(widgetOf(form, field), visible);
            });
        }

        Object.keys(controllers).forEach(function (name) {
            form.querySelectorAll('[name="' + name + '"], [name="' + name + '[]"]').forEach(function (input) {
                input.addEventListener('change', update);
            });
        });

        // Zweimal, damit verschachtelte Abhängigkeiten (Feld hängt von verstecktem Feld ab) stimmen
        update();
        update();
    }

    function boot() {
        document.querySelectorAll('[data-wk-booking-rules]').forEach(init);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', boot);
    } else {
        boot();
    }
})();