Mercurial > laserkard

annotate js-lib/buy3.js @ 96:a0b768d3494a laserkard

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