Now that I have a pretty SVG icon for expanding the embedded version of the ICE Code Editor, it is time to actually make it do something.
I think the easiest thing for now is to send the sourcecode, and a title, to the full-screen editor at http://gamingjs.com/ice. I can build from that later. The sourcecode should be fairly straight-forward. The ICE Code Editor already boasts the ability to gzip the code for storage and sharing. Something is sure to go wrong in practice, but in theory I ought to be able to make it work.
As for the title, I think this is probably something else to include in the
<script>
tag that contains the code on the page:<script type="text/ice-code" id="code-001" line="20"> -script src="http://gamingJS.com/Three.js" -script src="http://gamingJS.com/ChromeFixes.js" // This is where stuff in our game will happen: var scene = new THREE.Scene(); // ... </script>The
-script
lines are my clever way of sourcing external JavaScript libraries in the sample code without using <script>
tags that would otherwise close the outer <script>
tag. The outer <script>
tag is already parsed by the ICE.Embedded
class, so telling it to look for a title
attribute is no trouble:Embedded.prototype.attributesFromSource = function() { // ... if (this.script.attributes.title) { this.title = this.script.attributes.title.value; } };This should extract a title from the
<script>
tag of the form:<script type="text/ice-code" title="Shapes Demo" line="20"> -script src="http://gamingJS.com/Three.js" -script src="http://gamingJS.com/ChromeFixes.js" // This is where stuff in our game will happen: var scene = new THREE.Scene(); // ... </script>I can then use this in the title supplied to the full-screen version of the ICE Code Editor:
Embedded.prototype.addControls = function() { var el = document.createElement('div'); el.className = 'icon'; document.body.appendChild(el); var that = this; el.addEventListener('click', function() { window.location = 'http://localhost:3000/#B/' + ICE.encode(that.editor.getContent()) + '?title=' + encodeURIComponent(that.title); }); // ... };The full screen version of ICE is attached with the
attachFull()
method:<script> ICE.attachFull(); </script>I had not pulled in the URL parsing code, so I do that now:
function attachFull() { var el = createElements(); setFlags(); store = new ICE.Store(); editor = new ICE.Editor(el, {edit_only: EDIT_ONLY}); applyStyles(); readLocationHash(); editor.setContent(store.current.code); // ... }Most of that method sorts out whether or not code is embedded in the hashtag of the URL. If it is, then I need to parse it and read the title from the query string:
function readLocationHash() { var title; if (window.location.search.indexOf('title=')) { title = window.location.search.substr(window.location.search.indexOf('title=') + 6); title = decodeURIComponent(title); } store.create(ICE.decode(hash.substr(2)), title); window.location.hash = ''; window.location.search =''; }I also have to remember to call the built-in
decodeURIComponent
. Happily, the ICE.Store
class does the rest. I supply the decoded source code and title and it is stored in localStorage for immediate use.That does the trick. After triggering the click event on the embedded code, I create a new entry in the localStorage that I can immediately start playing with. I still need to account for the case in which the title already exists, but this seems a decent stopping point for the night.
Day #729
No comments:
Post a Comment