Project

General

Profile

1
/*
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
//===================  GLOBAL TOOLTIP CONFIGURATION  =========================//
29
config. Balloon                = false    // true or false - set to true if you want this to be the default behaviour
30
config. BalloonImgPath         = Droplet.ThemeUrl+"img/tip_balloon/" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.
31
// Sizes of balloon images
32
config. BalloonEdgeSize        = 6        // Integer - sidelength of quadratic corner images
33
config. BalloonStemWidth       = 15    // Integer
34
config. BalloonStemHeight      = 19    // Integer
35
config. BalloonStemOffset      = -7    // Integer - horizontal offset of left stem edge from mouse (recommended: -stemwidth/2 to center the stem above the mouse)
36
config. BalloonImgExt          = "gif";// File name extension of default balloon images, e.g. "gif" or "png"
37
//=======  END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW  ==============//
38

    
39

    
40
// Create a new tt_Extension object (make sure that the name of that object,
41
// here balloon, is unique amongst the extensions available for wz_tooltips.js):
42
var balloon = new tt_Extension();
43

    
44
// Implement extension eventhandlers on which our extension should react
45

    
46
balloon.OnLoadConfig = function()
47
{
48
    if(tt_aV[BALLOON])
49
    {
50
        // Turn off native style properties which are not appropriate
51
        balloon.padding = Math.max(tt_aV[PADDING] - tt_aV[BALLOONEDGESIZE], 0);
52
        balloon.width = tt_aV[WIDTH];
53
        //if(tt_bBoxOld)
54
        //    balloon.width += (balloon.padding << 1);
55
        tt_aV[BORDERWIDTH] = 0;
56
        tt_aV[WIDTH] = 0;
57
        tt_aV[PADDING] = 0;
58
        tt_aV[BGCOLOR] = "";
59
        tt_aV[BGIMG] = "";
60
        tt_aV[SHADOW] = false;
61
console.info(Droplet.ThemeUrl);
62
console.info(BALLOONIMGPATH);
63
        // Append slash to img path if missing
64
        if(tt_aV[BALLOONIMGPATH].charAt(tt_aV[BALLOONIMGPATH].length - 1) != '/')
65
            tt_aV[BALLOONIMGPATH] += "/";
66
        return true;
67
    }
68
    return false;
69
};
70
balloon.OnCreateContentString = function()
71
{
72
    if(!tt_aV[BALLOON])
73
        return false;
74

    
75
    var aImg, sImgZ, sCssCrn, sVaT, sVaB, sCss0;
76

    
77
    // Cache balloon images in advance:
78
    // Either use the pre-cached default images...
79
    if(tt_aV[BALLOONIMGPATH] == config.BalloonImgPath)
80
        aImg = balloon.aDefImg;
81
    // ...or load images from different directory
82
    else
83
        aImg = Balloon_CacheImgs(tt_aV[BALLOONIMGPATH], tt_aV[BALLOONIMGEXT]);
84
    sCss0 = 'padding:0;margin:0;border:0;line-height:0;overflow:hidden;';
85
    sCssCrn = ' style="position:relative;width:' + tt_aV[BALLOONEDGESIZE] + 'px;' + sCss0 + 'overflow:hidden;';
86
    sVaT = 'vertical-align:top;" valign="top"';
87
    sVaB = 'vertical-align:bottom;" valign="bottom"';
88
    sImgZ = '" style="' + sCss0 + '" />';
89

    
90
    tt_sContent = '<table  style="width:auto;padding:0;margin:0;left:0;top:0;border-collapse: collapse;"><tr>'
91
        // Left-top corner
92
        + '<td' + sCssCrn + sVaB + '>'
93
        + '<img src="' + aImg[1].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
94
        + '</td>'
95
        // Top border
96
        + '<td valign="bottom" style="position:relative;' + sCss0 + '">'
97
        + '<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] + '" />'
98
        + '<div style="position:relative;z-index:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[2].src + ');">'
99
        + '</div>'
100
        + '</td>'
101
        // Right-top corner
102
        + '<td' + sCssCrn + sVaB + '>'
103
        + '<img src="' + aImg[3].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
104
        + '</td>'
105
        + '</tr><tr>'
106
        // Left border (background-repeat fix courtesy Dirk Schnitzler)
107
        + '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[8].src + ');">'
108
        // Redundant image for bugous old Geckos which won't auto-expand TD height to 100%
109
        + '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[8].src + sImgZ
110
        + '</td>'
111
        // Content
112
        + '<td id="bALlO0nBdY" style="position:relative;line-height:normal;background-repeat:repeat;'
113
        + ';background-image:url(' + aImg[0].src + ')'
114
        + ';color:' + tt_aV[FONTCOLOR]
115
        + ';font-family:' + tt_aV[FONTFACE]
116
        + ';font-size:' + tt_aV[FONTSIZE]
117
        + ';font-weight:' + tt_aV[FONTWEIGHT]
118
        + ';text-align:' + tt_aV[TEXTALIGN]
119
        + ';padding:' + balloon.padding + 'px'
120
        + ';width:' + ((balloon.width > 0) ? (balloon.width + 'px') : 'auto')
121
        + ';">' + tt_sContent + '</td>'
122
        // Right border
123
        + '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[4].src + ');">'
124
        // Image redundancy for bugous old Geckos that won't auto-expand TD height to 100%
125
        + '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[4].src + sImgZ
126
        + '</td>'
127
        + '</tr><tr>'
128
        // Left-bottom corner
129
        + '<td' + sCssCrn + sVaT + '>'
130
        + '<img src="' + aImg[7].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
131
        + '</td>'
132
        // Bottom border
133
        + '<td valign="top" style="position:relative;' + sCss0 + '">'
134
        + '<div style="position:relative;left:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[6].src + ');"></div>'
135
        + '<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] + '" />'
136
        + '</td>'
137
        // Right-bottom corner
138
        + '<td' + sCssCrn + sVaT + '>'
139
        + '<img src="' + aImg[5].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
140
        + '</td>'
141
        + '</tr></table>';//alert(tt_sContent);
142
    return true;
143
};
144
balloon.OnSubDivsCreated = function()
145
{
146
    if(tt_aV[BALLOON])
147
    {
148
        var bdy = tt_GetElt("bALlO0nBdY");
149

    
150
        // Insert a TagToTip() HTML element into the central body TD
151
        if (tt_t2t && !tt_aV[COPYCONTENT] && bdy)
152
            tt_MovDomNode(tt_t2t, tt_GetDad(tt_t2t), bdy);
153
        balloon.iStem = tt_aV[ABOVE] * 1;
154
        balloon.aStem = [tt_GetElt("bALlOOnT"), tt_GetElt("bALlOOnB")];
155
        balloon.aStem[balloon.iStem].style.display = "inline";
156
        if (balloon.width < -1)
157
            Balloon_MaxW(bdy);
158
        return true;
159
    }
160
    return false;
161
};
162
// Display the stem appropriately
163
balloon.OnMoveAfter = function()
164
{
165
    if(tt_aV[BALLOON])
166
    {
167
        var iStem = (tt_aV[ABOVE] != tt_bJmpVert) * 1;
168

    
169
        // Tooltip position vertically flipped?
170
        if(iStem != balloon.iStem)
171
        {
172
            // Display opposite stem
173
            balloon.aStem[balloon.iStem].style.display = "none";
174
            balloon.aStem[iStem].style.display = "inline";
175
            balloon.iStem = iStem;
176
        }
177

    
178
        balloon.aStem[iStem].style.left = Balloon_CalcStemX() + "px";
179
        return true;
180
    }
181
    return false;
182
};
183
function Balloon_CalcStemX()
184
{
185
    var x = tt_musX - tt_x + tt_aV[BALLOONSTEMOFFSET] - tt_aV[BALLOONEDGESIZE];
186
    return Math.max(Math.min(x, tt_w - tt_aV[BALLOONSTEMWIDTH] - (tt_aV[BALLOONEDGESIZE] << 1) - 2), 2);
187
}
188
function Balloon_CacheImgs(sPath, sExt)
189
{
190
    var asImg = ["background", "lt", "t", "rt", "r", "rb", "b", "lb", "l", "stemt", "stemb"],
191
    n = asImg.length,
192
    aImg = new Array(n),
193
    img;
194

    
195
    while(n)
196
    {--n;
197
        img = aImg[n] = new Image();
198
        img.src = sPath + asImg[n] + "." + sExt;
199
    }
200
    return aImg;
201
}
202
function Balloon_MaxW(bdy)
203
{
204
    if (bdy)
205
    {
206
        var iAdd = tt_bBoxOld ? (balloon.padding << 1) : 0, w = tt_GetDivW(bdy);
207
        if (w > -balloon.width + iAdd)
208
            bdy.style.width = (-balloon.width + iAdd) + "px";
209
    }
210
}
211
// This mechanism pre-caches the default images specified by
212
// congif.BalloonImgPath, so, whenever a balloon tip using these default images
213
// is created, no further server connection is necessary.
214
function Balloon_PreCacheDefImgs()
215
{
216
    // Append slash to img path if missing
217
    if(config.BalloonImgPath.charAt(config.BalloonImgPath.length - 1) != '/')
218
        config.BalloonImgPath += "/";
219
    // Preload default images into array
220
    balloon.aDefImg = Balloon_CacheImgs(config.BalloonImgPath, config.BalloonImgExt);
221
}
222
Balloon_PreCacheDefImgs();
(9-9/14)