Mercurial > laserkard
diff temp342423/buy3.js @ 102:8ed3394e6b73 laserkard
wrote comment-killer
author | Robert McIntyre <rlm@mit.edu> |
---|---|
date | Tue, 27 Jul 2010 22:23:13 -0400 |
parents | |
children |
line wrap: on
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/temp342423/buy3.js Tue Jul 27 22:23:13 2010 -0400 1.3 @@ -0,0 +1,310 @@ 1.4 + 1.5 +Buy = (function (){ 1.6 + 1.7 + 1.8 + 1.9 + var magic_font_ratio = 318; 1.10 + var mfg = magic_font_ratio; 1.11 + 1.12 + 1.13 + 1.14 + var draw_card = (function (paper){ 1.15 + 1.16 + var helvetica = paper.getFont('HelveticaNeue', 700); 1.17 + var helveticaI = paper.getFont('HelveticaNeue', 800); 1.18 + var h = paper.height; 1.19 + var w = paper.width; 1.20 + 1.21 + var standard = (function (text, x, y, pt, font){ 1.22 + if (!font) {font = helvetica;} 1.23 + var scale_x = 0.00030*h*pt/20; 1.24 + var scale_y = 0.00025*w*pt/20; 1.25 + return paper.print(h*x, w*y,text, font).scale( 1.26 + scale_x,scale_y,h*x,w*y);}); 1.27 + 1.28 + var bold = { 1.29 + "name" :(function (text){ 1.30 + return standard(text, 0.2,0.1,20).attr({"fill" : "red"});}), 1.31 + "email" : (function (text){ 1.32 + return standard(text, 0.2,0.4,20,helveticaI).attr( 1.33 + {"fill" : "red"});})}; 1.34 + 1.35 + 1.36 + return { 1.37 + "bold" : bold 1.38 + }; 1.39 + 1.40 + }); 1.41 + 1.42 + 1.43 + 1.44 + 1.45 + 1.46 + 1.47 + 1.48 + 1.49 + 1.50 + 1.51 + 1.52 + 1.53 + 1.54 + 1.55 + 1.56 + var switchText = (function (){ 1.57 + if ($(this).val() == $(this).attr('title')) 1.58 + $(this).val('').removeClass('exampleText'); 1.59 + else if ($.trim($(this).val()) == '') 1.60 + $(this).addClass('exampleText').val($(this).attr('title'));}); 1.61 + 1.62 + 1.63 + var deref = (function (var_name){return var_name;}); 1.64 + 1.65 + 1.66 + 1.67 + 1.68 + 1.69 + var card; 1.70 + 1.71 + var card_init = (function () { 1.72 + 1.73 + card = { 1.74 + name : {text: "Robert McIntyre", ref: display.set()}, 1.75 + company : {text: "", ref: display.set()}, 1.76 + occupation : {text: "", ref: display.set()}, 1.77 + phone : {text: "", ref: display.set()}, 1.78 + email : {text: "rlm@mit.edu", ref: display.set()}, 1.79 + website : {text: "", ref: display.set()}, 1.80 + decoration : {text: "", ref: display.set()}}; 1.81 + }); 1.82 + 1.83 + 1.84 + var order = 1.85 + {color : "blue", 1.86 + style : "bold", 1.87 + quantity : 30, 1.88 + content : undefined, 1.89 + info : undefined, 1.90 + name : "Robert McIntyre", 1.91 + occupation : "AI Researcher", 1.92 + phone : "617.821.9129", 1.93 + email : "rlm@mit.edu", 1.94 + website : "www.rlmcintyre.com", 1.95 + company : "LaserKard LLC." 1.96 + }; 1.97 + 1.98 + var display; 1.99 + var color; 1.100 + var style = {}; 1.101 + var helvetica; 1.102 + var helvetica_I; 1.103 + 1.104 + var state_map = { 1.105 + bold : null, 1.106 + classic : null, 1.107 + 1.108 + green : {ref : null, 1.109 + offState : {"fill" : "#030", "scale": 1} , 1.110 + onState : {"fill" : "#0F0", "scale": 1}}, 1.111 + red : {ref : null, 1.112 + offState: {"fill" : "#300", "scale" : 1}, 1.113 + onState : {"fill" : "#F00" ,"scale" : 1}}, 1.114 + blue : {ref : null, 1.115 + offState : {"fill" : "#003", "scale": 1}, 1.116 + onState : {"fill" : "#00F", "scale": 1}, 1.117 + ref : null}, 1.118 + black : {offState : null, onState : null, ref : null}, 1.119 + display : {ref : null, state : {"fill" : "black"}}}; 1.120 + 1.121 + var color_select_init = (function (){ 1.122 + state_map["red"].ref = 1.123 + color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState); 1.124 + state_map["red"].ref.node.onclick = 1.125 + (function (){order.color= "red"; update();}); 1.126 + state_map["green"].ref = 1.127 + color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState); 1.128 + state_map["green"].ref.node.onclick = 1.129 + (function (){order.color= "green"; update();}); 1.130 + state_map["blue"].ref = 1.131 + color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState); 1.132 + state_map["blue"].ref.node.onclick = 1.133 + (function (){order.color= "blue"; update();}); 1.134 + 1.135 + toggle_on(state_map[order.color]); 1.136 + }); 1.137 + 1.138 + var display_init = (function (){ 1.139 + state_map["display"].ref = 1.140 + display.rect(1, 1 , display.width - 1, display.height - 2, 20).attr( 1.141 + state_map["display"].state); 1.142 + }); 1.143 + 1.144 + var text_entry_init = (function (){ 1.145 + $('input[type=text][title!=""]').each(function() { 1.146 + if ($.trim($(this).val()) == ''){ 1.147 + $(this).val($(this).attr('title'));} 1.148 + if ($(this).val() == $(this).attr('title')){ 1.149 + $(this).addClass('exampleText');} 1.150 + }).focus(switchText).blur(switchText); 1.151 + 1.152 + $('form').submit(function() { 1.153 + $(this).find('input[type=text][title!=""]').each(function() { 1.154 + if ($(this).val() == $(this).attr('title')){ 1.155 + $(this).val('');}})})}); 1.156 + 1.157 + var style_text = { 1.158 + phone : "617.821.9129", 1.159 + email : "rlm@mit.edu", 1.160 + website : "www.rlmcintyre.com", 1.161 + name : "Robert McIntyre", 1.162 + company : "LaserKard LLC.", 1.163 + occupation : "AI Researcher"} 1.164 + 1.165 + 1.166 + var style_init = (function (){ 1.167 + var draw = draw_card(style.bold); 1.168 + draw.bold.name(style_text.name); 1.169 + style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10); 1.170 + draw.bold.email(style_text.email); 1.171 + 1.172 + 1.173 + 1.174 + 1.175 + 1.176 + 1.177 + 1.178 + }); 1.179 + 1.180 + 1.181 + 1.182 + 1.183 + var init = (function () { 1.184 + display = Raphael("card-display", 340 ,215); 1.185 + color = Raphael("color-select", 300, 100); 1.186 + 1.187 + style.bold = Raphael("bold", 170, 107); 1.188 + 1.189 + style.classic = Raphael("classic", 170 , 107); 1.190 + 1.191 + helvetica = display.getFont('HelveticaNeue', 700); 1.192 + helvetica_I = display.getFont('HelveticaNeue', 800); 1.193 + color_select_init(); 1.194 + display_init(); 1.195 + card_init(); 1.196 + text_entry_init(); 1.197 + key_handling(); 1.198 + style_init(); 1.199 + update(); 1.200 + }); 1.201 + 1.202 + 1.203 + 1.204 + 1.205 + var toggle_on = (function (button){ 1.206 + button.ref.animate(button.onState, 2000); 1.207 + }); 1.208 + 1.209 + var toggle_off = (function (button){ 1.210 + button.ref.animate(button.offState, 2000); 1.211 + }); 1.212 + 1.213 + var color_select_update = (function (){ 1.214 + var color = order.color; 1.215 + return (function (){ 1.216 + if (order.color === color){} 1.217 + else { 1.218 + toggle_off(state_map[color]); 1.219 + toggle_on(state_map[(order.color)]); 1.220 + color = order.color;} 1.221 + });})(); 1.222 + 1.223 + var display_color_update = (function (){ 1.224 + var color = state_map.display.state.fill 1.225 + 1.226 + return (function (){ 1.227 + if (order.color === color){} 1.228 + else { 1.229 + state_map["display"].ref.animate( 1.230 + {"fill" : state_map[order.color].onState.fill}, 2000); 1.231 + color = order.color;}})})(); 1.232 + 1.233 + var display_style_update = (function (){ 1.234 + var style = null; 1.235 + return (function (){ 1.236 + if (style !== order.style){ 1.237 + ""; }}); 1.238 + }); 1.239 + 1.240 + var key_handling = (function (){ 1.241 + var assoc = (function (target, field) { 1.242 + $(target).keyup(function() { 1.243 + field.text = $(target).val(); 1.244 + update();})}); 1.245 + assoc('#user-name', card.name); 1.246 + assoc('#user-phone', card.phone); 1.247 + assoc('#user-email', card.email); 1.248 + assoc('#user-company', card.company); 1.249 + assoc('#user-occupation', card.occupation); 1.250 + assoc('#user-website', card.website); 1.251 + }); 1.252 + 1.253 + var display_style_update = (function (){ 1.254 + var style = null; 1.255 + 1.256 + return (function () { 1.257 + var draw = draw_card(display); 1.258 + if (style !== order.style){ 1.259 + for ( var property in card ){ 1.260 + if (!draw[order.style][(deref(property))]){ 1.261 + $("#user" + "-" + property).toggle(400);}} 1.262 + style = order.style;} 1.263 + });})(); 1.264 + 1.265 + var display_text_update = (function (){ 1.266 + var state = {name : "nothing", 1.267 + phone: "nothing", 1.268 + email: "nothing", 1.269 + occupation: "nothing", 1.270 + company : "nothing", 1.271 + website : "nothing" }; 1.272 + 1.273 + var check_text = (function (var_name) { 1.274 + var draw = draw_card(display); 1.275 + if (state[deref(var_name)] !== (card[deref(var_name)]).text){ 1.276 + if (draw[order.style][deref(var_name)]) { 1.277 + card[deref(var_name)].ref.remove(); 1.278 + card[var_name].ref = 1.279 + draw[order.style][deref(var_name)]( 1.280 + card[deref(var_name)].text,display); 1.281 + state[deref(var_name)] = card[deref(var_name)].text; 1.282 + }}}); 1.283 + 1.284 + return (function (){ 1.285 + check_text("name"); 1.286 + check_text("phone"); 1.287 + check_text("email"); 1.288 + check_text("occupation"); 1.289 + check_text("company"); 1.290 + check_text("website"); 1.291 + 1.292 + $("#debug").html(JSON.stringify(state)); 1.293 + }); 1.294 + 1.295 + })(); 1.296 + 1.297 + var update = (function (){ 1.298 + color_select_update(); 1.299 + display_color_update(); 1.300 + display_text_update(); 1.301 + display_style_update(); 1.302 + }); 1.303 + 1.304 + 1.305 + return {init : init, 1.306 + update : update};})(); 1.307 + 1.308 + 1.309 + 1.310 +$(document).ready(function() { 1.311 + Buy.init(); 1.312 + Buy.update(); 1.313 + });