0

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.

  • 1
    The error message you're getting in the browser might be helpful. Try opening developer tools and going to the JavaScript console. – DoMiNeLa10 May 1 at 8:38
0

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; } }]

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.