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/:18After 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