comparison js-lib/buy3.js @ 92:614dca52e323 laserkard

basic drawing achieved
author Robert McIntyre <rlm@mit.edu>
date Mon, 26 Jul 2010 13:01:47 -0400
parents 0dd39631299c
children 69b4defd835d
comparison
equal deleted inserted replaced
91:0dd39631299c 92:614dca52e323
1 // Cards = (function (){
2
3
4 // (function (info paper){
5 // info.name
6 // info.occupation
7 // info.email
8 // info.phone
9
10
11
12
13
14
15 // });
16
17
18
19
1 Buy = (function (){ 20 Buy = (function (){
2 21 // Utility Functinos
3 22
4 //Initilization Functions. 23 var switchText = (function (){
24 if ($(this).val() == $(this).attr('title'))
25 $(this).val('').removeClass('exampleText');
26 else if ($.trim($(this).val()) == '')
27 $(this).addClass('exampleText').val($(this).attr('title'));});
28
29
30
31
32
33 // Initilization Functions.
5 var order = 34 var order =
6 {color: "red", 35 {color : "green",
7 style: "bold", 36 style : "bold",
8 quantity: 30, 37 quantity : 30,
9 content: undefined, 38 content : undefined,
10 info: undefined}; 39 info : undefined,
40 name : "Robert McIntyre",
41 occupation : "AI Researcher",
42 phone : "617.821.9129",
43 email : "rlm@mit.edu",
44 website : "www.rlmcintyre.com",
45 company : "LaserKard LLC."
46 };
11 47
12 var display; 48 var display;
13 var color; 49 var color;
14 var style; 50 var style;
15 51
27 black : {offState : null, onState : null, ref : null}, 63 black : {offState : null, onState : null, ref : null},
28 display : {ref : null, state : {"fill" : "black"}}}; 64 display : {ref : null, state : {"fill" : "black"}}};
29 65
30 var color_select_init = (function (){ 66 var color_select_init = (function (){
31 state_map["red"].ref = 67 state_map["red"].ref =
32 color.rect(1, 1, 70, 50, 10).attr(state_map["red"].offState); 68 color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
33 state_map["red"].ref.node.onclick = 69 state_map["red"].ref.node.onclick =
34 (function (){order.color= "red"; update();}); 70 (function (){order.color= "red"; update();});
35 state_map["green"].ref = 71 state_map["green"].ref =
36 color.rect(80, 1, 70, 50, 10).attr(state_map["green"].offState); 72 color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
37 state_map["green"].ref.node.onclick = 73 state_map["green"].ref.node.onclick =
38 (function (){order.color= "green"; update();}); 74 (function (){order.color= "green"; update();});
39 state_map["blue"].ref = 75 state_map["blue"].ref =
40 color.rect(160, 1, 70, 50, 10).attr(state_map["blue"].offState); 76 color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
41 state_map["blue"].ref.node.onclick = 77 state_map["blue"].ref.node.onclick =
42 (function (){order.color= "blue"; update();}); 78 (function (){order.color= "blue"; update();});
43 79
44 toggle_on(state_map[order.color]); 80 toggle_on(state_map[order.color]);
45 }); 81 });
46 82
47 var display_init = (function (){ 83 var display_init = (function (){
48 state_map["display"].ref = 84 state_map["display"].ref =
49 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state); 85 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
50 }); 86 });
87
88 var text_entry_init = (function (){
89 $('input[type=text][title!=""]').each(function() {
90 if ($.trim($(this).val()) == ''){
91 $(this).val($(this).attr('title'));}
92 if ($(this).val() == $(this).attr('title')){
93 $(this).addClass('exampleText');}
94 }).focus(switchText).blur(switchText);
95
96 $('form').submit(function() {
97 $(this).find('input[type=text][title!=""]').each(function() {
98 if ($(this).val() == $(this).attr('title')){
99 $(this).val('');}})})});
100
101
102
103
104
51 105
52 var init = (function () { 106 var init = (function () {
53 display = Raphael("card-display", 340 ,215); 107 display = Raphael("card-display", 340 ,215);
54 color = Raphael("color-select", 300, 100); 108 color = Raphael("color-select", 300, 100);
55 style = Raphael("style-select", 200, 70); 109 style = Raphael("style-select", 200, 70);
56 color_select_init(); 110 color_select_init();
57 display_init(); 111 display_init();
112 card_init();
113 text_entry_init();
114 key_handling();
115
58 }); 116 });
59 117
60 118
61 //Update Functions 119 //Update Functions
62 120
76 toggle_off(state_map[color]); 134 toggle_off(state_map[color]);
77 toggle_on(state_map[(order.color)]); 135 toggle_on(state_map[(order.color)]);
78 color = order.color;} 136 color = order.color;}
79 });})(); 137 });})();
80 138
81 var display_update = (function (){ 139 var display_color_update = (function (){
82 var color = state_map.display.state.fill 140 var color = state_map.display.state.fill
83 141
84 return (function (){ 142 return (function (){
85 if (order.color === color){} 143 if (order.color === color){}
86 else { 144 else {
87 state_map["display"].ref.animate( 145 state_map["display"].ref.animate(
88 {"fill" : state_map[order.color].onState.fill}, 2000); 146 {"fill" : state_map[order.color].onState.fill}, 2000);
89 color = order.color;}})})(); 147 color = order.color;}})})();
90 148
149
150
151 var display_style_update = (function (){
152 var style = null;
153 return (function (){
154 if (style !== order.style){
155 ""; }});
156 });
157
158
159 var card =
160 {name : {text: "Robert McIntyre", ref: ""},
161 company : {text: "", ref: ""},
162 occupation : {text: "", ref: ""},
163 phone : {text: "", ref: ""},
164 email : {text: "", ref: ""},
165 website : {text: "", ref: ""},
166 decoration : {text: "", ref: ""}};
167
168 var card_init = (function () {
169 card.name.ref = display.rect(10,10,10,10,5);
170 });
171
172 var key_handling = (function (){
173 var assoc = (function (target, field) {
174 $(target).keyup(function() {
175 field.text = $(target).val();
176 update();})});
177 assoc('#user-name', card.name);
178 assoc('#user-phone', card.phone);
179 assoc('#user-email', card.email);
180 assoc('#user-company', card.company);
181 assoc('#user-occupation', card.occupation);
182 assoc('#user-website', card.website);
183
184
185 });
186
187
188
189 var display_text_update = (function (){
190 var name = null;
191
192 return (function () {
193
194 if (name !== card.name.text){
195 //alert("whatev");
196 card.name.ref.remove();
197 card.name.ref =
198 display.print(10,10,card.name.text,
199 display.getFont('HelveticaNeue',700), 25).attr(
200 {"fill" : "#FFFFFF"});
201
202 //card.name.ref.animate({"fill" : Raphael.getColor()} ,1000);
203 name = card.name.text;
204 }});
205
206
207 })();
208
209
210
211
212 // var display_text_update = (function (){
213 // var style;
214 // var name;
215 // var occupation;
216 // var phone;
217 // var email;
218 // var company;
219 // var website;
220
221 // return (function (){
222 // if (style !== order.style) {}
223
224
225 // })();
226
91 var update = (function (){ 227 var update = (function (){
92 color_select_update(); 228 color_select_update();
93 display_update(); 229 display_color_update();
94 $("#debug").html(JSON.stringify(order)); 230 display_text_update();
231 $("#debug").html(JSON.stringify({name : card.name.text, email : card.email.text}));
95 }); 232 });
96 233
97 234
98 235
99 // return closure over state 236 // return closure over state
100 return {init : init, 237 return {init : init,
101 update : update};})(); 238 update : update};})();
102 239
103 240
241
242
243
244
245
246
247
104 $(document).ready(function() { 248 $(document).ready(function() {
105 Buy.init(); 249 Buy.init();
106 Buy.update(); 250 Buy.update();
107 }); 251 });