Mercurial > laserkard

annotate js-lib/buy3.js @ 103:52297178e0eb laserkard

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