Mercurial > laserkard

annotate js-lib/buy3.js @ 99:9649b14f3b38 laserkard

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