Mercurial > laserkard

comparison temp342423/buy3.js @ 102:8ed3394e6b73 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
wrote comment-killer
author Robert McIntyre <rlm@mit.edu>
date Tue, 27 Jul 2010 22:23:13 -0400
parents
children
comparison
equal deleted inserted replaced
101:2bec541ef58f 102:8ed3394e6b73
1
2 Buy = (function (){
3
4
5
6 var magic_font_ratio = 318;
7 var mfg = magic_font_ratio;
8
9
10
11 var draw_card = (function (paper){
12
13 var helvetica = paper.getFont('HelveticaNeue', 700);
14 var helveticaI = paper.getFont('HelveticaNeue', 800);
15 var h = paper.height;
16 var w = paper.width;
17
18 var standard = (function (text, x, y, pt, font){
19 if (!font) {font = helvetica;}
20 var scale_x = 0.00030*h*pt/20;
21 var scale_y = 0.00025*w*pt/20;
22 return paper.print(h*x, w*y,text, font).scale(
23 scale_x,scale_y,h*x,w*y);});
24
25 var bold = {
26 "name" :(function (text){
27 return standard(text, 0.2,0.1,20).attr({"fill" : "red"});}),
28 "email" : (function (text){
29 return standard(text, 0.2,0.4,20,helveticaI).attr(
30 {"fill" : "red"});})};
31
32
33 return {
34 "bold" : bold
35 };
36
37 });
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53 var switchText = (function (){
54 if ($(this).val() == $(this).attr('title'))
55 $(this).val('').removeClass('exampleText');
56 else if ($.trim($(this).val()) == '')
57 $(this).addClass('exampleText').val($(this).attr('title'));});
58
59
60 var deref = (function (var_name){return var_name;});
61
62
63
64
65
66 var card;
67
68 var card_init = (function () {
69
70 card = {
71 name : {text: "Robert McIntyre", ref: display.set()},
72 company : {text: "", ref: display.set()},
73 occupation : {text: "", ref: display.set()},
74 phone : {text: "", ref: display.set()},
75 email : {text: "rlm@mit.edu", ref: display.set()},
76 website : {text: "", ref: display.set()},
77 decoration : {text: "", ref: display.set()}};
78 });
79
80
81 var order =
82 {color : "blue",
83 style : "bold",
84 quantity : 30,
85 content : undefined,
86 info : undefined,
87 name : "Robert McIntyre",
88 occupation : "AI Researcher",
89 phone : "617.821.9129",
90 email : "rlm@mit.edu",
91 website : "www.rlmcintyre.com",
92 company : "LaserKard LLC."
93 };
94
95 var display;
96 var color;
97 var style = {};
98 var helvetica;
99 var helvetica_I;
100
101 var state_map = {
102 bold : null,
103 classic : null,
104
105 green : {ref : null,
106 offState : {"fill" : "#030", "scale": 1} ,
107 onState : {"fill" : "#0F0", "scale": 1}},
108 red : {ref : null,
109 offState: {"fill" : "#300", "scale" : 1},
110 onState : {"fill" : "#F00" ,"scale" : 1}},
111 blue : {ref : null,
112 offState : {"fill" : "#003", "scale": 1},
113 onState : {"fill" : "#00F", "scale": 1},
114 ref : null},
115 black : {offState : null, onState : null, ref : null},
116 display : {ref : null, state : {"fill" : "black"}}};
117
118 var color_select_init = (function (){
119 state_map["red"].ref =
120 color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
121 state_map["red"].ref.node.onclick =
122 (function (){order.color= "red"; update();});
123 state_map["green"].ref =
124 color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
125 state_map["green"].ref.node.onclick =
126 (function (){order.color= "green"; update();});
127 state_map["blue"].ref =
128 color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
129 state_map["blue"].ref.node.onclick =
130 (function (){order.color= "blue"; update();});
131
132 toggle_on(state_map[order.color]);
133 });
134
135 var display_init = (function (){
136 state_map["display"].ref =
137 display.rect(1, 1 , display.width - 1, display.height - 2, 20).attr(
138 state_map["display"].state);
139 });
140
141 var text_entry_init = (function (){
142 $('input[type=text][title!=""]').each(function() {
143 if ($.trim($(this).val()) == ''){
144 $(this).val($(this).attr('title'));}
145 if ($(this).val() == $(this).attr('title')){
146 $(this).addClass('exampleText');}
147 }).focus(switchText).blur(switchText);
148
149 $('form').submit(function() {
150 $(this).find('input[type=text][title!=""]').each(function() {
151 if ($(this).val() == $(this).attr('title')){
152 $(this).val('');}})})});
153
154 var style_text = {
155 phone : "617.821.9129",
156 email : "rlm@mit.edu",
157 website : "www.rlmcintyre.com",
158 name : "Robert McIntyre",
159 company : "LaserKard LLC.",
160 occupation : "AI Researcher"}
161
162
163 var style_init = (function (){
164 var draw = draw_card(style.bold);
165 draw.bold.name(style_text.name);
166 style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10);
167 draw.bold.email(style_text.email);
168
169
170
171
172
173
174
175 });
176
177
178
179
180 var init = (function () {
181 display = Raphael("card-display", 340 ,215);
182 color = Raphael("color-select", 300, 100);
183
184 style.bold = Raphael("bold", 170, 107);
185
186 style.classic = Raphael("classic", 170 , 107);
187
188 helvetica = display.getFont('HelveticaNeue', 700);
189 helvetica_I = display.getFont('HelveticaNeue', 800);
190 color_select_init();
191 display_init();
192 card_init();
193 text_entry_init();
194 key_handling();
195 style_init();
196 update();
197 });
198
199
200
201
202 var toggle_on = (function (button){
203 button.ref.animate(button.onState, 2000);
204 });
205
206 var toggle_off = (function (button){
207 button.ref.animate(button.offState, 2000);
208 });
209
210 var color_select_update = (function (){
211 var color = order.color;
212 return (function (){
213 if (order.color === color){}
214 else {
215 toggle_off(state_map[color]);
216 toggle_on(state_map[(order.color)]);
217 color = order.color;}
218 });})();
219
220 var display_color_update = (function (){
221 var color = state_map.display.state.fill
222
223 return (function (){
224 if (order.color === color){}
225 else {
226 state_map["display"].ref.animate(
227 {"fill" : state_map[order.color].onState.fill}, 2000);
228 color = order.color;}})})();
229
230 var display_style_update = (function (){
231 var style = null;
232 return (function (){
233 if (style !== order.style){
234 ""; }});
235 });
236
237 var key_handling = (function (){
238 var assoc = (function (target, field) {
239 $(target).keyup(function() {
240 field.text = $(target).val();
241 update();})});
242 assoc('#user-name', card.name);
243 assoc('#user-phone', card.phone);
244 assoc('#user-email', card.email);
245 assoc('#user-company', card.company);
246 assoc('#user-occupation', card.occupation);
247 assoc('#user-website', card.website);
248 });
249
250 var display_style_update = (function (){
251 var style = null;
252
253 return (function () {
254 var draw = draw_card(display);
255 if (style !== order.style){
256 for ( var property in card ){
257 if (!draw[order.style][(deref(property))]){
258 $("#user" + "-" + property).toggle(400);}}
259 style = order.style;}
260 });})();
261
262 var display_text_update = (function (){
263 var state = {name : "nothing",
264 phone: "nothing",
265 email: "nothing",
266 occupation: "nothing",
267 company : "nothing",
268 website : "nothing" };
269
270 var check_text = (function (var_name) {
271 var draw = draw_card(display);
272 if (state[deref(var_name)] !== (card[deref(var_name)]).text){
273 if (draw[order.style][deref(var_name)]) {
274 card[deref(var_name)].ref.remove();
275 card[var_name].ref =
276 draw[order.style][deref(var_name)](
277 card[deref(var_name)].text,display);
278 state[deref(var_name)] = card[deref(var_name)].text;
279 }}});
280
281 return (function (){
282 check_text("name");
283 check_text("phone");
284 check_text("email");
285 check_text("occupation");
286 check_text("company");
287 check_text("website");
288
289 $("#debug").html(JSON.stringify(state));
290 });
291
292 })();
293
294 var update = (function (){
295 color_select_update();
296 display_color_update();
297 display_text_update();
298 display_style_update();
299 });
300
301
302 return {init : init,
303 update : update};})();
304
305
306
307 $(document).ready(function() {
308 Buy.init();
309 Buy.update();
310 });