|
1 /* |
|
2 * jQuery Beauty Tips plugin |
|
3 * Version 0.7 (10/20/2008) |
|
4 * @requires jQuery v1.2+ (not fully tested on versions prior to 1.2.6) |
|
5 * |
|
6 * Dual licensed under the MIT and GPL licenses: |
|
7 * http://www.opensource.org/licenses/mit-license.php |
|
8 * http://www.gnu.org/licenses/gpl.html |
|
9 * |
|
10 * No guarantees, warranties, or promises of any kind |
|
11 * |
|
12 */ |
|
13 |
|
14 /** |
|
15 * @name Beauty Tips |
|
16 * @type jQuery |
|
17 * @cat Plugins/bt |
|
18 * @return jQuery |
|
19 * @author Jeff Robbins - Lullabot - http://www.lullabot.com |
|
20 * |
|
21 * @credit Inspired by Karl Swedberg's ClueTip |
|
22 * (http://plugins.learningjquery.com/cluetip/), which in turn was inspired |
|
23 * by Cody Lindley's jTip (http://www.codylindley.com) |
|
24 * |
|
25 * @fileoverview |
|
26 * Beauty Tips is a jQuery tooltips plugin which uses the canvas drawing element |
|
27 * in the HTML5 spec in order to dynamically draw tooltip "talk bubbles" around |
|
28 * the descriptive help text associated with an item. This is in many ways |
|
29 * similar to Google Maps which both provides similar talk-bubbles and uses the |
|
30 * canvas element to draw them. |
|
31 * |
|
32 * The canvas element is supported in modern versions of FireFox, Safari, and |
|
33 * Opera. However, Internet Explorer needs a separate library called ExplorerCanvas |
|
34 * included on the page in order to support canvas drawing functions. ExplorerCanvas |
|
35 * was created by Google for use with their web apps and you can find it here: |
|
36 * http://excanvas.sourceforge.net/ |
|
37 * |
|
38 * Beauty Tips was written to be simple to use and pretty. All of its options |
|
39 * are documented at the bottom of this file and defaults can be overwritten |
|
40 * globally for the entire page, or individually on each call. |
|
41 * |
|
42 * By default each tooltip will be positioned on the side of the target element |
|
43 * which has the most free space. This is affected by the scroll position and |
|
44 * size of the current window, so each Beauty Tip is redrawn each time it is |
|
45 * displayed. It may appear above an element at the bottom of the page, but when |
|
46 * the page is scrolled down (and the element is at the top of the page) it will |
|
47 * then appear below it. Additionally, positions can be forced or a preferred |
|
48 * order can be defined. See examples below. |
|
49 * |
|
50 * Usage |
|
51 * The function can be called in a number of ways. |
|
52 * $(selector).bt(); |
|
53 * $(selector).bt('Content text'); |
|
54 * $(selector).bt('Content text', {option1: value, option2: value}); |
|
55 * $(selector).bt({option1: value, option2: value}); |
|
56 * |
|
57 * Some examples: |
|
58 * |
|
59 * @example |
|
60 * $('[title]').bt(); |
|
61 * This is probably the simplest example. It will go through the page finding |
|
62 * every element which has a title attribute and give it a Beauty Tips popup |
|
63 * which gets fired on hover. |
|
64 * |
|
65 * @example |
|
66 * $('h2').bt('I am an H2 element!', {trigger: 'click', positions: 'top'}); |
|
67 * When any H2 element on the page is clicked on, a tip will appear above it. |
|
68 * |
|
69 * @example |
|
70 * $('a[href]').bt({ |
|
71 * titleSelector: "attr('href')", |
|
72 * fill: 'red', |
|
73 * cssStyles: {color: 'white', fontWeight: 'bold', width: 'auto'}, |
|
74 * width: 400, |
|
75 * padding: 10, |
|
76 * cornerRadius: 10, |
|
77 * animate: true, |
|
78 * spikeLength: 15, |
|
79 * spikeGirth: 5, |
|
80 * positions: ['left', 'right', 'bottom'], |
|
81 * }); |
|
82 * This will find all <a> tags and display a red baloon with bold white text |
|
83 * containing the href link. The box will be a variable width up to 400px with |
|
84 * rounded corners and will fade in and animate position toward the target |
|
85 * object when appearing. The script will try to position the box to the left, |
|
86 * then to the right, and finally it will place it on the bottom if it does not |
|
87 * fit elsewhere. |
|
88 * |
|
89 * @example |
|
90 * $('#my-table td[title]').bt({ |
|
91 * preShow: function() { |
|
92 * $(this).data('origBG', $(this).css('background-color')); |
|
93 * $(this).css('background-color', 'yellow'); |
|
94 * }, |
|
95 * postHide: function() { |
|
96 * $(this).css('background-color', $(this).data('origBG')); |
|
97 * } |
|
98 * }); |
|
99 * Find every table cell within #mytable with a title attribute. Hilight the cell |
|
100 * yellow before displaying the BeautyTip. Restore it to its original background |
|
101 * when hiding/removing the BeautyTip. |
|
102 * |
|
103 * @example |
|
104 * $().bt.defaults.fill = 'rgba(102, 102, 255. .8)'; |
|
105 * $(selector).bt(); |
|
106 * All bubbles will be filled with a semi-transparent light-blue background |
|
107 * unless otherwise specified. |
|
108 * |
|
109 */ |
|
110 jQuery.fn.bt = function(content, options) { |
|
111 |
|
112 if (typeof content != 'string') { |
|
113 var contentSelect = true; |
|
114 options = content; |
|
115 content = false; |
|
116 } |
|
117 else { |
|
118 var contentSelect = false; |
|
119 } |
|
120 |
|
121 return this.each(function(index) { |
|
122 |
|
123 var opts = jQuery.extend(false, jQuery.fn.bt.defaults, options); |
|
124 |
|
125 // clean up the options |
|
126 opts.spikeLength = numb(opts.spikeLength); |
|
127 opts.spikeGirth = numb(opts.spikeGirth); |
|
128 opts.overlap = numb(opts.overlap); |
|
129 |
|
130 var turnOn = function () { |
|
131 |
|
132 if (typeof $(this).data('bt-box') == 'object') { |
|
133 // if there's already a popup, remove it before creating a new one. |
|
134 turnOff.apply(this); |
|
135 } |
|
136 |
|
137 // trigger preShow function |
|
138 opts.preShow.apply(this); |
|
139 |
|
140 if (contentSelect) { |
|
141 // bizarre, I know |
|
142 if (opts.killTitle) { |
|
143 // if we've killed the title attribute, it's been stored in 'bt-xTitle' so get it.. |
|
144 $(this).attr('title', $(this).attr('bt-xTitle')); |
|
145 } |
|
146 // then evaluate the selector... title is now in place |
|
147 content = eval('$(this).' + opts.titleSelector); |
|
148 if (opts.killTitle) { |
|
149 // now remove the title again, so we don't get double tips |
|
150 $(this).removeAttr('title'); |
|
151 } |
|
152 } |
|
153 |
|
154 var offsetParent = $(this).offsetParent(); |
|
155 var pos = $(this).btPosition(); |
|
156 var top = numb(pos.top) + numb($(this).css('margin-top')); // IE can return 'auto' for margins |
|
157 var left = numb(pos.left) + numb($(this).css('margin-left')); |
|
158 var width = $(this).outerWidth(); |
|
159 var height = $(this).outerHeight(); |
|
160 |
|
161 // get the dimensions of the text box |
|
162 var $text = $('<div class="bt-content"></div>').append(content).css({padding: opts.padding + 'px', position: 'absolute', width: opts.width + 'px', zIndex: opts.textzIndex}).css(opts.cssStyles); |
|
163 var $box = $('<div class="bt-wrapper"></div>').append($text).addClass(opts.cssClass).css({position: 'absolute', width: opts.width + 'px'}).appendTo(offsetParent); |
|
164 |
|
165 $(this).data('bt-box', $box); |
|
166 |
|
167 // see if the text box will fit in the various positions |
|
168 var scrollTop = numb($(document).scrollTop()); |
|
169 var scrollLeft = numb($(document).scrollLeft()); |
|
170 var docWidth = numb($(window).width()); |
|
171 var docHeight = numb($(window).height()); |
|
172 var winRight = scrollLeft + docWidth; |
|
173 var winBottom = scrollTop + docHeight; |
|
174 var space = new Object(); |
|
175 space.top = $(this).offset().top - scrollTop; |
|
176 space.bottom = docHeight - (($(this).offset().top + height) - scrollTop); |
|
177 space.left = $(this).offset().left - scrollLeft; |
|
178 space.right = docWidth - (($(this).offset().left + width) - scrollLeft); |
|
179 var textOutHeight = numb($text.outerHeight()); |
|
180 var textOutWidth = numb($text.outerWidth()); |
|
181 if (opts.positions.constructor == String) { |
|
182 opts.positions = opts.positions.replace(/ /, '').split(','); |
|
183 } |
|
184 if (opts.positions[0] == 'most') { |
|
185 // figure out which is the largest |
|
186 var position = 'top'; // prime the pump |
|
187 for (var pig in space) { // pigs in space! |
|
188 position = space[pig] > space[position] ? pig : position; |
|
189 } |
|
190 } |
|
191 else { |
|
192 for (var x in opts.positions) { |
|
193 var position = opts.positions[x]; |
|
194 if ((position == 'left' || position == 'right') && space[position] > textOutWidth + opts.spikeLength) { |
|
195 break; |
|
196 } |
|
197 else if ((position == 'top' || position == 'bottom') && space[position] > textOutHeight + opts.spikeLength) { |
|
198 break; |
|
199 } |
|
200 } |
|
201 } |
|
202 |
|
203 var horiz = left + ((width - textOutWidth)/2); |
|
204 var vert = top + ((height - textOutHeight)/2); |
|
205 var animDist = opts.animate ? numb(opts.distance) : 0; |
|
206 var points = new Array(); |
|
207 var textTop, textLeft, textRight, textBottom, textTopSpace, textBottomSpace, textLeftSpace, textRightSpace, crossPoint, textCenter; |
|
208 |
|
209 // Yes, yes, this next bit really could use to be condensed |
|
210 // each switch case is basically doing the same thing in slightly different ways |
|
211 switch(position) { |
|
212 case 'top': |
|
213 // spike on bottom |
|
214 $text.css('margin-bottom', opts.spikeLength + 'px'); |
|
215 $box.css({top: (top - $text.outerHeight(true) - animDist) + opts.overlap, left: horiz}); |
|
216 // move text left/right if extends out of window |
|
217 textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true)); |
|
218 var xShift = 0; |
|
219 if (textRightSpace < 0) { |
|
220 // shift it left |
|
221 $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); |
|
222 xShift -= textRightSpace; |
|
223 } |
|
224 // we test left space second to ensure that left of box is visible |
|
225 textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); |
|
226 if (textLeftSpace < 0) { |
|
227 // shift it right |
|
228 $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); |
|
229 xShift += textLeftSpace; |
|
230 } |
|
231 textTop = $text.btPosition().top + numb($text.css('margin-top')); |
|
232 textLeft = $text.btPosition().left + numb($text.css('margin-left')); |
|
233 textRight = textLeft + $text.outerWidth(); |
|
234 textBottom = textTop + $text.outerHeight(); |
|
235 textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)}; |
|
236 // points[points.length] = {x: x, y: y}; |
|
237 points[points.length] = spikePoint = {y: textBottom + opts.spikeLength, x: ((textRight-textLeft)/2) + xShift, type: 'spike'}; |
|
238 crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textBottom); |
|
239 // make sure that the crossPoint is not outside of text box boundaries |
|
240 crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; |
|
241 crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.CornerRadius : crossPoint.x; |
|
242 points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textBottom, type: 'join'}; |
|
243 points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner |
|
244 points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner |
|
245 points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner |
|
246 points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner |
|
247 points[points.length] = {x: crossPoint.x + (opts.spikeGirth/2), y: textBottom, type: 'join'}; |
|
248 points[points.length] = spikePoint; |
|
249 break; |
|
250 case 'left': |
|
251 // spike on right |
|
252 $text.css('margin-right', opts.spikeLength + 'px'); |
|
253 $box.css({top: vert + 'px', left: ((left - $text.outerWidth(true) - animDist) + opts.overlap) + 'px'}); |
|
254 // move text up/down if extends out of window |
|
255 textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); |
|
256 var yShift = 0; |
|
257 if (textBottomSpace < 0) { |
|
258 // shift it up |
|
259 $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); |
|
260 yShift -= textBottomSpace; |
|
261 } |
|
262 // we ensure top space second to ensure that top of box is visible |
|
263 textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); |
|
264 if (textTopSpace < 0) { |
|
265 // shift it down |
|
266 $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); |
|
267 yShift += textTopSpace; |
|
268 } |
|
269 textTop = $text.btPosition().top + numb($text.css('margin-top')); |
|
270 textLeft = $text.btPosition().left + numb($text.css('margin-left')); |
|
271 textRight = textLeft + $text.outerWidth(); |
|
272 textBottom = textTop + $text.outerHeight(); |
|
273 textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)}; |
|
274 points[points.length] = spikePoint = {x: textRight + opts.spikeLength, y: ((textBottom-textTop)/2) + yShift, type: 'spike'}; |
|
275 crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textRight); |
|
276 // make sure that the crossPoint is not outside of text box boundaries |
|
277 crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; |
|
278 crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; |
|
279 points[points.length] = {x: textRight, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; |
|
280 points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner |
|
281 points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner |
|
282 points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner |
|
283 points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner |
|
284 points[points.length] = {x: textRight, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; |
|
285 points[points.length] = spikePoint; |
|
286 break; |
|
287 case 'bottom': |
|
288 // spike on top |
|
289 $text.css('margin-top', opts.spikeLength + 'px'); |
|
290 $box.css({top: (top + height + animDist) - opts.overlap, left: horiz}); |
|
291 // move text up/down if extends out of window |
|
292 textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.outerWidth(true)); |
|
293 var xShift = 0; |
|
294 if (textRightSpace < 0) { |
|
295 // shift it left |
|
296 $box.css('left', (numb($box.css('left')) + textRightSpace) + 'px'); |
|
297 xShift -= textRightSpace; |
|
298 } |
|
299 // we ensure left space second to ensure that left of box is visible |
|
300 textLeftSpace = ($text.offset().left + numb($text.css('margin-left'))) - (scrollLeft + opts.windowMargin); |
|
301 if (textLeftSpace < 0) { |
|
302 // shift it right |
|
303 $box.css('left', (numb($box.css('left')) - textLeftSpace) + 'px'); |
|
304 xShift += textLeftSpace; |
|
305 } |
|
306 textTop = $text.btPosition().top + numb($text.css('margin-top')); |
|
307 textLeft = $text.btPosition().left + numb($text.css('margin-left')); |
|
308 textRight = textLeft + $text.outerWidth(); |
|
309 textBottom = textTop + $text.outerHeight(); |
|
310 textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)}; |
|
311 points[points.length] = spikePoint = {x: ((textRight-textLeft)/2) + xShift, y: 0, type: 'spike'}; |
|
312 crossPoint = findIntersectX(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textTop); |
|
313 // make sure that the crossPoint is not outside of text box boundaries |
|
314 crossPoint.x = crossPoint.x < textLeft + opts.spikeGirth/2 + opts.cornerRadius ? textLeft + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.x; |
|
315 crossPoint.x = crossPoint.x > (textRight - opts.spikeGirth/2) - opts.cornerRadius ? (textRight - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.x; |
|
316 points[points.length] = {x: crossPoint.x + opts.spikeGirth/2, y: textTop, type: 'join'}; |
|
317 points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner |
|
318 points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner |
|
319 points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner |
|
320 points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner |
|
321 points[points.length] = {x: crossPoint.x - (opts.spikeGirth/2), y: textTop, type: 'join'}; |
|
322 points[points.length] = spikePoint; |
|
323 break; |
|
324 case 'right': |
|
325 // spike on left |
|
326 $text.css('margin-left', (opts.spikeLength + 'px')); |
|
327 $box.css({top: vert + 'px', left: ((left + width + animDist) - opts.overlap) + 'px'}); |
|
328 // move text up/down if extends out of window |
|
329 textBottomSpace = (winBottom - opts.windowMargin) - ($text.offset().top + $text.outerHeight(true)); |
|
330 var yShift = 0; |
|
331 if (textBottomSpace < 0) { |
|
332 // shift it up |
|
333 $box.css('top', (numb($box.css('top')) + textBottomSpace) + 'px'); |
|
334 yShift -= textBottomSpace; |
|
335 } |
|
336 // we ensure top space second to ensure that top of box is visible |
|
337 textTopSpace = ($text.offset().top + numb($text.css('margin-top'))) - (scrollTop + opts.windowMargin); |
|
338 if (textTopSpace < 0) { |
|
339 // shift it down |
|
340 $box.css('top', (numb($box.css('top')) - textTopSpace) + 'px'); |
|
341 yShift += textTopSpace; |
|
342 } |
|
343 textTop = $text.btPosition().top + numb($text.css('margin-top')); |
|
344 textLeft = $text.btPosition().left + numb($text.css('margin-left')); |
|
345 textRight = textLeft + $text.outerWidth(); |
|
346 textBottom = textTop + $text.outerHeight(); |
|
347 textCenter = {x: textLeft + ($text.outerWidth()/2), y: textTop + ($text.outerHeight()/2)}; |
|
348 points[points.length] = spikePoint = {x: 0, y: ((textBottom-textTop)/2) + yShift, type: 'spike'}; |
|
349 crossPoint = findIntersectY(spikePoint.x, spikePoint.y, textCenter.x, textCenter.y, textLeft); |
|
350 // make sure that the crossPoint is not outside of text box boundaries |
|
351 crossPoint.y = crossPoint.y < textTop + opts.spikeGirth/2 + opts.cornerRadius ? textTop + opts.spikeGirth/2 + opts.cornerRadius : crossPoint.y; |
|
352 crossPoint.y = crossPoint.y > (textBottom - opts.spikeGirth/2) - opts.cornerRadius ? (textBottom - opts.spikeGirth/2) - opts.cornerRadius : crossPoint.y; |
|
353 points[points.length] = {x: textLeft, y: crossPoint.y - opts.spikeGirth/2, type: 'join'}; |
|
354 points[points.length] = {x: textLeft, y: textTop, type: 'corner'}; // left top corner |
|
355 points[points.length] = {x: textRight, y: textTop, type: 'corner'}; // right top corner |
|
356 points[points.length] = {x: textRight, y: textBottom, type: 'corner'}; // right bottom corner |
|
357 points[points.length] = {x: textLeft, y: textBottom, type: 'corner'}; // left bottom corner |
|
358 points[points.length] = {x: textLeft, y: crossPoint.y + opts.spikeGirth/2, type: 'join'}; |
|
359 points[points.length] = spikePoint; |
|
360 break; |
|
361 } // </ switch > |
|
362 |
|
363 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); |
|
364 |
|
365 // if excanvas is set up, we need to initialize the new canvas element |
|
366 if (typeof G_vmlCanvasManager != 'undefined') { |
|
367 canvas = G_vmlCanvasManager.initElement(canvas); |
|
368 } |
|
369 |
|
370 if (opts.cornerRadius > 0) { |
|
371 // round the corners! |
|
372 var newPoints = new Array(); |
|
373 var newPoint; |
|
374 for (var i=0; i<points.length; i++) { |
|
375 if (points[i].type == 'corner') { |
|
376 // create two new arc points |
|
377 // find point between this and previous (using modulo in case of ending) |
|
378 newPoint = betweenPoint(points[i], points[(i-1)%points.length], opts.cornerRadius); |
|
379 newPoint.type = 'arcStart'; |
|
380 newPoints[newPoints.length] = newPoint; |
|
381 // the original corner point |
|
382 newPoints[newPoints.length] = points[i]; |
|
383 // find point between this and next |
|
384 newPoint = betweenPoint(points[i], points[(i+1)%points.length], opts.cornerRadius); |
|
385 newPoint.type = 'arcEnd'; |
|
386 newPoints[newPoints.length] = newPoint; |
|
387 } |
|
388 else { |
|
389 newPoints[newPoints.length] = points[i]; |
|
390 } |
|
391 } |
|
392 // overwrite points with new version |
|
393 points = newPoints; |
|
394 |
|
395 } |
|
396 |
|
397 var ctx = canvas.getContext("2d"); |
|
398 drawIt.apply(ctx, [points]); |
|
399 ctx.fillStyle = opts.fill; |
|
400 if (opts.shadow) { |
|
401 ctx.shadowOffsetX = 2; |
|
402 ctx.shadowOffsetY = 2; |
|
403 ctx.shadowBlur = 5; |
|
404 ctx.shadowColor = opts.shadowColor; |
|
405 } |
|
406 ctx.closePath(); |
|
407 ctx.fill(); |
|
408 if (opts.strokeWidth > 0) { |
|
409 ctx.lineWidth = opts.strokeWidth; |
|
410 ctx.strokeStyle = opts.strokeStyle; |
|
411 ctx.beginPath(); |
|
412 drawIt.apply(ctx, [points]); |
|
413 ctx.closePath(); |
|
414 ctx.stroke(); |
|
415 } |
|
416 |
|
417 if (opts.animate) { |
|
418 $box.css({opacity: 0.1}); |
|
419 } |
|
420 |
|
421 $box.css({visibility: 'visible'}); |
|
422 |
|
423 if (opts.overlay) { |
|
424 var overlay = $('<div class="bt-overlay"></div>').css({ |
|
425 position: 'absolute', |
|
426 backgroundColor: 'blue', |
|
427 top: top, |
|
428 left: left, |
|
429 width: width, |
|
430 height: height, |
|
431 opacity: '.2' |
|
432 }).appendTo(offsetParent); |
|
433 $(this).data('overlay', overlay); |
|
434 } |
|
435 |
|
436 var animParams = {opacity: 1}; |
|
437 if (opts.animate) { |
|
438 switch (position) { |
|
439 case 'top': |
|
440 animParams.top = $box.btPosition().top + opts.distance; |
|
441 break; |
|
442 case 'left': |
|
443 animParams.left = $box.btPosition().left + opts.distance; |
|
444 break; |
|
445 case 'bottom': |
|
446 animParams.top = $box.btPosition().top - opts.distance; |
|
447 break; |
|
448 case 'right': |
|
449 animParams.left = $box.btPosition().left - opts.distance; |
|
450 break; |
|
451 } |
|
452 $box.animate(animParams, {duration: opts.speed, easing: opts.easing}); |
|
453 } |
|
454 |
|
455 // trigger postShow function |
|
456 opts.postShow.apply(this); |
|
457 |
|
458 |
|
459 } // </ turnOn() > |
|
460 |
|
461 var turnOff = function() { |
|
462 |
|
463 // trigger preHide function |
|
464 opts.preHide.apply(this); |
|
465 |
|
466 var box = $(this).data('bt-box'); |
|
467 var overlay = $(this).data('bt-overlay'); |
|
468 if (typeof box == 'object') { |
|
469 $(box).remove(); |
|
470 $(this).removeData('bt-box'); |
|
471 } |
|
472 if (typeof overlay == 'object') { |
|
473 $(overlay).remove(); |
|
474 $(this).removeData('bt-overlay'); |
|
475 } |
|
476 |
|
477 // trigger postHide function |
|
478 opts.postHide.apply(this); |
|
479 |
|
480 } // </ turnOff() > |
|
481 |
|
482 var refresh = function() { |
|
483 turnOff.apply(this); |
|
484 turnOn.apply(this); |
|
485 } |
|
486 |
|
487 /** |
|
488 * This is sort of the "starting spot" for the this.each() |
|
489 * These are sort of the init functions to handle the call |
|
490 */ |
|
491 |
|
492 if (opts.killTitle) { |
|
493 $(this).find('[title]').andSelf().each(function() { |
|
494 $(this).attr('bt-xTitle', $(this).attr('title')).removeAttr('title'); |
|
495 }); |
|
496 } |
|
497 if (typeof opts.trigger == 'string') { |
|
498 opts.trigger = [opts.trigger]; |
|
499 } |
|
500 if (opts.trigger[0] == 'hover') { |
|
501 $(this).hover( |
|
502 function() { |
|
503 turnOn.apply(this); |
|
504 }, |
|
505 function() { |
|
506 turnOff.apply(this); |
|
507 } |
|
508 ); |
|
509 } |
|
510 else if (opts.trigger[0] == 'now') { |
|
511 var box = $(this).data('bt-box'); |
|
512 if (typeof box == 'object') { |
|
513 turnOff.apply(this); |
|
514 } |
|
515 else { |
|
516 turnOn.apply(this); |
|
517 } |
|
518 } |
|
519 else if (opts.trigger.length > 1 && opts.trigger[0] != opts.trigger[1]) { |
|
520 $(this) |
|
521 .bind(opts.trigger[0], function() { |
|
522 turnOn.apply(this); |
|
523 }) |
|
524 .bind(opts.trigger[1], function() { |
|
525 turnOff.apply(this); |
|
526 }); |
|
527 } |
|
528 else { |
|
529 // toggle using the same event |
|
530 $(this).bind(opts.trigger[0], function() { |
|
531 if (typeof this.triggerToggle == 'undefined') { |
|
532 this.triggerToggle = false; |
|
533 } |
|
534 this.triggerToggle = !this.triggerToggle; |
|
535 if (this.triggerToggle) { |
|
536 turnOn.apply(this); |
|
537 } |
|
538 else { |
|
539 turnOff.apply(this); |
|
540 } |
|
541 }); |
|
542 } |
|
543 }); // </ this.each() > |
|
544 |
|
545 |
|
546 function drawIt(points) { |
|
547 this.moveTo(points[0].x, points[0].y); |
|
548 for (i=1;i<points.length;i++) { |
|
549 if (points[i-1].type == 'arcStart') { |
|
550 // if we're creating a rounded corner |
|
551 //ctx.arc(round5(points[i].x), round5(points[i].y), points[i].startAngle, points[i].endAngle, opts.cornerRadius, false); |
|
552 this.quadraticCurveTo(round5(points[i].x), round5(points[i].y), round5(points[(i+1)%points.length].x), round5(points[(i+1)%points.length].y)); |
|
553 i++; |
|
554 //ctx.moveTo(round5(points[i].x), round5(points[i].y)); |
|
555 } |
|
556 else { |
|
557 this.lineTo(round5(points[i].x), round5(points[i].y)); |
|
558 } |
|
559 } |
|
560 } |
|
561 |
|
562 /** |
|
563 * Round to the nearest .5 pixel to avoid antialiasing |
|
564 * http://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors |
|
565 */ |
|
566 function round5(num) { |
|
567 return Math.round(num - .5) + .5; |
|
568 } |
|
569 |
|
570 /** |
|
571 * Ensure that a number is a number... or zero |
|
572 */ |
|
573 function numb(num) { |
|
574 return parseInt(num) || 0; |
|
575 } |
|
576 |
|
577 /** |
|
578 * Given two points, find a point which is dist pixels from point1 on a line to point2 |
|
579 */ |
|
580 function betweenPoint(point1, point2, dist) { |
|
581 // figure out if we're horizontal or vertical |
|
582 var y, x; |
|
583 if (point1.x == point2.x) { |
|
584 // vertical |
|
585 y = point1.y < point2.y ? point1.y + dist : point1.y - dist; |
|
586 return {x: point1.x, y: y}; |
|
587 } |
|
588 else if (point1.y == point2.y) { |
|
589 // horizontal |
|
590 x = point1.x < point2.x ? point1.x + dist : point1.x - dist; |
|
591 return {x:x, y: point1.y}; |
|
592 } |
|
593 } |
|
594 |
|
595 function centerPoint(arcStart, corner, arcEnd) { |
|
596 var x = corner.x == arcStart.x ? arcEnd.x : arcStart.x; |
|
597 var y = corner.y == arcStart.y ? arcEnd.y : arcStart.y; |
|
598 var startAngle, endAngle; |
|
599 if (arcStart.x < arcEnd.x) { |
|
600 if (arcStart.y > arcEnd.y) { |
|
601 // arc is on upper left |
|
602 startAngle = (Math.PI/180)*180; |
|
603 endAngle = (Math.PI/180)*90; |
|
604 } |
|
605 else { |
|
606 // arc is on upper right |
|
607 startAngle = (Math.PI/180)*90; |
|
608 endAngle = 0; |
|
609 } |
|
610 } |
|
611 else { |
|
612 if (arcStart.y > arcEnd.y) { |
|
613 // arc is on lower left |
|
614 startAngle = (Math.PI/180)*270; |
|
615 endAngle = (Math.PI/180)*180; |
|
616 } |
|
617 else { |
|
618 // arc is on lower right |
|
619 startAngle = 0; |
|
620 endAngle = (Math.PI/180)*270; |
|
621 } |
|
622 } |
|
623 return {x: x, y: y, type: 'center', startAngle: startAngle, endAngle: endAngle}; |
|
624 } |
|
625 |
|
626 /** |
|
627 * Find the intersection point of two lines, each defined by two points |
|
628 * arguments are x1, y1 and x2, y2 for r1 (line 1) and r2 (line 2) |
|
629 * It's like an algebra party!!! |
|
630 */ |
|
631 function findIntersect(r1x1, r1y1, r1x2, r1y2, r2x1, r2y1, r2x2, r2y2) { |
|
632 |
|
633 if (r2x1 == r2x2) { |
|
634 return findIntersectY(r1x1, r1y1, r1x2, r1y2, r2x1); |
|
635 } |
|
636 if (r2y1 == r2y2) { |
|
637 return findIntersectX(r1x1, r1y1, r1x2, r1y2, r2y1); |
|
638 } |
|
639 |
|
640 // m = (y1 - y2) / (x1 - x2) // <-- how to find the slope |
|
641 // y = mx + b // the 'classic' linear equation |
|
642 // b = y - mx // how to find b (the y-intersect) |
|
643 // x = (y - b)/m // how to find x |
|
644 var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); |
|
645 var r1b = r1y1 - (r1m * r1x1); |
|
646 var r2m = (r2y1 - r2y2) / (r2x1 - r2x2); |
|
647 var r2b = r2y1 - (r2m * r2x1); |
|
648 |
|
649 var x = (r2b - r1b) / (r1m - r2m); |
|
650 var y = r1m * x + r1b; |
|
651 |
|
652 return {x: x, y: y}; |
|
653 } |
|
654 |
|
655 /** |
|
656 * Find the y intersection point of a line and given x vertical |
|
657 */ |
|
658 function findIntersectY(r1x1, r1y1, r1x2, r1y2, x) { |
|
659 if (r1y1 == r1y2) { |
|
660 return {x: x, y: r1y1}; |
|
661 } |
|
662 var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); |
|
663 var r1b = r1y1 - (r1m * r1x1); |
|
664 |
|
665 var y = r1m * x + r1b; |
|
666 |
|
667 return {x: x, y: y}; |
|
668 } |
|
669 |
|
670 /** |
|
671 * Find the x intersection point of a line and given y horizontal |
|
672 */ |
|
673 function findIntersectX(r1x1, r1y1, r1x2, r1y2, y) { |
|
674 if (r1x1 == r1x2) { |
|
675 return {x: r1x1, y: y}; |
|
676 } |
|
677 var r1m = (r1y1 - r1y2) / (r1x1 - r1x2); |
|
678 var r1b = r1y1 - (r1m * r1x1); |
|
679 |
|
680 // y = mx + b // your old friend, linear equation |
|
681 // x = (y - b)/m // linear equation solved for x |
|
682 var x = (y - r1b) / r1m; |
|
683 |
|
684 return {x: x, y: y}; |
|
685 |
|
686 } |
|
687 |
|
688 }; // </ jQuery.fn.bt() > |
|
689 |
|
690 /** |
|
691 * jQuery's compat.js (used in Drupal's jQuery upgrade module, overrides the $().position() function |
|
692 * this is a copy of that function to allow the plugin to work when compat.js is present |
|
693 * once compat.js is fixed to not override existing functions, this function can be removed |
|
694 * and .btPosion() can be replaced with .position() above... |
|
695 */ |
|
696 jQuery.fn.btPosition = function() { |
|
697 |
|
698 function num(elem, prop) { |
|
699 return elem[0] && parseInt( jQuery.curCSS(elem[0], prop, true), 10 ) || 0; |
|
700 } |
|
701 |
|
702 var left = 0, top = 0, results; |
|
703 |
|
704 if ( this[0] ) { |
|
705 // Get *real* offsetParent |
|
706 var offsetParent = this.offsetParent(), |
|
707 |
|
708 // Get correct offsets |
|
709 offset = this.offset(), |
|
710 parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset(); |
|
711 |
|
712 // Subtract element margins |
|
713 // note: when an element has margin: auto the offsetLeft and marginLeft |
|
714 // are the same in Safari causing offset.left to incorrectly be 0 |
|
715 offset.top -= num( this, 'marginTop' ); |
|
716 offset.left -= num( this, 'marginLeft' ); |
|
717 |
|
718 // Add offsetParent borders |
|
719 parentOffset.top += num( offsetParent, 'borderTopWidth' ); |
|
720 parentOffset.left += num( offsetParent, 'borderLeftWidth' ); |
|
721 |
|
722 // Subtract the two offsets |
|
723 results = { |
|
724 top: offset.top - parentOffset.top, |
|
725 left: offset.left - parentOffset.left |
|
726 }; |
|
727 } |
|
728 |
|
729 return results; |
|
730 }; // </ jQuery.fn.btPosition() > |
|
731 |
|
732 |
|
733 /** |
|
734 * Defaults for the beauty tips |
|
735 * |
|
736 * Note this is a variable definition and not a function. So defaults can be |
|
737 * written for an entire page by simply redefining attributes like so: |
|
738 * |
|
739 * jQuery.fn.bt.defaults.width = 400; |
|
740 * |
|
741 * This would make all Beauty Tips boxes 400px wide. |
|
742 * |
|
743 * Each of these options may also be overridden during |
|
744 * |
|
745 * Can be overriden globally or at time of call. |
|
746 * |
|
747 */ |
|
748 jQuery.fn.bt.defaults = { |
|
749 trigger: 'hover', // trigger to show/hide tip |
|
750 // use [on, off] to define separate on/off triggers |
|
751 // also use space character to allow multiple events to trigger |
|
752 // examples: |
|
753 // ['focus', 'blur'] // focus displays, blur hides |
|
754 // 'dblclick' // dblclick toggles on/off |
|
755 // ['focus mouseover', 'blur mouseout'] |
|
756 // 'now' // shows/hides tip without event |
|
757 |
|
758 width: 200, // width (in px) of tooltip box |
|
759 // when combined with cssStyles: {width: 'auto'}, this becomes a max-width for the text |
|
760 padding: 10, // padding for content (get more fine grained with cssStyles) |
|
761 spikeGirth: 10, // width of spike |
|
762 spikeLength: 15, // length of spike |
|
763 overlap: 0, // spike overlap (px) onto target |
|
764 overlay: false, // display overlay on target (use CSS to style) -- BUGGY! |
|
765 killTitle: true, // kill title tag to avoid double tooltips |
|
766 |
|
767 textzIndex: 9999, // z-index for the text |
|
768 boxzIndex: 9990, // z-index for the "talk" box (should always be less than textzIndex) |
|
769 positions: ['most'], // preference of positions for tip (will use first with available space) |
|
770 // possible values 'top', 'bottom', 'left', 'right' as an array in order of |
|
771 // preference. Last value will be used if others don't have enough space. |
|
772 |
|
773 // or use 'most' to use the area with the most space |
|
774 fill: "rgb(255, 255, 102)", // fill color for the tooltip box |
|
775 windowMargin: 10, // space (px) to leave between text box and browser edge |
|
776 |
|
777 strokeWidth: 1, // width of stroke around box, **set to 0 for no stroke** |
|
778 strokeStyle: "#000", // color/alpha of stroke |
|
779 |
|
780 cornerRadius: 5, // radius of corners (px), set to 0 for square corners |
|
781 |
|
782 shadow: false, // use drop shadow? (only displays in Safari and FF 3.1) |
|
783 shadowOffsetX: 2, // shadow offset x (px) |
|
784 shadowOffsetY: 2, // shadow offset y (px) |
|
785 shadowBlur: 3, // shadow blur (px) |
|
786 shadowColor: "#000", // shadow color/alpha |
|
787 |
|
788 animate: false, // animate show/hide of box - EXPERIMENTAL (buggy in IE) |
|
789 distance: 15, // distance of animation movement (px) |
|
790 easing: 'swing', // animation easing |
|
791 speed: 200, // speed (ms) of animation |
|
792 |
|
793 cssClass: '', // CSS class to add to the box wrapper div |
|
794 cssStyles: {}, // styles to add the text box |
|
795 // example: {fontFamily: 'Georgia, Times, serif', fontWeight: 'bold'} |
|
796 |
|
797 titleSelector: "attr('title')", // if there is no content argument, use this selector to retrieve the title |
|
798 |
|
799 preShow: function(){return;}, // function to run before popup is built and displayed |
|
800 postShow: function(){return;}, // function to run after popup is built and displayed |
|
801 preHide: function(){return;}, // function to run before popup is removed |
|
802 postHide: function(){return;} // function to run after popup is removed |
|
803 |
|
804 }; // </ jQuery.bt.defaults > |