Component "zuado" feito na mão

TextView.js

import View from '../base/View.js';

export default class TextView extends View {

    init() {
        this.setElement('text-editor');
        this.setData({'mode': 'insert'});
    }

    initElements() {
        this.registerElements({
            'yourText': document.getElementById('text-field-text'),
            'insertText': document.getElementById('insert-text'),
            'updateText': document.getElementById('update-text'),
        });
    }

    attachEvents() {
        this.addEvent('insertText', 'click', () => {
            let text = this.getElement('yourText').value;
            
            if(!text) {
                return false;
            }

            this.controller.addText(text);
        });

        this.addEvent('updateText', 'click', () => {
            let text = this.getElement('yourText').value;
            
            if(!text) {
                return false;
            }

            this.controller.updateText(text);
        });
    }

    beforeShow() {
        if(this.data.mode == 'insert') {
            this.getElement('yourText').value = '';
            this.showElement('insertText').hideElement('updateText');
        } else {
            this.showElement('updateText').hideElement('insertText');
        }
    }

    template() {
        return `
        <div>
            <div class="title">
                Texto
            </div>
            <div class="content">
                <input id="text-field-text" type="text" placeholder="Seu Texto" value="oi">
                <button id="insert-text">Inserir Texto</button>
                <button id="update-text">Atualizar Texto</button>
            </div>
        </div>
        `;
    }

}

View.js

export default class View {

    constructor(controller) {
        this.data = {};
        this.controller = controller;
    }

    setName(name) {
        this.name = name;

        return this;
    }

    setData(data) {
        if(typeof(this.beforeSetData) !== 'undefined') {
            this.beforeSetData();
        }

        this.data = data;

        if(typeof(this.onSetData) !== 'undefined') {
            this.afterSetData();
        }

        return this;
    }
    
    setElement(id) {
        this.element = document.getElementById(id);

        if(!this.element) {
            throw '"' + id + '" view element not found';
        }

        this.hide();
        this.render();

        return this;
    }

    render() {
        
        if(!this.element) {
            throw 'View element not found - please call setElement before rendering the view';
        }

        this.element.insertAdjacentHTML('afterbegin', this.template());

        if(typeof(this.initElements) !== 'undefined') {
            this.initElements();
        }

        if(typeof(this.attachEvents) !== 'undefined') {
            this.attachEvents();
        }

        if(this.visible) {
            this.show();
        }

        return this;

    }

    registerElements(elements) {
        this.elements = elements;

        return this;
    }

    /**
     * Gets a specific element by name
     * @param {string} name 
     */
    getElement(name) {
        let element = this.elements[name];
        
        if(!element)
            throw 'Doesn\'t exists an element with name: ' + name;
        
        return element;
    }

    /**
     * Add a event listener to a specific element
     * @param {string} elementName 
     * @param {string} eventType 
     * @param {function} callback 
     */
    addEvent(elementName, eventType, callback) {
        this.getElement(elementName).addEventListener(eventType, callback);

        return this;
    }

    /**
     * Fill the object data in existent view elements, based on the elements name
     * Format: viewname-field-fieldname. Ex: user-field-name
     * @param {object} data 
     */
    fill() {

        for(let key in this.data) {
            let elementName = this.name + '-field-' + key;
            
            if(document.getElementById(elementName)) {
                document.getElementById(elementName).value = this.data[key];
            }
        }

        return this;
    }

    show() {
        
        if(typeof(this.beforeShow) !== 'undefined') {
            this.beforeShow();
        }

        this.element.style.display = 'block';

        if(typeof(this.afterShow) !== 'undefined') {
            this.afterShow();
        }

        return this;
    }

    hide() {
        if(typeof(this.beforeHide) !== 'undefined') {
            this.beforeHide();
        }

        this.element.style.display = 'none';

        if(typeof(this.afterHide) !== 'undefined') {
            this.afterHide();
        }

        return this;
    }

    showElement(elementName) {
        this.getElement(elementName).style.display = 'block';

        return this;
    }

    hideElement(elementName) {
        this.getElement(elementName).style.display = 'none';

        return this;
    }

    addClassToElement(elementName, className) {
        let element = this.getElement(elementName);
        element.classList.add(className);

        return this;
    }

    addClassToSingleElement(elementName, className) {
        let element = this.getElement(elementName);
        this.removeClassFromAllElements(className);
        element.classList.add(className);

        return this;
    }

    removeClassFromElement(elementName, className) {
        let element = this.getElement(elementName);
        element.classList.remove(className);

        return this;
    }

    removeClassFromAllElements(className) {
        for(let elementName in this.elements) {
            this.elements[elementName].classList.remove(className);
        }

        return this;
    }

}