show-mouse-help.js
6.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
/*
** : : : : : : How to use the Show Help : : : : : :
** For each interesting page element you can put the
** attribute help. The help attribute can be any string
** text (scaped to not distroy the html) or some html id.
** The help for each element will be showed automaticaly
** when the mouse is over that. Yeah... we can turn on
** this help system calling the function showMouseHelpOn()
** and turn off calling the function showMouseHelpOff().
**
** Examples:
**
** <a href="..." help="this is a link">my link</a>
**
** <form help="#myLongHelp"> ... </form>
** <div id="myLongHelp" style="display:none">
** This is a <b>loooong</b> help. <p/>
** You can put <code>HTML</code> here too!
** </div>
**
** You need to put the style="display:none" on the long
** help container to it's text do not noise the web page.
**
** If the mouse pointed element do not have a help,
** each one of this parents will be visited to find
** the help. If no one has a help the help box turn
** to non visible.
*/
/*
** This script can be loaded by the page and it's iFrames,
** as in the Noofero - community network system. Some of
** this code will enable the iFrame => parent information.
*/
/*
** pageHelp has informations for this page/frame
** to not conflict with other frames.
*/
var pageHelp = {};
if ( navigator.userAgent.indexOf('MSIE') != -1 ) {
pageHelp.isIE = ( navigator.userAgent.indexOf('Opera') == -1 )
}
// If i'm in a iFrame, get the iFrame reference:
if ( window.parent == window ) {
pageHelp.myFrame = false;
} else {
var randTit = "iframe"+ Math.random();
window.frameHelpId = randTit;
var frames = window.parent.document.getElementsByTagName("iframe");
var f;
for ( var i=0; f=frames[i]; i++ ) {
if ( f.contentWindow && ( f.contentWindow.frameHelpId == randTit ) ) {
pageHelp.myFrame = f;
}
}
}
/*
** pageHelp.info is a reference for a cetral help information.
** All frames will update the information here.
*/
if ( !window.parent.pageHelpInfo ) window.parent.pageHelpInfo = {};
pageHelp.info = window.parent.pageHelpInfo;
pageHelp.info.incPos = { x:20, y:20 };
pageHelp.info.myDoc = window.parent.document;
mouseBli = 0;
function getHelp( ev ) {
var helpInfo = pageHelp.info;
if ( helpInfo.updateBox ) {
if ( window.event ) {
ev = window.event;
var el = ev.srcElement;
} else {
var el = ev.target;
}
var mX = 0;
var mY = 0;
if ( ev.pageX || ev.pageY) {
mX = ev.pageX;
mY = ev.pageY;
}
else if (ev.clientX || ev.clientY) {
mX = ev.clientX;
mY = ev.clientY;
if ( pageHelp.isIE ) {
mX += helpInfo.myDoc.body.scrollLeft;
mY += helpInfo.myDoc.body.scrollTop;
}
}
if ( pageHelp.myFrame ) {
var fPos = pageHelp.getPos( pageHelp.myFrame );
mX += fPos.x;
mY += fPos.y;
}
var box = helpInfo.helpBox;
helpInfo.mX = mX;
helpInfo.mY = mY;
if ( mX > ( helpInfo.myDoc.body.clientWidth / 1.8 ) ) {
movePageHelpToTheLeftMouseSide()
} else {
movePageHelpToTheRightMouseSide()
}
if ( ( mY + box.clientHeight + 40 ) >
( helpInfo.myDoc.body.clientHeight + helpInfo.myDoc.body.scrollTop )
) {
mY = helpInfo.myDoc.body.clientHeight + helpInfo.myDoc.body.scrollTop
- box.clientHeight - 40;
}
if ( box ) {
debug = mouseBli++ +" "+ el.nodeName;
while ( el.parentNode.getAttribute && ! el.getAttribute("help") ) { el = el.parentNode }
debug += " :: "+ el.nodeName +" "+ el.getAttribute("help");
debug += "<br>"+ pageHelp.myFrame.src +" x:"+ mX +" y:"+ mY;
var txt = el.getAttribute("help");
if ( txt ) {
box.style.display = "block";
if ( txt != "FALSE" ) {
if ( /^#.+/.test( txt ) ) {
var txtEl = el.ownerDocument.getElementById( txt.replace(/#/,"") );
if ( txtEl ) txt = txtEl.innerHTML;
}
box.content.innerHTML = '<p>'+ txt +'</p>'+
'<br style="clear:both" />'+
'<div class="help-force-clear-ieworkarroundbug"'+
' style="height:1px; overflow:hidden"></div>';
}
} else {
box.style.display = "none";
}
box.style.left = ( mX + helpInfo.incPos.x ) +"px";
box.style.top = ( mY + helpInfo.incPos.y ) +"px";
}
}
}
pageHelp.getPos = function (obj) {
var x = y = 0;
if (obj.offsetParent) {
do {
x += obj.offsetLeft;
y += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return { x:x, y:y };
}
function movePageHelpToTheLeftMouseSide() {
clearTimeout( movePageHelpToTheRightMouseSide.timeout )
clearTimeout( movePageHelpToTheLeftMouseSide.timeout )
if ( pageHelp.info.incPos.x > -( pageHelp.info.helpBox.clientWidth + 20 ) ) {
pageHelp.info.incPos.x -= 10;
if ( ( pageHelp.info.mX + pageHelp.info.incPos.x + pageHelp.info.helpBox.clientWidth ) >
pageHelp.info.myDoc.body.clientWidth ) {
pageHelp.info.incPos.x =
pageHelp.info.myDoc.body.clientWidth - pageHelp.info.helpBox.clientWidth - pageHelp.info.mX - 10;
}
pageHelp.info.helpBox.style.left = ( pageHelp.info.mX + pageHelp.info.incPos.x ) +"px";
movePageHelpToTheLeftMouseSide.timeout =
setTimeout( "movePageHelpToTheLeftMouseSide()", 20 );
}
}
function movePageHelpToTheRightMouseSide() {
clearTimeout( movePageHelpToTheRightMouseSide.timeout )
clearTimeout( movePageHelpToTheLeftMouseSide.timeout )
if ( pageHelp.info.incPos.x < 20 ) {
pageHelp.info.incPos.x += 10;
pageHelp.info.helpBox.style.left = ( pageHelp.info.mX + pageHelp.info.incPos.x ) +"px";
movePageHelpToTheRightMouseSide.timeout =
setTimeout( "movePageHelpToTheRightMouseSide()", 20 );
}
}
if( window.addEventListener ) { // Standard
document.body.addEventListener( "mousemove", getHelp, false );
}
if( window.attachEvent ) { // IE
document.body.attachEvent( "onmousemove", getHelp );
}
function showMouseHelpOn() {
pageHelp.info.helpBox = document.getElementById("helpBox");
pageHelp.info.helpBox.content = document.getElementById("helpBoxContent");
pageHelp.info.helpBox.setAttribute( "help", "FALSE" );
pageHelp.info.updateBox = true;
pageHelp.info.myDoc.body.style.cursor = "help";
}
function showMouseHelpOff() {
pageHelp.info.helpBox.style.display = "none";
pageHelp.info.updateBox = false;
pageHelp.info.myDoc.body.style.cursor = "default";
}