Mastering TypeScript 3 - Third Edition

Reacting to DOM events

We are almost there in our implementation of the State and Mediator pattern. The final piece of the puzzle is hooking up our DOM click events to trigger a state change. Let's modify the buttonClickedDetail function as follows:

buttonClickedDetail() { 
    this.mediator.moveToState(StateType.DetailPanel); 
} 

The buttonClickedDetail function is invoked when a user clicks on the Detail button on our main panel. All that this event handler now needs to do is to call the moveToState function on the Mediator to move to the DetailPanel state. Very simple indeed.

We also need to modify the event handler function that is called when a user is on the detail panel, and click on the < button to return to the main panel. Remember that ...