Mercurial > laserkard

comparison js-lib/buy3.js @ 90:08f93d043ed2 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
saving progress
author Robert McIntyre <rlm@mit.edu>
date Mon, 26 Jul 2010 04:13:05 -0400
parents 81deee1fc85b
children 0dd39631299c
comparison
equal deleted inserted replaced
89:7d6514aca622 90:08f93d043ed2
1 Buy = (function (){ 1 Buy = (function (){
2
3
4 //Initilization Functions.
2 var order = 5 var order =
3 {color: "red", 6 {color: "red",
4 style: "bold", 7 style: "bold",
5 quantity: 30, 8 quantity: 30,
6 content: undefined, 9 content: undefined,
8 11
9 var display; 12 var display;
10 var color; 13 var color;
11 var style; 14 var style;
12 15
13 // var select_green; 16 // var state_map =
14 //var select_red; 17 // {green :{
15 //var select_blue; 18 // ref: null,
16 //var select_black; 19 // offState : null,
20 // onState : null},
21 // red : {
22 // offState: {"fill" : "#300", "scale" : 1},
23 // onState : {"fill" : "#F00" ,"scale" : 1},
24 // ref : null},
25 // blue : {
26 // offState : null,
27 // onState : null,
28 // ref : null},
29 // black : {offState : null, onState : null, ref : null},
30 // display : {ref : null, state : {"fill" : "black"}}};
31
32 var state_map =
33 {green : { ref: null, offState : null, onState : null},
34 red : {
35 offState: {"fill" : "#300", "scale" : 1},
36 onState : {"fill" : "#F00" ,"scale" : 1},
37 ref : null},
38 blue : {
39 offState : null,
40 onState : null,
41 ref : null},
42 black : {offState : null, onState : null, ref : null},
43 display : {ref : null, state : {"fill" : "black"}}};
44
45 var color_select_init = (function (){
46 state_map["red"].ref =
47 color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState);
48 state_map["red"].ref.node.onclick =
49 (function (){order.color= "red"; update();});
50
51 state_map["green"].onState =
52 {"fill" : "#0F0", "scale": 1};
53 state_map["green"].offState =
54 {"fill" : "#030", "scale": 1};
55 state_map["green"].ref =
56 color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState);
57 state_map["green"].ref.node.onclick =
58 (function (){order.color= "green"; update();});
59
60 state_map["blue"].onState =
61 {"fill" : "#00F", "scale": 1};
62 state_map["blue"].offState =
63 {"fill" : "#003", "scale": 1};
64 state_map["blue"].ref =
65 color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState);
66 state_map["blue"].ref.node.onclick =
67 (function (){order.color= "blue"; update();});
68
69
70 toggle_on(state_map[order.color]);
71 });
17 72
18 var select_map = 73 var display_init = (function (){
19 {green : {offAttr : 0, onAttr : 0, ref : 0}, 74 state_map["display"].state =
20 red : {offAttr : 0, onAttr : 0, ref : 0}, 75 {"fill": "white"};
21 blue : {offAttr : 0, onAttr : 0, ref : 0}, 76 state_map["display"].ref =
22 green : {offAttr : 0, onAttr : 0, ref : 0}}; 77 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
78 });
79
80 var init = (function () {
81
82 display = Raphael("card-display", 340 ,215);
83 color = Raphael("color-select", 300, 100);
84 style = Raphael("style-select", 200, 70);
85 color_select_init();
86 display_init();
87 });
88
89
90 //Update Functions
23 91
24 var toggle_on = (function (button){ 92 var toggle_on = (function (button){
25 button.ref.animate(button.onAttr, 500); 93 button.ref.animate(button.onState, 2000);
26 }); 94 });
27 95
28 var toggle_off = (function (button){ 96 var toggle_off = (function (button){
29 button.ref.animate(button.offAttr, 500); 97 button.ref.animate(button.offState, 2000);
30 }); 98 });
31 99
32 var color_update = (function (){ 100 var color_select_update = (function (){
33 var color = order.color; 101 var color = order.color;
34 return (function (){ 102 return (function (){
35 if (order.color === color){} 103 if (order.color === color){}
36 else { 104 else {
37 toggle_off(select_map[color]); 105 toggle_off(state_map[color]);
38 toggle_on(select_map[(order.color)]); 106 toggle_on(state_map[(order.color)]);
39 color = order.color;} 107 color = order.color;}
40 });})(); 108 });})();
41 109
110 var display_update = (function (){
111 var color = state_map.display.state.fill
112
113 return (function (){
114 if (order.color === color){}
115 else {
116 state_map["display"].ref.animate({"fill" : order.color}, 2000);
117 color = order.color;}})})();
118
42 var update = (function (){ 119 var update = (function (){
43 color_update();}); 120 color_select_update();
121 display_update();
122 $("#debug").html(JSON.stringify(order));
123 });
44 124
45 var drawInit = (function (){
46 //color-select init
47 select_map["red"].onAttr = {"fill" : "#F00"};
48 select_map["red"].offAttr = {"fill" : "#300"};
49 select_map["red"].ref =
50 color.rect(1, 1, 70, 50, 10).attr(select_map["red"].offAttr);
51 select_map["red"].ref.node.onclick =
52 (function (){order.color= "red"; update();});
53
54 select_map["green"].onAttr = {"fill" : "#0F0"};
55 select_map["green"].offAttr = {"fill" : "#030"};
56 select_map["green"].ref =
57 color.rect(80, 1, 70, 50, 10).attr(select_map["green"].offAttr);
58 select_map["green"].ref.node.onclick =
59 (function (){order.color= "green"; 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
68
69 toggle_on(select_map[order.color]);
70
71 display.rect(1, 1, 338, 213, 20);
72 style.rect(1, 1, 10, 10, 5);
73
74 display.print(40, 45, "Robert" , display.getFont('HelveticaNeue', 700), 30);
75 display.print(40, 90, "McIntyre" , display.getFont('HelveticaNeue', 800), 30);
76
77
78 });
79 125
80 var init = (function () {
81
82 $("#debug").append("init called.");
83 display = Raphael("card-display", 340 ,215);
84 color = Raphael("color-select", 300, 100);
85 style = Raphael("style-select", 200, 70);
86 drawInit();
87 });
88 126
89 127 // return closure over state
90
91 return {init : init, 128 return {init : init,
92 update : update}; 129 update : update};})();
93 })();
94
95 130
96 131
97 $(document).ready(function() { 132 $(document).ready(function() {
98 Buy.init(); 133 Buy.init();
99 134 Buy.update();
100
101
102
103 }); 135 });