Реалити Разработка

class Button {
    constructor(options) {
        this.title = options.name || 'Button';
        this.handler = options.handler || null;
        this.managed = !!options.managed;
        this.disabled = false;
 
        this.button = document.createElement('button');
        this.button.innerText = this.title;
        this.activateListeners();
    }
 
    activateListeners() {
        if (this.handler) {
            this.disabled = false;
            this.button.addEventListener('click', this.handler);
        }
    }
 
    deactivateListeners() {
        if (this.handler && !this.disabled) {
            this.disabled = true;
            let event = new CustomEvent("exampleLog", {
                bubbles: true,
                detail: {message: 'Deactivate listeners for ' + this.title}
            });
            this.button.dispatchEvent(event);
            this.button.removeEventListener('click', this.handler);
        }
    }
 
    toggleDisabled(disabled) {
        if (this.managed) {
            // this.button.disabled = disabled; // закомментировано для тестирования
            this.button.classList.toggle('disabled', disabled);
            if (disabled) {
                this.deactivateListeners();
            } else {
                this.activateListeners();
            }
        }
    }
 
    getButton() {
        return this.button;
    }
 
    destroy() {
        this.deactivateListeners();
    }
}

class Button {
    constructor(options) {
        this.title = options.name || 'Button';
        this.handler = options.handler.bind(this) || null;
        this.managed = !!options.managed;
        this.disabled = false;
 
        this.button = document.createElement('button');
        this.button.innerText = this.title;
        this.activateListeners();
    }
 
    activateListeners() {
        if (this.handler) {
            this.disabled = false;
            this.button.addEventListener('click', this.handler);
        }
    }
 
    deactivateListeners() {
        if (!!this.handler && !this.disabled) {
            this.disabled = true
            this.sendLog('Deactivate listeners for ' + this.title);
            this.button.removeEventListener('click', this.handler);
        }
    }
 
    sendLog(message) {
        let event = new CustomEvent(LOG_EVENT, {
            bubbles: true,
            detail: {message: message}
        });
        this.button.dispatchEvent(event);
    }
 
    toggleDisabled(disabled) {
        if (this.managed) {
            // this.button.disabled = disabled; // закомментировано для тестирования
            this.button.classList.toggle('disabled', disabled);
            if (disabled) {
                this.deactivateListeners();
            } else {
                this.activateListeners();
            }
        }
    }
 
    getButton() {
        return this.button;
    }
 
    destroy() {
        this.deactivateListeners();
    }
}

class Toolbar {
    constructor(options) {
        this.element = options.element || null;
        this.buttons = options.buttons || [];
        this.initButtons();
        this.initSelfButtons();
        this.customButtonsDisabled = false;
    }
 
    initSelfButtons() {
        this.btnDisable = new Button({
            managed: false,
            name: 'Disable',
            handler: this.disableOther
        })
        this.element.appendChild(this.btnDisable.getButton());
        this.btnDelete = new Button({
            managed: false,
            name: 'Delete',
            handler: this.deleteOther
        })
        this.element.appendChild(this.btnDelete.getButton());
    }
 
    deleteOther = () => {
        this.customButtonsDisabled = !this.customButtonsDisabled;
        for (const button of this.buttons) {
            this.removeButton(button.instance);
            button.instance = null;
        }
        this.removeButton(this.btnDisable);
        this.btnDisable = null;
    }
 
    removeButton(button) {
        if (button) {
            button.destroy();
            button.getButton().remove();
        }
    }
 
    disableOther = (e) => {
        this.customButtonsDisabled = !this.customButtonsDisabled;
        e.target.innerText = this.customButtonsDisabled ? 'Enable' : 'Disable';
        for (const button of this.buttons) {
            button.instance.toggleDisabled(this.customButtonsDisabled);
        }
    }
 
    initButtons() {
        for (const button of this.buttons) {
            button.managed = true;
            button.instance = new Button(button);
            this.element.appendChild(button.instance.getButton());
        }
    }
 
    destroy() {
        this.deleteOther();
        this.removeButton(this.btnDelete);
    }
}

const LOG_EVENT = 'exampleLog';
 
class Logger {
    constructor(options) {
        this.element = options.element || null;
        document.addEventListener(LOG_EVENT, this.log.bind(this));
    }
 
    log(e) {
        this.element.innerText += e.detail.message + '\n';
    }
 
    destroy() {
        document.removeEventListener(LOG_EVENT, this.log.bind(this));
    }
}