Code Editor Focus

‹prev | My Chain | next›

After last night, I have one significant issue outstanding in the code editor for Gaming JavaScript. These are not so much defects in the original implementation of Mr Doob's code editor—more usability tweaks needed for kids to be able to use it well.

The last substantive issue is that, when switching from code + preview to just the preview, the renderer does not have keyboard focus. Hopefully, unlike last night, this will be a relatively quick fix. I have writing to do.

To test this out, I copy my retrograde motion simulation into my local development editor:

When the code is hidden, I should be able to switch between cameras by typing "1" or "2". That is not working right now.

Both preview and code are absolutely positioned, full viewport <div> tags:

// preview

var preview = document.createElement( 'div' );
// ...
document.body.appendChild( preview );

// editor

var code = CodeMirror( document.body, { /* ... */ } );
var codeElement = code.getWrapperElement();
// ...
document.body.appendChild( codeElement );

So my first thought is to focus() these <div> tags when toggling the display:

var toggle = function () {
  if (codeElement.style.display == '') {
    shortCodeToolbar();
    codeElement.style.display = 'none';
    preview.focus();
  } 
  else {
    codeToolbar();
    codeElement.style.display = '';
    codeElement.focus();
  }
};

Unfortunately, neither ends up working.

The preview <div> hold a frame element, which is what actually needs focus. Even simpler, the CodeMirror editor exposes a focus() method so I can treat it as a black box:

var toggle = function () {
  if (codeElement.style.display == '') {
    shortCodeToolbar();
    codeElement.style.display = 'none';
    preview.children[0].focus();
  }
  else {
    codeToolbar();
    codeElement.style.display = '';
    code.focus();
  }
};

And that does the trick. I can now toggle the code display and have the editor or the preview focused as needed. That should make things much easier for kids. Now back to writing...


Day #533