`org-re-reveal` custom slide keyboard bindings

Question

Per the reveal.js docs on keyboard bindings, I'd like to find a way to configure the keyboard bindings in the following way:

Reveal.configure({
  keyboard: {
    // left, down -> next
    40: 'next', // ↓
    39: 'next', // ->
    // right, up -> prev
    37: 'prev', // <-
    38: 'prev', // ↑
    // return, space -> down
    13: 'down', // <RET>
    32: 'down', // <SPC>
    // backspace -> up
    8:  'up' // <BSPC>
  }
});

with org-re-reveal, but I'm stuck on how to actually do that either on a per-file (which is preferred) or global basis. I tried saving the above javascript as kbd-config.js in the same directory as my presentation.org and putting

#+REVEAL_INIT_SCRIPT: kbd-config.js

on a line towards with the top of presentation.org (along with #+OPTIONS: ...), but that lead to a blank presentation.

(Context: this would be a useful customization because my presentation remote only has buttons that correspond to ArrowUp and ArrowDown. I'm not sure what a better work-around would be, especially because this at least gives me the option of going over to the computer and navigating up and down if I really want to.)

Edit:

I renamed kbd-config.js to kbd.js and updated it in the following manner:

function () {
  return { keyboard: {
    // left, down -> next
    40: 'next', // ↓
    39: 'next', // ->
    // right, up -> prev
    37: 'prev', // <-
    38: 'prev', // ↑
    // return, space -> down
    13: 'down', // <RET>
    32: 'down', // <SPC>
    // backspace -> up
    8:  'up' // <BSPC>
  }}};

and included the line #+REVEAL_INIT_SCRIPT:./kbd.js in presentation.org, which produced the same blank slideshow. My browser's console had two errors:

presentation.html:115 GET file:///Users/matlock/technical/install/reveal.js/lib/js/head.min.js net::ERR_FILE_NOT_FOUND
presentation.html:147 Uncaught SyntaxError: Unexpected token .

The second error pointed to this block

<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({

controls: true,
progress: true,
history: false,
center: true,
slideNumber: 'c',
rollingLinks: false,
keyboard: true,
mouseWheel: false,
fragmentInURL: false,
pdfSeparateFragments: true,

overview: true,

theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'slide', // see README of reveal.js for options
transitionSpeed: 'default',

// Optional libraries used to extend on reveal.js
dependencies: [
 { src: 'file:///path/to/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
 { src: 'file:///path/to/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///path/to/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///path/to/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 { src: 'file:///path/to/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]

,./kbd.js});
</script>

which is where the problem seems to occur. Clearly there's an issue with the way I'm trying to include JavaScript, but I simply don't know how to do it.

Answer 1

Including #+REVEAL_EXTRA_JS: { src: './kbd-config.js' } at the top actually seems to work. Looking in Chrome's Developer Tools -> Applications -> Frames -> top -> presentation.html, the dependencies list has been updated as follows:

// Optional libraries used to extend on reveal.js
dependencies: [
{ src: './kbd-config.js' },
 { src: 'file:///path/to/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
 { src: 'file:///path/to/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///path/to/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///path/to/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
 { src: 'file:///path/to/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]

});