author | Dan |
Sun, 12 Aug 2007 13:14:26 -0400 | |
changeset 88 | 9e303b7e95c2 |
parent 53 | 3dea509d88ae |
child 150 | 824821224153 |
permissions | -rw-r--r-- |
1 | 1 |
// Message box system |
2 |
||
3 |
function darken(nofade) |
|
4 |
{ |
|
5 |
if(IE) |
|
6 |
nofade = true; |
|
7 |
if(document.getElementById('specialLayer_darkener')) |
|
8 |
{ |
|
9 |
document.getElementById('specialLayer_darkener').style.display = 'block'; |
|
10 |
if(nofade) |
|
11 |
{ |
|
12 |
document.getElementById('specialLayer_darkener').style.opacity = '0.7'; |
|
13 |
document.getElementById('specialLayer_darkener').style.filter = 'alpha(opacity=70)'; |
|
14 |
} |
|
15 |
else |
|
16 |
{ |
|
17 |
opacity('specialLayer_darkener', 0, 70, 1000); |
|
18 |
} |
|
19 |
} else { |
|
20 |
w = getWidth(); |
|
21 |
h = getHeight(); |
|
22 |
var thediv = document.createElement('div'); |
|
23 |
if(IE) |
|
24 |
thediv.style.position = 'absolute'; |
|
25 |
else |
|
26 |
thediv.style.position = 'fixed'; |
|
27 |
thediv.style.top = '0px'; |
|
28 |
thediv.style.left = '0px'; |
|
29 |
thediv.style.opacity = '0'; |
|
30 |
thediv.style.filter = 'alpha(opacity=0)'; |
|
31 |
thediv.style.backgroundColor = '#000000'; |
|
32 |
thediv.style.width = '100%'; |
|
33 |
thediv.style.height = '100%'; |
|
34 |
thediv.zIndex = getHighestZ() + 5; |
|
35 |
thediv.id = 'specialLayer_darkener'; |
|
36 |
if(nofade) |
|
37 |
{ |
|
38 |
thediv.style.opacity = '0.7'; |
|
39 |
thediv.style.filter = 'alpha(opacity=70)'; |
|
40 |
body = document.getElementsByTagName('body'); |
|
41 |
body = body[0]; |
|
42 |
body.appendChild(thediv); |
|
43 |
} else { |
|
44 |
body = document.getElementsByTagName('body'); |
|
45 |
body = body[0]; |
|
46 |
body.appendChild(thediv); |
|
47 |
opacity('specialLayer_darkener', 0, 70, 1000); |
|
48 |
} |
|
49 |
} |
|
50 |
} |
|
51 |
||
52 |
function enlighten(nofade) |
|
53 |
{ |
|
54 |
if(IE) |
|
55 |
nofade = true; |
|
56 |
if(document.getElementById('specialLayer_darkener')) |
|
57 |
{ |
|
58 |
if(nofade) |
|
59 |
{ |
|
60 |
document.getElementById('specialLayer_darkener').style.display = 'none'; |
|
61 |
} |
|
62 |
opacity('specialLayer_darkener', 70, 0, 1000); |
|
63 |
setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); |
|
64 |
} |
|
65 |
} |
|
66 |
||
67 |
/** |
|
68 |
* The ultimate message box framework for Javascript |
|
69 |
* Syntax is (almost) identical to the MessageBox command in NSIS |
|
70 |
* @param int type - a bitfield consisting of the MB_* constants |
|
71 |
* @param string title - the blue text at the top of the window |
|
72 |
* @param string text - HTML for the body of the message box |
|
73 |
* Properties: |
|
74 |
* onclick - an array of functions to be called on button click events |
|
75 |
* NOTE: key names are to be strings, and they must be the value of the input, CaSe-SeNsItIvE |
|
76 |
* onbeforeclick - same as onclick but called before the messagebox div is destroyed |
|
77 |
* Example: |
|
78 |
* var my_message = new messagebox(MB_OK|MB_ICONSTOP, 'Error logging in', 'The username and/or password is incorrect. Please check the username and retype your password'); |
|
79 |
* my_message.onclick['OK'] = function() { |
|
80 |
* document.getElementById('password').value = ''; |
|
81 |
* }; |
|
82 |
* Deps: |
|
83 |
* Modern browser that supports DOM |
|
84 |
* darken() and enlighten() (above) |
|
85 |
* opacity() - required for darken() and enlighten() |
|
86 |
* MB_* constants are defined in enano-lib-basic.js |
|
87 |
*/ |
|
88 |
||
89 |
var mb_current_obj; |
|
90 |
||
91 |
function messagebox(type, title, message) |
|
92 |
{ |
|
93 |
var y = getScrollOffset(); |
|
94 |
if(document.getElementById('messageBox')) return; |
|
95 |
darken(true); |
|
96 |
var master_div = document.createElement('div'); |
|
97 |
var mydiv = document.createElement('div'); |
|
98 |
mydiv.style.width = '400px'; |
|
99 |
mydiv.style.height = '200px'; |
|
100 |
w = getWidth(); |
|
101 |
h = getHeight(); |
|
102 |
//master_div.style.left = (w / 2) - 200+'px'; |
|
103 |
//master_div.style.top = (h / 2) + y - 120+'px'; |
|
104 |
master_div.style.top = '-10000px'; |
|
105 |
master_div.style.position = ( IE ) ? 'absolute' : 'fixed'; |
|
106 |
z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex; |
|
107 |
mydiv.style.zIndex = parseInt(z) + 1; |
|
108 |
mydiv.style.backgroundColor = '#FFFFFF'; |
|
109 |
mydiv.style.padding = '10px'; |
|
110 |
mydiv.style.marginBottom = '1px'; |
|
111 |
mydiv.id = 'messageBox'; |
|
112 |
mydiv.style.overflow = 'auto'; |
|
113 |
||
114 |
var buttondiv = document.createElement('div'); |
|
115 |
buttondiv.style.width = '400px'; |
|
116 |
w = getWidth(); |
|
117 |
h = getHeight(); |
|
118 |
// buttondiv.style.left = (w / 2) - 200+'px'; |
|
119 |
// buttondiv.style.top = (h / 2) + y + 101+'px'; |
|
120 |
// buttondiv.style.position = ( IE ) ? 'absolute' : 'fixed'; |
|
121 |
z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex; |
|
122 |
buttondiv.style.zIndex = parseInt(z) + 1; |
|
123 |
buttondiv.style.backgroundColor = '#C0C0C0'; |
|
124 |
buttondiv.style.padding = '10px'; |
|
125 |
buttondiv.style.textAlign = 'right'; |
|
126 |
buttondiv.style.verticalAlign = 'middle'; |
|
127 |
buttondiv.id = 'messageBoxButtons'; |
|
128 |
||
129 |
this.clickHandler = function() { messagebox_click(this, mb_current_obj); }; |
|
130 |
||
38 | 131 |
if( ( type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION ) && !(type & MB_ICONLOCK) ) |
1 | 132 |
{ |
133 |
mydiv.style.paddingLeft = '50px'; |
|
134 |
mydiv.style.width = '360px'; |
|
135 |
mydiv.style.backgroundRepeat = 'no-repeat'; |
|
32
4d87aad3c4c0
Finished everything on the TODO list (yay!); several CSS cleanups; tons more changes in this commit - see the patch for details
Dan
parents:
1
diff
changeset
|
136 |
mydiv.style.backgroundPosition = '8px 8px'; |
1 | 137 |
} |
38 | 138 |
else if ( type & MB_ICONLOCK ) |
139 |
{ |
|
140 |
mydiv.style.paddingLeft = '50px'; |
|
141 |
mydiv.style.width = '360px'; |
|
142 |
mydiv.style.backgroundRepeat = 'no-repeat'; |
|
143 |
} |
|
1 | 144 |
|
145 |
if(type & MB_ICONINFORMATION) |
|
146 |
{ |
|
147 |
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')'; |
|
148 |
} |
|
149 |
||
150 |
if(type & MB_ICONQUESTION) |
|
151 |
{ |
|
152 |
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')'; |
|
153 |
} |
|
154 |
||
155 |
if(type & MB_ICONSTOP) |
|
156 |
{ |
|
157 |
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')'; |
|
158 |
} |
|
159 |
||
160 |
if(type & MB_ICONEXCLAMATION) |
|
161 |
{ |
|
162 |
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')'; |
|
163 |
} |
|
164 |
||
165 |
if(type & MB_ICONLOCK) |
|
166 |
{ |
|
167 |
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')'; |
|
168 |
} |
|
169 |
||
170 |
if(type & MB_OK) |
|
171 |
{ |
|
172 |
btn = document.createElement('input'); |
|
173 |
btn.type = 'button'; |
|
174 |
btn.value = 'OK'; |
|
175 |
btn.onclick = this.clickHandler; |
|
176 |
btn.style.margin = '0 3px'; |
|
177 |
buttondiv.appendChild(btn); |
|
178 |
} |
|
179 |
||
180 |
if(type & MB_OKCANCEL) |
|
181 |
{ |
|
182 |
btn = document.createElement('input'); |
|
183 |
btn.type = 'button'; |
|
184 |
btn.value = 'OK'; |
|
185 |
btn.onclick = this.clickHandler; |
|
186 |
btn.style.margin = '0 3px'; |
|
187 |
buttondiv.appendChild(btn); |
|
188 |
||
189 |
btn = document.createElement('input'); |
|
190 |
btn.type = 'button'; |
|
191 |
btn.value = 'Cancel'; |
|
192 |
btn.onclick = this.clickHandler; |
|
193 |
btn.style.margin = '0 3px'; |
|
194 |
buttondiv.appendChild(btn); |
|
195 |
} |
|
196 |
||
197 |
if(type & MB_YESNO) |
|
198 |
{ |
|
199 |
btn = document.createElement('input'); |
|
200 |
btn.type = 'button'; |
|
201 |
btn.value = 'Yes'; |
|
202 |
btn.onclick = this.clickHandler; |
|
203 |
btn.style.margin = '0 3px'; |
|
204 |
buttondiv.appendChild(btn); |
|
205 |
||
206 |
btn = document.createElement('input'); |
|
207 |
btn.type = 'button'; |
|
208 |
btn.value = 'No'; |
|
209 |
btn.onclick = this.clickHandler; |
|
210 |
btn.style.margin = '0 3px'; |
|
211 |
buttondiv.appendChild(btn); |
|
212 |
} |
|
213 |
||
214 |
if(type & MB_YESNOCANCEL) |
|
215 |
{ |
|
216 |
btn = document.createElement('input'); |
|
217 |
btn.type = 'button'; |
|
218 |
btn.value = 'Yes'; |
|
219 |
btn.onclick = this.clickHandler; |
|
220 |
btn.style.margin = '0 3px'; |
|
221 |
buttondiv.appendChild(btn); |
|
222 |
||
223 |
btn = document.createElement('input'); |
|
224 |
btn.type = 'button'; |
|
225 |
btn.value = 'No'; |
|
226 |
btn.onclick = this.clickHandler; |
|
227 |
btn.style.margin = '0 3px'; |
|
228 |
buttondiv.appendChild(btn); |
|
229 |
||
230 |
btn = document.createElement('input'); |
|
231 |
btn.type = 'button'; |
|
232 |
btn.value = 'Cancel'; |
|
233 |
btn.onclick = this.clickHandler; |
|
234 |
btn.style.margin = '0 3px'; |
|
235 |
buttondiv.appendChild(btn); |
|
236 |
} |
|
237 |
||
238 |
heading = document.createElement('h2'); |
|
239 |
heading.innerHTML = title; |
|
240 |
heading.style.color = '#50A0D0'; |
|
241 |
heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif'; |
|
242 |
heading.style.fontSize = '12pt'; |
|
243 |
heading.style.fontWeight = 'lighter'; |
|
244 |
heading.style.textTransform = 'lowercase'; |
|
245 |
heading.style.marginTop = '0'; |
|
246 |
mydiv.appendChild(heading); |
|
247 |
||
248 |
var text = document.createElement('div'); |
|
249 |
text.innerHTML = String(message); |
|
250 |
this.text_area = text; |
|
251 |
mydiv.appendChild(text); |
|
252 |
||
253 |
this.updateContent = function(text) |
|
254 |
{ |
|
255 |
this.text_area.innerHTML = text; |
|
256 |
}; |
|
257 |
||
258 |
//domObjChangeOpac(0, mydiv); |
|
259 |
//domObjChangeOpac(0, master_div); |
|
260 |
||
261 |
body = document.getElementsByTagName('body'); |
|
262 |
body = body[0]; |
|
263 |
master_div.appendChild(mydiv); |
|
264 |
master_div.appendChild(buttondiv); |
|
265 |
||
266 |
body.appendChild(master_div); |
|
267 |
||
268 |
setTimeout('mb_runFlyIn();', 100); |
|
269 |
||
270 |
this.onclick = new Array(); |
|
271 |
this.onbeforeclick = new Array(); |
|
272 |
mb_current_obj = this; |
|
273 |
} |
|
274 |
||
275 |
function mb_runFlyIn() |
|
276 |
{ |
|
277 |
var mydiv = document.getElementById('messageBox'); |
|
278 |
var maindiv = mydiv.parentNode; |
|
279 |
fly_in_top(maindiv, true, false); |
|
280 |
} |
|
281 |
||
282 |
function messagebox_click(obj, mb) |
|
283 |
{ |
|
284 |
val = obj.value; |
|
285 |
if(typeof mb.onbeforeclick[val] == 'function') |
|
286 |
{ |
|
287 |
var o = mb.onbeforeclick[val]; |
|
288 |
var resp = o(); |
|
289 |
if ( resp ) |
|
290 |
return false; |
|
291 |
o = false; |
|
292 |
} |
|
293 |
||
294 |
var mydiv = document.getElementById('messageBox'); |
|
295 |
var maindiv = mydiv.parentNode; |
|
296 |
var to = fly_out_top(maindiv, true, false); |
|
297 |
||
298 |
setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); enlighten(true);", to); |
|
299 |
if(typeof mb.onclick[val] == 'function') |
|
300 |
{ |
|
301 |
o = mb.onclick[val]; |
|
302 |
o(); |
|
303 |
o = false; |
|
304 |
} |
|
305 |
} |
|
306 |
||
307 |
function testMessageBox() |
|
308 |
{ |
|
309 |
mb = new messagebox(MB_OKCANCEL|MB_ICONINFORMATION, 'Javascripted dynamic message boxes', 'This is soooooo coool, now if only document.createElement() worked in IE!<br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text'); |
|
310 |
mb.onclick['OK'] = function() |
|
311 |
{ |
|
312 |
alert('You clicked OK!'); |
|
313 |
} |
|
314 |
mb.onbeforeclick['Cancel'] = function() |
|
315 |
{ |
|
316 |
alert('You clicked Cancel!'); |
|
317 |
} |
|
318 |
} |
|
319 |
||
320 |
// Function to fade classes info-box, warning-box, error-box, etc. |
|
321 |
||
322 |
function fadeInfoBoxes() |
|
323 |
{ |
|
324 |
var divs = new Array(); |
|
325 |
d = document.getElementsByTagName('div'); |
|
326 |
j = 0; |
|
327 |
for(var i in d) |
|
328 |
{ |
|
329 |
if ( !d[i].tagName ) |
|
330 |
continue; |
|
331 |
if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box') |
|
332 |
{ |
|
333 |
divs[j] = d[i]; |
|
334 |
j++; |
|
335 |
} |
|
336 |
} |
|
337 |
if(divs.length < 1) return; |
|
338 |
for(i in divs) |
|
339 |
{ |
|
340 |
if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000); |
|
341 |
switch(divs[i].className) |
|
342 |
{ |
|
343 |
case 'info-box': |
|
344 |
default: |
|
345 |
from = '#3333FF'; |
|
346 |
break; |
|
347 |
case 'error-box': |
|
348 |
from = '#FF3333'; |
|
349 |
break; |
|
350 |
case 'warning-box': |
|
351 |
from = '#FFFF33'; |
|
352 |
break; |
|
353 |
case 'question-box': |
|
354 |
from = '#33FF33'; |
|
355 |
break; |
|
356 |
} |
|
357 |
Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id)); |
|
358 |
} |
|
359 |
} |
|
360 |
||
361 |
// Alpha fades |
|
362 |
||
363 |
function opacity(id, opacStart, opacEnd, millisec) { |
|
364 |
//speed for each frame |
|
365 |
var speed = Math.round(millisec / 100); |
|
366 |
var timer = 0; |
|
367 |
||
368 |
//determine the direction for the blending, if start and end are the same nothing happens |
|
369 |
if(opacStart > opacEnd) { |
|
370 |
for(i = opacStart; i >= opacEnd; i--) { |
|
371 |
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); |
|
372 |
timer++; |
|
373 |
} |
|
374 |
} else if(opacStart < opacEnd) { |
|
375 |
for(i = opacStart; i <= opacEnd; i++) |
|
376 |
{ |
|
377 |
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); |
|
378 |
timer++; |
|
379 |
} |
|
380 |
} |
|
381 |
} |
|
382 |
||
53 | 383 |
var opacityDOMCache = new Object(); |
384 |
function domOpacity(obj, opacStart, opacEnd, millisec) { |
|
385 |
//speed for each frame |
|
386 |
var speed = Math.round(millisec / 100); |
|
387 |
var timer = 0; |
|
388 |
||
389 |
// unique ID for this animation |
|
390 |
var uniqid = Math.floor(Math.random() * 1000000); |
|
391 |
opacityDOMCache[uniqid] = obj; |
|
392 |
||
393 |
//determine the direction for the blending, if start and end are the same nothing happens |
|
394 |
if(opacStart > opacEnd) { |
|
395 |
for(i = opacStart; i >= opacEnd; i--) { |
|
396 |
setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed)); |
|
397 |
timer++; |
|
398 |
} |
|
399 |
} else if(opacStart < opacEnd) { |
|
400 |
for(i = opacStart; i <= opacEnd; i++) |
|
401 |
{ |
|
402 |
setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed)); |
|
403 |
timer++; |
|
404 |
} |
|
405 |
} |
|
406 |
setTimeout("delete(opacityDOMCache["+uniqid+"]);",(timer * speed)); |
|
407 |
} |
|
408 |
||
1 | 409 |
//change the opacity for different browsers |
410 |
function changeOpac(opacity, id) { |
|
411 |
var object = document.getElementById(id).style; |
|
412 |
object.opacity = (opacity / 100); |
|
413 |
object.MozOpacity = (opacity / 100); |
|
414 |
object.KhtmlOpacity = (opacity / 100); |
|
415 |
object.filter = "alpha(opacity=" + opacity + ")"; |
|
416 |
} |
|
417 |
||
418 |
function mb_logout() |
|
419 |
{ |
|
420 |
var mb = new messagebox(MB_YESNO|MB_ICONQUESTION, 'Are you sure you want to log out?', 'If you log out, you will no longer be able to access your user preferences, your private messages, or certain areas of this site until you log in again.'); |
|
421 |
mb.onclick['Yes'] = function() |
|
422 |
{ |
|
423 |
window.location = makeUrlNS('Special', 'Logout/' + title); |
|
424 |
} |
|
425 |
} |
|
426 |