OK, time for some food and rest now. This is as far as I've got. It doesn't work on IE7, and I have no VS at home, so I'll debug that issue at work tomorrow.
It's OK on FF, but there's a slight problem the second time you press F1 and bring up the help dialog in tooltip mode (it only create the dialog once). There's a 1px blue border to the left and right of the body. I haven't been able to track that down.
But the switch from tooltip mode to focussed mode is OK, and the listeners for hiding are all OK. I'll have to check out Eclipse's behaviour tomorrow. I suppose while in tooltip mode, there should be a timer to make it disappear after a while. It only should become a permanent entity on the screen if they press F2.
The resizer can be enabled/disabled at will by using CSS to set the handles to display:none.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/animation.js" type="text/javascript"></script>
<script src="js/container.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script src="js/yui-ext.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="css/container.css"></link>
<link rel="stylesheet" type="text/css" href="css/resizable.css"></link>
<link rel="stylesheet" type="text/css" href="css/basic-dialog.css"></link>
<style type="text/css">
.yfloating-help-panel {
border:1px solid grey;
background-color:#FFFFE1;
overflow:hidden
}
.yfloating-help-panel .ydlg-close {
display:none;
}
.yfloating-help-panel .yresizable-handle {
display:none
}
.yfloating-help-panel .ydlg-hd {
display:none;
}
.yfloating-help-panel .ydlg-dlg-body {
background-color:#FFFFE1;
padding:0px
}
.yfloating-help-panel .ydlg-bd {
background-color:#FFFFE1;
overflow:hidden
}
.yfloating-help-panel .ydlg-ft {
background-color:#FFFFE1;
padding:0px;
}
.yfocussed-help-panel {
background-color:#FFFFE1;
}
.yfocussed-help-panel .ydlg-bd {
width:auto;
background-color:#FFFFE1;
}
.yfocussed-help-panel .ydlg-ft {
display:none;
}
</style>
<script type="text/javascript">
var helpPanel = new Array();
/**
Create a dialog which contains information about a target element.
*/
function InputHelp(targetEl, helpEl)
{
this.targetEl = YAHOO.ext.Element.get(targetEl);
this.helpKeyListener = new YAHOO.util.KeyListener(this.targetEl.dom, {keys:112},
this.handleF1.createDelegate(this));
this.focusKeyListener = new YAHOO.util.KeyListener(document, {keys:[27,112,113]},
this.handleF2.createDelegate(this));
this.helpKeyListener.enable();
// Use the cached help panel if it's there, otherwise, create it
if (!helpPanel[helpEl])
{
YAHOO.ext.DomHelper.append(helpEl,
{
tag: "div",
cls: "ydlg-ft",
html: "F2 to focus"
});
this.helpPanel = helpPanel[helpEl] = new YAHOO.ext.BasicDialog(helpEl,
{
width:"30em",
closable:true,
resizable:true,
visible:false
});
this.helpPanel.el.beginMeasure();
// Calculate dialog height needed to contain the focussed header and body
// up to a maximum of 300
this.helpPanel.el.removeClass("yfocussed-help-panel");
this.helpPanel.el.removeClass("yfloating-help-panel");
this.helpPanel.body.setStyle({ height:"auto" });
this.defaultHelpPanelHeight = Math.min(
(this.helpPanel.header.getHeight() +
this.helpPanel.body.getHeight() + this.helpPanel.bwrap.getHeight()), 300);
// When minimal, allow 3.75 em
this.helpPanel.el.addClass("yfloating-help-panel");
this.helpPanel.el.removeClass("yfocussed-help-panel");
this.helpPanel.el.setStyle({height:"3.75em"});
this.minimalHelpPanelHeight = this.helpPanel.el.getHeight();
this.helpPanel.el.endMeasure();
}
else
{
this.helpPanel = helpPanel[helpEl];
}
this.helpVisible = false;
}
InputHelp.prototype =
{
handleF1: function(evtType, fireArgs)
{
YAHOO.util.Event.stopEvent(fireArgs[1]);
if (this.helpVisible)
{
return this.hideHelp(true);
}
this.targetEl.dom.blur();
this.setSizeMinimal();
this.helpPanel.show();
this.helpPanel.el.setXY(this.targetEl.getXY());
this.helpVisible = true;
this.hideListener = this.documentClick.createDelegate(this);
YAHOO.util.Event.addListener(document, "click", this.hideListener);
this.focusKeyListener.enable();
},
/**
Document clicks outside the help dialog hide the help dialog
*/
documentClick: function(e)
{
// If the target is not a decendant of the helpPanel, hide it.
if (!(YAHOO.util.Dom.isAncestor(this.helpPanel.el.dom, YAHOO.util.Event.getTarget(e))))
this.hideHelp(false);
},
hideHelp: function(focusInputEl)
{
this.focusKeyListener.disable();
this.helpPanel.hide();
this.helpVisible = false;
YAHOO.util.Event.removeListener(document, "click", this.hideListener);
// Only focus back if hidden by keyboard action. Clicks allow the click event to blur
if (focusInputEl)
this.targetEl.dom.focus();
},
/**
Focus the help dialog: Make it larger, scrollable, moveable and resizable
*/
handleF2: function(evtType, fireArgs)
{
var keyPressed = fireArgs[0];
var event = fireArgs[1];
YAHOO.util.Event.stopEvent(event);
// Any other key than F2, hides the help dialog
if (keyPressed != 113)
return this.hideHelp(true);
// Already focussed - ignore
if (this.focussed)
return;
this.setSizeDefault();
},
/**
Set the help dialog size to not much more than a tooltip
*/
setSizeMinimal: function()
{
this.helpPanel.resizer.enabled = false;
this.helpPanel.el.addClass("yfloating-help-panel");
this.helpPanel.el.removeClass("yfocussed-help-panel");
this.helpPanel.el.setStyle(
{
width:"auto"
});
this.helpPanel.body.setStyle(
{
width:"30em",
height:"2.5em",
overflow:"hidden"
});
this.helpPanel.el.setHeight(this.minimalHelpPanelHeight);
this.helpPanel.refreshSize();
this.focussed = false;
},
setSizeDefault: function()
{
this.helpPanel.resizer.enabled = true;
this.helpPanel.el.addClass("yfocussed-help-panel");
this.helpPanel.el.removeClass("yfloating-help-panel");
this.helpPanel.body.setStyle(
{
overflow:"auto"
});
this.helpPanel.el.setHeight(this.defaultHelpPanelHeight);
this.helpPanel.refreshSize();
this.helpPanel.syncBodyHeight();
this.focussed = true;
}
}
YAHOO.util.Event.addListener(window, "load", function()
{
new InputHelp("poop", "helpForPoop");
new InputHelp("zook", "helpForZook");
});
</script>
</head>
<body>
<label for="testinput">Some input: </label><input id="poop"></input>
Some text
<label for="testinput">Some more input: </label><input id="zook"></input>
more text
etc...
<div id="helpForPoop" class="yfloating-help-panel" style="display:none">
<div class="ydlg-hd">Help for the input</div>
<div class="ydlg-bd">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui.
Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus,
quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam
erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris.
Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec
et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo,
facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
<h1>Foobar</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui.
Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus,
quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam
erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris.
Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec
et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo,
facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
</div>
</div>
<div id="helpForZook" class="yfloating-help-panel" style="display:none">
<div class="ydlg-hd">Help for the input</div>
<div class="ydlg-bd">
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
</div>
</div>
</body>
</html>