diff --git a/docs/changelog/7.x.x.txt b/docs/changelog/7.x.x.txt index 0801c155d..e43dfdc5e 100644 --- a/docs/changelog/7.x.x.txt +++ b/docs/changelog/7.x.x.txt @@ -7,6 +7,7 @@ - add form element template variables for event user defined fields - fix: File Pile doesn't have save and commit button - fix: Anonymous user creation doesn't use default values for yes/no fields + - changed hover help to use YUI tooltips, fixes positioning issues 7.4.7 - fix: misspelled i18n in webgui password recovery diff --git a/lib/WebGUI/Form/Control.pm b/lib/WebGUI/Form/Control.pm index a77ed9f91..06c46943b 100644 --- a/lib/WebGUI/Form/Control.pm +++ b/lib/WebGUI/Form/Control.pm @@ -257,9 +257,10 @@ sub displayFormWithWrapper { my $self = shift; if ($self->passUiLevelCheck) { my ($fieldClass, $rowClass, $labelClass, $hoverHelp, $subtext) = $self->prepareWrapper; - return ' - '.$self->get("label").' - '.$self->displayForm().$subtext." + my $hoverCode = $self->getHoverCode($hoverHelp, $self->get('id') . '_wrapper'); + return ' + '.$self->get("label").' + '.$self->displayForm().$subtext.$hoverCode." \n"; } else { return $self->toHtmlAsHidden; @@ -542,18 +543,6 @@ sub prepareWrapper { my $fieldClass = $self->get("fieldClass"); $fieldClass = qq| class="$fieldClass" | if($self->get("fieldClass")); my $hoverHelp = $self->get("hoverHelp"); - $hoverHelp =~ s/\r/ /g; - $hoverHelp =~ s/\n/ /g; - $hoverHelp =~ s/&/& amp;/g; - $hoverHelp =~ s/>/& gt;/g; - $hoverHelp =~ s/</& lt;/g; - $hoverHelp =~ s/&/&/g; - $hoverHelp =~ s/>/>/g; - $hoverHelp =~ s/get("subtext"); $subtext = qq| $subtext| if ($subtext); return ($fieldClass, $rowClass, $labelClass, $hoverHelp, $subtext); @@ -636,9 +625,10 @@ sub toHtmlWithWrapper { if ($self->passUiLevelCheck) { my $rawField = $self->toHtml(); # has to be called before prepareWrapper for some controls, namely captcha. my ($fieldClass, $rowClass, $labelClass, $hoverHelp, $subtext) = $self->prepareWrapper; - return ' - - '.$rawField.$subtext." + my $hoverCode = $self->getHoverCode($hoverHelp, $self->get('id') . '_description'); + return ' + + '.$rawField . $subtext . $hoverCode . " \n"; } else { return $self->toHtmlAsHidden; @@ -647,6 +637,41 @@ sub toHtmlWithWrapper { #------------------------------------------------------------------- +=head2 getHoverCode ( hoverHelp, attachId ) + +Generated the code to add hover help to html elements. + +=head3 hoverHelp + +The text in include in the hover help. + +=head3 attachId + +The id of the HTML element to attach the hover help to. + +=cut + +sub getHoverCode { + my $self = shift; + my $style = $self->session->style; + my $url = $self->session->url; + my $hoverHelp = shift; + my $attachId = shift; + $hoverHelp =~ s/\r/ /g; + $hoverHelp =~ s/\n/ /g; + $hoverHelp =~ s/'/\\'/g; + $hoverHelp =~ s/^\s+//; + my $hover = ''; + $style->setLink($url->extras('/hoverhelp.css'),{ type=>'text/css', rel=>"stylesheet" }); + $style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' }); + $style->setScript($url->extras('/yui/build/container/container-min.js'),{ type=>'text/javascript' }); + return $hover; +} + +#------------------------------------------------------------------- + =head2 passUiLevelCheck ( ) Renders the form field to HTML as a table row complete with labels, subtext, hoverhelp, etc. diff --git a/lib/WebGUI/HTMLForm.pm b/lib/WebGUI/HTMLForm.pm index 41990e1be..fac6dda4e 100644 --- a/lib/WebGUI/HTMLForm.pm +++ b/lib/WebGUI/HTMLForm.pm @@ -215,7 +215,7 @@ Returns the HTML for this form object. sub print { my $self = shift; - return $self->{_header}.$self->{_data}.$self->{_footer}.''; + return $self->{_header}.$self->{_data}.$self->{_footer}; } #------------------------------------------------------------------- diff --git a/lib/WebGUI/TabForm.pm b/lib/WebGUI/TabForm.pm index bde3a06d2..8ab9e2d09 100644 --- a/lib/WebGUI/TabForm.pm +++ b/lib/WebGUI/TabForm.pm @@ -248,7 +248,6 @@ sub print { $output .= $form; $output .= WebGUI::Form::formFooter($self->session,); $output .= ''; - $output .= ''; return $output; } diff --git a/www/extras/hoverhelp.css b/www/extras/hoverhelp.css new file mode 100644 index 000000000..0d355e2ce --- /dev/null +++ b/www/extras/hoverhelp.css @@ -0,0 +1,13 @@ +.yui-tt { + visibility:hidden; + position:absolute; + background-color: #e6ecff; + border: 1px solid #003399; + color: #000066; + font-family: arial,helvetica,sans-serif; + font-size: 11px; + font-weight: normal; + padding: 3px; + z-index: 1000; +} + diff --git a/www/extras/wz_tooltip.js b/www/extras/wz_tooltip.js deleted file mode 100644 index 608dd8d13..000000000 --- a/www/extras/wz_tooltip.js +++ /dev/null @@ -1,463 +0,0 @@ -/* This notice must be untouched at all times. - -wz_tooltip.js v. 3.31 - -The latest version is available at -http://www.walterzorn.com -or http://www.devira.com -or http://www.walterzorn.de - -Copyright (c) 2002-2004 Walter Zorn. All rights reserved. -Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com ) -Last modified: 10. 6. 2005 - -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. - -LICENSE: LGPL - -This library is free software; you can redistribute it and/or -modify it under the terms of the GNU Lesser General Public -License (LGPL) as published by the Free Software Foundation; either -version 2.1 of the License, or (at your option) any later version. - -This library is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. - -For more details on the GNU Lesser General Public License, -see http://www.gnu.org/copyleft/lesser.html -*/ - - - -//////////////// GLOBAL TOOPTIP CONFIGURATION ///////////////////// -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 is "bold"; -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 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 //////////////////////// - - - -////////////// 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","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, // current tooltip -tt_ifrm, // 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, // stores previous mousemove evthandler -// Opera: disable href when hovering -tt_tag = null; // stores hovered dom node, href and previous statusbar txt - - -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; - -function tt_Int(t_x) -{ - var t_y; - return isNaN(t_y = parseInt(t_x))? 0 : t_y; -} -function wzReplace(t_x, t_y) -{ - var t_ret = "", - t_str = this, - t_xI; - while((t_xI = t_str.indexOf(t_x)) != -1) - { - t_ret += t_str.substring(0, t_xI) + t_y; - t_str = t_str.substring(t_xI + t_x.length); - } - return t_ret+t_str; -} -String.prototype.wzReplace = wzReplace; -function tt_N4Tags(tagtyp, t_d, t_y) -{ - 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; -} -function tt_Htm(tt, t_id, txt) -{ - 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) - { - t_shc = t_shc || "#cccccc"; - t_shw = t_shw || 5; - } - if (tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px"; - - 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 = '
' + - ''; - if (t_tit) - { - t_y += '
' + - (tt_n4? ' ' : '')+t_tit+'<\/b><\/font><\/td><\/tr>'; - } - t_y += '
' + - ''; - if (t_fwght == 'bold') t_y += ''; - t_y += txt; - if (t_fwght == 'bold') t_y += '<\/b>'; - t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>'; - if (t_shw) - { - var t_spct = Math.round(t_shw*1.3); - if (tt_n4) - { - t_y += '<\/layer>' + - '<\/layer>'; - } - else - { - t_optx = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : 'opacity:0.85;'; - t_y += '
<\/div>' + - '
<\/div>'; - } - } - return(t_y+'<\/div>' + - (tt_ie ? '