From eca4420fc182096422cd1fbcd986ec9feb93ab7e Mon Sep 17 00:00:00 2001 From: mdtrooper Date: Fri, 16 Jan 2015 18:02:37 +0100 Subject: [PATCH] Change the position of tooltip in networkmap open. And updated the jquery.cluetip.js to 0.9.9 and human readble version. TICKET: #1625 (cherry picked from commit 059140a925da48b12d9c575acb11b7c3640a8f41) --- .../include/functions_networkmap.php | 5 +- .../include/javascript/jquery.cluetip.js | 539 +++++++++++++++++- 2 files changed, 513 insertions(+), 31 deletions(-) diff --git a/pandora_console/include/functions_networkmap.php b/pandora_console/include/functions_networkmap.php index f4e084fba2..c8feeb43b9 100644 --- a/pandora_console/include/functions_networkmap.php +++ b/pandora_console/include/functions_networkmap.php @@ -1062,7 +1062,7 @@ function networkmap_create_agent_node ($agent, $simple = 0, $font_size = 10, $cu $url_tooltip = 'ajax.php?page=operation/agentes/ver_agente&get_agent_status_tooltip=1&id_agent='.$agent['id_agente']; } - $node = "\n" . $agent['id_node'].' [ color="'.$status_color.'", fontsize='.$font_size.', style="filled", fixedsize=true, width=0.40, height=0.40, label=< + $node = "\n" . $agent['id_node'] . ' [ color="' . $status_color . '", fontsize='.$font_size.', style="filled", fixedsize=true, width=0.40, height=0.40, label=<
' . $img_node . '
' . $img_node . '
'.io_safe_output($name).'
>, shape="doublecircle", URL="'.$url.'", tooltip="' . $url_tooltip . '"];' . "\n"; @@ -1696,7 +1696,8 @@ function networkmap_get_new_nodes_from_ip_mask($ip_mask, $fields = array()) { $("area[title!='']").cluetip ({ arrows: true, attribute: 'title', - cluetipClass: 'default' + cluetipClass: 'default', + positionBy: "bottomTop" }); }); /* ]]> */ diff --git a/pandora_console/include/javascript/jquery.cluetip.js b/pandora_console/include/javascript/jquery.cluetip.js index ffbfd32d07..711ec0c014 100644 --- a/pandora_console/include/javascript/jquery.cluetip.js +++ b/pandora_console/include/javascript/jquery.cluetip.js @@ -1,38 +1,519 @@ /* * jQuery clueTip plugin - * Version 0.9.8 (05/22/2008) + * Version 0.9.9 (04/24/2009) * @requires jQuery v1.1.4+ - * @requires Dimensions plugin (for jQuery versions < 1.2.5) + * @requires Dimensions plugin IF USED WITH jQuery VERSIONS PRIOR TO 1.2.5) * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ -;(function($){var $cluetip,$cluetipInner,$cluetipOuter,$cluetipTitle,$cluetipArrows,$dropShadow,imgCount;$.fn.cluetip=function(js,options){if(typeof js=='object'){options=js;js=null;} -return this.each(function(index){var $this=$(this);var opts=$.extend(false,{},$.fn.cluetip.defaults,options||{},$.metadata?$this.metadata():$.meta?$this.data():{});var cluetipContents=false;var cluezIndex=parseInt(opts.cluezIndex,10)-1;var isActive=false,closeOnDelay=0;if(!$('#cluetip').length){$cluetipInner=$('
');$cluetipTitle=$('

