BrDom.js

Runtime dynamic html generator with javascript.

Why?

I was writing an application in which I needed to create html elements on the fly (at run time), as it had dynamic data. I found some options on the internet, but I wanted something simpler, where I could define several templates (json structure) and call it as I would use it and passing the API data to this template.

Because we have an array of children, with each child having the same shape as the father. In theory, we could nest DOM elements infinitely with this format.

• Simple.
• Create a simple format for templates.
• Very light.
• Javascript vanilla
• No dependencies

how to use?

JSON Template

• example is a template.
• obj(Object) is the data you would receive via API or otherwise.

const Templates = {
    example: function(obj) {
        return {
            tag: 'div',
            id: obj.id,
            classes: ['doc-icon'],
            properties: {
                title: obj.name,
                tabIndex: 0
            },
            children: [
                {
                    conditions: {
                        if: [
                            {
                                operator: '!==',
                                value: obj.name,
                                analyzes: 'Test action buttons'
                            }
                        ],
                    },
                    tag: 'div',
                    classes: ['doc-icon-header'],
                    children: [
                        { tag: 'h3', content: obj.name }
                    ]
                },
                {
                    tag: 'div',
                    classes: ['doc-icon-header'],
                    children: [
                        { tag: 'h3', content: obj.name }
                    ]
                },
                {
                    tag: 'div',
                    id: 'docControls',
                    classes: ['doc-controls'],
                    children: [
                        {
                            tag: 'button',
                            classes: ['doc-control'],
                            id: 'edit',
                            content: 'Edit',
                            children: [
                                {
                                    tag: 'i',
                                    classes: ['fa', 'fa-edit']
                                }
                            ]
                        },
                        {
                            tag: 'button',
                            classes: ['doc-control'],
                            id: 'delete',
                            content: 'Delete',
                            children: [
                                {
                                    tag: 'i',
                                    classes: ['fa', 'fa-trash']
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

Instantiating a template

const template1 = new BrDom(Templates.example({ id: 1, name: 'Test action buttons' }));

Get the Dom

console.log('DOM: ', template1.domElement);

Get an element

console.log('findChildById: ', template1.findChildById('edit'));
console.log('findChildByClassName: ', template1.findChildByClassName('doc-control'));

Add Event

// Function that will be called, when event is triggered
const _fn = () => {
    console.log('<< call >>')
};
// Adding event to the element with _id edit
template1.event(_fn.bind(this), 'edit');
// Listening to element events with id edit
document.getElementById("edit").addEventListener("click", (el) => {
    console.log('working -> ', el);
});

Add created html to the current document

• html

  <div id="dynamicDom"></div>

• javascript

    document.getElementById("dynamicDom").appendChild(template1.domElement);

See our example in the example folder!

Core Team

Glauber Funez

Contributors

Send your pull request.

David S. Costa

License

MIT