Mercurial > laserkard

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