better timing control for initialization

propella · Sep 23, 2011 · 17f8450 · 17f8450
1 parent 352a8c2
commit 17f8450
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 14 deletions.
diff --git a/README b/README
@@ -42,6 +42,7 @@ http://code.google.com/p/tapl-haskell/
 http://keith-wood.name/svg.html
 
 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Naming
+http://localhost/src/lambda/iframe-test.html
 
 * Google gadget for hatena
 

diff --git a/alligator.js b/alligator.js
@@ -63,7 +63,11 @@ function showIt() {
 
 function iframeSource(expression) {
 
-  var url = location.protocol + "//" + location.host + location.pathname + "iframe.html#!/" + encodeURIComponent(expression);
+  var url = location.protocol + "//" +
+    location.host +
+    location.pathname +
+    "iframe.html?width=400&height=300#!/" +
+    encodeURIComponent(expression);
   return '<iframe width="400" height="300" src="' + url + '" style="border: 0px solid #8c8;"></iframe>';
 }
 
@@ -111,7 +115,10 @@ function playOnce() {
 
 // Do appropriate thing.
 function fire() {
-  if (PlayState == "WAIT") return play();
+  if (PlayState == "WAIT") {
+    showIt();
+    return play();
+  }
   if (PlayState == "PLAY") return stop();
   if (PlayState == "STOP") return play();
   throw "Unknown play state";
@@ -145,28 +152,41 @@ function showResult(term) {
 // ---------- Initialization ----------
 
 $(function() {
-  Shape.init($("#stage"));
-//  $("#stage > svg").attr("viewBox", "0 0 1600 1200");
+  Shape.init($("#stage"), initExp);
   $("#query").submit(showIt);
   $("#enter").click(showIt);
   $("#next").click(next);
   $("#play").click(play);
   $("#stop").click(stop);
   $("#stage").click(fire);
-  initExp();
 //  runViewTest();
 });
 
 function initExp() {
   var query= getQuery();
   if (query == "") return;
   $("#exp").val(query);
-  setTimeout(showIt, 200); // for debug
+  showIt();
 }
 
+// Initialize for iframe. It must be called before Shape.init
 function initIframe() {
+  var query = getQuery2();
+  $("#stage").width(query["width"]);
+  $("#stage").height(query["height"]);
 }
 
+// Convert CGI style query (?key=value&key=value...) to an object
+function getQuery2() {
+  var query = window.location.search.substring(1);
+  var each = query.split("&");
+  var result = {};
+  for (var i= 0; i < each.length; i++) {
+    var pair= each[i].split("=");
+    result[pair[0]] = decodeURIComponent(pair[1]);
+  }
+  return result;
+}
 
 window.onhashchange = initExp;
 

diff --git a/iframe-test.html b/iframe-test.html
@@ -13,8 +13,7 @@
 <body id="stage">
 
 <h1>Y combinator</h1>
-<iframe width="300" height="200" src="iframe.html#!/%CE%BBg.(%CE%BBx.g%20(x%20x))%20(%CE%BBx.g%20(x%20x))" style="border: 2px solid #8c8;"></iframe>
-
+<iframe width="600" height="480" src="http://localhost/src/lambda/iframe.html?width=600&amp;height=480#!/%CE%BBg.(%CE%BBx.g%20(x%20x))%20(%CE%BBx.g%20(x%20x))" style="border: 2px solid #8c8;"></iframe>
 </body>
 
 </html>
diff --git a/shape.js b/shape.js
@@ -20,8 +20,9 @@ var Shape = {};
 
    // Initialize the state
    // @param stage (HTMLElement) An element which SVG is attached.
-   Shape.init = function (stage) {
-     stage.svg({ onLoad: function () { loadShapes(stage); } });
+   // @param callback (Function) is called when all SVG are ready.
+   Shape.init = function (stage, callback) {
+     stage.svg({ onLoad: function () { loadShapes(stage, callback); } });
    };
 
    // Remove all object on the stage
@@ -30,15 +31,33 @@ var Shape = {};
      return false;
    };
 
-   function loadShapes (stage) {
+   function loadShapes (stage, callback) {
      Stage = stage.svg('get');
      var defs = Stage.defs();
+     var alligatorDone = false;
+     var eggDone = false;
 
      var alligatorSVG = Stage.svg(defs);
-     Stage.load("open.svg", { parent: alligatorSVG, changeSize: true, onLoad: initAlligator });
+     Stage.load("open.svg", { parent: alligatorSVG, changeSize: true, onLoad:
+       function(wrapper) {
+         AlligatorShape = $("#alligator", Stage.root())[0];
+         AlligatorWidth = parseFloat($(AlligatorShape.parentNode.parentNode).attr("width"));
+         AlligatorHeight = parseFloat($(AlligatorShape.parentNode.parentNode).attr("height"));
+         alligatorDone = true;
+         if (eggDone && callback !== null) callback();
+       }
+     });
 
      var eggSVG = Stage.svg(defs);
-     Stage.load("egg.svg", { parent: eggSVG, changeSize: true, onLoad: initEgg });
+     Stage.load("egg.svg", { parent: eggSVG, changeSize: true, onLoad:
+       function(wrapper) {
+         EggShape = $("#egg", Stage.root())[0];
+         EggWidth = parseFloat($(EggShape.parentNode).attr("width"));
+         EggHeight = parseFloat($(EggShape.parentNode).attr("height"));
+         eggDone = true;
+         if (alligatorDone && callback !== null) callback();
+       }
+     });
    }
 
    function initEgg (wrapper) {
@@ -488,7 +507,7 @@ var Shape = {};
    // ---------- Test code for shape.html ----------
 
    Shape.demo = function () {
-     Shape.init($("#stage"));
+     Shape.init($("#stage"), null);
      $("#stage > svg").attr("viewBox", "0 0 1600 1200");
      $("#stage > svg").click(onclick);
    };