excaliburjs / Excalibur / 6469

84%

main: 89%

push

travis-ci

fix(Keyboard): Fix accessing cross-origin frame exception (#1511)

Closes #1510

## Changes:

- Fix `Keyboard.init` throwing error when embedded in cross-origin iframe
- Add Keyboard story
- Fix Anchors stories so they show up again
- Fix Pointer stories and use `PointerScope.Canvas` in Storybook
- Disable Storybook shortcuts so they don't conflict with keyboard-enabled stories

Example of it working in iframe:

![image](https://user-images.githubusercontent.com/563819/80446222-e6d2a000-88db-11ea-8b9f-8ee3cbbd2250.png)


OK, so I discovered some things when testing this in jsfiddle (embed localhost <iframe>):

Keyboard events will not fire AT ALL on document when doing cross-origin iframes
Keyboard events WILL fire if a wrapping element around <canvas /> is used
Invoking Storybook's action helper is expensive and slows down FPS plus it also triggers cross-origin exceptions
Implementing an equivalent KeyboardScope like PointerScope is more involved because we'd need to re-parent the canvas and the initialization routine happens before the game is actually started, so the <canvas> element may be in a detached state (which is the case for Storybook, actually). I tried to do a this.on('initialize') within the initialization sequence but that never was emitted on Engine.

Pointer events avoid this issue entirely because canvas receives events fine. I also tried to do a "hack" using tabindex="1" as mentioned here but didn't get it to work.

Therefore, I will open a new issue to propose adding KeyboardScope so that people can fallback to listening to "canvas" key events if they want.

2045 of 3009 branches covered (67.96%)

6699 of 8102 relevant lines covered (82.68%)

16378.51 hits per line