/** * Namespace "StuffBrowser.Tooltip" * @class Tooltip * @author jorn@info.nl * * @desc Provides tooltip functionality for the stuff browser */ StuffBrowser.Tooltip = function($){ var tooltip = {}; var timeout; /** * HTML for the tooltip, to be prepended to DOM (just after ) * .with-image is optional (also set by this script) */ var tooltipHtml = '\ '; /** * Tadaa, hides tooltip */ function hideTooltip() { clearTimeout(timeout); tooltip.hide(); } /** * Call modify function and handle tooltip visibility * * @param {Object} elem LI of product * @param {Bool} listview Wether to include the product image or not */ function showTooltip(elem, listview) { tooltip.css({ visibility: 'hidden', display: 'block' }); modifyTooltip(elem, listview); // wrap in timeout to give image time to load and have smoother interaction with mouse enter/leave timeout = setTimeout(function(){ tooltip.css({ display: 'none', visibility: 'visible' }); tooltip.fadeIn(200); }, 200); } /** * Changes the content of tooltip * * @param {Object} elem LI of product * @param {Bool} listview Wether to include the product image or not */ function modifyTooltip(elem, listview) { var pid = elem.attr('id'); var p = StuffBrowser.products[StuffBrowser.getCurrentTab(true)][pid]; // product image if( listview ){ tooltip.addClass('with-img'); if( p.defaultAttachment === 0 ){ tooltip.find('.product-img').attr('src', Base.paths.theme_path, '/img/product_no_image.png'); } else{ tooltip.find('.product-img').attr('src', Base.paths.product_image +'?id='+ p.product.ID +'-'+ p.defaultAttachment +'&w=70&h=70'); } } else { tooltip.removeClass('with-img'); } // product info var d = p.product.creationDate; tooltip.find('.name').text(p.product.subject); tooltip.find('.date').text(d.getDate() +'/'+ (d.getMonth()+1) +'/'+ d.getFullYear()); tooltip.find('.reviews').text(p.reviewCount); tooltip.find('.cms-meanrating').html(StuffBrowser.View.generateMeanRating(p.meanRating)); tooltip.find('.votes').text(p.ratingCount); tooltip.find('.have').text(p.haveCount); tooltip.find('.want').text(p.wantCount); // position setPosition(elem, listview); } /** * Calculates proper position and sets it to tooltip * * @param {Object} elem list item */ function setPosition(elem, listview) { var offset = {}; var w = $(window); offset = $(elem).offset(); if( listview ){ offset.left += 35; offset.top += 37; } else { offset.left += -10; offset.top += 63; } // check if bottom of tooltip is outside browser window and reset position var tooltip_bottom = offset.top + tooltip.outerHeight() - w.scrollTop() + 5; if( tooltip_bottom > w.height() ) offset.top += (w.height() - tooltip_bottom); // check if right of tooltip is outside browser window and reset position var tooltip_right = offset.left + tooltip.outerWidth() - w.scrollLeft() + 5; if (tooltip_right > w.width()) { if( !settings.followMouse || settings.showOnClick ) offset.left = $(elem).offset().left - tooltip.outerWidth() - settings.offsetX; else offset.left = e.pageX - tooltip.outerWidth() - (settings.offsetX == 0 ? 10 : settings.offsetX); } tooltip.css({ 'top' : offset.top, 'left': offset.left }); } return { bindEvents: function(card_nr){ $('.view1 .card'+ card_nr +' .item a, .view2 .card'+ card_nr +' .item a') .mouseenter(function(){ var elem = $(this); showTooltip(elem.closest('li'), elem.closest('.tabContent').hasClass('view1')); }) .mouseleave(function(){ hideTooltip(); } ); }, /** * Initialize this Class */ init: function() { $('body').prepend(tooltipHtml); tooltip = $('#stuff-tooltip'); // DOES NOT WORK WITH JQUERY 1.3.2 (which comes with Jive) // Event is called by StuffBrowser.Card on card creation instead. // See function bindEvents() above. // // $('.view1 .itemlist .item a, .view2 .itemlist .item a') // .live('mouseenter', function(){ // var elem = $(this); // showTooltip(elem.closest('li'), elem.closest('.tabContent').hasClass('view1')); // }) // .live('mouseleave', function(){ // hideTooltip(); // } // ); } }; }(jQuery);