Dwa buttony i trzy funkcje. Jak to ogarnąć?

0

Cześć :D
Mam pewien problem i każde jego rozwiązanie które sam
produkuje jest długie, nieczytelne i nie działa.
Dla tego zwracam się z tym do Was!
Oto problem:

Mam dwa przyciski. Przycisk A i przycisk B. Mam trzy funkcje A, B i X.
Przy włączeniu programu ustawiłem eventHandlery ('click') dla przycisku **A ** funkcja A, a dla przycisku B funkcja B.
Proste.
Ale sprawa się komplikuje.
Po kliknięciu przycisku A lub B jego napis(wartość) powinnna zmienić się na "powrót" a eventHandler na funkcje X.
Gdy po naciśnięciu A kliknę na B to napis przycisku B powinna być "powrót" a handler X
a przycisk A powinien wrócić do swojego pierwotnego napisu i eventHandlera.
W sytuacji B następnie A analogicznie.
Przy naciśnięciu A następnie A lub B następnie B powrót do stanu pierwotnego.

Jak to ładnie napisać ?

1

To może coś takiego JSFiddle:

class HandlerManager {
    constructor() {
        this.elements = [];
        this.handleClick = this.handleClick.bind(this);
    }

    bind(element, handlerA, handlerB) {
        this.elements.push({
            handlerA: this.decorateHandlerA(handlerA).bind(this),
            handlerB: this.decorateHandlerB(handlerB).bind(this),
            internalElement: element,
            state: 0
        });

        element.addEventListener('click', this.handleClick);
    }
    
    handleClick(e) {
        const element = this.findElement(e.target);
        element.state = element.state ^ 1;
        
        if (element.state) {
            element.handlerA(e);    
        } else {
            element.handlerB(e);
        }
    }

    decorateHandlerA(handlerA) {
        return (e) => {
            handlerA(e);

            e.target.innerText = e.target.dataset.textB;

            this.resetOtherElements(e.target);
        }
    }

    decorateHandlerB(handlerB) {
        return (e) => {
            handlerB(e);
            
            e.target.innerText = e.target.dataset.textA;
        }
    }
    
    findElement(element) {
        return this.elements.find(({ internalElement }) => internalElement === element);
    }
    
    resetOtherElements(element) {
        this.elements
            .filter(({ internalElement, state}) => internalElement !== element && state)
            .forEach(element => {
                element.state = 0;
                element.internalElement.innerText = element.internalElement.dataset.textA;
            });
    }
}

const aBtn = document.getElementById('a');
const bBtn = document.getElementById('b');
const cBtn = document.getElementById('c');
const manager = new HandlerManager();
manager.bind(aBtn, () => alert('A first handler'), () => alert('A second handler'));
manager.bind(bBtn, () => alert('B first handler'), () => alert('B second handler'));
manager.bind(cBtn, () => alert('C first handler'), () => alert('C second handler'));

1 użytkowników online, w tym zalogowanych: 0, gości: 1