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