I implemented a simpler approach to handling user actions when the user does not have control. This approach uses CSS to turn off all events in the div surrounding the "calculator" in DesmosActivity, DesmosGraph, and GgbGraph. Clicks and key presses are captured in a surrounding element (either a div or span; for some reason the different containers need different elements), which check if the user has control and displays the modal if not. This approach basically stops the underlying calculator from reacting in any way (ditto for the navigation buttons in DesmosActivity) unless the user has control (e.g., no hover effects over buttons, cannot make a video start, etc.). The approach also seems to work, although not as perfectly, if the user tries to get to parts of the calculator via the tab key. If this user does this, you can see the focus changing although the user still cannot click or type.
With this approach, I believe that the "redoing" and "undoing" flags in DesmosGraph and GgbGraph can be removed.
Still a problem: I had to hard-code the height of the div surrounding the DesmosActivity (819px). Ideally, we should set the height to be the actual player height programmatically. For some reason, the div doesn't adjust it's height to the containing children (I tried a few approaches that didn't work).
I also adjusted DesmosActivity to abide by almost all the ESLint rules.
I implemented a simpler approach to handling user actions when the user does not have control. This approach uses CSS to turn off all events in the div surrounding the "calculator" in DesmosActivity, DesmosGraph, and GgbGraph. Clicks and key presses are captured in a surrounding element (either a div or span; for some reason the different containers need different elements), which check if the user has control and displays the modal if not. This approach basically stops the underlying calculator from reacting in any way (ditto for the navigation buttons in DesmosActivity) unless the user has control (e.g., no hover effects over buttons, cannot make a video start, etc.). The approach also seems to work, although not as perfectly, if the user tries to get to parts of the calculator via the tab key. If this user does this, you can see the focus changing although the user still cannot click or type.
With this approach, I believe that the "redoing" and "undoing" flags in DesmosGraph and GgbGraph can be removed.
Still a problem: I had to hard-code the height of the div surrounding the DesmosActivity (819px). Ideally, we should set the height to be the actual player height programmatically. For some reason, the div doesn't adjust it's height to the containing children (I tried a few approaches that didn't work).
I also adjusted DesmosActivity to abide by almost all the ESLint rules.