Extensible key bindings

[bennypowers]

It would be nice to let devs extend the keybindings in slidem-deck, maybe by adding a slot to the keybindings divs

[ruphin]

Excellent suggestion, I will include it in the next release

[bennypowers]

for reference, I'm doing this in index.html for now:

<script>
    window.addEventListener('WebComponentsReady', () => {
      const deck = document.getElementById('deck');
      const forward = () => deck.$.forward.onclick();
      const backward = () => deck.$.backward.onclick();
      deck.addEventListener('click', forward);
      document.body.addEventListener('keyup', (event) =>
          event.code === 'Space' ? forward()
        : event.code === 'Delete' ? backward()
        : event.code === 'Backspace' ? backward()
        : event.code === 'ArrowLeft' ? backward()
        : null);
    });
    </script>

[ruphin]

I added a slot where you can add keybindings for navigation. Use the forward and backward slots for appropriate navigation direction.

Example:

<slidem-deck loading>
  <gluon-keybinding slot="forward" key=" "></gluon-keybinding>
  <gluon-keybinding slot="backward" key="Delete"></gluon-keybinding>
  <gluon-keybinding slot="backward" key="Backspace"></gluon-keybinding>

Note: gluon-keybinding uses Key Values and not Key Codes, so the correct key for Space is " ".

Note2: IE11 is not spec compliant and uses "Spacebar", so you have to add both to support older browsers.