Menu
▾
▴
[TWiki-Dev] [SVN] GeorgeClark r17464 - in twiki/trunk/ToolTipPlugin: data/TWiki lib/TWiki/Plugins pub/TWiki/ToolTipPlugin
|
From: <de...@de...> - 2008-08-29 03:09:40
|
Author: GeorgeClark Date: 2008-08-28 22:09:48 -0500 (Thu, 28 Aug 2008) New Revision: 17464 Trac url: http://develop.twiki.org/trac/changeset/17464 Modified: twiki/trunk/ToolTipPlugin/data/TWiki/ToolTipPlugin.txt twiki/trunk/ToolTipPlugin/lib/TWiki/Plugins/ToolTipPlugin.pm twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/ToolTipBackground.jpg twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/wz_tooltip.js Log: Item5966: Syntax changed for calling wz_tooltip.js, other issues Modified: twiki/trunk/ToolTipPlugin/data/TWiki/ToolTipPlugin.txt =================================================================== --- twiki/trunk/ToolTipPlugin/data/TWiki/ToolTipPlugin.txt 2008-08-28 21:47:45 UTC (rev 17463) +++ twiki/trunk/ToolTipPlugin/data/TWiki/ToolTipPlugin.txt 2008-08-29 03:09:48 UTC (rev 17464) @@ -1,35 +1,43 @@ -%META:TOPICINFO{author="TWikiContributor" date="1069422060" format="1.0" version="1.1"}% +%META:TOPICINFO{author="BaseUserMapping_333" date="1219976830" format="1.1" reprev="1.10" version="1.10"}% ---+!! <nop>%TOPIC% -This is a plugin to generate dynamic Tool Tips in HTML + javascript (mouseover event). -This tooltip is based on http://www.walterzorn.com/tooltip/tooltip_e.htm +This is a plugin to generate dynamic Tool Tips in HTML + javascript (mouseover event). This tooltip is based on http://www.walterzorn.com/tooltip/tooltip_e.htm %TOC% ---++ Examples -<a border="0" href="javascript:void(0);" onmouseover=" this.T_FONTCOLOR='#336699'; this.T_TITLE='Nice tooltip, no ?'; this.T_SHADOWCOLOR='#ccaacc'; this.T_FONTSIZE='18px'; this.T_BGIMG='%ATTACHURLPATH%/ToolTipBackground.jpg'; return escape('Whaoooo ! With such a tooltip, you can keep your topics light... and get better communication ! ');"> put your mouse here, you should see a tooltip </A>. +%TOOLTIP{TEXT="Whaoooo ! With such a tooltip, you can keep your topics light... and get better communication ! " FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}%. -You can use one or more <a border="0" href="javascript:void(0);" onmouseover=" this.T_BGCOLOR='#FF8000'; this.T_FONTCOLOR='#00FF80'; this.T_TITLE='PARAMETERS'; this.T_SHADOWCOLOR='#ccaacc'; this.T_FONTSIZE='30px';;return escape('there are soo many parameters...')">parameter</A> to get your own and nice tool tip !. +You can use one or more %TOOLTIP{TEXT="there are soo many parameters..." BGCOLOR="#FF8000" FONTCOLOR="#00FF80" TITLE="PARAMETERS" SHADOWCOLOR="#ccaacc" FONTSIZE="30px"}%parameters%TOOLTIP{END}% to get your own and nice tool tip !. -Note that you can also <a border="0" href="javascript:void(0);" onmouseover=" this.T_FONTCOLOR='#336699'; this.T_TITLE='PHOTOS !'; this.T_SHADOWCOLOR='#ccaacc'; this.T_FONTSIZE='18px';;return escape('You can also insert <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos in your text... this is simply HTML! (but remember to escape <, >, \', I18N chars etc :-))!')">do this</A> and <a border="0" href="javascript:void(0);" onmouseover=" this.T_FONTCOLOR='#336699'; this.T_TITLE='Background image'; this.T_SHADOWCOLOR='#ccaacc'; this.T_FONTSIZE='18px'; this.T_BGIMG='%ATTACHURLPATH%/ToolTipBackground.jpg';;return escape('you can set a background image so to get a nice tool tip and also add some <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos ')"> this </A>too !. +<!-- Have to escape the following - WYSIWYG corrupts the inline img tags in the tip. --> +<sticky> +Note that you can also %TOOLTIP{TEXT="You can also insert <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos in your text... this is simply HTML! (but remember to escape <, >, \', !I18N chars, and autolink !WikiWords, etc :-))!" TITLE="PHOTOS !" FONTCOLOR="#336699" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="400"}% do this %TOOLTIP{END}% and %TOOLTIP{TEXT="you can set a background image so to get a nice tool tip and also add some <img src=\'%ATTACHURLPATH%/ToolTipPhoto.gif\'> gif/jpg photos" FONTCOLOR="#336699" TITLE="Background image" SHADOWCOLOR="#ccaacc" FONTSIZE="18px" WIDTH="190" BGIMG="%ATTACHURLPATH%/tt_bg.jpg"}% this %TOOLTIP{END}% too !. +</sticky> -%N%: A nice feature is to get clicable TWiki site map in <nop>ToolTip : +%N%: A nice feature is to get clickable TWiki site map in <nop>ToolTip. These are "Sticky" and don't dismiss when the mouse moves away. - * <a border="0" href="../TWiki/SiteMap" onmouseover=" this.T_STICKY='true'; this.T_BORDERCOLOR='#333366'; this.T_PADDING=0; this.T_BORDERWIDTH=1; this.T_FONTSIZE='12px'; this.T_FONTCOLOR='black'; this.T_ABOVE='false'; this.T_OFFSETY='-50'; this.T_WIDTH=550; ;return escape(' <table width=100% border=0 cellspacing=1 bgcolor=#cccccc cellpadding=1> <tr bgcolor=#003366> <td> <font color=#fafafa> Web </font></td> <td><font color=#fafafa> Why (<i>pourquoi</i>) ? </font></td> <td width=1% align=right><a href=javascript:void()><font color=#ffffff><b>X</b></font></a></td> </tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFEFA6><td><a class=twikiLink href=/cgi-bin/view/Main/WebHome><font color=black><b>Main</b></font></a></font></td><td colspan=2><font color=#000000> Welcome to TWiki... <a class=twikiLink href=/cgi-bin/view/Main/TWikiUsers>Users</a>, <a class=twikiLink href=/cgi-bin/view/Main/TWikiGroups>Groups</a>, <a class=twikiLink href=/cgi-bin/view/Main/OfficeLocations>Offices</a> - tour this expandable virtual workspace. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFD8AA><td><a class=twikiLink href=/cgi-bin/view/TWiki/WebHome><font color=black><b>TWiki</b></font></a></font></td><td colspan=2><font color=#000000> <a class=twikiLink href=/cgi-bin/view/TWiki/WelcomeGuest>Welcome</a>, <a class=twikiLink href=/cgi-bin/view/TWiki/TWikiRegistration>Registration</a>, and other <a class=twikiLink href=/cgi-bin/view/TWiki/StartingPoints>StartingPoints</a>; TWiki history & Wiki style; All the docs... </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Sandbox/WebHome><font color=black><b>Sandbox</b></font></a></font></td><td colspan=2><font color=#000000> Sandbox test area. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#F9D1C9><td><a class=twikiLink href=/cgi-bin/view/Codev/WebHome><font color=black><b>Codev</b></font></a></font></td><td colspan=2><font color=#000000> TWiki development: the core collaboration zone for the TWiki Project. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E3E9A5><td><a class=twikiLink href=/cgi-bin/view/Plugins/WebHome><font color=black><b>Plugins</b></font></a></font></td><td colspan=2><font color=#000000> Repository for TWiki Plugins, Skins and Add-Ons. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Salgina/WebHome><font color=black><b>Salgina</b></font></a></font></td><td colspan=2><font color=#000000> Civil engineering exchange for the Salginatobel Bridge. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#B9DAFF><td><a class=twikiLink href=/cgi-bin/view/Support/WebHome><font color=black><b>Support</b></font></a></font></td><td colspan=2><font color=#000000> Tech support for the TWiki collaboration platform. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFFED5><td><a class=twikiLink href=/cgi-bin/view/Wikilearn/WebHome><font color=black><b>Wikilearn</b></font></a></font></td><td colspan=2><font color=#000000> Learn or teach anything related to free or open source software. </font></td></tr></table> ')"> <font color=black>Tidy'ed <nop>SiteMap as <nop>ToolTip</font> </A> - * %TOOLTIP{ URL="../TWiki/SiteMap" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-350" WIDTH="720" INCLUDE="SiteMap"}% Raw included <nop>SiteMap as <nop>ToolTip %TOOLTIP% +<!-- WYSIWYG chokes on the embedded html table tags in the following - Enclose in sticky tags to escape WYSIWYG --> +<sticky> + * %TOOLTIP{TEXT="<table width=100% border=0 cellspacing=1 bgcolor=#cccccc cellpadding=1> <tr bgcolor=#003366> <td> <font color=#fafafa> Web </font></td> <td><font color=#fafafa> Why (<i>pourquoi</i>) ? </font></td> <td width=1% align=right><a href=javascript:void()><font color=#ffffff><b>X</b></font></a></td> </tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFEFA6><td><a class=twikiLink href=/cgi-bin/view/Main/WebHome><font color=black><b>Main</b></font></a></font></td><td colspan=2><font color=#000000> Welcome to TWiki... <a class=twikiLink href=/cgi-bin/view/Main/TWikiUsers>Users</a>, <a class=twikiLink href=/cgi-bin/view/Main/TWikiGroups>Groups</a>, <a class=twikiLink href=/cgi-bin/view/Main/OfficeLocations>Offices</a> - tour this expandable virtual workspace. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFD8AA><td><a class=twikiLink href=/cgi-bin/view/TWiki/WebHome><font color=black><b>TWiki</b></font></a></font></td><td colspan=2><font color=#000000> <a class=twikiLink href=/cgi-bin/view/TWiki/WelcomeGuest>Welcome</a>, <a class=twikiLink href=/cgi-bin/view/TWiki/TWikiRegistration>Registration</a>, and other <a class=twikiLink href=/cgi-bin/view/TWiki/StartingPoints>StartingPoints</a>; TWiki history & Wiki style; All the docs... </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Sandbox/WebHome><font color=black><b>Sandbox</b></font></a></font></td><td colspan=2><font color=#000000> Sandbox test area. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#F9D1C9><td><a class=twikiLink href=/cgi-bin/view/Codev/WebHome><font color=black><b>Codev</b></font></a></font></td><td colspan=2><font color=#000000> TWiki development: the core collaboration zone for the TWiki Project. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E3E9A5><td><a class=twikiLink href=/cgi-bin/view/Plugins/WebHome><font color=black><b>Plugins</b></font></a></font></td><td colspan=2><font color=#000000> Repository for TWiki Plugins, Skins and Add-Ons. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#E0E3E7><td><a class=twikiLink href=/cgi-bin/view/Salgina/WebHome><font color=black><b>Salgina</b></font></a></font></td><td colspan=2><font color=#000000> Civil engineering exchange for the Salginatobel Bridge. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#B9DAFF><td><a class=twikiLink href=/cgi-bin/view/Support/WebHome><font color=black><b>Support</b></font></a></font></td><td colspan=2><font color=#000000> Tech support for the TWiki collaboration platform. </font></td></tr> <tr height=10 style=font-size:8pt; color=#000000; bgcolor=#FFFED5><td><a class=twikiLink href=/cgi-bin/view/Wikilearn/WebHome><font color=black><b>Wikilearn</b></font></a></font></td><td colspan=2><font color=#000000> Learn or teach anything related to free or open source software. </font></td></tr></table>" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-50" WIDTH="550" }% <font color=black>Tidy'ed <nop>SiteMap as <nop>ToolTip</font> %TOOLTIP{END}% +</sticky> + * %TOOLTIP{ URL="../TWiki/SiteMap" TARGET="_blank" INCLUDE="SiteMap" STICKY="true" BORDERCOLOR="#333366" PADDING="0" BORDERWIDTH="1" FONTSIZE="12px" FONTCOLOR="black" ABOVE="false" OFFSETY="-350" WIDTH="800"}% Raw included <nop>SiteMap as <nop>ToolTip %TOOLTIP% (This one is also a link to the sitemap) ---++ Parameters -All walterzorn tooltip parameters are allowed and simply passed to the javascript applet. -You just don't put the %RED% this.T_ %ENDCOLOR% before each of them. -%<nop>TOOLTIP{END}% close the URL and is mandatory. +All walterzorn tooltip parameters are allowed and simply passed to the javascript applet. For a complete list refer to http://www.walterzorn.com/tooltip/tooltip_e.htm Pass the parameters using the standard TWiki format - Parameter="value". Use of %<nop>TOOLTIP{END}% to close the tip text is mandatory. -I have added TWiki specific parameter INCLUDE to fill <nop>ToolTip with content of any TWiki topic. The syntax of INCLUDE parameter can be __INCLUDE="topic"__ or __INCLUDE="web.topic"__. Included topic text should only content simple TWiki or HTML datas. - +%TABLE{sort="off"}% | *name* | *usage* | *example* | +| *TWiki Specific Parameters* ||| | END (or empty parameter) | End of url text that activate the tooltip (mandatory !). | %<nop>TOOLTIP{END}% | -| ABOVE | Places the tooltip above the mousepointer. Additionally applying the OFFSETY command allows to set the vertical distance from the mousepointer.| ABOVE="true" | +| INCLUDE | Include a topic text into the tooltip. Included topic text should only content simple TWiki or HTML datas. | INCLUDE="web.topic" or INCLUDE="topic" | +| TARGET | Adds the target= operand to the URL. | TARGET="_blank" opens the link in a new window | +| TEXT | <nop>ToolTip text. | | +| URL | Specifies link if this tip is also a link, otherwise defaults to null link | URL=<nop>http://twiki.org or web relative URL="../TWiki/SiteMap" | +| *wz_tooltip parameters - see http://www.walterzorn.com/tooltip/tooltip_e.htm* ||| +| ABOVE | Places the tooltip above the mousepointer. Additionally applying the OFFSETY command allows to set the vertical distance from the mousepointer. | ABOVE="true" | | BGCOLOR | Background color of the tooltip. | BGCOLOR="#d3e3f6" | | BGIMG | Background image. | BGIMG="images/myBgImg.jpg" | | BORDERWIDTH | Width of tooltip border. May be 0 to hide the border. | BORDERWIDTH="3" | @@ -40,65 +48,69 @@ | FONTFACE | Font face / family. | FONTFACE="verdana,geneva,sans-serif" | | FONTSIZE | Font size + unit. Unit inevitably required. | FONTSIZE="30px" | | FONTWEIGHT | Font weight. Available values: "normal" or "bold". | FONTWEIGHT="bold" | -| LEFT | Tooltip positioned on the left side of the mousepointer.| LEFT="true" | +| LEFT | Tooltip positioned on the left side of the mousepointer. | LEFT="true" | | OFFSETX | Horizontal offset from mouse-pointer. | OFFSETX="32" | | OFFSETY | Vertical offset from mouse-pointer. | OFFSETY="32" | -| OPACITY | Transparency of tooltip. Opacity is the opposite of transparency. Value must be a number between 0 (fully transparent) and 100 (opaque, no transparency). Not (yet) supported by Opera.| OPACITY="50" | +| OPACITY | Transparency of tooltip. Opacity is the opposite of transparency. Value must be a number between 0 (fully transparent) and 100 (opaque, no transparency). Not (yet) supported by Opera. | OPACITY="50" | | PADDING | Inner spacing, i.e. the spacing between border and content, for instance text or image(s). | PADDING="5" | | SHADOWCOLOR | Creates shadow with the specified color. Shadow width (strength) will be automatically processed to 3 (pixels) if no global shadow width setting can be found in in wz_tooltip.js, and the concerned html tag doesn"t contain a SHADOWWIDTH command. | SHADOWCOLOR="#ccaacc" | | SHADOWWIDTH | Creates shadow with the specified width (strength). | SHADOWWIDTH="6" | | STATIC | Like OS-based tooltips, the tooltip doesn"t follow the movements of the mouse-pointer. | STATIC="true" | | STICKY | The tooltip stays fixed on it's initial position until another tooltip is activated, or the user clicks on the document. | STICKY="true" | -| TEMP | Specifies a time span in milliseconds after which the tooltip disappears, even if the mousepointer is still on the concerned HTML element, or if the STICKY command has been applied. Values <=0 make the tooltip behave "normally" as if no time span had been specified. | TEMP="3500" | +| TEMP | Specifies a time span in milliseconds after which the tooltip disappears, even if the mousepointer is still on the concerned HTML element, or if the STICKY command has been applied. Values <=0 make the tooltip behave "normally" as if no time span had been specified. | TEMP="3500" | | TEXTALIGN | Aligns the text of both the title and the body of the tooltip. Values must be included in single quotes and can be either 'right', 'justify' or 'left', the latter being unnecessary since it is the preset default value. | TEXTALIGN="right" | | TITLE | Title. Text in single quotes. Background color is automatically the same as the border color. | TITLE="Some title" | | TITLECOLOR | Color of title text. | TITLECOLOR="#ff6666" | | WIDTH | Width of tooltip. | WIDTH="200" | -| TEXT | <nop>ToolTip text. | | -| INCLUDE | Topic containing <nop>ToolTip text (like TWiki INCLUDE feature). | | ---++ General Settings - * One line description, shown in the %TWIKIWEB%.TextFormattingRules topic: - * Set SHORTDESCRIPTION = create Tool Tips for links + * One line description, shown in the %TWIKIWEB%.TextFormattingRules topic: + * Set SHORTDESCRIPTION = create Tool Tips for links - * Debug plugin: (See output in =data/debug.txt=) - * Set DEBUG = 0 + * Debug plugin: (See output in =data/debug.txt=) + * Set DEBUG = 0 ---++ Plugin Installation Instructions -__Note:__ You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running. +__Note:__ You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running. * Download the ZIP file from the Plugin web (see below) - * Unzip ==%TOPIC%.zip== in your twiki installation directory. Content: - | *File:* | *Description:* | - | ==data/TWiki/%TOPIC%.txt== | Plugin topic | - | ==lib/TWiki/Plugins/%TOPIC%.pm== | Plugin Perl module | - | ==pub/TWiki/ToolTipPlugin/ToolTipBackground.jpg== | sample image | - | ==pub/TWiki/ToolTipPlugin/ToolTipPhoto.gif== | sample image | - | ==pub/TWiki/ToolTipPlugin/wz_tooltip.js== | wz tooltip library | + * Unzip *%TOPIC%.zip* in your twiki installation directory. Content: +| *File:* | *Description:* | +| ==data/TWiki/%TOPIC%.txt== | Plugin topic | +| ==lib/TWiki/Plugins/%TOPIC%.pm== | Plugin Perl module | +| ==pub/TWiki/ToolTipPlugin/ToolTipBackground.jpg== | sample image | +| ==pub/TWiki/ToolTipPlugin/ToolTipPhoto.gif== | sample image | +| ==pub/TWiki/ToolTipPlugin/wz_tooltip.js== | wz tooltip library | +*Note:* ==pub/TWiki/ToolTipPlugin/wz_tooltip.js== has been left with the default debug parameter enabled. The script recommends that the parameter be set to false when debugging of tooltips is no longer necessary. ==var tt_Debug = true== + * Test if the installation was successful: +---+++ Testing the plugin The same tooltip is displayed if Plugin is installed and not: --- -With plugin : -%TOOLTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}% + With plugin : + +*Write:* =%TOO%NOP%LTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOW="true" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}%= put your mouse here, you should see a tooltip =%TOO%NOP%LTIP{END}= + +*See:* %TOOLTIP{TEXT="Whaoooo !" FONTCOLOR="#336699" TITLE="Nice tooltip, no ?" SHADOW="true" SHADOWCOLOR="#ccaacc" FONTSIZE="18px"}% put your mouse here, you should see a tooltip %TOOLTIP{END}% --- -Without plugin : -<a border="0" href="javascript:void(0);" onmouseover=" this.T_FONTCOLOR='#336699'; this.T_TITLE='Nice tooltip, no ?'; this.T_SHADOWCOLOR='#ccaacc'; this.T_FONTSIZE='18px';return escape('Whaoooo !')"> put you mouse here, you should see a tooltip </A>. + Without plugin : <a border="0" href="javascript:void(0);" onmouseover="Tip('Whaoooo !', FONTCOLOR, '#336699', TITLE, 'Nice tooltip, no ?', SHADOWCOLOR, '#ccaacc', SHADOW, 'true', FONTSIZE, '18px' )" onmouseout="UnTip()"> put you mouse here, you should see a tooltip </A>. --- ---++ Plugin Info | Plugin Author: | TWiki:Main/PatrickNomblot | | Plugin Version: | 1.3 | -| Change History: | | +| Change History: | | +| 28 Aug 2008 | TWiki:Main/GeorgeClark: TWikibug:Item5966: Syntax changed for calling wz_tooltip.js, updated to =wz_tooltip.js= V5.20, reworked documentation, .js file only included when %TOOLTIP is present in the topic. | | 15 Apr 2006 | TWiki:Main/SteffenPoulsen: Updated with new version of =wz_tooltip.js= (updated browser support), support for Dakar, cleaned up doc a bit | | 21 Nov 2003 | TWiki:Main/PatrickNomblot: Initial version | | 10 Sep 2004 | TWiki:Main/PatrickNomblot: tooltip text can comes from any TOPIC | -| 29 Dec 2005 | TWiki:Main/AndreUlrich: updated to wz_tooltip.js v. 3.38; added further parameters| +| 29 Dec 2005 | TWiki:Main/AndreUlrich: updated to wz_tooltip.js v. 3.38; added further parameters | | CPAN Dependencies: | none | | Other Dependencies: | ?? | | Perl Version: | 5.6 | @@ -108,4 +120,3 @@ __Related Topics:__ %TWIKIWEB%.TWikiPreferences, %TWIKIWEB%.TWikiPlugins -- TWiki:Main/PatrickNomblot - 21 Nov 2003 - Modified: twiki/trunk/ToolTipPlugin/lib/TWiki/Plugins/ToolTipPlugin.pm =================================================================== --- twiki/trunk/ToolTipPlugin/lib/TWiki/Plugins/ToolTipPlugin.pm 2008-08-28 21:47:45 UTC (rev 17463) +++ twiki/trunk/ToolTipPlugin/lib/TWiki/Plugins/ToolTipPlugin.pm 2008-08-29 03:09:48 UTC (rev 17464) @@ -37,7 +37,7 @@ # This is a free-form string you can use to "name" your own plugin version. # It is *not* used by the build automation tools, but is reported as part # of the version number in PLUGINDESCRIPTIONS. -$RELEASE = 'Dakar'; +$RELEASE = '1.4'; $pluginName = 'ToolTipPlugin'; # Name of this Plugin @@ -74,7 +74,7 @@ # this search and replace could be made more robust if this were ever called more than once # (more than once with the </body> tag in the text, that is) - $_[0] =~ s|(</body>)|<script type="text/javascript" src="$TWiki::cfg{DefaultUrlHost}$TWiki::cfg{PubUrlPath}/$TWiki::cfg{SystemWebName}/$pluginName/wz_tooltip.js"></script>$1|; + $_[0] =~ s|(</body>)|<script type="text/javascript" src="$TWiki::cfg{DefaultUrlHost}$TWiki::cfg{PubUrlPath}/$TWiki::cfg{SystemWebName}/$pluginName/wz_tooltip.js"></script>$1| if ($ToolTipID); } sub handleToolTip @@ -103,14 +103,15 @@ my $theTARGET = &TWiki::Func::extractNameValuePair( "$attr", "TARGET" ) || ""; - $attr =~ s/INCLUDE\s*=\s*\"([^\"]*)\"//g; - $attr =~ s/URL\s*=\s*\"([^\"]*)\"//g; - $attr =~ s/TARGET\s*=\s*\"([^\"]*)\"//g; - $attr =~ s/TEXT\s*=\s*\"([^\"]*)\"//g; - $attr =~ s/(\S+)\s*=\s*\"([^\"]*)\"/this.T_$1=\'$2\';/g; + $attr =~ s/INCLUDE\s*=\s*\"([^\"]*)\"//g; # remove INCLUDE from attributes + $attr =~ s/URL\s*=\s*\"([^\"]*)\"//g; # remove URL from attributes + $attr =~ s/TARGET\s*=\s*\"([^\"]*)\"//g; # remove TARGET from attributes + $attr =~ s/TEXT\s*=\s*\"([^\"]*)\"//g; # remove TEXT from attributes + $attr =~ s/(\S+)\s*=\s*\"([^\"]*)\"/$1, \'$2\',/g; # Convert each parameter to Tip format "ATTR, VALUE" + $attr =~ s/\s+$//; # Strip any trailing spaces + $attr =~ s/, \'(\d+)\',/, $1,/g; # Strip quotes from decimal parameters + chop($attr) if (substr($attr,-1) eq ","); # and any trailing comma - $attr =~ s/=\'(\d+)\'/=$1/g; # For decimal values, remove quotes - if ( $TextInclude ) { TWiki::Func::writeDebug( "topic : $TextInclude"); @@ -135,8 +136,10 @@ { $out.="target=\"$theTARGET\""; } - $out.= " onmouseover=\"$attr;return escape('$theText')\">"; + $out.= " onmouseover=\"Tip('$theText', $attr)\" onmouseout=\"UnTip()\">"; + TWiki::Func::writeDebug( "topic : $out"); + $ToolTipID+=1; $ToolTipOpened+=1; } Modified: twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/ToolTipBackground.jpg =================================================================== (Binary files differ) Modified: twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/wz_tooltip.js =================================================================== --- twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/wz_tooltip.js 2008-08-28 21:47:45 UTC (rev 17463) +++ twiki/trunk/ToolTipPlugin/pub/TWiki/ToolTipPlugin/wz_tooltip.js 2008-08-29 03:09:48 UTC (rev 17464) @@ -1,22 +1,30 @@ /* This notice must be untouched at all times. +Copyright (c) 2002-2008 Walter Zorn. All rights reserved. -wz_tooltip.js v. 3.38 +wz_tooltip.js v. 5.20 The latest version is available at http://www.walterzorn.com or http://www.devira.com or http://www.walterzorn.de -Copyright (c) 2002-2005 Walter Zorn. All rights reserved. -Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com ) -Last modified: 9. 12. 2005 +Created 1.12.2002 by Walter Zorn (Web: http://www.walterzorn.com ) +Last modified: 1.8.2008 -Cross-browser tooltips working even in Opera 5 and 6, -as well as in NN 4, Gecko-Browsers, IE4+, Opera 7+ and Konqueror. -No onmouseouts required. -Appearance of tooltips can be individually configured -via commands within the onmouseovers. +Easy-to-use cross-browser tooltips. +Just include the script at the beginning of the <body> section, and invoke +Tip('Tooltip text') to show and UnTip() to hide the tooltip, from the desired +HTML eventhandlers. Example: +<a onmouseover="Tip('Some text')" onmouseout="UnTip()" href="index.htm">My home page</a> +No container DIV required. +By default, width and height of tooltips are automatically adapted to content. +Is even capable of dynamically converting arbitrary HTML elements to tooltips +by calling TagToTip('ID_of_HTML_element_to_be_converted') instead of Tip(), +which means you can put important, search-engine-relevant stuff into tooltips. +Appearance & behaviour of tooltips can be individually configured +via commands passed to Tip() or TagToTip(). +Tab Width: 4 LICENSE: LGPL This library is free software; you can redistribute it and/or @@ -32,447 +40,1246 @@ see http://www.gnu.org/copyleft/lesser.html */ +var config = new Object(); -//////////////// GLOBAL TOOPTIP CONFIGURATION ///////////////////// -var ttAbove = false; // tooltip above mousepointer? Alternative: true -var ttBgColor = "#e6ecff"; -var ttBgImg = ""; // path to background image; -var ttBorderColor = "#003399"; -var ttBorderWidth = 1; -var ttDelay = 500; // time span until tooltip shows up [milliseconds] -var ttFontColor = "#000066"; -var ttFontFace = "arial,helvetica,sans-serif"; -var ttFontSize = "11px"; -var ttFontWeight = "normal"; // alternative: "bold"; -var ttLeft = false; // tooltip on the left of the mouse? Alternative: true -var ttOffsetX = 12; // horizontal offset of left-top corner from mousepointer -var ttOffsetY = 15; // vertical offset " -var ttOpacity = 100; // opacity of tooltip in percent (must be integer between 0 and 100) -var ttPadding = 3; // spacing between border and content -var ttShadowColor = ""; -var ttShadowWidth = 0; -var ttStatic = false; // tooltip NOT move with the mouse? Alternative: true -var ttSticky = false; // do NOT hide tooltip on mouseout? Alternative: true -var ttTemp = 0; // time span after which the tooltip disappears; 0 (zero) means "infinite timespan" -var ttTextAlign = "left"; -var ttTitleColor = "#ffffff"; // color of caption text -var ttWidth = 300; -//////////////////// END OF TOOLTIP CONFIG //////////////////////// +//=================== GLOBAL TOOPTIP CONFIGURATION =========================// +var tt_Debug = true // false or true - recommended: false once you release your page to the public +var tt_Enabled = true // Allows to (temporarily) suppress tooltips, e.g. by providing the user with a button that sets this global variable to false +var TagsToTip = true // false or true - if true, HTML elements to be converted to tooltips via TagToTip() are automatically hidden; + // if false, you should hide those HTML elements yourself +// For each of the following config variables there exists a command, which is +// just the variablename in uppercase, to be passed to Tip() or TagToTip() to +// configure tooltips individually. Individual commands override global +// configuration. Order of commands is arbitrary. +// Example: onmouseover="Tip('Tooltip text', LEFT, true, BGCOLOR, '#FF9900', FADEIN, 400)" +config. Above = false // false or true - tooltip above mousepointer +config. BgColor = '#E2E7FF' // Background colour (HTML colour value, in quotes) +config. BgImg = '' // Path to background image, none if empty string '' +config. BorderColor = '#003099' +config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed' +config. BorderWidth = 1 +config. CenterMouse = false // false or true - center the tip horizontally below (or above) the mousepointer +config. ClickClose = false // false or true - close tooltip if the user clicks somewhere +config. ClickSticky = false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active +config. CloseBtn = false // false or true - closebutton in titlebar +config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours +config. CloseBtnText = ' X ' // Close button text (may also be an image tag) +config. CopyContent = true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own +config. Delay = 400 // Time span in ms until tooltip shows up +config. Duration = 0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms _after_ the onmouseout until the tooltip disappears +config. FadeIn = 0 // Fade-in duration in ms, e.g. 400; 0 for no animation +config. FadeOut = 0 +config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load +config. Fix = null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning. +config. FollowMouse = true // false or true - tooltip follows the mouse +config. FontColor = '#000044' +config. FontFace = 'Verdana,Geneva,sans-serif' +config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatory +config. FontWeight = 'normal' // 'normal' or 'bold'; +config. Height = 0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption +config. JumpHorz = false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary +config. JumpVert = true // false or true - jump vertically " +config. Left = false // false or true - tooltip on the left of the mouse +config. OffsetX = 14 // Horizontal offset of left-top corner from mousepointer +config. OffsetY = 8 // Vertical offset +config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent +config. Padding = 3 // Spacing between border and content +config. Shadow = false // false or true +config. ShadowColor = '#C0C0C0' +config. ShadowWidth = 5 +config. Sticky = false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout +config. TextAlign = 'left' // 'left', 'right' or 'justify' +config. Title = '' // Default title text applied to all tips (no default title: empty string '') +config. TitleAlign = 'left' // 'left' or 'right' - text alignment inside the title bar +config. TitleBgColor = '' // If empty string '', BorderColor will be used +config. TitleFontColor = '#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used +config. TitleFontFace = '' // If '' use FontFace (boldified) +config. TitleFontSize = '' // If '' use FontSize +config. TitlePadding = 2 +config. Width = 0 // Tooltip width; 0 for automatic adaption to tooltip content; < -1 (e.g. -240) for a maximum width for that automatic adaption; + // -1: tooltip width confined to the width required for the titlebar +//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============// -////////////// TAGS WITH TOOLTIP FUNCTIONALITY //////////////////// -// List may be extended or shortened: -var tt_tags = new Array("a","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s", "select", "small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer"); -///////////////////////////////////////////////////////////////////// -///////// DON'T CHANGE ANYTHING BELOW THIS LINE ///////////////////// -var tt_obj = null, // current tooltip -tt_ifrm = null, // iframe to cover windowed controls in IE -tt_objW = 0, tt_objH = 0, // width and height of tt_obj -tt_objX = 0, tt_objY = 0, -tt_offX = 0, tt_offY = 0, -xlim = 0, ylim = 0, // right and bottom borders of visible client area -tt_sup = false, // true if T_ABOVE cmd -tt_sticky = false, // tt_obj sticky? -tt_wait = false, -tt_act = false, // tooltip visibility flag -tt_sub = false, // true while tooltip below mousepointer -tt_u = "undefined", -tt_mf = null, // stores previous mousemove evthandler -// Opera: disable href when hovering <a> -tt_tag = null; // stores hovered dom node, href and previous statusbar txt +//===================== PUBLIC =============================================// +function Tip() +{ + tt_Tip(arguments, null); +} +function TagToTip() +{ + var t2t = tt_GetElt(arguments[0]); + if(t2t) + tt_Tip(arguments, t2t); +} +function UnTip() +{ + tt_OpReHref(); + if(tt_aV[DURATION] < 0 && (tt_iState & 0x2)) + tt_tDurt.Timer("tt_HideInit()", -tt_aV[DURATION], true); + else if(!(tt_aV[STICKY] && (tt_iState & 0x2))) + tt_HideInit(); +} +//================== PUBLIC PLUGIN API =====================================// +// Extension eventhandlers currently supported: +// OnLoadConfig, OnCreateContentString, OnSubDivsCreated, OnShow, OnMoveBefore, +// OnMoveAfter, OnHideInit, OnHide, OnKill -var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null, -tt_n = navigator.userAgent.toLowerCase(), -tt_nv = navigator.appVersion; -// Browser flags -var tt_op = !!(window.opera && document.getElementById), -tt_op6 = tt_op && !document.defaultView, -tt_op7 = tt_op && !tt_op6, -tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op, -tt_ie6 = tt_ie && parseFloat(tt_nv.substring(tt_nv.indexOf("MSIE")+5)) >= 5.5, -tt_n4 = (document.layers && typeof document.classes != tt_u), -tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u), -tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById; +var tt_aElt = new Array(10), // Container DIV, outer title & body DIVs, inner title & body TDs, closebutton SPAN, shadow DIVs, and IFRAME to cover windowed elements in IE +tt_aV = new Array(), // Caches and enumerates config data for currently active tooltip +tt_sContent, // Inner tooltip text or HTML +tt_t2t, tt_t2tDad, // Tag converted to tip, and its DOM parent element +tt_scrlX = 0, tt_scrlY = 0, +tt_musX, tt_musY, +tt_over, +tt_x, tt_y, tt_w, tt_h; // Position, width and height of currently displayed tooltip -function tt_Int(t_x) +function tt_Extension() { - var t_y; - return isNaN(t_y = parseInt(t_x))? 0 : t_y; + tt_ExtCmdEnum(); + tt_aExt[tt_aExt.length] = this; + return this; } -function wzReplace(t_x, t_y) +function tt_SetTipPos(x, y) { - var t_ret = "", - t_str = this, - t_xI; - while((t_xI = t_str.indexOf(t_x)) != -1) + var css = tt_aElt[0].style; + + tt_x = x; + tt_y = y; + css.left = x + "px"; + css.top = y + "px"; + if(tt_ie56) { - t_ret += t_str.substring(0, t_xI) + t_y; - t_str = t_str.substring(t_xI + t_x.length); + var ifrm = tt_aElt[tt_aElt.length - 1]; + if(ifrm) + { + ifrm.style.left = css.left; + ifrm.style.top = css.top; + } } - return t_ret+t_str; } -String.prototype.wzReplace = wzReplace; -function tt_N4Tags(tagtyp, t_d, t_y) +function tt_HideInit() { - t_d = t_d || document; - t_y = t_y || new Array(); - var t_x = (tagtyp=="a")? t_d.links : t_d.layers; - for(var z = t_x.length; z--;) t_y[t_y.length] = t_x[z]; - for(z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y); - return t_y; + if(tt_iState) + { + tt_ExtCallFncs(0, "HideInit"); + tt_iState &= ~0x4; + if(tt_flagOpa && tt_aV[FADEOUT]) + { + tt_tFade.EndTimer(); + if(tt_opa) + { + var n = Math.round(tt_aV[FADEOUT] / (tt_aV[FADEINTERVAL] * (tt_aV[OPACITY] / tt_opa))); + tt_Fade(tt_opa, tt_opa, 0, n); + return; + } + } + tt_tHide.Timer("tt_Hide();", 1, false); + } } -function tt_Htm(tt, t_id, txt) +function tt_Hide() { - var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor, - t_bgimg = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg, - t_bc = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor, - t_bw = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth, - t_ff = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace, - t_fc = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor, - t_fsz = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize, - t_fwght = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight, - t_opa = (typeof tt.T_OPACITY != tt_u)? tt.T_OPACITY : ttOpacity, - t_padd = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding, - t_shc = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0), - t_shw = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0), - t_algn = (typeof tt.T_TEXTALIGN != tt_u)? tt.T_TEXTALIGN : ttTextAlign, - t_tit = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : "", - t_titc = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor, - t_w = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH : ttWidth; - if(t_shc || t_shw) + if(tt_db && tt_iState) { - t_shc = t_shc || "#cccccc"; - t_shw = t_shw || 5; + tt_OpReHref(); + if(tt_iState & 0x2) + { + tt_aElt[0].style.visibility = "hidden"; + tt_ExtCallFncs(0, "Hide"); + } + tt_tShow.EndTimer(); + tt_tHide.EndTimer(); + tt_tDurt.EndTimer(); + tt_tFade.EndTimer(); + if(!tt_op && !tt_ie) + { + tt_tWaitMov.EndTimer(); + tt_bWait = false; + } + if(tt_aV[CLICKCLOSE] || tt_aV[CLICKSTICKY]) + tt_RemEvtFnc(document, "mouseup", tt_OnLClick); + tt_ExtCallFncs(0, "Kill"); + // In case of a TagToTip tip, hide converted DOM node and + // re-insert it into DOM + if(tt_t2t && !tt_aV[COPYCONTENT]) + tt_UnEl2Tip(); + tt_iState = 0; + tt_over = null; + tt_ResetMainDiv(); + if(tt_aElt[tt_aElt.length - 1]) + tt_aElt[tt_aElt.length - 1].style.display = "none"; } - if(tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px"; +} +function tt_GetElt(id) +{ + return(document.getElementById ? document.getElementById(id) + : document.all ? document.all[id] + : null); +} +function tt_GetDivW(el) +{ + return(el ? (el.offsetWidth || el.style.pixelWidth || 0) : 0); +} +function tt_GetDivH(el) +{ + return(el ? (el.offsetHeight || el.style.pixelHeight || 0) : 0); +} +function tt_GetScrollX() +{ + return(window.pageXOffset || (tt_db ? (tt_db.scrollLeft || 0) : 0)); +} +function tt_GetScrollY() +{ + return(window.pageYOffset || (tt_db ? (tt_db.scrollTop || 0) : 0)); +} +function tt_GetClientW() +{ + var de = document.documentElement; + return((de && de.clientWidth) ? de.clientWidth : (document.body.clientWidth || window.innerWidth || 0)); +} +function tt_GetClientH() +{ + var de = document.documentElement; + return((de && de.clientHeight) ? de.clientHeight : (document.body.clientHeight || window.innerHeight || 0)); +} +function tt_GetEvtX(e) +{ + return (e ? ((typeof(e.pageX) != tt_u) ? e.pageX : (e.clientX + tt_scrlX)) : 0); +} +function tt_GetEvtY(e) +{ + return (e ? ((typeof(e.pageY) != tt_u) ? e.pageY : (e.clientY + tt_scrlY)) : 0); +} +function tt_AddEvtFnc(el, sEvt, PFnc) +{ + if(el) + { + if(el.addEventListener) + el.addEventListener(sEvt, PFnc, false); + else + el.attachEvent("on" + sEvt, PFnc); + } +} +function tt_RemEvtFnc(el, sEvt, PFnc) +{ + if(el) + { + if(el.removeEventListener) + el.removeEventListener(sEvt, PFnc, false); + else + el.detachEvent("on" + sEvt, PFnc); + } +} +function tt_GetDad(el) +{ + return(el.parentNode || el.parentElement || el.offsetParent); +} +function tt_MovDomNode(el, dadFrom, dadTo) +{ + if(dadFrom) + dadFrom.removeChild(el); + if(dadTo) + dadTo.appendChild(el); +} - var t_optx = (tt_n4? '' : tt_n6? ('-moz-opacity:'+(t_opa/100.0)) : tt_ie? ('filter:Alpha(opacity='+t_opa+')') : ('opacity:'+(t_opa/100.0))) + ';'; - var t_y = '<div id="'+t_id+'" style="position:absolute;z-index:1010;'; - t_y += 'left:0px;top:0px;width:'+(t_w+t_shw)+'px;visibility:'+(tt_n4? 'hide' : 'hidden')+';'+t_optx+'">' + - '<table border="0" cellpadding="0" cellspacing="0"'+(t_bc? (' bgcolor="'+t_bc+'" style="background:'+t_bc+';"') : '')+' width="'+t_w+'">'; - if(t_tit) +//====================== PRIVATE ===========================================// +var tt_aExt = new Array(), // Array of extension objects + +tt_db, tt_op, tt_ie, tt_ie56, tt_bBoxOld, // Browser flags +tt_body, +tt_ovr_, // HTML element the mouse is currently over +tt_flagOpa, // Opacity support: 1=IE, 2=Khtml, 3=KHTML, 4=Moz, 5=W3C +tt_maxPosX, tt_maxPosY, +tt_iState = 0, // Tooltip active |= 1, shown |= 2, move with mouse |= 4 +tt_opa, // Currently applied opacity +tt_bJmpVert, tt_bJmpHorz,// Tip temporarily on other side of mouse +tt_elDeHref, // The tag from which we've removed the href attribute +// Timer +tt_tShow = new Number(0), tt_tHide = new Number(0), tt_tDurt = new Number(0), +tt_tFade = new Number(0), tt_tWaitMov = new Number(0), +tt_bWait = false, +tt_u = "undefined"; + + +function tt_Init() +{ + tt_MkCmdEnum(); + // Send old browsers instantly to hell + if(!tt_Browser() || !tt_MkMainDiv()) + return; + // Levy 06/11/2008: Important! IE doesn't fire an onscroll when a page + // refresh is made, so we need to recalc page positions on init. + tt_OnScrl(); + tt_IsW3cBox(); + tt_OpaSupport(); + tt_AddEvtFnc(window, "scroll", tt_OnScrl); + // IE doesn't fire onscroll event when switching to fullscreen; + // fix suggested by Yoav Karpeles 14.2.2008 + tt_AddEvtFnc(window, "resize", tt_OnScrl); + tt_AddEvtFnc(document, "mousemove", tt_Move); + // In Debug mode we search for TagToTip() calls in order to notify + // the user if they've forgotten to set the TagsToTip config flag + if(TagsToTip || tt_Debug) + tt_SetOnloadFnc(); + // Ensure the tip be hidden when the page unloads + tt_AddEvtFnc(window, "unload", tt_Hide); +} +// Creates command names by translating config variable names to upper case +function tt_MkCmdEnum() +{ + var n = 0; + for(var i in config) + eval("window." + i.toString().toUpperCase() + " = " + n++); + tt_aV.length = n; +} +function tt_Browser() +{ + var n, nv, n6, w3c; + + n = navigator.userAgent.toLowerCase(), + nv = navigator.appVersion; + tt_op = (document.defaultView && typeof(eval("w" + "indow" + "." + "o" + "p" + "er" + "a")) != tt_u); + tt_ie = n.indexOf("msie") != -1 && document.all && !tt_op; + if(tt_ie) { - t_y += '<tr><td style="padding-left:3px;padding-right:3px;" align="'+t_algn+'"><font color="'+t_titc+'" face="'+t_ff+'" ' + - 'style="color:'+t_titc+';font-family:'+t_ff+';font-size:'+t_fsz+';"><b>' + - (tt_n4? ' ' : '')+t_tit+'</b></font></td></tr>'; + var ieOld = (!document.compatMode || document.compatMode == "BackCompat"); + tt_db = !ieOld ? document.documentElement : (document.body || null); + if(tt_db) + tt_ie56 = parseFloat(nv.substring(nv.indexOf("MSIE") + 5)) >= 5.5 + && typeof document.body.style.maxHeight == tt_u; } - t_y += '<tr><td><table border="0" cellpadding="'+t_padd+'" cellspacing="'+t_bw+'" width="100%">' + - '<tr><td'+(t_bgc? (' bgcolor="'+t_bgc+'"') : '')+(t_bgimg? ' background="'+t_bgimg+'"' : '')+' style="text-align:'+t_algn+';'; - if(tt_n6) t_y += 'padding:'+t_padd+'px;'; - t_y += '" align="'+t_algn+'"><font color="'+t_fc+'" face="'+t_ff+'"' + - ' style="color:'+t_fc+';font-family:'+t_ff+';font-size:'+t_fsz+';font-weight:'+t_fwght+';">'; - if(t_fwght == 'bold') t_y += '<b>'; - t_y += txt; - if(t_fwght == 'bold') t_y += '</b>'; - t_y += '</font></td></tr></table></td></tr></table>'; - if(t_shw) + else { - var t_spct = Math.round(t_shw*1.3); - if(tt_n4) + tt_db = document.documentElement || document.body || + (document.getElementsByTagName ? document.getElementsByTagName("body")[0] + : null); + if(!tt_op) { - t_y += '<layer bgcolor="'+t_shc+'" left="'+t_w+'" top="'+t_spct+'" width="'+t_shw+'" height="0"></layer>' + - '<layer bgcolor="'+t_shc+'" left="'+t_spct+'" align="bottom" width="'+(t_w-t_spct)+'" height="'+t_shw+'"></layer>'; + n6 = document.defaultView && typeof document.defaultView.getComputedStyle != tt_u; + w3c = !n6 && document.getElementById; } - else + } + tt_body = (document.getElementsByTagName ? document.getElementsByTagName("body")[0] + : (document.body || null)); + if(tt_ie || n6 || tt_op || w3c) + { + if(tt_body && tt_db) { - t_optx = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : 'opacity:0.85;'; - t_y += '<div id="'+t_id+'R" style="position:absolute;background:'+t_shc+';left:'+t_w+'px;top:'+t_spct+'px;width:'+t_shw+'px;height:1px;overflow:hidden;'+t_optx+'"></div>' + - '<div style="position:relative;background:'+t_shc+';left:'+t_spct+'px;top:0px;width:'+(t_w-t_spct)+'px;height:'+t_shw+'px;overflow:hidden;'+t_optx+'"></div>'; + if(document.attachEvent || document.addEventListener) + return true; } + else + tt_Err("wz_tooltip.js must be included INSIDE the body section," + + " immediately after the opening <body> tag.", false); } - return(t_y+'</div>' + - (tt_ie6 ? '<iframe id="TTiEiFrM" src="javascript:false" scrolling="no" frameborder="0" style="filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;display:none;"></iframe>' : '')); + tt_db = null; + return false; } -function tt_EvX(t_e) +function tt_MkMainDiv() { - var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) + - tt_Int(tt_ie? tt_db.scrollLeft : 0) + - tt_offX; - if(t_y > xlim) t_y = xlim; - var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0); - if(t_y < t_scr) t_y = t_scr; - return t_y; + // Create the tooltip DIV + if(tt_body.insertAdjacentHTML) + tt_body.insertAdjacentHTML("afterBegin", tt_MkMainDivHtm()); + else if(typeof tt_body.innerHTML != tt_u && document.createElement && tt_body.appendChild) + tt_body.appendChild(tt_MkMainDivDom()); + if(window.tt_GetMainDivRefs /* FireFox Alzheimer */ && tt_GetMainDivRefs()) + return true; + tt_db = null; + return false; } -function tt_EvY(t_e) +function tt_MkMainDivHtm() { - var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) + - tt_Int(tt_ie? tt_db.scrollTop : 0); - if(tt_sup) t_y -= (tt_objH + tt_offY - 15); - else if(t_y > ylim || !tt_sub && t_y > ylim-24) + return('<div id="WzTtDiV"></div>' + + (tt_ie56 ? ('<iframe id="WzTtIfRm" src="javascript:false" scrolling="no" frameborder="0" style="filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;display:none;"></iframe>') + : '')); +} +function tt_MkMainDivDom() +{ + var el = document.createElement("div"); + if(el) + el.id = "WzTtDiV"; + return el; +} +function tt_GetMainDivRefs() +{ + tt_aElt[0] = tt_GetElt("WzTtDiV"); + if(tt_ie56 && tt_aElt[0]) { - t_y -= (tt_objH + 5); - tt_sub = false; + tt_aElt[tt_aElt.length - 1] = tt_GetElt("WzTtIfRm"); + if(!tt_aElt[tt_aElt.length - 1]) + tt_aElt[0] = null; } + if(tt_aElt[0]) + { + var css = tt_aElt[0].style; + + css.visibility = "hidden"; + css.position = "absolute"; + css.overflow = "hidden"; + return true; + } + return false; +} +function tt_ResetMainDiv() +{ + tt_SetTipPos(0, 0); + tt_aElt[0].innerHTML = ""; + tt_aElt[0].style.width = "auto"; + tt_h = 0; +} +function tt_IsW3cBox() +{ + var css = tt_aElt[0].style; + + css.padding = "10px"; + css.width = "40px"; + tt_bBoxOld = (tt_GetDivW(tt_aElt[0]) == 40); + css.padding = "0px"; + tt_ResetMainDiv(); +} +function tt_OpaSupport() +{ + var css = tt_body.style; + + tt_flagOpa = (typeof(css.KhtmlOpacity) != tt_u) ? 2 + : (typeof(css.KHTMLOpacity) != tt_u) ? 3 + : (typeof(css.MozOpacity) != tt_u) ? 4 + : (typeof(css.opacity) != tt_u) ? 5 + : (typeof(css.filter) != tt_u) ? 1 + : 0; +} +// Ported from http://dean.edwards.name/weblog/2006/06/again/ +// (Dean Edwards et al.) +function tt_SetOnloadFnc() +{ + tt_AddEvtFnc(document, "DOMContentLoaded", tt_HideSrcTags); + tt_AddEvtFnc(window, "load", tt_HideSrcTags); + if(tt_body.attachEvent) + tt_body.attachEvent("onreadystatechange", + function() { + if(tt_body.readyState == "complete") + tt_HideSrcTags(); + } ); + if(/WebKit|KHTML/i.test(navigator.userAgent)) + { + var t = setInterval(function() { + if(/loaded|complete/.test(document.readyState)) + { + clearInterval(t); + tt_HideSrcTags(); + } + }, 10); + } +} +function tt_HideSrcTags() +{ + if(!window.tt_HideSrcTags || window.tt_HideSrcTags.done) + return; + window.tt_HideSrcTags.done = true; + if(!tt_HideSrcTagsRecurs(tt_body)) + tt_Err("There are HTML elements to be converted to tooltips.\nIf you" + + " want these HTML elements to be automatically hidden, you" + + " must edit wz_tooltip.js, and set TagsToTip in the global" + + " tooltip configuration to true.", true); +} +function tt_HideSrcTagsRecurs(dad) +{ + var ovr, asT2t; + // Walk the DOM tree for tags that have an onmouseover or onclick attribute + // containing a TagToTip('...') call. + // (.childNodes first since .children is bugous in Safari) + var a = dad.childNodes || dad.children || null; + + for(var i = a ? a.length : 0; i;) + {--i; + if(!tt_HideSrcTagsRecurs(a[i])) + return false; + ovr = a[i].getAttribute ? (a[i].getAttribute("onmouseover") || a[i].getAttribute("onclick")) + : (typeof a[i].onmouseover == "function") ? (a[i].onmouseover || a[i].onclick) + : null; + if(ovr) + { + asT2t = ovr.toString().match(/TagToTip\s*\(\s*'[^'.]+'\s*[\),]/); + if(asT2t && asT2t.length) + { + if(!tt_HideSrcTag(asT2t[0])) + return false; + } + } + } + return true; +} +function tt_HideSrcTag(sT2t) +{ + var id, el; + + // The ID passed to the found TagToTip() call identifies an HTML element + // to be converted to a tooltip, so hide that element + id = sT2t.replace(/.+'([^'.]+)'.+/, "$1"); + el = tt_GetElt(id); + if(el) + { + if(tt_Debug && !TagsToTip) + return false; + else + el.style.display = "none"; + } else + tt_Err("Invalid ID\n'" + id + "'\npassed to TagToTip()." + + " There exists no HTML element with that ID.", true); + return true; +} +function tt_Tip(arg, t2t) +{ + if(!tt_db) + return; + if(tt_iState) + tt_Hide(); + if(!tt_Enabled) + return; + tt_t2t = t2t; + if(!tt_ReadCmds(arg)) + return; + tt_iState = 0x1 | 0x4; + tt_AdaptConfig1(); + tt_MkTipContent(arg); + tt_MkTipSubDivs(); + tt_FormatTip(); + tt_bJmpVert = false; + tt_bJmpHorz = false; + tt_maxPosX = tt_GetClientW() + tt_scrlX - tt_w - 1; + tt_maxPosY = tt_GetClientH() + tt_scrlY - tt_h - 1; + tt_AdaptConfig2(); + // Ensure the tip be shown and positioned before the first onmousemove + tt_OverInit(); + tt_ShowInit(); + tt_Move(); +} +function tt_ReadCmds(a) +{ + var i; + + // First load the global config values, to initialize also values + // for which no command is passed + i = 0; + for(var j in config) + tt_aV[i++] = config[j]; + // Then replace each cached config value for which a command is + // passed (ensure the # of command args plus value args be even) + if(a.length & 1) { - t_y += tt_offY; - tt_sub = true; + for(i = a.length - 1; i > 0; i -= 2) + tt_aV[a[i - 1]] = a[i]; + return true; } - return t_y; + tt_Err("Incorrect call of Tip() or TagToTip().\n" + + "Each command must be followed by a value.", true); + return false; } -function tt_ReleasMov() +function tt_AdaptConfig1() { - if(document.onmousemove == tt_Move) + tt_ExtCallFncs(0, "LoadConfig"); + // Inherit unspecified title formattings from body + if(!tt_aV[TITLEBGCOLOR].length) + tt_aV[TITLEBGCOLOR] = tt_aV[BORDERCOLOR]; + if(!tt_aV[TITLEFONTCOLOR].length) + tt_aV[TITLEFONTCOLOR] = tt_aV[BGCOLOR]; + if(!tt_aV[TITLEFONTFACE].length) + tt_aV[TITLEFONTFACE] = tt_aV[FONTFACE]; + if(!tt_aV[TITLEFONTSIZE].length) + tt_aV[TITLEFONTSIZE] = tt_aV[FONTSIZE]; + if(tt_aV[CLOSEBTN]) { - if(!tt_mf && document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE); - document.onmousemove = tt_mf; + // Use title colours for non-specified closebutton colours + if(!tt_aV[CLOSEBTNCOLORS]) + tt_aV[CLOSEBTNCOLORS] = new Array("", "", "", ""); + for(var i = 4; i;) + {--i; + if(!tt_aV[CLOSEBTNCOLORS][i].length) + tt_aV[CLOSEBTNCOLORS][i] = (i & 1) ? tt_aV[TITLEFONTCOLOR] : tt_aV[TITLEBGCOLOR]; + } + // Enforce titlebar be shown + if(!tt_aV[TITLE].length) + tt_aV[TITLE] = " "; } + // Circumvents broken display of images and fade-in flicker in Geckos < 1.8 + if(tt_aV[OPACITY] == 100 && typeof tt_aElt[0].style.MozOpacity != tt_u && !Array.every) + tt_aV[OPACITY] = 99; + // Smartly shorten the delay for fade-in tooltips + if(tt_aV[FADEIN] && tt_flagOpa && tt_aV[DELAY] > 100) + tt_aV[DELAY] = Math.max(tt_aV[DELAY] - tt_aV[FADEIN], 100); } -function tt_ShowIfrm(t_x) +function tt_AdaptConfig2() { - if(!tt_obj || !tt_ifrm) return; - if(t_x) + if(tt_aV[CENTERMOUSE]) { - tt_ifrm.style.width = tt_objW+'px'; - tt_ifrm.style.height = tt_objH+'px'; - tt_ifrm.style.display = "block"; + tt_aV[OFFSETX] -= ((tt_w - (tt_aV[SHADOW] ? tt_aV[SHADOWWIDTH] : 0)) >> 1); + tt_aV[JUMPHORZ] = false; } - else tt_ifrm.style.display = "none"; } -function tt_GetDiv(t_id) +// Expose content globally so extensions can modify it +function tt_MkTipContent(a) { - return( - tt_n4? (document.layers[t_id] || null) - : tt_ie? (document.all[t_id] || null) - : (document.getElementById(t_id) || null) - ); + if(tt_t2t) + { + if(tt_aV[COPYCONTENT]) + tt_sContent = tt_t2t.innerHTML; + else + tt_sContent = ""; + } + else + tt_sContent = a[0]; + tt_ExtCallFncs(0, "CreateContentString"); } -function tt_GetDivW() +function tt_MkTipSubDivs() { - return tt_Int( - tt_n4? tt_obj.clip.width - : (tt_obj.style.pixelWidth || tt_obj.offsetWidth) - ); + var sCss = 'position:relative;margin:0px;padding:0px;border-width:0px;left:0px;top:0px;line-height:normal;width:auto;', + sTbTrTd = ' cellspacing="0" cellpadding="0" border="0" style="' + sCss + '"><tbody style="' + sCss + '"><tr><td '; + + tt_aElt[0].innerHTML = + ('' + + (tt_aV[TITLE].length ? + ('<div id="WzTiTl" style="position:relative;z-index:1;">' + + '<table id="WzTiTlTb"' + sTbTrTd + 'id="WzTiTlI" style="' + sCss + '">' + + tt_aV[TITLE] + + '</td>' + + (tt_aV[CLOSEBTN] ? + ('<td align="right" style="' + sCss + + 'text-align:right;">' + + '<span id="WzClOsE" style="position:relative;left:2px;padding-left:2px;padding-right:2px;' + + 'cursor:' + (tt_ie ? 'hand' : 'pointer') + + ';" onmouseover="tt_OnCloseBtnOver(1)" onmouseout="tt_OnCloseBtnOver(0)" onclick="tt_HideInit()">' + + tt_aV[CLOSEBTNTEXT] + + '</span></td>') + : '') + + '</tr></tbody></table></div>') + : '') + + '<div id="WzBoDy" style="position:relative;z-index:0;">' + + '<table' + sTbTrTd + 'id="WzBoDyI" style="' + sCss + '">' + + tt_sContent + + '</td></tr></tbody></table></div>' + + (tt_aV[SHADOW] + ? ('<div id="WzTtShDwR" style="position:absolute;overflow:hidden;"></div>' + + '<div id="WzTtShDwB" style="position:relative;overflow:hidden;"></div>') + : '') + ); + tt_GetSubDivRefs(); + // Convert DOM node to tip + if(tt_t2t && !tt_aV[COPYCONTENT]) + tt_El2Tip(); + tt_ExtCallFncs(0, "SubDivsCreated"); } -function tt_GetDivH() +function tt_GetSubDivRefs() { - return tt_Int( - tt_n4? tt_obj.clip.height - : (tt_obj.style.pixelHeight || tt_obj.offsetHeight) - ); + var aId = new Array("WzTiTl", "WzTiTlTb", "WzTiTlI", "WzClOsE", "WzBoDy", "WzBoDyI", "WzTtShDwB", "WzTtShDwR"); + + for(var i = aId.length; i; --i) + tt_aElt[i] = tt_GetElt(aId[i - 1]); } +function tt_FormatTip() +{ + var css, w, h, pad = tt_aV[PADDING], padT, wBrd = tt_aV[BORDERWIDTH], + iOffY, iOffSh, iAdd = (pad + wBrd) << 1; -// Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element -function tt_SetDivZ() -{ - var t_i = tt_obj.style || tt_obj; - if(t_i) + //--------- Title DIV ---------- + if(tt_aV[TITLE].length) { - if(window.dd && dd.z) - t_i.zIndex = Math.max(dd.z+1, t_i.zIndex); - if(tt_ifrm) tt_ifrm.style.zIndex = t_i.zIndex-1; + padT = tt_aV[TITLEPADDING]; + css = tt_aElt[1].style; + css.background = tt_aV[TITLEBGCOLOR]; + css.paddingTop = css.paddingBottom = padT + "px"; + css.paddingLeft = css.paddingRight = (padT + 2) + "px"; + css = tt_aElt[3].style; + css.color = tt_aV[TITLEFONTCOLOR]; + if(tt_aV[WIDTH] == -1) + css.whiteSpace = "nowrap"; + css.fontFamily = tt_aV[TITLEFONTFACE]; + css.fontSize = tt_aV[TITLEFONTSIZE]; + css.fontWeight = "bold"; + css.textAlign = tt_aV[TITLEALIGN]; + // Close button DIV + if(tt_aElt[4]) + { + css = tt_aElt[4].style; + css.background = tt_aV[CLOSEBTNCOLORS][0]; + css.color = tt_aV[CLOSEBTNCOLORS][1]; + css.fontFamily = tt_aV[TITLEFONTFACE]; + css.fontSize = tt_aV[TITLEFONTSIZE]; + css.fontWeight = "bold"; + } + if(tt_aV[WIDTH] > 0) + tt_w = tt_aV[WIDTH]; + else + { + tt_w = tt_GetDivW(tt_aElt[3]) + tt_GetDivW(tt_aElt[4]); + // Some spacing between title DIV and closebutton + if(tt_aElt[4]) + tt_w += pad; + // Restrict auto width to max width + if(tt_aV[WIDTH] < -1 && tt_w > -tt_aV[WIDTH]) + tt_w = -tt_aV[WIDTH]; + } + // Ensure the top border of the body DIV be covered by the title DIV + iOffY = -wBrd; } + else + { + tt_w = 0; + iOffY = 0; + } + + //-------- Body DIV ------------ + css = tt_aElt[5].style; + css.top = iOffY + "px"; + if(wBrd) + { + css.borderColor = tt_aV[BORDERCOLOR]; + css.borderStyle = tt_aV[BORDERSTYLE]; + css.borderWidth = wBrd + "px"; + } + if(tt_aV[BGCOLOR].length) + css.background = tt_aV[BGCOLOR]; + if(tt_aV[BGIMG].length) + css.backgroundImage = "url(" + tt_aV[BGIMG] + ")"; + css.padding = pad + "px"; + css.textAlign = tt_aV[TEXTALIGN]; + if(tt_aV[HEIGHT]) + { + css.overflow = "auto"; + if(tt_aV[HEIGHT] > 0) + css.height = (tt_aV[HEIGHT] + iAdd) + "px"; + else + tt_h = iAdd - tt_aV[HEIGHT]; + } + // TD inside body DIV + css = tt_aElt[6].style; + css.color = tt_aV[FONTCOLOR]; + css.fontFamily = tt_aV[FONTFACE]; + css.fontSize = tt_aV[FONTSIZE]; + css.fontWeight = tt_aV[FONTWEIGHT]; + css.textAlign = tt_aV[TEXTALIGN]; + if(tt_aV[WIDTH] > 0) + w = tt_aV[WIDTH]; + // Width like title (if existent) + else if(tt_aV[WIDTH] == -1 && tt_w) + w = tt_w; + else + { + // Measure width of the body's inner TD, as some browsers would expand + // the container and outer body DIV to 100% + w = tt_GetDivW(tt_aElt[6]); + // Restrict auto width to max width + if(tt_aV[WIDTH] < -1 && w > -tt_aV[WIDTH]) + w = -tt_aV[WIDTH]; + } + if(w > tt_w) + tt_w = w; + tt_w += iAdd; + + //--------- Shadow DIVs ------------ + if(tt_aV[SHADOW]) + { + tt_w += tt_aV[SHADOWWIDTH]; + iOffSh = Math.floor((tt_aV[SHADOWWIDTH] * 4) / 3); + // Bottom shadow + css = tt_aElt[7].style; + css.top = iOffY + "px"; + css.left = iOffSh + "px"; + css.width = (tt_w - iOffSh - tt_aV[SHADOWWIDTH]) + "px"; + css.height = tt_aV[SHADOWWIDTH] + "px"; + css.background = tt_aV[SHADOWCOLOR]; + // Right shadow + css = tt_aElt[8].style; + css.top = iOffSh + "px"; + css.left = (tt... [truncated message content] |