Mercurial > defr > drupal > scald > dnd
diff js/bt/jquery.bt.js @ 18:0d557e6e73f7
Added beautytips and some additional event handling code to the library.
author | David Eads <eads@chicagotech.org> |
---|---|
date | Fri, 06 Mar 2009 14:11:46 -0600 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/js/bt/jquery.bt.js Fri Mar 06 14:11:46 2009 -0600 @@ -0,0 +1,1043 @@ +/* + * @name BeautyTips + * @desc a tooltips/baloon-help plugin for jQuery + * + * @author Jeff Robbins - Lullabot - http://www.lullabot.com + * @version 0.9.1 (2/15/2009) + * + * @type jQuery + * @cat Plugins/bt + * @requires jQuery v1.2+ (not tested on versions prior to 1.2.6) + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Encourage development. If you use BeautyTips for anything cool + * or on a site that people have heard of, please drop me a note. + * - jeff ^at lullabot > com + * + * No guarantees, warranties, or promises of any kind + * + */ + +/** + * @credit Inspired by Karl Swedberg's ClueTip + * (http://plugins.learningjquery.com/cluetip/), which in turn was inspired + * by Cody Lindley's jTip (http://www.codylindley.com) + * + * @fileoverview + * Beauty Tips is a jQuery tooltips plugin which uses the canvas drawing element + * in the HTML5 spec in order to dynamically draw tooltip "talk bubbles" around + * the descriptive help text associated with an item. This is in many ways + * similar to Google Maps which both provides similar talk-bubbles and uses the + * canvas element to draw them. + * + * The canvas element is supported in modern versions of FireFox, Safari, and + * Opera. However, Internet Explorer needs a separate library called ExplorerCanvas + * included on the page in order to support canvas drawing functions. ExplorerCanvas + * was created by Google for use with their web apps and you can find it here: + * http://excanvas.sourceforge.net/ + * + * Beauty Tips was written to be simple to use and pretty. All of its options + * are documented at the bottom of this file and defaults can be overwritten + * globally for the entire page, or individually on each call. + * + * By default each tooltip will be positioned on the side of the target element + * which has the most free space. This is affected by the scroll position and + * size of the current window, so each Beauty Tip is redrawn each time it is + * displayed. It may appear above an element at the bottom of the page, but when + * the page is scrolled down (and the element is at the top of the page) it will + * then appear below it. Additionally, positions can be forced or a preferred + * order can be defined. See examples below. + * + * To fix z-index problems in IE6, include the bgiframe plugin on your page + * http://plugins.jquery.com/project/bgiframe - BeautyTips will automatically + * recognize it and use it. + * + * BeautyTips also works with the hoverIntent plugin + * http://cherne.net/brian/resources/jquery.hoverIntent.html + * see hoverIntent example below for usage + * + * Usage + * The function can be called in a number of ways. + * $(selector).bt(); + * $(selector).bt('Content text'); + * $(selector).bt('Content text', {option1: value, option2: value}); + * $(selector).bt({option1: value, option2: value}); + * + * For more/better documentation and lots of examples, visit the demo page included with the distribution + * + */ +jQuery.fn.bt = function(content, options) { + + if (typeof content != 'string') { + var contentSelect = true; + options = content; + content = false; + } + else { + var contentSelect = false; + } + + // if hoverIntent is installed, use that as default instead of hover + if (jQuery.fn.hoverIntent && jQuery.bt.defaults.trigger == 'hover') { + jQuery.bt.defaults.trigger = 'hoverIntent'; + } + + return this.each(function(index) { + + var opts = jQuery.extend(false, jQuery.bt.defaults, options); + + // clean up the options + opts.spikeLength = numb(opts.spikeLength); + opts.spikeGirth = numb(opts.spikeGirth); + opts.overlap = numb(opts.overlap); + + var ajaxTimeout = false; + + /** + * This is sort of the "starting spot" for the this.each() + * These are sort of the init functions to handle the call + */ + + if (opts.killTitle) { + $(this).find('[title]').andSelf().each(function() { + if (!$(this).attr('bt-xTitle')) { + $(this).attr('bt-xTitle', $(this).attr('title')).attr('title', ''); + } + }); + } + + if (typeof opts.trigger == 'string') { + opts.trigger = [opts.trigger]; + } + if (opts.trigger[0] == 'hoverIntent') { + var hoverOpts = $.extend(opts.hoverIntentOpts, { + over: function() { + this.btOn(); + }, + out: function() { + this.btOff(); + }}); + $(this).hoverIntent(hoverOpts); + + } + else if (opts.trigger[0] == 'hover') { + $(this).hover( + function() { + this.btOn(); + }, + function() { + this.btOff(); + } + ); + } + else if (opts.trigger[0] == 'now') { + // toggle the on/off right now + // note that 'none' gives more control (see below) + if ($(this).hasClass('bt-active')) { + this.btOff(); + } + else { + this.btOn(); + } + } + else if (opts.trigger[0] == 'none') { + // initialize the tip with no event trigger + // use javascript to turn on/off tip as follows: + // $('#selector').btOn(); + // $('#selector').btOff(); + } + else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) { + $(this) + .bind(opts.trigger[0], function() { + this.btOn(); + }) + .bind(opts.trigger[1], function() { + this.btOff(); + }); + } + else { + // toggle using the same event + $(this).bind(opts.trigger[0], function() { + if ($(this).hasClass('bt-active')) { + this.btOff(); + } + else { + this.btOn(); + } + }); + } + + + /** + * The BIG TURN ON + * Any element that has been initiated + */ + this.btOn = function () { + if (typeof $(this).data('bt-box') == 'object') { + // if there's already a popup, remove it before creating a new one. + this.btOff(); + } + + // trigger preShow function + opts.preShow.apply(this); + + // turn off other tips + $(jQuery.bt.vars.closeWhenOpenStack).btOff(); + + // add the class to the target element (for hilighting, for example) + // bt-active is always applied to all, but activeClass can apply another + $(this).addClass('bt-active ' + opts.activeClass); + + if (contentSelect && opts.ajaxPath == null) { + // bizarre, I know + if (opts.killTitle) { + // if we've killed the title attribute, it's been stored in 'bt-xTitle' so get it.. + $(this).attr('title', $(this).attr('bt-xTitle')); + } + // then evaluate the selector... title is now in place + content = eval(opts.contentSelector); + if (opts.killTitle) { + // now remove the title again, so we don't get double tips + $(this).attr('title', ''); + } + } + + // ---------------------------------------------- + // All the Ajax(ish) stuff is in this next bit... + // ---------------------------------------------- + if (opts.ajaxPath != null && content == false) { + if (typeof opts.ajaxPath == 'object') { + var url = eval(opts.ajaxPath[0]); + url += opts.ajaxPath[1] ? ' ' + opts.ajaxPath[1] : ''; + } + else { + var url = opts.ajaxPath; + } + var off = url.indexOf(" "); + if ( off >= 0 ) { + var selector = url.slice(off, url.length); + url = url.slice(0, off); + } + + // load any data cached for the given ajax path + var cacheData = opts.ajaxCache ? $(document.body).data('btCache-' + url.replace(/\./g, '')) : null; + if (typeof cacheData == 'string') { + content = selector ? jQuery("<div/>").append(cacheData.replace(/<script(.|\s)*?\/script>/g, "")).find(selector) : cacheData; + } + else { + var target = this; + + // set up the options + var ajaxOpts = jQuery.extend(false, + { + type: opts.ajaxType, + data: opts.ajaxData, + cache: opts.ajaxCache, + url: url, + complete: function(XMLHttpRequest, textStatus) { + if (textStatus == 'success' || textStatus == 'notmodified') { + if (opts.ajaxCache) { + $(document.body).data('btCache-' + url.replace(/\./g, ''), XMLHttpRequest.responseText); + } + ajaxTimeout = false; + content = selector ? + // Create a dummy div to hold the results + jQuery("<div/>") + // inject the contents of the document in, removing the scripts + // to avoid any 'Permission Denied' errors in IE + .append(XMLHttpRequest.responseText.replace(/<script(.|\s)*?\/script>/g, "")) + + // Locate the specified elements + .find(selector) : + + // If not, just inject the full result + XMLHttpRequest.responseText; + + } + else { + if (textStatus == 'timeout') { + // if there was a timeout, we don't cache the result + ajaxTimeout = true; + } + content = opts.ajaxError.replace(/%error/g, XMLHttpRequest.statusText); + } + // if the user rolls out of the target element before the ajax request comes back, don't show it + if ($(target).hasClass('bt-active')) { + target.btOn(); + } + } + }, opts.ajaxData); + // do the ajax request + $.ajax(ajaxOpts); + // load the throbber while the magic happens + content = opts.ajaxLoading; + } + } + // </ ajax stuff > + + + // now we start actually figuring out where to place the tip + + var offsetParent = $(this).offsetParent(); + var pos = $(this).btPosition(); + // top, left, width, and height values of the target element + var top = numb(pos.top) + numb($(this).css('margin-top')); // IE can return 'auto' for margins + var left = numb(pos.left) + numb($(this).css('margin-left')); + var width = $(this).outerWidth(); + var height = $(this).outerHeight(); + + if (typeof content == 'object') { + // if content is a DOM object (as opposed to text) + // use a clone, rather than removing the original element + // and ensure that it's visible + content = $(content).clone(true).show(); + + } + + // create the tip content div, populate it, and style it + var $text = $('<div class="bt-content"></div>').append(content).css({padding: opts.padding, position: 'absolute', width: opts.width, zIndex: opts.textzIndex}).css(opts.cssStyles); + // create the wrapping box which contains text and canvas + // put the content in it, style it, and append it to the same offset parent as the target + var $box = $('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({position: 'absolute', width: opts.width, zIndex: opts.wrapperzIndex}).appendTo(offsetParent); + + // use bgiframe to get around z-index problems in IE6 + // http://plugins.jquery.com/project/bgiframe + if ($.fn.bgiframe) { + $text.bgiframe(); + $box.bgiframe(); + } + + $(this).data('bt-box', $box); + + // see if the text box will fit in the various positions + var scrollTop = numb($(document).scrollTop()); + var scrollLeft = numb($(document).scrollLeft()); + var docWidth = numb($(window).width()); + var docHeight = numb($(window).height()); + var winRight = scrollLeft + docWidth; + var winBottom = scrollTop + docHeight; + var space = new Object(); + space.top = $(this).offset().top - scrollTop; + space.bottom = docHeight - (($(this).offset().top + height) - scrollTop); + space.left = $(this).offset().left - scrollLeft; + space.right = docWidth - (($(this).offset().left + width) - scrollLeft); + var textOutHeight = numb($text.outerHeight()); + var textOutWidth = numb($text.outerWidth()); + if (opts.positions.constructor == String) { + opts.positions = opts.positions.replace(/ /, '').split(','); + } + if (opts.positions[0] == 'most') { + // figure out which is the largest + var position = 'top'; // prime the pump + for (var pig in space) { // pigs in space! + position = space[pig] > space[position] ? pig : position; + } + } + else { + for (var x in opts.positions) { + var position = opts.positions[x]; + if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) { + break; + } + else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) { + break; + } + } + } + + // horizontal (left) offset for the box + var horiz = left + ((width - textOutWidth) * .5); + // vertical (top) offset for the box + var vert = top + ((height - textOutHeight) * .5); + var animDist = opts.animate ? numb(opts.distance) : 0; + var points = new Array(); + var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter, spikePoint; + + // Yes, yes, this next bit really could use to be condensed + // each switch case is basically doing the same thing in slightly different ways + switch(position) { + case 'top': + // spike on bottom + $text.css('margin-bottom', opts.spikeLength + 'px'); + $box.css({top: (top - $text.outerHeight(true) - animDist) + opts.overlap, left: horiz}); + // move text left/right if extends out of window + textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true)); + var xShift = 0; + if (textRightSpace < 0) { + // shift it left + $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); + xShift -= textRightSpace; + } + // we test left space second to ensure that left of box is visible + textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); + if (textLeftSpace < 0) { + // shift it right + $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); + xShift += textLeftSpace; + } + textTop = $text.btPosition().top + numb($text.css('margin-top')); + textLeft = $text.btPosition().left + numb($text.css('margin-left')); + textRight = textLeft + $text.outerWidth(); + textBottom = textTop + $text.outerHeight(); + textCenter = {x: textLeft + ($text.outerWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; + // points[points.length] = {x: x, y: y}; + points[points.length] = spikePoint = {y: textBottom + opts.spikeLength, x: ((textRight-textLeft) * .5) + xShift, type: 'spike'}; + crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textBottom); + // make sure that the crossPoint is not outside of text box boundaries + crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; + crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.CornerRadius : crossPoint.x; + points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textBottom, type: 'join'}; + points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner + points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner + points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner + points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner + points[points.length] = {x: crossPoint.x + (opts.spikeGirth/2), y: textBottom, type: 'join'}; + points[points.length] = spikePoint; + break; + case 'left': + // spike on right + $text.css('margin-right', opts.spikeLength + 'px'); + $box.css({top: vert + 'px', left: ((left - $text.outerWidth(true) - animDist) + opts.overlap) + 'px'}); + // move text up/down if extends out of window + textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); + var yShift = 0; + if (textBottomSpace < 0) { + // shift it up + $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); + yShift -= textBottomSpace; + } + // we ensure top space second to ensure that top of box is visible + textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); + if (textTopSpace < 0) { + // shift it down + $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); + yShift += textTopSpace; + } + textTop = $text.btPosition().top + numb($text.css('margin-top')); + textLeft = $text.btPosition().left + numb($text.css('margin-left')); + textRight = textLeft + $text.outerWidth(); + textBottom = textTop + $text.outerHeight(); + textCenter = {x: textLeft + ($text.outerWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; + points[points.length] = spikePoint = {x: textRight + opts.spikeLength, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'}; + crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textRight); + // make sure that the crossPoint is not outside of text box boundaries + crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; + crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; + points[points.length] = {x: textRight, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; + points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner + points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner + points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner + points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner + points[points.length] = {x: textRight, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; + points[points.length] = spikePoint; + break; + case 'bottom': + // spike on top + $text.css('margin-top', opts.spikeLength + 'px'); + $box.css({top: (top + height + animDist) - opts.overlap, left: horiz}); + // move text up/down if extends out of window + textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true)); + var xShift = 0; + if (textRightSpace < 0) { + // shift it left + $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); + xShift -= textRightSpace; + } + // we ensure left space second to ensure that left of box is visible + textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); + if (textLeftSpace < 0) { + // shift it right + $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); + xShift += textLeftSpace; + } + textTop = $text.btPosition().top + numb($text.css('margin-top')); + textLeft = $text.btPosition().left + numb($text.css('margin-left')); + textRight = textLeft + $text.outerWidth(); + textBottom = textTop + $text.outerHeight(); + textCenter = {x: textLeft + ($text.outerWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; + points[points.length] = spikePoint = {x: ((textRight-textLeft) * .5) + xShift, y: 0, type: 'spike'}; + crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textTop); + // make sure that the crossPoint is not outside of text box boundaries + crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; + crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.x; + points[points.length] = {x: crossPoint.x + opts.spikeGirth/2, y: textTop, type: 'join'}; + points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner + points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner + points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner + points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner + points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textTop, type: 'join'}; + points[points.length] = spikePoint; + break; + case 'right': + // spike on left + $text.css('margin-left', (opts.spikeLength + 'px')); + $box.css({top: vert + 'px', left: ((left + width + animDist) - opts.overlap) + 'px'}); + // move text up/down if extends out of window + textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); + var yShift = 0; + if (textBottomSpace < 0) { + // shift it up + $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); + yShift -= textBottomSpace; + } + // we ensure top space second to ensure that top of box is visible + textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); + if (textTopSpace < 0) { + // shift it down + $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); + yShift += textTopSpace; + } + textTop = $text.btPosition().top + numb($text.css('margin-top')); + textLeft = $text.btPosition().left + numb($text.css('margin-left')); + textRight = textLeft + $text.outerWidth(); + textBottom = textTop + $text.outerHeight(); + textCenter = {x: textLeft + ($text.outerWidth()*opts.centerPointX), y: textTop + ($text.outerHeight()*opts.centerPointY)}; + points[points.length] = spikePoint = {x: 0, y: ((textBottom-textTop) * .5) + yShift, type: 'spike'}; + crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textLeft); + // make sure that the crossPoint is not outside of text box boundaries + crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; + crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; + points[points.length] = {x: textLeft, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; + points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner + points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner + points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner + points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner + points[points.length] = {x: textLeft, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; + points[points.length] = spikePoint; + break; + } // </ switch > + + var canvas = $('<canvas width="'+ (numb($text.outerWidth(true)) + opts.strokeWidth*2) +'" height="'+ (numb($text.outerHeight(true)) + opts.strokeWidth*2) +'"></canvas>').appendTo($box).css({position: 'absolute', top: $text.btPosition().top, left: $text.btPosition().left, zIndex: opts.boxzIndex}).get(0); + + // if excanvas is set up, we need to initialize the new canvas element + if (typeof G_vmlCanvasManager != 'undefined') { + canvas = G_vmlCanvasManager.initElement(canvas); + } + + if (opts.cornerRadius > 0) { + // round the corners! + var newPoints = new Array(); + var newPoint; + for (var i=0; i<points.length; i++) { + if (points[i].type == 'corner') { + // create two new arc points + // find point between this and previous (using modulo in case of ending) + newPoint = betweenPoint(points[i], points[(i-1)%points.length], opts.cornerRadius); + newPoint.type = 'arcStart'; + newPoints[newPoints.length] = newPoint; + // the original corner point + newPoints[newPoints.length] = points[i]; + // find point between this and next + newPoint = betweenPoint(points[i], points[(i+1)%points.length], opts.cornerRadius); + newPoint.type = 'arcEnd'; + newPoints[newPoints.length] = newPoint; + } + else { + newPoints[newPoints.length] = points[i]; + } + } + // overwrite points with new version + points = newPoints; + + } + + var ctx = canvas.getContext("2d"); + drawIt.apply(ctx, [points], opts.strokeWidth); + ctx.fillStyle = opts.fill; + if (opts.shadow) { + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 5; + ctx.shadowColor = opts.shadowColor; + } + ctx.closePath(); + ctx.fill(); + if (opts.strokeWidth > 0) { + ctx.shadowColor = 'rgba(0, 0, 0, 0)'; + ctx.lineWidth = opts.strokeWidth; + ctx.strokeStyle = opts.strokeStyle; + ctx.beginPath(); + drawIt.apply(ctx, [points], opts.strokeWidth); + ctx.closePath(); + ctx.stroke(); + } + + if (opts.animate) { + $box.css({opacity: 0.1}); + } + + $box.css({visibility: 'visible'}); + + if (opts.overlay) { + // EXPERIMENTAL!!!! + var overlay = $('<div class="bt-overlay"></div>').css({ + position: 'absolute', + backgroundColor: 'blue', + top: top, + left: left, + width: width, + height: height, + opacity: '.2' + }).appendTo(offsetParent); + $(this).data('overlay', overlay); + } + + var animParams = {opacity: 1}; + if (opts.animate) { + switch (position) { + case 'top': + animParams.top = $box.btPosition().top + opts.distance; + break; + case 'left': + animParams.left = $box.btPosition().left + opts.distance; + break; + case 'bottom': + animParams.top = $box.btPosition().top - opts.distance; + break; + case 'right': + animParams.left = $box.btPosition().left - opts.distance; + break; + } + $box.animate(animParams, {duration: opts.speed, easing: opts.easing}); + } + + if ((opts.ajaxPath != null && opts.ajaxCache == false) || ajaxTimeout) { + // if ajaxCache is not enabled or if there was a server timeout, + // remove the content variable so it will be loaded again from server + content = false; + } + + // stick this element into the clickAnywhereToClose stack + if (opts.clickAnywhereToClose) { + jQuery.bt.vars.clickAnywhereStack.push(this); + $(document).click(jQuery.bt.docClick); + } + + // stick this element into the closeWhenOthersOpen stack + if (opts.closeWhenOthersOpen) { + jQuery.bt.vars.closeWhenOpenStack.push(this); + } + + // trigger postShow function + opts.postShow.apply(this); + + + }; // </ turnOn() > + + this.btOff = function() { + + // trigger preHide function + opts.preHide.apply(this); + + var box = $(this).data('bt-box'); + var overlay = $(this).data('bt-overlay'); + if (typeof box == 'object') { + $(box).remove(); + $(this).removeData('bt-box'); + } + if (typeof overlay == 'object') { + $(overlay).remove(); + $(this).removeData('bt-overlay'); + } + + // remove this from the stacks + jQuery.bt.vars.clickAnywhereStack = arrayRemove(jQuery.bt.vars.clickAnywhereStack, this); + jQuery.bt.vars.closeWhenOpenStack = arrayRemove(jQuery.bt.vars.closeWhenOpenStack, this); + + // trigger postHide function + opts.postHide.apply(this); + + // remove the 'bt-active' and activeClass classes from target + $(this).removeClass('bt-active ' + opts.activeClass); + + }; // </ turnOff() > + + var refresh = this.btRefresh = function() { + this.btOff(); + this.btOn(); + }; + + + }); // </ this.each() > + + + function drawIt(points, strokeWidth) { + this.moveTo(points[0].x, points[0].y); + for (i=1;i<points.length;i++) { + if (points[i-1].type == 'arcStart') { + // if we're creating a rounded corner + //ctx.arc(round5(points[i].x), round5(points[i].y), points[i].startAngle, points[i].endAngle, opts.cornerRadius, false); + this.quadraticCurveTo(round5(points[i].x, strokeWidth), round5(points[i].y, strokeWidth), round5(points[(i+1)%points.length].x, strokeWidth), round5(points[(i+1)%points.length].y, strokeWidth)); + i++; + //ctx.moveTo(round5(points[i].x), round5(points[i].y)); + } + else { + this.lineTo(round5(points[i].x, strokeWidth), round5(points[i].y, strokeWidth)); + } + } + }; // </ drawIt() > + + /** + * For odd stroke widths, round to the nearest .5 pixel to avoid antialiasing + * http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors + */ + function round5(num, strokeWidth) { + var ret; + strokeWidth = numb(strokeWidth); + if (strokeWidth%2) { + ret = num; + } + else { + ret = Math.round(num - .5) + .5; + } + return ret; + }; // </ round5() > + + /** + * Ensure that a number is a number... or zero + */ + function numb(num) { + return parseInt(num) || 0; + }; // </ numb() > + + /** + * Remove an element from an array + */ + function arrayRemove(arr, elem) { + var x, newArr = new Array(); + for (x in arr) { + if (arr[x] != elem) { + newArr.push(arr[x]); + } + } + return newArr; + }; // </ arrayRemove() > + + /** + * Given two points, find a point which is dist pixels from point1 on a line to point2 + */ + function betweenPoint(point1, point2, dist) { + // figure out if we're horizontal or vertical + var y, x; + if (point1.x == point2.x) { + // vertical + y = point1.y < point2.y ? point1.y + dist : point1.y - dist; + return {x: point1.x, y: y}; + } + else if (point1.y == point2.y) { + // horizontal + x = point1.x < point2.x ? point1.x + dist : point1.x - dist; + return {x:x, y: point1.y}; + } + }; // </ betweenPoint() > + + function centerPoint(arcStart, corner, arcEnd) { + var x = corner.x == arcStart.x ? arcEnd.x : arcStart.x; + var y = corner.y == arcStart.y ? arcEnd.y : arcStart.y; + var startAngle, endAngle; + if (arcStart.x < arcEnd.x) { + if (arcStart.y > arcEnd.y) { + // arc is on upper left + startAngle = (Math.PI/180)*180; + endAngle = (Math.PI/180)*90; + } + else { + // arc is on upper right + startAngle = (Math.PI/180)*90; + endAngle = 0; + } + } + else { + if (arcStart.y > arcEnd.y) { + // arc is on lower left + startAngle = (Math.PI/180)*270; + endAngle = (Math.PI/180)*180; + } + else { + // arc is on lower right + startAngle = 0; + endAngle = (Math.PI/180)*270; + } + } + return {x: x, y: y, type: 'center', startAngle: startAngle, endAngle: endAngle}; + }; // </ centerPoint() > + + /** + * Find the intersection point of two lines, each defined by two points + * arguments are x1, y1 and x2, y2 for r1 (line 1) and r2 (line 2) + * It's like an algebra party!!! + */ + function findIntersect(r1x1, r1y1, r1x2, r1y2, r2x1, r2y1, r2x2, r2y2) { + + if (r2x1 == r2x2) { + return findIntersectY(r1x1, r1y1, r1x2, r1y2, r2x1); + } + if (r2y1 == r2y2) { + return findIntersectX(r1x1, r1y1, r1x2, r1y2, r2y1); + } + + // m = (y1 - y2) / (x1 - x2) // <-- how to find the slope + // y = mx + b // the 'classic' linear equation + // b = y - mx // how to find b (the y-intersect) + // x = (y - b)/m // how to find x + var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); + var r1b = r1y1 - (r1m * r1x1); + var r2m = (r2y1 - r2y2) / (r2x1 - r2x2); + var r2b = r2y1 - (r2m * r2x1); + + var x = (r2b - r1b) / (r1m - r2m); + var y = r1m * x + r1b; + + return {x: x, y: y}; + }; // </ findIntersect() > + + /** + * Find the y intersection point of a line and given x vertical + */ + function findIntersectY(r1x1, r1y1, r1x2, r1y2, x) { + if (r1y1 == r1y2) { + return {x: x, y: r1y1}; + } + var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); + var r1b = r1y1 - (r1m * r1x1); + + var y = r1m * x + r1b; + + return {x: x, y: y}; + }; // </ findIntersectY() > + + /** + * Find the x intersection point of a line and given y horizontal + */ + function findIntersectX(r1x1, r1y1, r1x2, r1y2, y) { + if (r1x1 == r1x2) { + return {x: r1x1, y: y}; + } + var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); + var r1b = r1y1 - (r1m * r1x1); + + // y = mx + b // your old friend, linear equation + // x = (y - b)/m // linear equation solved for x + var x = (y - r1b) / r1m; + + return {x: x, y: y}; + + }; // </ findIntersectX() > + +}; // </ jQuery.fn.bt() > + +/** + * jQuery's compat.js (used in Drupal's jQuery upgrade module, overrides the $().position() function + * this is a copy of that function to allow the plugin to work when compat.js is present + * once compat.js is fixed to not override existing functions, this function can be removed + * and .btPosion() can be replaced with .position() above... + */ +jQuery.fn.btPosition = function() { + + function num(elem, prop) { + return elem[0] && parseInt( jQuery.curCSS(elem[0], prop, true), 10 ) || 0; + }; + + var left = 0, top = 0, results; + + if ( this[0] ) { + // Get *real* offsetParent + var offsetParent = this.offsetParent(), + + // Get correct offsets + offset = this.offset(), + parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset(); + + // Subtract element margins + // note: when an element has margin: auto the offsetLeft and marginLeft + // are the same in Safari causing offset.left to incorrectly be 0 + offset.top -= num( this, 'marginTop' ); + offset.left -= num( this, 'marginLeft' ); + + // Add offsetParent borders + parentOffset.top += num( offsetParent, 'borderTopWidth' ); + parentOffset.left += num( offsetParent, 'borderLeftWidth' ); + + // Subtract the two offsets + results = { + top: offset.top - parentOffset.top, + left: offset.left - parentOffset.left + }; + } + + return results; +}; // </ jQuery.fn.btPosition() > + + +/** + * A convenience function to run btOn() (if available) + * for each selected item + */ +jQuery.fn.btOn = function() { + return this.each(function(index){ + if ($.isFunction(this.btOn)) { + this.btOn(); + } + }); +}; // </ $().btOn() > + +/** + * + * A convenience function to run btOff() (if available) + * for each selected item + */ +jQuery.fn.btOff = function() { + return this.each(function(index){ + if ($.isFunction(this.btOff)) { + this.btOff(); + } + }); +}; // </ $().btOff() > + +jQuery.bt = {}; +jQuery.bt.vars = {clickAnywhereStack: [], closeWhenOpenStack: []}; + +/** + * This function gets bound to the document's click event + * It turns off all of the tips in the click-anywhere-to-close stack + */ +jQuery.bt.docClick = function(e) { + if (!e) { + var e = window.event; + }; + if (!$(e.target).parents().andSelf().filter('.bt-wrapper, .bt-active').length) { + // if clicked element isn't inside tip, close tips in stack + $(jQuery.bt.vars.clickAnywhereStack).btOff(); + $(document).unbind('click', jQuery.bt.docClick); + } +}; // </ docClick() > + +/** + * Defaults for the beauty tips + * + * Note this is a variable definition and not a function. So defaults can be + * written for an entire page by simply redefining attributes like so: + * + * jQuery.bt.defaults.width = 400; + * + * This would make all Beauty Tips boxes 400px wide. + * + * Each of these options may also be overridden during + * + * Can be overriden globally or at time of call. + * + */ +jQuery.bt.defaults = { + trigger: 'hover', // trigger to show/hide tip + // use [on, off] to define separate on/off triggers + // also use space character to allow multiple to trigger + // examples: + // ['focus', 'blur'] // focus displays, blur hides + // 'dblclick' // dblclick toggles on/off + // ['focus mouseover', 'blur mouseout'] // multiple triggers + // 'now' // shows/hides tip without event + // 'none' // use $('#selector').btOn(); and ...btOff(); + // 'hoverIntent' // hover using hoverIntent plugin (settings below) + // note: + // hoverIntent becomes default if available + + clickAnywhereToClose: true, // clicking anywhere outside of the tip will close it + closeWhenOthersOpen: false, // tip will be closed before another opens - stop >= 2 tips being on + + width: '200px', // width of tooltip box + // when combined with cssStyles: {width: 'auto'}, this becomes a max-width for the text + padding: '10px', // padding for content (get more fine grained with cssStyles) + spikeGirth: 10, // width of spike + spikeLength: 15, // length of spike + overlap: 0, // spike overlap (px) onto target (can cause problems with 'hover' trigger) + overlay: false, // display overlay on target (use CSS to style) -- BUGGY! + killTitle: true, // kill title tags to avoid double tooltips + + textzIndex: 9999, // z-index for the text + boxzIndex: 9998, // z-index for the "talk" box (should always be less than textzIndex) + wrapperzIndex: 9997, + positions: ['most'], // preference of positions for tip (will use first with available space) + // possible values 'top', 'bottom', 'left', 'right' as an array in order of + // preference. Last value will be used if others don't have enough space. + // or use 'most' to use the area with the most space + fill: "rgb(255, 255, 102)", // fill color for the tooltip box + + windowMargin: 10, // space (px) to leave between text box and browser edge + + strokeWidth: 1, // width of stroke around box, **set to 0 for no stroke** + strokeStyle: "#000", // color/alpha of stroke + + cornerRadius: 5, // radius of corners (px), set to 0 for square corners + + // following values are on a scale of 0 to 1 with .5 being centered + + centerPointX: .5, // the spike extends from center of the target edge to this point + centerPointY: .5, // defined by percentage horizontal (x) and vertical (y) + + shadow: false, // use drop shadow? (only displays in Safari and FF 3.1) - experimental + shadowOffsetX: 2, // shadow offset x (px) + shadowOffsetY: 2, // shadow offset y (px) + shadowBlur: 3, // shadow blur (px) + shadowColor: "#000", // shadow color/alpha + + animate: false, // animate show/hide of box - EXPERIMENTAL (buggy in IE) + distance: 15, // distance of animation movement (px) + easing: 'swing', // animation easing + speed: 200, // speed (ms) of animation + + cssClass: '', // CSS class to add to the box wrapper div (of the TIP) + cssStyles: {}, // styles to add the text box + // example: {fontFamily: 'Georgia, Times, serif', fontWeight: 'bold'} + + activeClass: 'bt-active', // class added to TARGET element when its BeautyTip is active + + contentSelector: "$(this).attr('title')", // if there is no content argument, use this selector to retrieve the title + + ajaxPath: null, // if using ajax request for content, this contains url and (opt) selector + // this will override content and contentSelector + // examples (see jQuery load() function): + // '/demo.html' + // '/help/ajax/snip' + // '/help/existing/full div#content' + + // ajaxPath can also be defined as an array + // in which case, the first value will be parsed as a jQuery selector + // the result of which will be used as the ajaxPath + // the second (optional) value is the content selector as above + // examples: + // ["$(this).attr('href')", 'div#content'] + // ["$(this).parents('.wrapper').find('.title').attr('href')"] + // ["$('#some-element').val()"] + + ajaxError: '<strong>ERROR:</strong> <em>%error</em>', + // error text, use "%error" to insert error from server + ajaxLoading: '<blink>Loading...</blink>', // yes folks, it's the blink tag! + ajaxData: {}, // key/value pairs + ajaxType: 'GET', // 'GET' or 'POST' + ajaxCache: true, // cache ajax results and do not send request to same url multiple times + ajaxOpts: {}, // any other ajax options - timeout, passwords, processing functions, etc... + // see http://docs.jquery.com/Ajax/jQuery.ajax#options + + preShow: function(){return;}, // function to run before popup is built and displayed + postShow: function(){return;}, // function to run after popup is built and displayed + preHide: function(){return;}, // function to run before popup is removed + postHide: function(){return;}, // function to run after popup is removed + + hoverIntentOpts: { // options for hoverIntent (if installed) + interval: 300, // http://cherne.net/brian/resources/jquery.hoverIntent.html + timeout: 500 + } + +}; // </ jQuery.bt.defaults > + + +// @todo +// use larger canvas (extend to edge of page when windowMargin is active) +// add options to shift position of tip vert/horiz and position of spike tip +// create drawn (canvas) shadows +// use overlay to allow overlap with hover +// experiment with making tooltip a subelement of the target +// rework animation system \ No newline at end of file