Mercurial > laserkard

annotate js-lib/buy3.js @ 101:2bec541ef58f laserkard

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