Mercurial > laserkard
diff js-lib/buy3.js @ 90:08f93d043ed2 laserkard
saving progress
| author | Robert McIntyre <rlm@mit.edu> |
|---|---|
| date | Mon, 26 Jul 2010 04:13:05 -0400 |
| parents | 81deee1fc85b |
| children | 0dd39631299c |
line wrap: on
line diff
1.1 --- a/js-lib/buy3.js Mon Jul 26 02:22:46 2010 -0400 1.2 +++ b/js-lib/buy3.js Mon Jul 26 04:13:05 2010 -0400 1.3 @@ -1,4 +1,7 @@ 1.4 Buy = (function (){ 1.5 + 1.6 + 1.7 + //Initilization Functions. 1.8 var order = 1.9 {color: "red", 1.10 style: "bold", 1.11 @@ -10,94 +13,123 @@ 1.12 var color; 1.13 var style; 1.14 1.15 - // var select_green; 1.16 - //var select_red; 1.17 - //var select_blue; 1.18 - //var select_black; 1.19 + // var state_map = 1.20 + // {green :{ 1.21 + // ref: null, 1.22 + // offState : null, 1.23 + // onState : null}, 1.24 + // red : { 1.25 + // offState: {"fill" : "#300", "scale" : 1}, 1.26 + // onState : {"fill" : "#F00" ,"scale" : 1}, 1.27 + // ref : null}, 1.28 + // blue : { 1.29 + // offState : null, 1.30 + // onState : null, 1.31 + // ref : null}, 1.32 + // black : {offState : null, onState : null, ref : null}, 1.33 + // display : {ref : null, state : {"fill" : "black"}}}; 1.34 + 1.35 + var state_map = 1.36 + {green : { ref: null, offState : null, onState : null}, 1.37 + red : { 1.38 + offState: {"fill" : "#300", "scale" : 1}, 1.39 + onState : {"fill" : "#F00" ,"scale" : 1}, 1.40 + ref : null}, 1.41 + blue : { 1.42 + offState : null, 1.43 + onState : null, 1.44 + ref : null}, 1.45 + black : {offState : null, onState : null, ref : null}, 1.46 + display : {ref : null, state : {"fill" : "black"}}}; 1.47 + 1.48 + var color_select_init = (function (){ 1.49 + state_map["red"].ref = 1.50 + color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState); 1.51 + state_map["red"].ref.node.onclick = 1.52 + (function (){order.color= "red"; update();}); 1.53 + 1.54 + state_map["green"].onState = 1.55 + {"fill" : "#0F0", "scale": 1}; 1.56 + state_map["green"].offState = 1.57 + {"fill" : "#030", "scale": 1}; 1.58 + state_map["green"].ref = 1.59 + color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState); 1.60 + state_map["green"].ref.node.onclick = 1.61 + (function (){order.color= "green"; update();}); 1.62 + 1.63 + state_map["blue"].onState = 1.64 + {"fill" : "#00F", "scale": 1}; 1.65 + state_map["blue"].offState = 1.66 + {"fill" : "#003", "scale": 1}; 1.67 + state_map["blue"].ref = 1.68 + color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState); 1.69 + state_map["blue"].ref.node.onclick = 1.70 + (function (){order.color= "blue"; update();}); 1.71 + 1.72 + 1.73 + toggle_on(state_map[order.color]); 1.74 + }); 1.75 1.76 - var select_map = 1.77 - {green : {offAttr : 0, onAttr : 0, ref : 0}, 1.78 - red : {offAttr : 0, onAttr : 0, ref : 0}, 1.79 - blue : {offAttr : 0, onAttr : 0, ref : 0}, 1.80 - green : {offAttr : 0, onAttr : 0, ref : 0}}; 1.81 + var display_init = (function (){ 1.82 + state_map["display"].state = 1.83 + {"fill": "white"}; 1.84 + state_map["display"].ref = 1.85 + display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state); 1.86 + }); 1.87 + 1.88 + var init = (function () { 1.89 + 1.90 + display = Raphael("card-display", 340 ,215); 1.91 + color = Raphael("color-select", 300, 100); 1.92 + style = Raphael("style-select", 200, 70); 1.93 + color_select_init(); 1.94 + display_init(); 1.95 + }); 1.96 + 1.97 + 1.98 + //Update Functions 1.99 1.100 var toggle_on = (function (button){ 1.101 - button.ref.animate(button.onAttr, 500); 1.102 + button.ref.animate(button.onState, 2000); 1.103 }); 1.104 1.105 var toggle_off = (function (button){ 1.106 - button.ref.animate(button.offAttr, 500); 1.107 + button.ref.animate(button.offState, 2000); 1.108 }); 1.109 1.110 - var color_update = (function (){ 1.111 + var color_select_update = (function (){ 1.112 var color = order.color; 1.113 return (function (){ 1.114 if (order.color === color){} 1.115 else { 1.116 - toggle_off(select_map[color]); 1.117 - toggle_on(select_map[(order.color)]); 1.118 + toggle_off(state_map[color]); 1.119 + toggle_on(state_map[(order.color)]); 1.120 color = order.color;} 1.121 });})(); 1.122 1.123 + var display_update = (function (){ 1.124 + var color = state_map.display.state.fill 1.125 + 1.126 + return (function (){ 1.127 + if (order.color === color){} 1.128 + else { 1.129 + state_map["display"].ref.animate({"fill" : order.color}, 2000); 1.130 + color = order.color;}})})(); 1.131 + 1.132 var update = (function (){ 1.133 - color_update();}); 1.134 + color_select_update(); 1.135 + display_update(); 1.136 + $("#debug").html(JSON.stringify(order)); 1.137 + }); 1.138 1.139 - var drawInit = (function (){ 1.140 - //color-select init 1.141 - select_map["red"].onAttr = {"fill" : "#F00"}; 1.142 - select_map["red"].offAttr = {"fill" : "#300"}; 1.143 - select_map["red"].ref = 1.144 - color.rect(1, 1, 70, 50, 10).attr(select_map["red"].offAttr); 1.145 - select_map["red"].ref.node.onclick = 1.146 - (function (){order.color= "red"; update();}); 1.147 - 1.148 - select_map["green"].onAttr = {"fill" : "#0F0"}; 1.149 - select_map["green"].offAttr = {"fill" : "#030"}; 1.150 - select_map["green"].ref = 1.151 - color.rect(80, 1, 70, 50, 10).attr(select_map["green"].offAttr); 1.152 - select_map["green"].ref.node.onclick = 1.153 - (function (){order.color= "green"; update();}); 1.154 - 1.155 - select_map["blue"].onAttr = {"fill" : "#00F"}; 1.156 - select_map["blue"].offAttr = {"fill" : "#003"}; 1.157 - select_map["blue"].ref = 1.158 - color.rect(160, 1, 70, 50, 10).attr(select_map["blue"].offAttr); 1.159 - select_map["blue"].ref.node.onclick = 1.160 - (function (){order.color= "blue"; update();}); 1.161 - 1.162 - 1.163 - toggle_on(select_map[order.color]); 1.164 - 1.165 - display.rect(1, 1, 338, 213, 20); 1.166 - style.rect(1, 1, 10, 10, 5); 1.167 - 1.168 - display.print(40, 45, "Robert" , display.getFont('HelveticaNeue', 700), 30); 1.169 - display.print(40, 90, "McIntyre" , display.getFont('HelveticaNeue', 800), 30); 1.170 - 1.171 - 1.172 - }); 1.173 1.174 - var init = (function () { 1.175 - 1.176 - $("#debug").append("init called."); 1.177 - display = Raphael("card-display", 340 ,215); 1.178 - color = Raphael("color-select", 300, 100); 1.179 - style = Raphael("style-select", 200, 70); 1.180 - drawInit(); 1.181 - }); 1.182 1.183 - 1.184 - 1.185 + // return closure over state 1.186 return {init : init, 1.187 - update : update}; 1.188 -})(); 1.189 - 1.190 + update : update};})(); 1.191 1.192 1.193 $(document).ready(function() { 1.194 - Buy.init(); 1.195 - 1.196 - 1.197 - 1.198 - 1.199 + Buy.init(); 1.200 + Buy.update(); 1.201 });