Passing Data with Location Hash

‹prev | My Chain | next›

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