@twobirds/microcomponents/public/formValues.js

Micro Components Organization Class

'use strict';
import { copyGettersSetters } from './helpers.js';
import { DC, addListener } from './MC.js';
import { observe } from './observables.js';
const getInputName = (e) => {
    return e.tagName.toLowerCase();
};
class InputBase {
    constructor(e) { }
}
class RadioHandler extends InputBase {
    #e;
    constructor(e) {
        super(e);
        this.#e = e;
    }
    get val() {
        let ret = new FormData(this.#e.form).get(this.#e.name);
        return ret;
    }
    set val(value) {
        let arr = [
            ...this.#e.form.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`),
        ];
        arr
            .filter((e) => e.getAttribute('value') === value)
            .shift().checked = true;
    }
}
class CheckboxHandler extends InputBase {
    #e;
    constructor(e) {
        super(e);
        this.#e = e;
    }
    get val() {
        return this.#e.checked;
    }
    set val(value) {
        this.#e.checked = value;
    }
}
class InputHandler extends InputBase {
    #e;
    constructor(e) {
        super(e);
        this.#e = e;
    }
    get val() {
        return this.#e.value;
    }
    set val(value) {
        this.#e.value = value;
    }
}
class SelectHandler extends InputBase {
    #e;
    #multi = false;
    constructor(e) {
        super(e);
        this.#e = e;
        this.#multi = e.multiple;
    }
    get val() {
        const that = this, ret = [];
        [...that.#e.querySelectorAll('option')]
            .filter((o) => o.selected)
            .forEach((o) => {
            ret.push(o.value);
        });
        if (this.#multi)
            return ret;
        return ret.length ? ret[0] : '';
    }
    set val(value) {
        const that = this;
        value = typeof value === 'string' ? [value] : value;
        [...that.#e.querySelectorAll('option')].forEach((o) => {
            if (value.indexOf(o.value) > -1) {
                o.selected = true;
            }
            else {
                o.selected = false;
            }
        });
    }
}
class TextAreaHandler extends InputBase {
    #e;
    constructor(e) {
        super(e);
        this.#e = e;
    }
    get val() {
        return this.#e.value || '';
    }
    set val(value) {
        this.#e.value = value;
    }
}
const getInputHandlers = (e) => {
    let inputList = [
        ...(e || document).querySelectorAll('input,select,textarea'),
    ], handlers = {};
    inputList.forEach((i) => {
        const name = i.getAttribute('name');
        if (name) {
            let handler = false;
            switch (getInputName(i)) {
                case 'input':
                    switch (i.type) {
                        case 'radio':
                            handler = new RadioHandler(i);
                            break;
                        case 'checkbox':
                            handler = new CheckboxHandler(i);
                            break;
                        default:
                            handler = new InputHandler(i);
                    }
                    break;
                case 'select':
                    handler = new SelectHandler(i);
                    break;
                case 'textarea':
                    handler = new TextAreaHandler(i);
                    break;
                default:
                    console.warn('handler missing:', name, 'for', i.tagName.toLowerCase(), i);
                    break;
            }
            if (handler) {
                DC.add(i, name, handler);
                Object.defineProperty(handlers, name, {
                    enumerable: true,
                    configurable: true,
                    get: () => {
                        return handler.val;
                    },
                    set: (value) => {
                        if (handler.val !== value) {
                            handler.val = value;
                        }
                    },
                });
            }
        }
    });
    return handlers;
};
export function formValues(targetObject, propertyName, dom) {
    let handlers = getInputHandlers(dom);
    targetObject[propertyName] = Object.assign({}, handlers);
    observe(targetObject, propertyName);
    copyGettersSetters(handlers, targetObject[propertyName]);
    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
        addListener(input, 'input', (ev) => {
            targetObject[propertyName].notify();
        });
    });
}
//# sourceMappingURL=formValues.js.map