Mercurial > laserkard
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 }); |