Exporting ICE

‹prev | My Chain | next›

Today, I hope to get the ICE Code Editor embedded in a publicly available web page: this post. ICE is the code editor that I have kids use in 3D Game Programming for Kids to sling JavaScript code. Yesterday, I managed to get it embedded in a local web page, albeit with a few problems.

The first problem is that the full screen controls are still showing when ICE is embedded on the page:



I already have an embedded global variable (this is a proof of concept, not finalized code). I can use that variable in guard clauses for the problem toolbar:

var codeToolbar = function() {
  if (embedded) return;
  toolbar(
    buttonUpdate(),
    buttonHide(),
    buttonCodeMenu()
  );
};

I have to add similar guard clauses elsewhere. Once that is done, I no longer have the fullscreen toolbar:



I am not quite done, however, as I seem to have lost the ability to scroll the page in which ICE is embedded. This turns out to be simple CSS:

body {
 margin: 0px;
 overflow: hidden;
}

I remove that CSS, and add it to the parent element (either body or <div id="ice">) via JavaScript:

ice_parent.style.margin = '0px';
ice_parent.style.overflow = 'hidden';

With that, I have page scrollbars again:



I think that should do it. I try serving this directly from raw.github.com, but DOM security violations abound due to bad mime-types. Instead, I add this code to the location of the public ICE beta (http://gamingjs.com/ice-beta/). With that, I am ready (hopefully) to embed ICE in this blog post.

So I add the following code to this blog post:

<div id="ice"></div>
<link rel="stylesheet" href="http://gamingjs.com/ice-beta/editor.css">
<script src="http://gamingjs.com/ice-beta/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://gamingjs.com/ice-beta/js/ace/keybinding-emacs.js"></script>
<script src="http://gamingjs.com/ice-beta/js/rawinflate.js"></script>
<script src="http://gamingjs.com/ice-beta/js/rawdeflate.js"></script>
<script src="http://gamingjs.com/ice-beta/js/editor.js"></script>

Which results in:

Yay! It works. Well, it works on recent versions of Firefox and Chrome. I would guess that Internet Explorer users are seeing nothing, but they are probably used to it. I kid! I kid!

Anyhow, that is pretty darn exciting. I would say that I have my proof of concept. There are a bunch of features that I would like to see: scroll to line number, toggle between embedded and full-screen, embed code inside the <div id="ice"> tag, separate locations for the code and preview layers, maybe even IE support. I should probably set those aside until after the book is done, though.






Day #688