/* jQuery lib extensions for basket app */
(function($) {
// * constants * //
var POPUP_ID = "__popup";
// client logging helper (e.g. firebug)
// e.g. mangoLog("myVarName", "myValue");
// name (object)
// value (object)
$.fn.mangoLog = function(name, value){
if(IS_DEBUG){
try{
value = typeof(value) != 'undefined' ? value : "";
if(typeof(window.loadFirebugConsole) == 'function'){
window.loadFirebugConsole();
console.log(name, value);
}else if($.browser.msie){
if($("#pnlLogging").length == 0){
$("#pnlLeft").append("");
};
$("#pnlLogging").append("" + name + " " + value + "
");
return;
};
}catch(e){};
};
};
// add product stickers
$.fn.mangoProductSticker = function() {
var jqthis = $(this);
if(jqthis.attr("class") && jqthis.attr("class") == "offer" || jqthis.attr("class") == "productThumbnail_offer"){
var div = $("![]()
")
.attr("src", APPLICATION_ROOT + "client/global/img/stickers/offer_40x40.png") // TODO - global image builder...
.attr("width", "40")
.attr("height", "40")
.attr("border", "0")
.attr("style", "z-index:1;margin-top:-30px;margin-left:0px;");
jqthis.after(div);
// revert to thumb
jqthis.attr("class", jqthis.attr("class") == "productThumbnail_offer" ? "productThumbnail" : "").attr("style", "z-index:0;");
};
return this;
};
// standard pipe-separated tooltip - e.g. using title="Title|Body"
$.fn.mangoPipeTip = function() {
this.each(function(){
var anchor = $(this);
if(anchor.attr("title") && anchor.attr("title").length > 0){
anchor.tooltip({ delay: 0, showURL: false, showBody: anchor.attr("title").indexOf("|") != -1 ? "|" : "" });
};
});
};
// decorate mandatory fields
$.fn.mangoMandatoryField = function() {
this.each(function(){
var input = $(this);
var next = input.next();
if(null == next || next.html() != "*"){
var star = $("*");
star.attr("class", "mandatory");
input.after(star);
};
});
};
// registers a product pop-up link (using title="[product.MMID]")
$.fn.mangoProductPopup = function() {
// n.b. we use iteration rather than direct jQuery call on the result set
// this allows us to pass over items that have already been processed, or do not contain valid data
this.each(function(){
var anchor = $(this);
var mmid = anchor.attr("title");
if(mmid.length > 0){
var data = $mb.getProductData(mmid);
if(typeof(data) != 'undefined'){
var hb = new htmlBuilder();
// tooltip
anchor.tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
var html = hb.buildLargeBasketItemTooltipHtml(data);
return html;
}
});
// popup
anchor.click(function(e){
var html = hb.buildFullProductInfoPopup(data, POPUP_ID, false, true);
showPopup(html, e);
return false;
});
// lose the title - tidy for display and prevents re-registration
anchor.attr("title", "");
};
};
});
};
// registers a small basket item tooltip
// + data (BasketItemJsonData)
$.fn.smallBasketItemTooltip = function(data) {
this.tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
var html = new htmlBuilder().buildBasketItemTooltipHtml(data);
return html;
}
});
};
// registers a product info tooltip (using title="[product.MMID]")
$.fn.mangoProductInfoTip = function() {
// n.b. we use iteration rather than direct jQuery call on the result set
// this allows us to pass over items that have already been processed, or do not contain valid data
this.each(function(){
var anchor = $(this);
var mmid = anchor.attr("title");
if(mmid.length > 0){
var data = $mb.getProductData(mmid);
if(typeof(data) != 'undefined'){
var hb = new htmlBuilder();
anchor.tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return hb.buildFullProductInfoTooltip(data);
}
});
// lose the title - tidy for display and prevents re-registration
anchor.attr("title", "");
};
};
});
};
// register a tooltip with the specified image, header and body in the html
// + img (string) - image url
// + header (string) - header text
// + body (string) - body text
// + imgWidth (int) - image width
// + imgHeight (int) - image height
// + imgAlt (int) - image alt tag
$.fn.mangoHover = function(img, header, body, imgWidth, imgHeight, imgAlt){
this.tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
var html = new htmlBuilder().buildHover(img, header, body, imgWidth, imgHeight, imgAlt);
return html;
}
});
};
// register a popup with the specified image, header and body in the html
// + img (string) - image url
// + header (string) - header text
// + body (string) - body text
// + imgWidth (int) - image width
// + imgHeight (int) - image height
// + imgAlt (int) - image alt tag
$.fn.mangoPopup = function(img, header, body, imgWidth, imgHeight, imgAlt){
this.click(function(e){
var hb = new htmlBuilder();
var html = hb.buildPopupHtml(img, header, body, imgWidth, imgHeight, imgAlt);
html = hb.buildPopup(POPUP_ID, html, false, true, "popup");
showPopup(html, e, imgWidth);
return false;
});
};
// register a popup with the specified element contents as html
// + id (string) - id of element to display as popup
// + width (int) - popup width
$.fn.mangoElementAsPopup = function(id, width){
this.click(function(e){
var html = new htmlBuilder().buildPopup(POPUP_ID, $('#' + id).html(), true, true, "textPopup");
showPopup(html, e, width, e.pageX - 100, $(document).scrollTop() + 20);
return false;
});
};
/// props: http://github.com/brandonaaron/jquery-outerhtml/blob/6e872313fe094a507e3ba581b7181e02ccccbc02/jquery.outerhtml.js
$.fn.outerHTML = function() {
return $('').append( this.eq(0).clone() ).html();
};
// toggle fadeIn() / fadeOut()
$.fn.fadeToggle = function(speed, callback) {
var vis = this.css("display") != "none";
if(vis){
this.fadeOut(speed, callback);
}else{
this.fadeIn(speed, callback);
};
};
// ## "private" funcs ## //
// html (string) - innerHtml
// e (events)
// w (int) - width (popup width is this +10px - default 310px)
// x (int) - optional
// y (int) - optional
function showPopup(html, e, w, x, y){
// TODO - no need to remove and then build again is there?! just hide and show? check usages of this.
$('#' + POPUP_ID).remove();
$("body").append(html);
var scrollTop = $(document).scrollTop();
var x = typeof(x) == 'undefined' ? e.pageX + 160 : x;
var y = typeof(y) == 'undefined' ? scrollTop + 20 : y;
w = typeof(w) == 'undefined' ? "310px" : (w + 10) + "px";
$('#' + POPUP_ID).css({
width: w,
position: "absolute",
top: y,
left: x
}).fadeIn();
};
})(jQuery);;