view js-lib/buy3.js @ 106:5b0753c6f34d laserkard tip

updated to newest compojure and a simpler syntax
author Robert McIntyre <rlm@mit.edu>
date Mon, 27 Sep 2010 20:22:58 -0400
parents a20199a24415
children
line wrap: on
line source
1 //WHY do I have to write this myself!?
2 Object.prototype.keys = function ()
3 {
4 var keys = [];
5 for(i in this) if (this.hasOwnProperty(i))
6 {
7 keys.push(i);
8 }
9 return keys;
10 }
16 Buy = (function (){
18 //Cards drawing functions:
20 var magic_font_ratio = 318; //the font size in pt for identity under .scale(1,1)
21 var mfg = magic_font_ratio;
25 var draw_card = (function (paper){
27 var helvetica = paper.getFont('HelveticaNeue', 700);
28 var helveticaI = paper.getFont('HelveticaNeue', 800);
29 var h = paper.height;
30 var w = paper.width;
31 var default_color = "#AAAAAA";
33 // var clamp = (function (target args){
34 // x = args.x || null;
35 // y = args.y || null;
37 // if (x) {
38 // if (target.getBBox().width > display.width * x){
39 // target.scale(
40 // }
41 // }
43 // if (y)
45 // });
47 var standard = (function (args){
48 var pt = args.pt || 20;
49 var x = args.x || 0;
50 var y = args.y || 0;
51 var x_max = args.x_max || null;
52 var y_max = args.y_max || null;
53 var font = args.font || helvetica;
54 var text = args.text || "";
55 var scale_x = 0.00030*h*pt/20;
56 var scale_y = 0.00025*w*pt/20;
60 target = paper.print(h*x, w*y,text, font).scale(
61 scale_x,scale_y,h*x,w*y).attr({"fill": default_color});
63 if (x_max){
64 var width = target.getBBox().width;
65 var max_width = paper.width*x_max;
66 if (width > max_width){
67 var x_mod = max_width/width;
68 target.scale(scale_x*x_mod,scale_y,0,0);
69 }
70 }
71 return target;
72 });
78 var bold = {
79 "name" :(function (text){
80 return standard({x_max : 0.5, "text": text, x: 0.2, y: 0.1, pt: 20});}),
81 "email" : (function (text){
82 return standard({"text": text, x: 0.2, y: 0.4,pt: 20,font: helveticaI});})};
85 return {
86 "bold" : bold
87 };
89 });
99 // Utility Functinos
105 var switchText = (function (){
106 if ($(this).val() == $(this).attr('title'))
107 $(this).val('').removeClass('exampleText');
108 else if ($.trim($(this).val()) == '')
109 $(this).addClass('exampleText').val($(this).attr('title'));});
111 //what an asinine function... referential transparency blah blah...
112 var deref = (function (var_name){return var_name;});
117 // Initilization Functions.
118 var card;
120 var card_init = (function () {
122 card = {
123 name : {text: "Robert McIntyre", ref: display.set()},
124 company : {text: "", ref: display.set()},
125 occupation : {text: "", ref: display.set()},
126 phone : {text: "", ref: display.set()},
127 email : {text: "rlm@mit.edu", ref: display.set()},
128 website : {text: "", ref: display.set()},
129 decoration : {text: "", ref: display.set()}};
130 });
133 var order =
134 {color : "blue",
135 style : "bold",
136 quantity : 30,
137 content : undefined,
138 info : undefined,
139 name : "Robert McIntyre",
140 occupation : "AI Researcher",
141 phone : "617.821.9129",
142 email : "rlm@mit.edu",
143 website : "www.rlmcintyre.com",
144 company : "LaserKard LLC."
145 };
147 var display;
148 var color;
149 var style = {};
150 var helvetica;
151 var helvetica_I;
153 var state_map = {
154 bold : null,
155 classic : null,
157 green : {ref : null,
158 offState : {"fill" : "#030", "scale": 1} ,
159 onState : {"fill" : "#0F0", "scale": 1}},
160 red : {ref : null,
161 offState: {"fill" : "#300", "scale" : 1},
162 onState : {"fill" : "#F00" ,"scale" : 1}},
163 blue : {ref : null,
164 offState : {"fill" : "#003", "scale": 1},
165 onState : {"fill" : "#00F", "scale": 1},
166 ref : null},
167 black : {offState : null, onState : null, ref : null},
168 display : {ref : null, state : {"fill" : "black"}}};
170 var color_select_init = (function (){
171 state_map["red"].ref =
172 color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
173 state_map["red"].ref.node.onclick =
174 (function (){order.color= "red"; update();});
175 state_map["green"].ref =
176 color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
177 state_map["green"].ref.node.onclick =
178 (function (){order.color= "green"; update();});
179 state_map["blue"].ref =
180 color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
181 state_map["blue"].ref.node.onclick =
182 (function (){order.color= "blue"; update();});
184 toggle_on(state_map[order.color]);
185 });
187 var display_init = (function (){
188 state_map["display"].ref =
189 display.rect(1, 1 , display.width - 1, display.height - 2, 15).attr(
190 state_map["display"].state);
191 });
193 var text_entry_init = (function (){
194 $('input[type=text][title!=""]').each(function() {
195 if ($.trim($(this).val()) == ''){
196 $(this).val($(this).attr('title'));}
197 if ($(this).val() == $(this).attr('title')){
198 $(this).addClass('exampleText');}
199 }).focus(switchText).blur(switchText);
201 $('form').submit(function() {
202 $(this).find('input[type=text][title!=""]').each(function() {
203 if ($(this).val() == $(this).attr('title')){
204 $(this).val('');}})})});
206 var style_text = {
207 phone : "617.821.9129",
208 email : "rlm@mit.edu",
209 website : "www.rlmcintyre.com",
210 name : "Robert McIntyre",
211 company : "LaserKard LLC.",
212 occupation : "AI Researcher"}
215 var style_init = (function (){
216 var draw = draw_card(style.bold);
217 draw.bold.name(style_text.name);
218 style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10);
219 draw.bold.email(style_text.email);
220 // state_map["bold"] = style.bold.set();
221 // state_map["bold"].push(Cards.bold.name(style_text.name, style.bold));
222 // state_map["bold"].push(Cards.bold.email(style_text.email, style.bold));
223 //
224 // state_map["bold"].attr({"fill" : "red"});
225 // state_map["bold"].scale(0.03, 0.03, 0 , 0);
227 });
232 var init = (function () {
233 display = Raphael("card-display", 360 ,230);
234 color = Raphael("color-select", 300, 100);
236 style.bold = Raphael("bold", display.width/2, display.height/2);
238 style.classic = Raphael("classic", display.width/2 , display.width/2);
240 helvetica = display.getFont('HelveticaNeue', 700);
241 helvetica_I = display.getFont('HelveticaNeue', 800);
242 color_select_init();
243 display_init();
244 card_init();
245 text_entry_init();
246 key_handling();
247 style_init();
248 update();
249 });
252 //Update Functions
254 var toggle_on = (function (button){
255 button.ref.animate(button.onState, 2000);
256 });
258 var toggle_off = (function (button){
259 button.ref.animate(button.offState, 2000);
260 });
262 var color_select_update = (function (){
263 var color = order.color;
264 return (function (){
265 if (order.color === color){}
266 else {
267 toggle_off(state_map[color]);
268 toggle_on(state_map[(order.color)]);
269 color = order.color;}
270 });})();
272 var display_color_update = (function (){
273 var color = state_map.display.state.fill
275 return (function (){
276 if (order.color === color){}
277 else {
278 state_map["display"].ref.animate(
279 {"fill" : state_map[order.color].onState.fill}, 2000);
280 color = order.color;}})})();
282 var display_style_update = (function (){
283 var style = null;
284 return (function (){
285 if (style !== order.style){
286 ""; }});
287 });
289 var key_handling = (function (){
290 var assoc = (function (target, field) {
291 $(target).keyup(function() {
292 field.text = $(target).val();
293 update();})});
294 assoc('#user-name', card.name);
295 assoc('#user-phone', card.phone);
296 assoc('#user-email', card.email);
297 assoc('#user-company', card.company);
298 assoc('#user-occupation', card.occupation);
299 assoc('#user-website', card.website);
300 });
302 var display_style_update = (function (){
303 var style = null;
305 return (function () {
306 var draw = draw_card(display);
307 if (style !== order.style){
308 for ( var property in card ){
309 if (!draw[order.style][(deref(property))]){
310 $("#user" + "-" + property).toggle(400);}}
311 style = order.style;}
312 });})();
314 var display_text_update = (function (){
315 var state = {name : "nothing",
316 phone: "nothing",
317 email: "nothing",
318 occupation: "nothing",
319 company : "nothing",
320 website : "nothing" };
322 var check_text = (function (var_name) {
323 var draw = draw_card(display);
324 if (state[deref(var_name)] !== (card[deref(var_name)]).text){
325 if (draw[order.style][deref(var_name)]) {
326 card[deref(var_name)].ref.remove();
327 card[var_name].ref =
328 draw[order.style][deref(var_name)](
329 card[deref(var_name)].text,display);
330 state[deref(var_name)] = card[deref(var_name)].text;
331 }}});
333 return (function (){
334 check_text("name");
335 check_text("phone");
336 check_text("email");
337 check_text("occupation");
338 check_text("company");
339 check_text("website");
341 $("#debug").html(JSON.stringify(state));
342 });
344 })();
346 var update = (function (){
347 color_select_update();
348 display_color_update();
349 display_text_update();
350 display_style_update();
351 });
353 // return closure over state
354 return {init : init,
355 update : update};})();
359 $(document).ready(function() {
360 Buy.init();
361 Buy.update();
362 });