Mercurial > laserkard
comparison js-lib/buy3.js @ 87:81deee1fc85b laserkard
got pure raphael color selector working
author | Robert McIntyre <rlm@mit.edu> |
---|---|
date | Mon, 26 Jul 2010 02:20:29 -0400 |
parents | e48424b01e5f |
children | 08f93d043ed2 |
comparison
equal
deleted
inserted
replaced
86:e48424b01e5f | 87:81deee1fc85b |
---|---|
14 //var select_red; | 14 //var select_red; |
15 //var select_blue; | 15 //var select_blue; |
16 //var select_black; | 16 //var select_black; |
17 | 17 |
18 var select_map = | 18 var select_map = |
19 {"green" : 0, | 19 {green : {offAttr : 0, onAttr : 0, ref : 0}, |
20 "red" : 0, | 20 red : {offAttr : 0, onAttr : 0, ref : 0}, |
21 "blue" : 0, | 21 blue : {offAttr : 0, onAttr : 0, ref : 0}, |
22 "green" : 0}; | 22 green : {offAttr : 0, onAttr : 0, ref : 0}}; |
23 | 23 |
24 var toggle_on = (function (button){ | 24 var toggle_on = (function (button){ |
25 button.scale(0.5, 0.75); | 25 button.ref.animate(button.onAttr, 500); |
26 }); | 26 }); |
27 | 27 |
28 var toggle_off = (function (button){ | 28 var toggle_off = (function (button){ |
29 button.attr("fill", "black"); | 29 button.ref.animate(button.offAttr, 500); |
30 }); | 30 }); |
31 | 31 |
32 var color_update = (function (){ | 32 var color_update = (function (){ |
33 var color = order.color; | 33 var color = order.color; |
34 return (function (){ | 34 return (function (){ |
42 var update = (function (){ | 42 var update = (function (){ |
43 color_update();}); | 43 color_update();}); |
44 | 44 |
45 var drawInit = (function (){ | 45 var drawInit = (function (){ |
46 //color-select init | 46 //color-select init |
47 select_map["red"] = color.rect(1, 1, 70, 50, 10).attr("fill","red"); | 47 select_map["red"].onAttr = {"fill" : "#F00"}; |
48 select_map["red"].node.onclick = (function (){ | 48 select_map["red"].offAttr = {"fill" : "#300"}; |
49 order.color= "red"; update();}); | 49 select_map["red"].ref = |
50 //toggle_on(select_red); | 50 color.rect(1, 1, 70, 50, 10).attr(select_map["red"].offAttr); |
51 | 51 select_map["red"].ref.node.onclick = |
52 | 52 (function (){order.color= "red"; update();}); |
53 select_map["green"] = | 53 |
54 color.rect(80, 1, 70, 50,10).attr("fill", "green"); | 54 select_map["green"].onAttr = {"fill" : "#0F0"}; |
55 select_map["green"].node.onclick = | 55 select_map["green"].offAttr = {"fill" : "#030"}; |
56 (function (){order.color = "green"; update();}); | 56 select_map["green"].ref = |
57 select_map["blue"] = | 57 color.rect(80, 1, 70, 50, 10).attr(select_map["green"].offAttr); |
58 color.rect(160, 1, 70, 50, 10).attr("fill", "blue"); | 58 select_map["green"].ref.node.onclick = |
59 select_map["blue"].node.onclick = | 59 (function (){order.color= "green"; update();}); |
60 (function (){order.color = "blue"; update();}); | 60 |
61 select_map["blue"].onAttr = {"fill" : "#00F"}; | |
62 select_map["blue"].offAttr = {"fill" : "#003"}; | |
63 select_map["blue"].ref = | |
64 color.rect(160, 1, 70, 50, 10).attr(select_map["blue"].offAttr); | |
65 select_map["blue"].ref.node.onclick = | |
66 (function (){order.color= "blue"; update();}); | |
67 | |
61 | 68 |
62 toggle_on(select_map[order.color]); | 69 toggle_on(select_map[order.color]); |
63 | 70 |
64 display.rect(1, 1, 338, 213, 20); | 71 display.rect(1, 1, 338, 213, 20); |
65 style.rect(1, 1, 10, 10, 5); | 72 style.rect(1, 1, 10, 10, 5); |