Permalink
Browse files

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

…it second and disappearing when you first load the page
  • Loading branch information...
1 parent 5f9bf0d commit 598d9d393450bd16c390b84e6d61f90e6663eb51 @electronicwhisper committed May 2, 2012
Showing with 41 additions and 34 deletions.
  1. +1 −1 compiled/app.js
  2. +5 −0 compiled/css/style.css
  3. +31 −32 index.html
  4. +3 −1 src/app.coffee
  5. +1 −0 src/style.styl
View
@@ -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();
View
@@ -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;
View
@@ -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>
View
@@ -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()
View
@@ -135,6 +135,7 @@ button
margin-top: -4px
&.hidden
opacity: 0
+ transition(opacity 0s)
.component
position: relative
padding: 4px 0px

0 comments on commit 598d9d3

Please sign in to comment.