zeev-form-js/zeev-form-mapping.js

Repositório com diversos códigos reaproveitáveis e estruturados para utilizar em projetos.

export var ZeevMapping = {
    Functions: {
        GetTdFields: ((el) => {
            var td = null;
            var positionTd = 0;
            var table = el.closest('table');
            var id = '#' + el.getAttribute('id');
    
            if (id != '#Variáveis') {
    
                if (('#' + table.getAttribute('id') != '#Variáveis') && table.getAttribute('mult') != 'S') {
                    var trs = el.closest('tbody').querySelectorAll('tr:not(.header)');
    
                    for (var i = 0; i < trs.length; i++) {
    
                        var inp = trs[i].querySelector(id);
                        if (inp) {
                            var tds = trs[i].querySelectorAll('td');
                            var tr = trs[i - 1];
    
                            for (var j = 0; j < tds.length; j++) {
                                if (tds[j].querySelector(id)) {
                                    positionTd = j;
                                }
                            }
    
                            td = tr.querySelectorAll('td')[positionTd];
                        }
                    }
                }
            }
    
            return td;
        }),
        CreateElementMapping: function (fldSelector) {
            this.element = document.querySelector(fldSelector);
    
            if (this.element == null) {
                fldSelector = fldSelector + '-1';
                this.element = document.querySelector(fldSelector);
            }
    
            if (this.element == null)
                return;
    
            this.originalDisplay = document.querySelector(fldSelector).tagName == 'TABLE' ? 'table' : document.querySelector(fldSelector).style.display;
    
            this.dontShow = (() => {
                this.element.style.display = 'none';
    
                if (this.element.parentElement.nodeName.toUpperCase() == "TD")
                    this.element.parentElement.className = 'hideinp';
    
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'SELECT') || (this.element.tagName == 'TEXTAREA'))) {
    
                    var td = ZeevMapping.Functions.GetTdFields(this.element);
    
                    if (td) {
                        td.style.visibility = 'hidden';
                        td.className = 'hideinp';
                    }
                }
            });
            this.reveal = (() => {
                this.element.style.display = this.originalDisplay;
    
                if (this.element.parentElement.nodeName.toUpperCase() == "TD")
                    this.element.parentElement.className = '';
    
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'SELECT') || (this.element.tagName == 'TEXTAREA'))) {
                    var td = ZeevMapping.Functions.GetTdFields(this.element);
    
                    if (td) {
                        td.style.visibility = 'visible';
                        td.style.cla = 'hideinp';
                    }
                }
            });
            this.dontRequire = (() => {
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'SELECT') || (this.element.tagName == 'TEXTAREA'))) {
                    this.element.setAttribute('required', 'N');
                }
            });
            this.require = (() => {
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'SELECT') || (this.element.tagName == 'TEXTAREA'))) {
                    this.element.setAttribute('required', 'S');
                }
            });
            this.readOnly = (() => {
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'TEXTAREA'))) {
                    this.element.readOnly = true;
                }
    
                if (this.element.tagName == 'SELECT') {
                    this.element.classList.add('readOnlyType');
                }
            });
            this.readEdit = (() => {
                if (((this.element.tagName == 'INPUT') || (this.element.tagName == 'TEXTAREA'))) {
                    this.element.readOnly = false;
                }
    
                if (this.element.tagName == 'SELECT') {
                    this.element.classList.remove('readOnlyType');
                }
            });
            if (this.element.type == 'checkbox' || this.element.type == 'radio')
                this.options = document.querySelectorAll('[xname=' + fldSelector.replace('#', '') + ']');
        },
    }
}