Only listen to keyboard events on div, and add indicator for it.

[pconerly]

The motivation for this change came from reading this comment :)

Fairly straightforward changes to only listen to wrapping div. The more complicated part of this is adding a keyboard-indicator to show whether the glift box currently has focus.

I wasn't sure of the best way to pass this.statusBar object into the initKeybindingListener. This feels a little janky, let me know how you'd like it.

Screenshots on http://localhost:9080/htmltests/GameViewerTester.html

Keyboard shortcuts active:

Keyboard shortcuts not active:

[pconerly]

Also I really like the wikimedia keyboard asset more, but I couldn't figure out how to get the string representation to work?

  // From Wikimedia: https://commons.wikimedia.org/wiki/File:Keyboard-icon_Wikipedians.svg
  'keyboard-indicator-wikimedia': {
    string: "M43.614,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h57.662 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H43.614z M106.031,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H106.031z M24.146,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M54.132,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H54.132z M43.752,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H43.752z M24.146,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M64.512,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H64.512z M74.892,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H74.892z M85.271,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H85.271z M95.651,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H95.651z M106.031,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.989 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H106.031z M49.519,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H49.519z M39.139,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H39.139z M24.146,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h10.237 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M59.898,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H59.898z M70.278,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H70.278z M80.658,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H80.658z M91.038,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H91.038z M101.418,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H101.418z M111.798,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h9.222 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H111.798z M74.635,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.625 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H74.635z M64.537,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.625 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H64.537z M54.439,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H54.439z M44.342,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H44.342z M34.244,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H34.244z M24.146,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H24.146z M84.733,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H84.733z M94.832,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.623 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H94.832z M104.93,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.623 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H104.93z M115.027,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H115.027z",
    bbox: {"x":16.472,"y":24.500999999999998,"x2":128.693,"y2":77.39099999999999,"width":112.221,"height":52.88999999999999}
  },

It ends up looking fuzzy, and the code above doesn't have the keyboard outline. When I include the keyboard outline:

  // From Wikimedia: https://commons.wikimedia.org/wiki/File:Keyboard-icon_Wikipedians.svg
  'keyboard-indicator-wikimedia-outlined': {
    string: "M19.712,24.501c0,0-3.24,0-3.24,3.24v46.41 c0,0,0,3.24,3.24,3.24h105.741c0,0,3.24,0,3.24-3.24v-46.41c0,0,0-3.24-3.24-3.24H19.712z M43.614,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h57.662 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H43.614z M106.031,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H106.031z M24.146,63.057c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M54.132,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H54.132z M43.752,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H43.752z M24.146,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.85 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M64.512,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H64.512z M74.892,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H74.892z M85.271,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H85.271z M95.651,52.677c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H95.651z M106.031,52.677c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h14.989 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H106.031z M49.519,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H49.519z M39.139,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H39.139z M24.146,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h10.237 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H24.146z M59.898,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H59.898z M70.278,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H70.278z M80.658,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H80.658z M91.038,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H91.038z M101.418,42.297c0,0-0.648,0-0.648,0.647v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.647-0.647-0.647H101.418z M111.798,42.297c0,0-0.647,0-0.647,0.647v5.624c0,0,0,0.648,0.647,0.648h9.222 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.647-0.648-0.647H111.798z M74.635,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.625 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H74.635z M64.537,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.625 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H64.537z M54.439,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H54.439z M44.342,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H44.342z M34.244,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H34.244z M24.146,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H24.146z M84.733,31.916c0,0-0.647,0-0.647,0.648v5.624c0,0,0,0.648,0.647,0.648h5.624 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H84.733z M94.832,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.623 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H94.832z M104.93,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.623 c0,0,0.648,0,0.648-0.648v-5.624c0,0,0-0.648-0.648-0.648H104.93z M115.027,31.916c0,0-0.648,0-0.648,0.648v5.624c0,0,0,0.648,0.648,0.648h5.624 c0,0,0.647,0,0.647-0.648v-5.624c0,0,0-0.648-0.647-0.648H115.027z",
    bbox: {"x":16.472,"y":24.500999999999998,"x2":128.693,"y2":77.39099999999999,"width":112.221,"height":52.88999999999999}
  },

It just turns into a filled box on the statusBar--- i imagine b/c the actual svg draws it as a line, not as a fill. Oh well. Documenting incase an SVG enthusiast wants something to do.

[pconerly]

And now that we have a keyboard indicator, we can make a click on it show the list of shortcuts to solve https://github.com/Kashomon/glift/issues/112 for @amj

[artasparks]

I haven't forgotten about this -- I'm still thinking about the design. Thanks for the patch. I'll get back to you in a bit.

[pconerly]

Of course, let me know if there's anything I can do.