Monday, April 8, 2013

Full-Screen ICE as a Component

‹prev | My Chain | next›

Up tonight, the scary part of refactoring the ICE Code Editor into parts: getting the original, full-screen editor working again. I already have the ICE.Editor class to the point that it supports ICE.Embedded instances—in-page versions of the editor for use in blog posts. Tonight, I need to get started on breaking the rest out into ICE.Full and ICE.Store to support a full-screen editor that can persist projects in local storage.

This is a multi-day undertaking, but I need to start somewhere. And that somewhere is the HTML that will include the necessary scripts:
<!DOCTYPE html>
<html>
  <head>
    <title>code editor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="editor.css">
    <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ace/keybinding-emacs.js"></script>
    <script src="js/rawinflate.js"></script>
    <script src="js/rawdeflate.js"></script>
    <script src="js/appcache.js"></script>
    <script src="js/ice-store.js"></script>
    <script src="js/ice-editor.js"></script>
    <script src="js/ice-full.js"></script>
  </head>
  <body></body>
  <script>
    ICE.attachFull();
  </script>
</html>
That is a crazy amount of <script> tags, all of which are required to make this thing work. I will have to combine and minify that later. For now, I focus on the API entry point, ICE.attachFull(), which serves as the counterpoint to the ICE.attachEmbedded(). In there, I pull in much of the old initialization code and also create new instances of the local data store and editor classes:
function attachFull() {
  var el = createElements();
  store = new ICE.Store();
  editor = new ICE.Editor(el);
  editor.setContent(store.current);
  codeToolbar();
}
Much of the subsequent effort involves replacing direct local storage access with calls to the ICE.Store API and pulling in bits and pieces of code on-demand. I eventually get it to the point that the code editor seems to kick in (I see line 1 shown), but then crashes with:
Uncaught TypeError: Object #<Object> has no method 'match' ace.js:7467
$detectNewLine ace.js:7467
insert ace.js:7540
setValue ace.js:7447
setValue ace.js:1752
Editor.setContent ice-editor.js:36
attachFull ice-full.js:457
(anonymous function) localhost/:18
After a moment's freak-out, I realize that this is due to the content that I am now passing to the setContent() method of the ICE.Editor. Specifically, I am not supplying code, I am supplying a local storage record. The fix is easy enough—I use the code property of the local storage record:
function attachFull() {
  var el = createElements();
  store = new ICE.Store();
  editor = new ICE.Editor(el);
  editor.setContent(store.current.code);
  codeToolbar();
}
Just like that, I have a full-screen ICE Code Editor, now coming from a separate module:



There is still much to be done. I very much doubt those buttons still work. But all, in all, this is a promising start to breaking the full screen version of the ICE Code Editor out into a single responsible class.


Day #716

No comments:

Post a Comment