How would I re-render just the payments sections for example now
without "context'? Normally I would just call "bind_payments" and it
would re-render just the payment section. Without "context" I have no
idea how I would do that without re-rendering the whole sale now. Any
ideas?
Sorry for the inlined files .. couldnt find a way to attach them.
<html>
<head>
<script src="app://vendor/javascript/jquery-1.3.2.js"></script>
<script src="app://vendor/javascript/pure.js"></script>
<script type="text/ruby" src="app://app/config.rb"></script>
<script type="text/ruby" src="index.rb"></script>
<script src="index.js"></script>
</head>
<body>
<div id="toolbar">
<p>Please enter an Inventory number in the box below or select
and item from the toolbar.</p>
<div id="item_search">
<input id="item_info">
<button id="add_item">add</button>
</div>
<div id="item_buttons">
<ul>
<li class="context">
<button class="name inv@data-inv"></button>
</li>
</ul>
</div>
</div>
<div id="sale">
<div id="info_widgets"></div>
<table id="customer">
<tr>
<td><img class="photo" src="app://images/customer.png"></td>
<td><span class="first_name"></span></td>
<td><span class="last_name"></span></td>
</tr>
</table>
<table id="sale_items">
<tr class="context">
<td><button class="void_item">X</button></td>
<td>
<span class="inventory_number"></span><br>
<span class="category"></span>
</td>
<td><span class="description"></span></td>
<td>
<input class="quantity@value">
@
<input class="selling_price@value">
</td>
</tr>
</table>
<table id="summary">
<tr>
<td>Sub Total</td>
<td><input class="sub_total@value"></td>
</tr>
<tr>
<td>Tax</td>
<td><span class="tax"></span></td>
</tr>
<tr>
<td>Total</td>
<td><span class="total"></span></td>
</tr>
</table>
<div id="payment_info">
<button id="add_payment">+</button>
<table id="payments">
<tr class="context">
<td><button class="remove_payment">X</button></td>
<td><span class="payment_type"></span></td>
<td><span class="amount"></span></td>
</tr>
</table>
</div>
<div id="sale_commands">
<ul>
<li><button id="clear_discounts">Clear Discounts</button></
li>
<li><button id="eat_tax">Eat Tax</button></li>
<li><button id="balance">Balance $<span class="balance"></
span></button></li>
</ul>
</div>
</div>
</body>
</html>
$(function(){
var to_jquery_selector = function(dom_css_class){
var classes = dom_css_class.replace("@", "\\@").split(" ");
var morphed = classes.map(function(e){return "." + e;});
return morphed.join("");
};
var text_changed = function(property, fn){
if(property.value == ""){property.value =
property.defaultValue;}
if(property.value == property.defaultValue){return;}
property.defaultValue = property.value;
setTimeout(fn, 1);
};
var track_focus = function(){
var focused = "";
var track_focus = function(){
$(":input").each(function(i){
this.onfocus = function(e){focused = this.className;};
});
};
var set_focus = function(){
if(focused != ""){
var selector = to_jquery_selector(focused);
$(selector).focus();
};
};
return function(){
set_focus();
track_focus();
};
}();
var bind_menu = function(){
var setup_add_item = function(){
$("#add_item").click(function(){
var item = $("#item_info").val();
sale.ring_up(item);
});
$("#item_buttons button").click(function(){
sale.ring_up(this.getAttribute("data-inv"));
});
};
var setup_clear_discounts = function(){
$("#clear_discounts").click(function(){
sale.undo_price_changes();
});
};
var setup_eat_tax = function(){
$("#eat_tax").click(function(){
sale.eat_tax();
});
};
var setup_add_payment = function(){
$("#add_payment").click(function(){
sale.add_cash_payment();
});
};
var render = function(){
var menu = [{name: "dvd", inv: "I-9000"}];
$("#item_buttons li").autoRender(menu);
};
return function(){
render();
track_focus();
setup_add_item();
setup_clear_discounts();
setup_eat_tax();
setup_add_payment();
};
}();
var bind_summary = function (){
var template_summary = $("#summary").clone();
var template_balance = $("#balance").clone();
var setup_change_total = function(){
$("#summary .sub_total\\@value").blur(function(){
var that = this;
text_changed(this, function(){sale.out_door_price
(that.value)});
});
};
var render = function(){
$("#summary").autoRender(sale.view(), {}, template_summary);
$("#balance").autoRender(sale.view(), {}, template_balance);
};
return function(){
render();
track_focus();
setup_change_total();
};
}();
var bind_customer = function(){
var template = $("#customer").clone();
var render = function(){
$("#customer").autoRender(sale.view().customer, {}, template);
};
return function(){
render();
track_focus();
};
}();
var bind_payments = function(){
var template = $("#payments").clone();
var setup_remove_payment = function(){
$("#payments .remove_payment").each(function(i){
this.onclick = function(e){sale.reject(i)};
});
};
var render = function(){
$("#payments").autoRender(sale.view().payments, {}, template);
};
return function(){
render();
track_focus();
setup_remove_payment();
};
}();
var bind_items = function(){
var template = $("#sale_items").clone();
var dir = {
".quantity\\@value[class]+": function(arg){return "quantity" +
arg.pos},
".selling_price\\@value[class]+": function(arg){return
"selling_price" + arg.pos},
};
var setup_change_item = function(){
var change_item = function(index, propertyName, property){
text_changed(property, function(){
sale.change_item(index, propertyName, property.value);
});
};
var blur_handler = function(propertyName){
return function(i){
this.onblur = function(e){change_item(i, propertyName,
this);};
};
};
$("#sale_items .quantity\\@value").each(blur_handler
("quantity"));
$("#sale_items .selling_price\\@value").each(blur_handler
("selling_price"));
};
var setup_void_item = function(){
$("#sale_items .void_item").each(function(i){
this.onclick = function(e){sale["void"](i);};
});
};
var render = function(){
$("#sale_items").autoRender(sale.view().items, dir, template);
};
return function(){
render();
track_focus();
setup_change_item();
setup_void_item();
};
}();
setup({menu: bind_menu, customer: bind_customer, items:
bind_items,
summary: bind_summary, payments: bind_payments});
});