');$cluetipOuter=$('
').append($cluetipInner).prepend($cluetipTitle);$cluetip=$('
').css({zIndex:opts.cluezIndex}).append($cluetipOuter).append('
')[insertionType](insertionElement).hide();$('
').css({position:'absolute',zIndex:cluezIndex-1}).insertBefore('#cluetip').hide();$cluetip.css({position:'absolute',zIndex:cluezIndex});$cluetipOuter.css({position:'relative',zIndex:cluezIndex+1});$cluetipArrows=$('
').css({zIndex:cluezIndex+1}).appendTo('#cluetip');} -var dropShadowSteps=(opts.dropShadow)?+opts.dropShadowSteps:0;if(!$dropShadow){$dropShadow=$([]);for(var i=0;i').css({zIndex:cluezIndex-i-1,opacity:.1,top:1+i,left:1+i}));};$dropShadow.css({position:'absolute',backgroundColor:'#000'}).prependTo($cluetip);} -var tipAttribute=$this.attr(opts.attribute),ctClass=opts.cluetipClass;if(!tipAttribute&&!opts.splitTitle&&!js)return true;if(opts.local&&opts.hideLocal){$(tipAttribute+':first').hide();} -var tOffset=parseInt(opts.topOffset,10),lOffset=parseInt(opts.leftOffset,10);var tipHeight,wHeight;var defHeight=isNaN(parseInt(opts.height,10))?'auto':(/\D/g).test(opts.height)?opts.height:opts.height+'px';var sTop,linkTop,posY,tipY,mouseY,baseline;var tipInnerWidth=isNaN(parseInt(opts.width,10))?275:parseInt(opts.width,10);var tipWidth=tipInnerWidth+(parseInt($cluetip.css('paddingLeft'))||0)+(parseInt($cluetip.css('paddingRight'))||0)+dropShadowSteps;var linkWidth=this.offsetWidth;var linkLeft,posX,tipX,mouseX,winWidth;var tipParts;var tipTitle=(opts.attribute!='title')?$this.attr(opts.titleAttribute):'';if(opts.splitTitle){if(tipTitle==undefined){tipTitle='';} -tipParts=tipTitle.split(opts.splitTitle);tipTitle=tipParts.shift();} -var localContent;var activate=function(event){if(!opts.onActivate($this)){return false;} -isActive=true;$cluetip.removeClass().css({width:tipInnerWidth});if(tipAttribute==$this.attr('href')){$this.css('cursor',opts.cursor);} -$this.attr('title','');if(opts.hoverClass){$this.addClass(opts.hoverClass);} -linkTop=posY=$this.offset().top;linkLeft=$this.offset().left;mouseX=event.pageX;mouseY=event.pageY;if($this[0].tagName.toLowerCase()!='area'){sTop=$(document).scrollTop();winWidth=$(window).width();} -if(opts.positionBy=='fixed'){posX=linkWidth+linkLeft+lOffset;$cluetip.css({left:posX});}else{posX=(linkWidth>linkLeft&&linkLeft>tipWidth)||linkLeft+linkWidth+tipWidth+lOffset>winWidth?linkLeft-tipWidth-lOffset:linkWidth+linkLeft+lOffset;if($this[0].tagName.toLowerCase()=='area'||opts.positionBy=='mouse'||linkWidth+tipWidth>winWidth){if(mouseX+20+tipWidth>winWidth){$cluetip.addClass(' cluetip-'+ctClass);posX=(mouseX-tipWidth-lOffset)>=0?mouseX-tipWidth-lOffset-parseInt($cluetip.css('marginLeft'),10)+parseInt($cluetipInner.css('marginRight'),10):mouseX-(tipWidth/2);}else{posX=mouseX+lOffset;}} -var pY=posX<0?event.pageY+tOffset:event.pageY;$cluetip.css({left:(posX>0&&opts.positionBy!='bottomTop')?posX:(mouseX+(tipWidth/2)>winWidth)?winWidth/2-tipWidth/2:Math.max(mouseX-(tipWidth/2),0)});} -wHeight=$(window).height();if(js){$cluetipInner.html(js);cluetipShow(pY);} -else if(tipParts){var tpl=tipParts.length;for(var i=0;i'+tipParts[i]+'');}};cluetipShow(pY);} -else if(!opts.local&&tipAttribute.indexOf('#')!=0){if(cluetipContents&&opts.ajaxCache){$cluetipInner.html(cluetipContents);cluetipShow(pY);} -else{var ajaxSettings=opts.ajaxSettings;ajaxSettings.url=tipAttribute;ajaxSettings.beforeSend=function(){$cluetipOuter.children().empty();if(opts.waitImage){$('#cluetip-waitimage').css({top:mouseY+20,left:mouseX+20}).show();}};ajaxSettings.error=function(){if(isActive){$cluetipInner.html('sorry, the contents could not be loaded');}};ajaxSettings.success=function(data){cluetipContents=opts.ajaxProcess(data);if(isActive){$cluetipInner.html(cluetipContents);}};ajaxSettings.complete=function(){imgCount=$('#cluetip-inner img').length;$('#cluetip-waitimage').hide();if(isActive)cluetipShow(pY);};$.ajax(ajaxSettings);}}else if(opts.local){var $localContent=$(tipAttribute+':first');var localCluetip=$.fn.wrapInner?$localContent.wrapInner('
').children().clone(true):$localContent.html();$.fn.wrapInner?$cluetipInner.empty().append(localCluetip):$cluetipInner.html(localCluetip);cluetipShow(pY);}};var cluetipShow=function(bpY){$cluetip.addClass('cluetip-'+ctClass);if(opts.truncate){var $truncloaded=$cluetipInner.text().slice(0,opts.truncate)+'...';$cluetipInner.html($truncloaded);} -function doNothing(){};tipTitle?$cluetipTitle.show().html(tipTitle):(opts.showTitle)?$cluetipTitle.show().html(' '):$cluetipTitle.hide();if(opts.sticky){var $closeLink=$('');(opts.closePosition=='bottom')?$closeLink.appendTo($cluetipInner):(opts.closePosition=='title')?$closeLink.prependTo($cluetipTitle):$closeLink.prependTo($cluetipInner);$closeLink.click(function(){cluetipClose();return false;});if(opts.mouseOutClose){if($.fn.hoverIntent&&opts.hoverIntent){$cluetip.hoverIntent({over:doNothing,timeout:opts.hoverIntent.timeout,out:function(){$closeLink.trigger('click');}});}else{$cluetip.hover(doNothing,function(){$closeLink.trigger('click');});}}else{$cluetip.unbind('mouseout');}} -var direction='';$cluetipOuter.css({overflow:defHeight=='auto'?'visible':'auto',height:defHeight});tipHeight=defHeight=='auto'?Math.max($cluetip.outerHeight(),$cluetip.height()):parseInt(defHeight,10);tipY=posY;baseline=sTop+wHeight;if(opts.positionBy=='fixed'){tipY=posY-opts.dropShadowSteps+tOffset;}else if((posXmouseX)||opts.positionBy=='bottomTop'){if(posY+tipHeight+tOffset>baseline&&mouseY-sTop>tipHeight+tOffset){tipY=mouseY-tipHeight-tOffset;direction='top';}else{tipY=mouseY+tOffset;direction='bottom';}}else if(posY+tipHeight+tOffset>baseline){tipY=(tipHeight>=wHeight)?sTop:baseline-tipHeight-tOffset;}else if($this.css('display')=='block'||$this[0].tagName.toLowerCase()=='area'||opts.positionBy=="mouse"){tipY=bpY-tOffset;}else{tipY=posY-opts.dropShadowSteps;} -if(direction==''){posX=0&&bgY>0)?bgY+'px':/(left|right)/.test(direction)?0:''}).show();}else{$cluetipArrows.hide();} -$dropShadow.hide();$cluetip.hide()[opts.fx.open](opts.fx.open!='show'&&opts.fx.openSpeed);if(opts.dropShadow)$dropShadow.css({height:tipHeight,width:tipInnerWidth}).show();if($.fn.bgiframe){$cluetip.bgiframe();} -if(opts.delayedClose>0){closeOnDelay=setTimeout(cluetipClose,opts.delayedClose);} -opts.onShow($cluetip,$cluetipInner);};var inactivate=function(){isActive=false;$('#cluetip-waitimage').hide();if(!opts.sticky||(/click|toggle/).test(opts.activation)){cluetipClose();clearTimeout(closeOnDelay);};if(opts.hoverClass){$this.removeClass(opts.hoverClass);} -$('.cluetip-clicked').removeClass('cluetip-clicked');};var cluetipClose=function(){$cluetipOuter.parent().hide().removeClass().end().children().empty();if(tipTitle){$this.attr(opts.titleAttribute,tipTitle);} -$this.css('cursor','');if(opts.arrows)$cluetipArrows.css({top:''});};if((/click|toggle/).test(opts.activation)){$this.click(function(event){if($cluetip.is(':hidden')||!$this.is('.cluetip-clicked')){activate(event);$('.cluetip-clicked').removeClass('cluetip-clicked');$this.addClass('cluetip-clicked');}else{inactivate(event);} -this.blur();return false;});}else if(opts.activation=='focus'){$this.focus(function(event){activate(event);});$this.blur(function(event){inactivate(event);});}else{$this.click(function(){if($this.attr('href')&&$this.attr('href')==tipAttribute&&!opts.clickThrough){return false;}});var mouseTracks=function(evt){if(opts.tracking==true){var trackX=posX-evt.pageX;var trackY=tipY?tipY-evt.pageY:posY-evt.pageY;$this.mousemove(function(evt){$cluetip.css({left:evt.pageX+trackX,top:evt.pageY+trackY});});}};if($.fn.hoverIntent&&opts.hoverIntent){$this.mouseover(function(){$this.attr('title','');}).hoverIntent({sensitivity:opts.hoverIntent.sensitivity,interval:opts.hoverIntent.interval,over:function(event){activate(event);mouseTracks(event);},timeout:opts.hoverIntent.timeout,out:function(event){inactivate(event);$this.unbind('mousemove');}});}else{$this.hover(function(event){activate(event);mouseTracks(event);},function(event){inactivate(event);$this.unbind('mousemove');});}}});};$.fn.cluetip.defaults={width:275,height:'auto',cluezIndex:97,positionBy:'auto',topOffset:15,leftOffset:15,local:false,hideLocal:true,attribute:'rel',titleAttribute:'title',splitTitle:'',showTitle:true,cluetipClass:'default',hoverClass:'',waitImage:true,cursor:'help',arrows:false,dropShadow:true,dropShadowSteps:6,sticky:false,mouseOutClose:false,activation:'hover',clickThrough:false,tracking:false,delayedClose:0,closePosition:'top',closeText:'Close',truncate:0,fx:{open:'show',openSpeed:''},hoverIntent:{sensitivity:3,interval:50,timeout:0},onActivate:function(e){return true;},onShow:function(ct,c){},ajaxCache:true,ajaxProcess:function(data){data=data.replace(//g,'').replace(/<(link|title)(.|\s)*?\/(link|title)>/g,'');return data;},ajaxSettings:{dataType:'html'},debug:false};var insertionType='appendTo',insertionElement='body';$.cluetip={};$.cluetip.setup=function(options){if(options&&options.insertionType&&(options.insertionType).match(/appendTo|prependTo|insertBefore|insertAfter/)){insertionType=options.insertionType;} -if(options&&options.insertionElement){insertionElement=options.insertionElement;}};})(jQuery); + +/* + * + * Full list of options/settings can be found at the bottom of this file and at http://plugins.learningjquery.com/cluetip/ + * + * Examples can be found at http://plugins.learningjquery.com/cluetip/demo/ + * +*/ + +;(function($) { + + var $cluetip, $cluetipInner, $cluetipOuter, $cluetipTitle, $cluetipArrows, $dropShadow, imgCount; + $.fn.cluetip = function(js, options) { + if (typeof js == 'object') { + options = js; + js = null; + } + return this.each(function(index) { + var $this = $(this); + + // support metadata plugin (v1.0 and 2.0) + var opts = $.extend(true, {}, $.fn.cluetip.defaults, options || {}, $.metadata ? $this.metadata() : $.meta ? $this.data() : {}); + + // start out with no contents (for ajax activation) + var cluetipContents = false; + var cluezIndex = parseInt(opts.cluezIndex, 10)-1; + var isActive = false, closeOnDelay = 0; + + // create the cluetip divs + if (!$('#cluetip').length) { + $cluetipInner = $('
'); + $cluetipTitle = $('

