Mercurial > laserkard

annotate js-lib/buy3.js @ 98:388344355ebf laserkard

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