1 |
2
|
Manuela
|
/*
|
2 |
|
|
tip_balloon.js v. 1.81
|
3 |
|
|
|
4 |
|
|
The latest version is available at
|
5 |
|
|
http://www.walterzorn.com
|
6 |
|
|
or http://www.devira.com
|
7 |
|
|
or http://www.walterzorn.de
|
8 |
|
|
|
9 |
|
|
Initial author: Walter Zorn
|
10 |
|
|
Last modified: 2.2.2009
|
11 |
|
|
|
12 |
|
|
Extension for the tooltip library wz_tooltip.js.
|
13 |
|
|
Implements balloon tooltips.
|
14 |
|
|
*/
|
15 |
|
|
|
16 |
|
|
// Make sure that the core file wz_tooltip.js is included first
|
17 |
|
|
if(typeof config == "undefined")
|
18 |
|
|
alert("Error:\nThe core tooltip script file 'wz_tooltip.js' must be included first, before the plugin files!");
|
19 |
|
|
|
20 |
|
|
// Here we define new global configuration variable(s) (as members of the
|
21 |
|
|
// predefined "config." class).
|
22 |
|
|
// From each of these config variables, wz_tooltip.js will automatically derive
|
23 |
|
|
// a command which can be passed to Tip() or TagToTip() in order to customize
|
24 |
|
|
// tooltips individually. These command names are just the config variable
|
25 |
|
|
// name(s) translated to uppercase,
|
26 |
|
|
// e.g. from config. Balloon a command BALLOON will automatically be
|
27 |
|
|
// created.
|
28 |
|
|
|
29 |
|
|
//=================== GLOBAL TOOLTIP CONFIGURATION =========================//
|
30 |
|
|
config. Balloon = false // true or false - set to true if you want this to be the default behaviour
|
31 |
|
|
config. BalloonImgPath = Droplet.AddonUrl+"/img/tip_balloon/" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.
|
32 |
|
|
// Sizes of balloon images
|
33 |
|
|
config. BalloonEdgeSize = 6 // Integer - sidelength of quadratic corner images
|
34 |
|
|
config. BalloonStemWidth = 15 // Integer
|
35 |
|
|
config. BalloonStemHeight = 19 // Integer
|
36 |
|
|
config. BalloonStemOffset = -7 // Integer - horizontal offset of left stem edge from mouse (recommended: -stemwidth/2 to center the stem above the mouse)
|
37 |
|
|
config. BalloonImgExt = "gif";// File name extension of default balloon images, e.g. "gif" or "png"
|
38 |
|
|
//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============//
|
39 |
|
|
|
40 |
|
|
|
41 |
|
|
// Create a new tt_Extension object (make sure that the name of that object,
|
42 |
|
|
// here balloon, is unique amongst the extensions available for wz_tooltips.js):
|
43 |
|
|
var balloon = new tt_Extension();
|
44 |
|
|
|
45 |
|
|
// Implement extension eventhandlers on which our extension should react
|
46 |
|
|
|
47 |
|
|
balloon.OnLoadConfig = function()
|
48 |
|
|
{
|
49 |
|
|
if(tt_aV[BALLOON])
|
50 |
|
|
{
|
51 |
|
|
// Turn off native style properties which are not appropriate
|
52 |
|
|
balloon.padding = Math.max(tt_aV[PADDING] - tt_aV[BALLOONEDGESIZE], 0);
|
53 |
|
|
balloon.width = tt_aV[WIDTH];
|
54 |
|
|
//if(tt_bBoxOld)
|
55 |
|
|
// balloon.width += (balloon.padding << 1);
|
56 |
|
|
tt_aV[BORDERWIDTH] = 0;
|
57 |
|
|
tt_aV[WIDTH] = 0;
|
58 |
|
|
tt_aV[PADDING] = 0;
|
59 |
|
|
tt_aV[BGCOLOR] = "";
|
60 |
|
|
tt_aV[BGIMG] = "";
|
61 |
|
|
tt_aV[SHADOW] = false;
|
62 |
|
|
// Append slash to img path if missing
|
63 |
|
|
if(tt_aV[BALLOONIMGPATH].charAt(tt_aV[BALLOONIMGPATH].length - 1) != '/')
|
64 |
|
|
tt_aV[BALLOONIMGPATH] += "/";
|
65 |
|
|
return true;
|
66 |
|
|
}
|
67 |
|
|
return false;
|
68 |
|
|
};
|
69 |
|
|
balloon.OnCreateContentString = function()
|
70 |
|
|
{
|
71 |
|
|
if(!tt_aV[BALLOON])
|
72 |
|
|
return false;
|
73 |
|
|
|
74 |
|
|
var aImg, sImgZ, sCssCrn, sVaT, sVaB, sCss0;
|
75 |
|
|
|
76 |
|
|
// Cache balloon images in advance:
|
77 |
|
|
// Either use the pre-cached default images...
|
78 |
|
|
if(tt_aV[BALLOONIMGPATH] == config.BalloonImgPath)
|
79 |
|
|
aImg = balloon.aDefImg;
|
80 |
|
|
// ...or load images from different directory
|
81 |
|
|
else
|
82 |
|
|
aImg = Balloon_CacheImgs(tt_aV[BALLOONIMGPATH], tt_aV[BALLOONIMGEXT]);
|
83 |
|
|
sCss0 = 'padding:0;margin:0;border:0;line-height:0;overflow:hidden;';
|
84 |
|
|
sCssCrn = ' style="position:relative;width:' + tt_aV[BALLOONEDGESIZE] + 'px;' + sCss0 + 'overflow:hidden;';
|
85 |
|
|
sVaT = 'vertical-align:top;" valign="top"';
|
86 |
|
|
sVaB = 'vertical-align:bottom;" valign="bottom"';
|
87 |
|
|
sImgZ = '" style="' + sCss0 + '" />';
|
88 |
|
|
|
89 |
|
|
tt_sContent = '<table style="width:auto;padding:0;margin:0;left:0;top:0;border-collapse: collapse;"><tr>'
|
90 |
|
|
// Left-top corner
|
91 |
|
|
+ '<td' + sCssCrn + sVaB + '>'
|
92 |
|
|
+ '<img src="' + aImg[1].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
93 |
|
|
+ '</td>'
|
94 |
|
|
// Top border
|
95 |
|
|
+ '<td valign="bottom" style="position:relative;' + sCss0 + '">'
|
96 |
|
|
+ '<img id="bALlOOnT" style="position:relative;top:1px;z-index:1;display:none;' + sCss0 + '" src="' + aImg[9].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
|
97 |
|
|
+ '<div style="position:relative;z-index:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[2].src + ');">'
|
98 |
|
|
+ '</div>'
|
99 |
|
|
+ '</td>'
|
100 |
|
|
// Right-top corner
|
101 |
|
|
+ '<td' + sCssCrn + sVaB + '>'
|
102 |
|
|
+ '<img src="' + aImg[3].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
103 |
|
|
+ '</td>'
|
104 |
|
|
+ '</tr><tr>'
|
105 |
|
|
// Left border (background-repeat fix courtesy Dirk Schnitzler)
|
106 |
|
|
+ '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[8].src + ');">'
|
107 |
|
|
// Redundant image for bugous old Geckos which won't auto-expand TD height to 100%
|
108 |
|
|
+ '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[8].src + sImgZ
|
109 |
|
|
+ '</td>'
|
110 |
|
|
// Content
|
111 |
|
|
+ '<td id="bALlO0nBdY" style="position:relative;line-height:normal;background-repeat:repeat;'
|
112 |
|
|
+ ';background-image:url(' + aImg[0].src + ')'
|
113 |
|
|
+ ';color:' + tt_aV[FONTCOLOR]
|
114 |
|
|
+ ';font-family:' + tt_aV[FONTFACE]
|
115 |
|
|
+ ';font-size:' + tt_aV[FONTSIZE]
|
116 |
|
|
+ ';font-weight:' + tt_aV[FONTWEIGHT]
|
117 |
|
|
+ ';text-align:' + tt_aV[TEXTALIGN]
|
118 |
|
|
+ ';padding:' + balloon.padding + 'px'
|
119 |
|
|
+ ';width:' + ((balloon.width > 0) ? (balloon.width + 'px') : 'auto')
|
120 |
|
|
+ ';">' + tt_sContent + '</td>'
|
121 |
|
|
// Right border
|
122 |
|
|
+ '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[4].src + ');">'
|
123 |
|
|
// Image redundancy for bugous old Geckos that won't auto-expand TD height to 100%
|
124 |
|
|
+ '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[4].src + sImgZ
|
125 |
|
|
+ '</td>'
|
126 |
|
|
+ '</tr><tr>'
|
127 |
|
|
// Left-bottom corner
|
128 |
|
|
+ '<td' + sCssCrn + sVaT + '>'
|
129 |
|
|
+ '<img src="' + aImg[7].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
130 |
|
|
+ '</td>'
|
131 |
|
|
// Bottom border
|
132 |
|
|
+ '<td valign="top" style="position:relative;' + sCss0 + '">'
|
133 |
|
|
+ '<div style="position:relative;left:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[6].src + ');"></div>'
|
134 |
|
|
+ '<img id="bALlOOnB" style="position:relative;top:-1px;left:2px;z-index:1;display:none;' + sCss0 + '" src="' + aImg[10].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
|
135 |
|
|
+ '</td>'
|
136 |
|
|
// Right-bottom corner
|
137 |
|
|
+ '<td' + sCssCrn + sVaT + '>'
|
138 |
|
|
+ '<img src="' + aImg[5].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
139 |
|
|
+ '</td>'
|
140 |
|
|
+ '</tr></table>';//alert(tt_sContent);
|
141 |
|
|
return true;
|
142 |
|
|
};
|
143 |
|
|
balloon.OnSubDivsCreated = function()
|
144 |
|
|
{
|
145 |
|
|
if(tt_aV[BALLOON])
|
146 |
|
|
{
|
147 |
|
|
var bdy = tt_GetElt("bALlO0nBdY");
|
148 |
|
|
|
149 |
|
|
// Insert a TagToTip() HTML element into the central body TD
|
150 |
|
|
if (tt_t2t && !tt_aV[COPYCONTENT] && bdy)
|
151 |
|
|
tt_MovDomNode(tt_t2t, tt_GetDad(tt_t2t), bdy);
|
152 |
|
|
balloon.iStem = tt_aV[ABOVE] * 1;
|
153 |
|
|
balloon.aStem = [tt_GetElt("bALlOOnT"), tt_GetElt("bALlOOnB")];
|
154 |
|
|
balloon.aStem[balloon.iStem].style.display = "inline";
|
155 |
|
|
if (balloon.width < -1)
|
156 |
|
|
Balloon_MaxW(bdy);
|
157 |
|
|
return true;
|
158 |
|
|
}
|
159 |
|
|
return false;
|
160 |
|
|
};
|
161 |
|
|
// Display the stem appropriately
|
162 |
|
|
balloon.OnMoveAfter = function()
|
163 |
|
|
{
|
164 |
|
|
if(tt_aV[BALLOON])
|
165 |
|
|
{
|
166 |
|
|
var iStem = (tt_aV[ABOVE] != tt_bJmpVert) * 1;
|
167 |
|
|
|
168 |
|
|
// Tooltip position vertically flipped?
|
169 |
|
|
if(iStem != balloon.iStem)
|
170 |
|
|
{
|
171 |
|
|
// Display opposite stem
|
172 |
|
|
balloon.aStem[balloon.iStem].style.display = "none";
|
173 |
|
|
balloon.aStem[iStem].style.display = "inline";
|
174 |
|
|
balloon.iStem = iStem;
|
175 |
|
|
}
|
176 |
|
|
|
177 |
|
|
balloon.aStem[iStem].style.left = Balloon_CalcStemX() + "px";
|
178 |
|
|
return true;
|
179 |
|
|
}
|
180 |
|
|
return false;
|
181 |
|
|
};
|
182 |
|
|
function Balloon_CalcStemX()
|
183 |
|
|
{
|
184 |
|
|
var x = tt_musX - tt_x + tt_aV[BALLOONSTEMOFFSET] - tt_aV[BALLOONEDGESIZE];
|
185 |
|
|
return Math.max(Math.min(x, tt_w - tt_aV[BALLOONSTEMWIDTH] - (tt_aV[BALLOONEDGESIZE] << 1) - 2), 2);
|
186 |
|
|
}
|
187 |
|
|
function Balloon_CacheImgs(sPath, sExt)
|
188 |
|
|
{
|
189 |
|
|
var asImg = ["background", "lt", "t", "rt", "r", "rb", "b", "lb", "l", "stemt", "stemb"],
|
190 |
|
|
n = asImg.length,
|
191 |
|
|
aImg = new Array(n),
|
192 |
|
|
img;
|
193 |
|
|
|
194 |
|
|
while(n)
|
195 |
|
|
{--n;
|
196 |
|
|
img = aImg[n] = new Image();
|
197 |
|
|
img.src = sPath + asImg[n] + "." + sExt;
|
198 |
|
|
}
|
199 |
|
|
return aImg;
|
200 |
|
|
}
|
201 |
|
|
function Balloon_MaxW(bdy)
|
202 |
|
|
{
|
203 |
|
|
if (bdy)
|
204 |
|
|
{
|
205 |
|
|
var iAdd = tt_bBoxOld ? (balloon.padding << 1) : 0, w = tt_GetDivW(bdy);
|
206 |
|
|
if (w > -balloon.width + iAdd)
|
207 |
|
|
bdy.style.width = (-balloon.width + iAdd) + "px";
|
208 |
|
|
}
|
209 |
|
|
}
|
210 |
|
|
// This mechanism pre-caches the default images specified by
|
211 |
|
|
// congif.BalloonImgPath, so, whenever a balloon tip using these default images
|
212 |
|
|
// is created, no further server connection is necessary.
|
213 |
|
|
function Balloon_PreCacheDefImgs()
|
214 |
|
|
{
|
215 |
|
|
// Append slash to img path if missing
|
216 |
|
|
if(config.BalloonImgPath.charAt(config.BalloonImgPath.length - 1) != '/')
|
217 |
|
|
config.BalloonImgPath += "/";
|
218 |
|
|
// Preload default images into array
|
219 |
|
|
balloon.aDefImg = Balloon_CacheImgs(config.BalloonImgPath, config.BalloonImgExt);
|
220 |
|
|
}
|
221 |
|
|
Balloon_PreCacheDefImgs();
|