'); + $cluetipOuter = $('
').append($cluetipInner).prepend($cluetipTitle); + $cluetip = $('
').css({zIndex: opts.cluezIndex}) + .append($cluetipOuter).append('
')[insertionType](insertionElement).hide(); + $('
').css({position: 'absolute', zIndex: cluezIndex-1}) + .insertBefore('#cluetip').hide(); + $cluetip.css({position: 'absolute', zIndex: cluezIndex}); + $cluetipOuter.css({position: 'relative', zIndex: cluezIndex+1}); + $cluetipArrows = $('
').css({zIndex: cluezIndex+1}).appendTo('#cluetip'); + } + var dropShadowSteps = (opts.dropShadow) ? +opts.dropShadowSteps : 0; + if (!$dropShadow) { + $dropShadow = $([]); + for (var i=0; i < dropShadowSteps; i++) { + $dropShadow = $dropShadow.add($('
').css({zIndex: cluezIndex-i-1, opacity:.1, top: 1+i, left: 1+i})); + }; + $dropShadow.css({position: 'absolute', backgroundColor: '#000'}) + .prependTo($cluetip); + } + var tipAttribute = $this.attr(opts.attribute), ctClass = opts.cluetipClass; + if (!tipAttribute && !opts.splitTitle && !js) return true; + // if hideLocal is set to true, on DOM ready hide the local content that will be displayed in the clueTip + if (opts.local && opts.localPrefix) {tipAttribute = opts.localPrefix + tipAttribute;} + if (opts.local && opts.hideLocal) { $(tipAttribute + ':first').hide(); } + var tOffset = parseInt(opts.topOffset, 10), lOffset = parseInt(opts.leftOffset, 10); + // vertical measurement variables + var tipHeight, wHeight; + var defHeight = isNaN(parseInt(opts.height, 10)) ? 'auto' : (/\D/g).test(opts.height) ? opts.height : opts.height + 'px'; + var sTop, linkTop, posY, tipY, mouseY, baseline; + // horizontal measurement variables + var tipInnerWidth = isNaN(parseInt(opts.width, 10)) ? 275 : parseInt(opts.width, 10); + var tipWidth = tipInnerWidth + (parseInt($cluetip.css('paddingLeft'),10)||0) + (parseInt($cluetip.css('paddingRight'),10)||0) + dropShadowSteps; + var linkWidth = this.offsetWidth; + var linkLeft, posX, tipX, mouseX, winWidth; + + // parse the title + var tipParts; + var tipTitle = (opts.attribute != 'title') ? $this.attr(opts.titleAttribute) : ''; + if (opts.splitTitle) { + if(tipTitle == undefined) {tipTitle = '';} + tipParts = tipTitle.split(opts.splitTitle); + tipTitle = tipParts.shift(); + } + if (opts.escapeTitle) { + tipTitle = tipTitle.replace(/&/g,'&').replace(/>/g,'>').replace(/ linkLeft && linkLeft > tipWidth) + || linkLeft + linkWidth + tipWidth + lOffset > winWidth + ? linkLeft - tipWidth - lOffset + : linkWidth + linkLeft + lOffset; + if ($this[0].tagName.toLowerCase() == 'area' || opts.positionBy == 'mouse' || linkWidth + tipWidth > winWidth) { // position by mouse + if (mouseX + 20 + tipWidth > winWidth) { + $cluetip.addClass(' cluetip-' + ctClass); + posX = (mouseX - tipWidth - lOffset) >= 0 ? mouseX - tipWidth - lOffset - parseInt($cluetip.css('marginLeft'),10) + parseInt($cluetipInner.css('marginRight'),10) : mouseX - (tipWidth/2); + } else { + posX = mouseX + lOffset; + } + } + var pY = posX < 0 ? event.pageY + tOffset : event.pageY; + $cluetip.css({left: (posX > 0 && opts.positionBy != 'bottomTop') ? posX : (mouseX + (tipWidth/2) > winWidth) ? winWidth/2 - tipWidth/2 : Math.max(mouseX - (tipWidth/2),0)}); + } + wHeight = $(window).height(); + +/*************************************** +* load a string from cluetip method's first argument +***************************************/ + if (js) { + if (typeof js == 'function') { + js = js($this[0]); + } + $cluetipInner.html(js); + cluetipShow(pY); + } +/*************************************** +* load the title attribute only (or user-selected attribute). +* clueTip title is the string before the first delimiter +* subsequent delimiters place clueTip body text on separate lines +***************************************/ + + else if (tipParts) { + var tpl = tipParts.length; + $cluetipInner.empty(); + for (var i=0; i < tpl; i++){ + if (i == 0) { + $cluetipInner.html(tipParts[i]); + } else { + $cluetipInner.append('
' + tipParts[i] + '
'); + } + }; + cluetipShow(pY); + } +/*************************************** +* load external file via ajax +***************************************/ + + else if (!opts.local && tipAttribute.indexOf('#') != 0) { + if (/\.(jpe?g|tiff?|gif|png)$/i.test(tipAttribute)) { + $cluetipInner.html('' + tipTitle + ''); + cluetipShow(pY); + } else if (cluetipContents && opts.ajaxCache) { + $cluetipInner.html(cluetipContents); + cluetipShow(pY); + } else { + var ajaxSettings = opts.ajaxSettings; + ajaxSettings.cache = false; // force requested page not to be cached by browser + ajaxSettings.url = tipAttribute; + ajaxSettings.beforeSend = function() { + $cluetipOuter.children().empty(); + if (opts.waitImage) { + $('#cluetip-waitimage') + .css({top: mouseY+20, left: mouseX+20}) + .show(); + } + }; + ajaxSettings.error = function() { + if (isActive) { + $cluetipInner.html('sorry, the contents could not be loaded'); + } + }; + ajaxSettings.success = function(data) { + cluetipContents = opts.ajaxProcess(data); + if (isActive) { + $cluetipInner.html(cluetipContents); + } + }; + ajaxSettings.complete = function() { + imgCount = $('#cluetip-inner img').length; + if (imgCount) { + $('#cluetip-inner img').load(function() { + imgCount--; + if (imgCount<1) { + $('#cluetip-waitimage').hide(); + if (isActive) cluetipShow(pY); + } + }); + } else { + $('#cluetip-waitimage').hide(); + if (isActive) cluetipShow(pY); + } + }; + $.ajax(ajaxSettings); + } + +/*************************************** +* load an element from the same page +***************************************/ + } else if (opts.local){ + var $localContent = $(tipAttribute + ':eq(' + index + ')').clone(true).show(); + $cluetipInner.html($localContent); + cluetipShow(pY); + } + }; + +// get dimensions and options for cluetip and prepare it to be shown + var cluetipShow = function(bpY) { + $cluetip.addClass('cluetip-' + ctClass); + + if (opts.truncate) { + var $truncloaded = $cluetipInner.text().slice(0,opts.truncate) + '...'; + $cluetipInner.html($truncloaded); + } + function doNothing() {}; //empty function + tipTitle ? $cluetipTitle.show().html(tipTitle) : (opts.showTitle) ? $cluetipTitle.show().html(' ') : $cluetipTitle.hide(); + if (opts.sticky) { + var $closeLink = $(''); + (opts.closePosition == 'bottom') ? $closeLink.appendTo($cluetipInner) : (opts.closePosition == 'title') ? $closeLink.prependTo($cluetipTitle) : $closeLink.prependTo($cluetipInner); + $closeLink.click(function() { + cluetipClose(); + return false; + }); + if (opts.mouseOutClose) { + if ($.fn.hoverIntent && opts.hoverIntent) { + $cluetip.hoverIntent({ + over: doNothing, + timeout: opts.hoverIntent.timeout, + out: function() { $closeLink.trigger('click'); } + }); + } else { + $cluetip.hover(doNothing, + function() {$closeLink.trigger('click'); }); + } + } else { + $cluetip.unbind('mouseout'); + } + } +// now that content is loaded, finish the positioning + var direction = ''; + $cluetipOuter.css({overflow: defHeight == 'auto' ? 'visible' : 'auto', height: defHeight}); + tipHeight = defHeight == 'auto' ? Math.max($cluetip.outerHeight(),$cluetip.height()) : parseInt(defHeight,10); + tipY = posY; + baseline = sTop + wHeight; + if (opts.positionBy == 'fixed') { + tipY = posY - opts.dropShadowSteps + tOffset; + } else if ( (posX < mouseX && Math.max(posX, 0) + tipWidth > mouseX) || opts.positionBy == 'bottomTop') { + if (posY + tipHeight + tOffset > baseline && mouseY - sTop > tipHeight + tOffset) { + tipY = mouseY - tipHeight - tOffset; + direction = 'top'; + } else { + tipY = mouseY + tOffset; + direction = 'bottom'; + } + } else if ( posY + tipHeight + tOffset > baseline ) { + tipY = (tipHeight >= wHeight) ? sTop : baseline - tipHeight - tOffset; + } else if ($this.css('display') == 'block' || $this[0].tagName.toLowerCase() == 'area' || opts.positionBy == "mouse") { + tipY = bpY - tOffset; + } else { + tipY = posY - opts.dropShadowSteps; + } + if (direction == '') { + posX < linkLeft ? direction = 'left' : direction = 'right'; + } + + $cluetip.css({top: tipY + 'px'}).removeClass().addClass('clue-' + direction + '-' + ctClass).addClass(' cluetip-' + ctClass); + if (opts.arrows) { // set up arrow positioning to align with element + var bgY = (posY - tipY - opts.dropShadowSteps); + $cluetipArrows.css({top: (/(left|right)/.test(direction) && posX >=0 && bgY > 0) ? bgY + 'px' : /(left|right)/.test(direction) ? 0 : ''}).show(); + } else { + $cluetipArrows.hide(); + } + +// (first hide, then) ***SHOW THE CLUETIP*** + $dropShadow.hide(); + $cluetip.hide()[opts.fx.open](opts.fx.open != 'show' && opts.fx.openSpeed); + if (opts.dropShadow) $dropShadow.css({height: tipHeight, width: tipInnerWidth}).show(); + if ($.fn.bgiframe) { $cluetip.bgiframe(); } + // delayed close (not fully tested) + if (opts.delayedClose > 0) { + closeOnDelay = setTimeout(cluetipClose, opts.delayedClose); + } + // trigger the optional onShow function + opts.onShow($cluetip, $cluetipInner); + + }; + +/*************************************** + =INACTIVATION +-------------------------------------- */ + var inactivate = function(event) { + isActive = false; + $('#cluetip-waitimage').hide(); + if (!opts.sticky || (/click|toggle/).test(opts.activation) ) { + cluetipClose(); +clearTimeout(closeOnDelay); + }; + if (opts.hoverClass) { + $this.removeClass(opts.hoverClass); + } + }; +// close cluetip and reset some things + var cluetipClose = function() { + $cluetipOuter + .parent().hide().removeClass(); + opts.onHide($cluetip, $cluetipInner); + $this.removeClass('cluetip-clicked'); + if (tipTitle) { + $this.attr(opts.titleAttribute, tipTitle); + } + $this.css('cursor',''); + if (opts.arrows) $cluetipArrows.css({top: ''}); + }; + +/*************************************** + =BIND EVENTS +-------------------------------------- */ + // activate by click + if ( (/click|toggle/).test(opts.activation) ) { + $this.click(function(event) { + if ($cluetip.is(':hidden') || !$this.is('.cluetip-clicked')) { + activate(event); + $('.cluetip-clicked').removeClass('cluetip-clicked'); + $this.addClass('cluetip-clicked'); + } else { + inactivate(event); + } + this.blur(); + return false; + }); + // activate by focus; inactivate by blur + } else if (opts.activation == 'focus') { + $this.focus(function(event) { + activate(event); + }); + $this.blur(function(event) { + inactivate(event); + }); + // activate by hover + // clicking is returned false if cluetip url is same as href url + } else { + $this.click(function() { + if ($this.attr('href') && $this.attr('href') == tipAttribute && !opts.clickThrough) { + return false; + } + }); + //set up mouse tracking + var mouseTracks = function(evt) { + if (opts.tracking == true) { + var trackX = posX - evt.pageX; + var trackY = tipY ? tipY - evt.pageY : posY - evt.pageY; + $this.mousemove(function(evt) { + $cluetip.css({left: evt.pageX + trackX, top: evt.pageY + trackY }); + }); + } + }; + if ($.fn.hoverIntent && opts.hoverIntent) { + $this.mouseover(function() {$this.attr('title',''); }) + .hoverIntent({ + sensitivity: opts.hoverIntent.sensitivity, + interval: opts.hoverIntent.interval, + over: function(event) { + activate(event); + mouseTracks(event); + }, + timeout: opts.hoverIntent.timeout, + out: function(event) {inactivate(event); $this.unbind('mousemove');} + }); + } else { + $this.hover(function(event) { + activate(event); + mouseTracks(event); + }, function(event) { + inactivate(event); + $this.unbind('mousemove'); + }); + } + } + }); + }; + +/* + * options for clueTip + * + * each one can be explicitly overridden by changing its value. + * for example: $.fn.cluetip.defaults.width = 200; + * would change the default width for all clueTips to 200. + * + * each one can also be overridden by passing an options map to the cluetip method. + * for example: $('a.example').cluetip({width: 200}); + * would change the default width to 200 for clueTips invoked by a link with class of "example" + * + */ + + $.fn.cluetip.defaults = { // set up default options + width: 275, // The width of the clueTip + height: 'auto', // The height of the clueTip + cluezIndex: 97, // Sets the z-index style property of the clueTip + positionBy: 'auto', // Sets the type of positioning: 'auto', 'mouse','bottomTop', 'fixed' + topOffset: 15, // Number of px to offset clueTip from top of invoking element + leftOffset: 15, // Number of px to offset clueTip from left of invoking element + local: false, // Whether to use content from the same page for the clueTip's body + localPrefix: null, // string to be prepended to the tip attribute if local is true + hideLocal: true, // If local option is set to true, this determines whether local content + // to be shown in clueTip should be hidden at its original location + attribute: 'rel', // the attribute to be used for fetching the clueTip's body content + titleAttribute: 'title', // the attribute to be used for fetching the clueTip's title + splitTitle: '', // A character used to split the title attribute into the clueTip title and divs + // within the clueTip body. more info below [6] + escapeTitle: false, // whether to html escape the title attribute + showTitle: true, // show title bar of the clueTip, even if title attribute not set + cluetipClass: 'default',// class added to outermost clueTip div in the form of 'cluetip-' + clueTipClass. + hoverClass: '', // class applied to the invoking element onmouseover and removed onmouseout + waitImage: true, // whether to show a "loading" img, which is set in jquery.cluetip.css + cursor: 'help', + arrows: false, // if true, displays arrow on appropriate side of clueTip + dropShadow: true, // set to false if you don't want the drop-shadow effect on the clueTip + dropShadowSteps: 6, // adjusts the size of the drop shadow + sticky: false, // keep visible until manually closed + mouseOutClose: false, // close when clueTip is moused out + activation: 'hover', // set to 'click' to force user to click to show clueTip + // set to 'focus' to show on focus of a form element and hide on blur + clickThrough: false, // if true, and activation is not 'click', then clicking on link will take user to the link's href, + // even if href and tipAttribute are equal + tracking: false, // if true, clueTip will track mouse movement (experimental) + delayedClose: 0, // close clueTip on a timed delay (experimental) + closePosition: 'top', // location of close text for sticky cluetips; can be 'top' or 'bottom' or 'title' + closeText: 'Close', // text (or HTML) to to be clicked to close sticky clueTips + truncate: 0, // number of characters to truncate clueTip's contents. if 0, no truncation occurs + + // effect and speed for opening clueTips + fx: { + open: 'show', // can be 'show' or 'slideDown' or 'fadeIn' + openSpeed: '' + }, + + // settings for when hoverIntent plugin is used + hoverIntent: { + sensitivity: 3, + interval: 50, + timeout: 0 + }, + + // function to run just before clueTip is shown. + onActivate: function(e) {return true;}, + + // function to run just after clueTip is shown. + onShow: function(ct, c){}, + // function to run just after clueTip is hidden. + onHide: function(ct, c){}, + // whether to cache results of ajax request to avoid unnecessary hits to server + ajaxCache: true, + + // process data retrieved via xhr before it's displayed + ajaxProcess: function(data) { + data = data.replace(//g, '').replace(/<(link|title)(.|\s)*?\/(link|title)>/g,''); + return data; + }, + + // can pass in standard $.ajax() parameters, not including error, complete, success, and url + ajaxSettings: { + dataType: 'html' + }, + debug: false + }; + + +/* + * Global defaults for clueTips. Apply to all calls to the clueTip plugin. + * + * @example $.cluetip.setup({ + * insertionType: 'prependTo', + * insertionElement: '#container' + * }); + * + * @property + * @name $.cluetip.setup + * @type Map + * @cat Plugins/tooltip + * @option String insertionType: Default is 'appendTo'. Determines the method to be used for inserting the clueTip into the DOM. Permitted values are 'appendTo', 'prependTo', 'insertBefore', and 'insertAfter' + * @option String insertionElement: Default is 'body'. Determines which element in the DOM the plugin will reference when inserting the clueTip. + * + */ + + var insertionType = 'appendTo', insertionElement = 'body'; + $.cluetip = {}; + $.cluetip.setup = function(options) { + if (options && options.insertionType && (options.insertionType).match(/appendTo|prependTo|insertBefore|insertAfter/)) { + insertionType = options.insertionType; + } + if (options && options.insertionElement) { + insertionElement = options.insertionElement; + } + }; + +})(jQuery);