put everything in a template, fixing issue with stuff showing for spl…

…it second and disappearing when you first load the page
electronicwhisper · May 2, 2012 · 598d9d3 · 598d9d3
1 parent 5f9bf0d
commit 598d9d3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 34 deletions.
diff --git a/compiled/app.js b/compiled/app.js
@@ -192,6 +192,7 @@
 
   init = function() {
     var animloop, canvas, ctx;
+    ko.applyBindings(koState);
     canvas = $("#workspaceCanvas");
     ctx = canvas[0].getContext('2d');
     regenerateRenderers();
@@ -395,7 +396,6 @@
       ui.dragging = false;
       return koState.ghostHint(false);
     });
-    ko.applyBindings(koState);
     render();
     koState.focus.subscribe(function() {
       return regenerateRenderers();

diff --git a/compiled/css/style.css b/compiled/css/style.css
@@ -114,6 +114,11 @@ button:active {
 }
 #sidebarRight #components.hidden {
   opacity: 0;
+  -webkit-transition: opacity 0s;
+  -moz-transition: opacity 0s;
+  -ms-transition: opacity 0s;
+  -o-transition: opacity 0s;
+  transition: opacity 0s;
 }
 #sidebarRight .component {
   position: relative;

diff --git a/index.html b/index.html
@@ -11,28 +11,6 @@
 <body>
 
 
-
-<div id="workspace">
-  <canvas id="workspaceCanvas" data-bind="canvas: focus()"></canvas>
-  <canvas id="drawFurther" data-bind="css: {hidden: mouseOver()}"></canvas>
-  <canvas id="forSaving"></canvas>
-  <div class="filler"></div>
-</div>
-
-<div id="sidebar">
-  <div id="definitions" data-bind="foreach: definitions">
-    <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
-
-      <canvas data-bind="canvas: $data"></canvas>
-      <div class="filler"></div>
-    </div>
-  </div>
-
-  <button class="button" id="addDefinition">+</button>
-</div>
-
-
-
 <script type="text/html" id="component-template">
   <div class="component" data-bind="css: {highlighted: $root.isHighlighted(componentPath), top: componentPath.length == 0}">
 
@@ -54,21 +32,42 @@
 
 
 
+<script type="text/html" id="main-template">
+  <div id="workspace">
+    <canvas id="workspaceCanvas" data-bind="canvas: focus()"></canvas>
+    <canvas id="drawFurther" data-bind="css: {hidden: mouseOver()}"></canvas>
+    <canvas id="forSaving"></canvas>
+    <div class="filler"></div>
+  </div>
+
+  <div id="sidebar">
+    <div id="definitions" data-bind="foreach: definitions">
+      <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
+
+        <canvas data-bind="canvas: $data"></canvas>
+        <div class="filler"></div>
+      </div>
+    </div>
+
+    <button class="button" id="addDefinition">+</button>
+  </div>
 
-<div id="sidebarRight">
-  <div id="components" data-bind="css: {hidden: $root.focus().components().length == 0}">
-    <div data-bind="template: { name: 'component-template', data: {rootDefinition: $root.focus(), componentPath: []} }"></div>
+  <div id="sidebarRight">
+    <div id="components" data-bind="css: {hidden: $root.focus().components().length == 0}">
+      <div data-bind="template: { name: 'component-template', data: {rootDefinition: $root.focus(), componentPath: []} }"></div>
+    </div>
   </div>
-</div>
 
-<div id="dragHint">
-  Drag
-</div>
+  <div id="dragHint">
+    Drag
+  </div>
 
-<div id="ghostHint" class="mini" data-bind="visible: ghostHint">
-  <canvas id="ghostHintCanvas"></canvas>
-</div>
+  <div id="ghostHint" class="mini" data-bind="visible: ghostHint">
+    <canvas id="ghostHintCanvas"></canvas>
+  </div>
+</script>
 
+<div data-bind="template: {name: 'main-template', data: $data}"></div>
 
 
 <script src="vendor/numeric-1.0.2.min.js"></script>

diff --git a/src/app.coffee b/src/app.coffee
@@ -135,6 +135,8 @@ workspaceCoords = (e) ->
 
 
 init = () ->
+  ko.applyBindings(koState)
+
   canvas = $("#workspaceCanvas")
 
   ctx = canvas[0].getContext('2d')
@@ -359,7 +361,7 @@ init = () ->
 
 
 
-  ko.applyBindings(koState)
+
   render()
 
 

diff --git a/src/style.styl b/src/style.styl
@@ -135,6 +135,7 @@ button
     margin-top: -4px
     &.hidden
       opacity: 0
+      transition(opacity 0s)
   .component
     position: relative
     padding: 4px 0px