Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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...
commit 598d9d393450bd16c390b84e6d61f90e6663eb51 1 parent 5f9bf0d
Toby Schachman authored
2  compiled/app.js
@@ -192,6 +192,7 @@
192 192
193 193 init = function() {
194 194 var animloop, canvas, ctx;
  195 + ko.applyBindings(koState);
195 196 canvas = $("#workspaceCanvas");
196 197 ctx = canvas[0].getContext('2d');
197 198 regenerateRenderers();
@@ -395,7 +396,6 @@
395 396 ui.dragging = false;
396 397 return koState.ghostHint(false);
397 398 });
398   - ko.applyBindings(koState);
399 399 render();
400 400 koState.focus.subscribe(function() {
401 401 return regenerateRenderers();
5 compiled/css/style.css
@@ -114,6 +114,11 @@ button:active {
114 114 }
115 115 #sidebarRight #components.hidden {
116 116 opacity: 0;
  117 + -webkit-transition: opacity 0s;
  118 + -moz-transition: opacity 0s;
  119 + -ms-transition: opacity 0s;
  120 + -o-transition: opacity 0s;
  121 + transition: opacity 0s;
117 122 }
118 123 #sidebarRight .component {
119 124 position: relative;
63 index.html
@@ -11,28 +11,6 @@
11 11 <body>
12 12
13 13
14   -
15   -<div id="workspace">
16   - <canvas id="workspaceCanvas" data-bind="canvas: focus()"></canvas>
17   - <canvas id="drawFurther" data-bind="css: {hidden: mouseOver()}"></canvas>
18   - <canvas id="forSaving"></canvas>
19   - <div class="filler"></div>
20   -</div>
21   -
22   -<div id="sidebar">
23   - <div id="definitions" data-bind="foreach: definitions">
24   - <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
25   -
26   - <canvas data-bind="canvas: $data"></canvas>
27   - <div class="filler"></div>
28   - </div>
29   - </div>
30   -
31   - <button class="button" id="addDefinition">+</button>
32   -</div>
33   -
34   -
35   -
36 14 <script type="text/html" id="component-template">
37 15 <div class="component" data-bind="css: {highlighted: $root.isHighlighted(componentPath), top: componentPath.length == 0}">
38 16
@@ -54,21 +32,42 @@
54 32
55 33
56 34
  35 +<script type="text/html" id="main-template">
  36 + <div id="workspace">
  37 + <canvas id="workspaceCanvas" data-bind="canvas: focus()"></canvas>
  38 + <canvas id="drawFurther" data-bind="css: {hidden: mouseOver()}"></canvas>
  39 + <canvas id="forSaving"></canvas>
  40 + <div class="filler"></div>
  41 + </div>
  42 +
  43 + <div id="sidebar">
  44 + <div id="definitions" data-bind="foreach: definitions">
  45 + <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
  46 +
  47 + <canvas data-bind="canvas: $data"></canvas>
  48 + <div class="filler"></div>
  49 + </div>
  50 + </div>
  51 +
  52 + <button class="button" id="addDefinition">+</button>
  53 + </div>
57 54
58   -<div id="sidebarRight">
59   - <div id="components" data-bind="css: {hidden: $root.focus().components().length == 0}">
60   - <div data-bind="template: { name: 'component-template', data: {rootDefinition: $root.focus(), componentPath: []} }"></div>
  55 + <div id="sidebarRight">
  56 + <div id="components" data-bind="css: {hidden: $root.focus().components().length == 0}">
  57 + <div data-bind="template: { name: 'component-template', data: {rootDefinition: $root.focus(), componentPath: []} }"></div>
  58 + </div>
61 59 </div>
62   -</div>
63 60
64   -<div id="dragHint">
65   - Drag
66   -</div>
  61 + <div id="dragHint">
  62 + Drag
  63 + </div>
67 64
68   -<div id="ghostHint" class="mini" data-bind="visible: ghostHint">
69   - <canvas id="ghostHintCanvas"></canvas>
70   -</div>
  65 + <div id="ghostHint" class="mini" data-bind="visible: ghostHint">
  66 + <canvas id="ghostHintCanvas"></canvas>
  67 + </div>
  68 +</script>
71 69
  70 +<div data-bind="template: {name: 'main-template', data: $data}"></div>
72 71
73 72
74 73 <script src="vendor/numeric-1.0.2.min.js"></script>
4 src/app.coffee
@@ -135,6 +135,8 @@ workspaceCoords = (e) ->
135 135
136 136
137 137 init = () ->
  138 + ko.applyBindings(koState)
  139 +
138 140 canvas = $("#workspaceCanvas")
139 141
140 142 ctx = canvas[0].getContext('2d')
@@ -359,7 +361,7 @@ init = () ->
359 361
360 362
361 363
362   - ko.applyBindings(koState)
  364 +
363 365 render()
364 366
365 367
1  src/style.styl
@@ -135,6 +135,7 @@ button
135 135 margin-top: -4px
136 136 &.hidden
137 137 opacity: 0
  138 + transition(opacity 0s)
138 139 .component
139 140 position: relative
140 141 padding: 4px 0px

0 comments on commit 598d9d3

Please sign in to comment.
Something went wrong with that request. Please try again.