Mercurial > laserkard

annotate js-lib/buy3.js @ 92:614dca52e323 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
basic drawing achieved
author Robert McIntyre <rlm@mit.edu>
date Mon, 26 Jul 2010 13:01:47 -0400
parents 0dd39631299c
children 69b4defd835d
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@92 19
rlm@85 20 Buy = (function (){
rlm@92 21 // Utility Functinos
rlm@90 22
rlm@92 23 var switchText = (function (){
rlm@92 24 if ($(this).val() == $(this).attr('title'))
rlm@92 25 $(this).val('').removeClass('exampleText');
rlm@92 26 else if ($.trim($(this).val()) == '')
rlm@92 27 $(this).addClass('exampleText').val($(this).attr('title'));});
rlm@90 28
rlm@92 29
rlm@92 30
rlm@92 31
rlm@92 32
rlm@92 33 // Initilization Functions.
rlm@85 34 var order =
rlm@92 35 {color : "green",
rlm@92 36 style : "bold",
rlm@92 37 quantity : 30,
rlm@92 38 content : undefined,
rlm@92 39 info : undefined,
rlm@92 40 name : "Robert McIntyre",
rlm@92 41 occupation : "AI Researcher",
rlm@92 42 phone : "617.821.9129",
rlm@92 43 email : "rlm@mit.edu",
rlm@92 44 website : "www.rlmcintyre.com",
rlm@92 45 company : "LaserKard LLC."
rlm@92 46 };
rlm@85 47
rlm@85 48 var display;
rlm@85 49 var color;
rlm@85 50 var style;
rlm@90 51
rlm@91 52 var state_map = {
rlm@91 53 green : {ref : null,
rlm@91 54 offState : {"fill" : "#030", "scale": 1} ,
rlm@91 55 onState : {"fill" : "#0F0", "scale": 1}},
rlm@91 56 red : {ref : null,
rlm@91 57 offState: {"fill" : "#300", "scale" : 1},
rlm@91 58 onState : {"fill" : "#F00" ,"scale" : 1}},
rlm@91 59 blue : {ref : null,
rlm@91 60 offState : {"fill" : "#003", "scale": 1},
rlm@91 61 onState : {"fill" : "#00F", "scale": 1},
rlm@91 62 ref : null},
rlm@91 63 black : {offState : null, onState : null, ref : null},
rlm@91 64 display : {ref : null, state : {"fill" : "black"}}};
rlm@90 65
rlm@90 66 var color_select_init = (function (){
rlm@90 67 state_map["red"].ref =
rlm@92 68 color.rect(160, 1, 70, 50, 10).attr(state_map["red"].offState);
rlm@90 69 state_map["red"].ref.node.onclick =
rlm@90 70 (function (){order.color= "red"; update();});
rlm@90 71 state_map["green"].ref =
rlm@92 72 color.rect(1, 1, 70, 50, 10).attr(state_map["green"].offState);
rlm@90 73 state_map["green"].ref.node.onclick =
rlm@90 74 (function (){order.color= "green"; update();});
rlm@90 75 state_map["blue"].ref =
rlm@92 76 color.rect(80, 1, 70, 50, 10).attr(state_map["blue"].offState);
rlm@90 77 state_map["blue"].ref.node.onclick =
rlm@90 78 (function (){order.color= "blue"; update();});
rlm@90 79
rlm@90 80 toggle_on(state_map[order.color]);
rlm@90 81 });
rlm@86 82
rlm@90 83 var display_init = (function (){
rlm@90 84 state_map["display"].ref =
rlm@90 85 display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state);
rlm@90 86 });
rlm@92 87
rlm@92 88 var text_entry_init = (function (){
rlm@92 89 $('input[type=text][title!=""]').each(function() {
rlm@92 90 if ($.trim($(this).val()) == ''){
rlm@92 91 $(this).val($(this).attr('title'));}
rlm@92 92 if ($(this).val() == $(this).attr('title')){
rlm@92 93 $(this).addClass('exampleText');}
rlm@92 94 }).focus(switchText).blur(switchText);
rlm@92 95
rlm@92 96 $('form').submit(function() {
rlm@92 97 $(this).find('input[type=text][title!=""]').each(function() {
rlm@92 98 if ($(this).val() == $(this).attr('title')){
rlm@92 99 $(this).val('');}})})});
rlm@92 100
rlm@92 101
rlm@92 102
rlm@92 103
rlm@92 104
rlm@90 105
rlm@90 106 var init = (function () {
rlm@90 107 display = Raphael("card-display", 340 ,215);
rlm@90 108 color = Raphael("color-select", 300, 100);
rlm@90 109 style = Raphael("style-select", 200, 70);
rlm@90 110 color_select_init();
rlm@90 111 display_init();
rlm@92 112 card_init();
rlm@92 113 text_entry_init();
rlm@92 114 key_handling();
rlm@92 115
rlm@90 116 });
rlm@90 117
rlm@90 118
rlm@90 119 //Update Functions
rlm@86 120
rlm@86 121 var toggle_on = (function (button){
rlm@90 122 button.ref.animate(button.onState, 2000);
rlm@86 123 });
rlm@86 124
rlm@86 125 var toggle_off = (function (button){
rlm@90 126 button.ref.animate(button.offState, 2000);
rlm@86 127 });
rlm@86 128
rlm@90 129 var color_select_update = (function (){
rlm@86 130 var color = order.color;
rlm@86 131 return (function (){
rlm@86 132 if (order.color === color){}
rlm@86 133 else {
rlm@90 134 toggle_off(state_map[color]);
rlm@90 135 toggle_on(state_map[(order.color)]);
rlm@86 136 color = order.color;}
rlm@86 137 });})();
rlm@86 138
rlm@92 139 var display_color_update = (function (){
rlm@90 140 var color = state_map.display.state.fill
rlm@90 141
rlm@90 142 return (function (){
rlm@90 143 if (order.color === color){}
rlm@90 144 else {
rlm@91 145 state_map["display"].ref.animate(
rlm@91 146 {"fill" : state_map[order.color].onState.fill}, 2000);
rlm@90 147 color = order.color;}})})();
rlm@90 148
rlm@92 149
rlm@92 150
rlm@92 151 var display_style_update = (function (){
rlm@92 152 var style = null;
rlm@92 153 return (function (){
rlm@92 154 if (style !== order.style){
rlm@92 155 ""; }});
rlm@92 156 });
rlm@92 157
rlm@92 158
rlm@92 159 var card =
rlm@92 160 {name : {text: "Robert McIntyre", ref: ""},
rlm@92 161 company : {text: "", ref: ""},
rlm@92 162 occupation : {text: "", ref: ""},
rlm@92 163 phone : {text: "", ref: ""},
rlm@92 164 email : {text: "", ref: ""},
rlm@92 165 website : {text: "", ref: ""},
rlm@92 166 decoration : {text: "", ref: ""}};
rlm@92 167
rlm@92 168 var card_init = (function () {
rlm@92 169 card.name.ref = display.rect(10,10,10,10,5);
rlm@92 170 });
rlm@92 171
rlm@92 172 var key_handling = (function (){
rlm@92 173 var assoc = (function (target, field) {
rlm@92 174 $(target).keyup(function() {
rlm@92 175 field.text = $(target).val();
rlm@92 176 update();})});
rlm@92 177 assoc('#user-name', card.name);
rlm@92 178 assoc('#user-phone', card.phone);
rlm@92 179 assoc('#user-email', card.email);
rlm@92 180 assoc('#user-company', card.company);
rlm@92 181 assoc('#user-occupation', card.occupation);
rlm@92 182 assoc('#user-website', card.website);
rlm@92 183
rlm@92 184
rlm@92 185 });
rlm@92 186
rlm@92 187
rlm@92 188
rlm@92 189 var display_text_update = (function (){
rlm@92 190 var name = null;
rlm@92 191
rlm@92 192 return (function () {
rlm@92 193
rlm@92 194 if (name !== card.name.text){
rlm@92 195 //alert("whatev");
rlm@92 196 card.name.ref.remove();
rlm@92 197 card.name.ref =
rlm@92 198 display.print(10,10,card.name.text,
rlm@92 199 display.getFont('HelveticaNeue',700), 25).attr(
rlm@92 200 {"fill" : "#FFFFFF"});
rlm@92 201
rlm@92 202 //card.name.ref.animate({"fill" : Raphael.getColor()} ,1000);
rlm@92 203 name = card.name.text;
rlm@92 204 }});
rlm@92 205
rlm@92 206
rlm@92 207 })();
rlm@92 208
rlm@92 209
rlm@92 210
rlm@92 211
rlm@92 212 // var display_text_update = (function (){
rlm@92 213 // var style;
rlm@92 214 // var name;
rlm@92 215 // var occupation;
rlm@92 216 // var phone;
rlm@92 217 // var email;
rlm@92 218 // var company;
rlm@92 219 // var website;
rlm@92 220
rlm@92 221 // return (function (){
rlm@92 222 // if (style !== order.style) {}
rlm@92 223
rlm@92 224
rlm@92 225 // })();
rlm@92 226
rlm@86 227 var update = (function (){
rlm@90 228 color_select_update();
rlm@92 229 display_color_update();
rlm@92 230 display_text_update();
rlm@92 231 $("#debug").html(JSON.stringify({name : card.name.text, email : card.email.text}));
rlm@90 232 });
rlm@86 233
rlm@85 234
rlm@85 235
rlm@90 236 // return closure over state
rlm@86 237 return {init : init,
rlm@90 238 update : update};})();
rlm@85 239
rlm@85 240
rlm@92 241
rlm@92 242
rlm@92 243
rlm@92 244
rlm@92 245
rlm@92 246
rlm@92 247
rlm@85 248 $(document).ready(function() {
rlm@90 249 Buy.init();
rlm@90 250 Buy.update();
rlm@85 251 });