1 // Message box system |
1 // Message box and visual effect system |
2 |
2 |
3 function darken(nofade) |
3 /** |
|
4 * Darkens the browser screen. This will make the entire page un-clickable except for any floating divs created after this is called. Restore with enlighten(). |
|
5 * @param bool Controls whether the fade should be disabled or not. aclDisableTransitionFX will override this if set to true, and fades are never fired on IE. |
|
6 * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100. |
|
7 */ |
|
8 |
|
9 function darken(nofade, opacVal) |
4 { |
10 { |
5 if(IE) |
11 if(IE) |
6 nofade = true; |
12 nofade = true; |
|
13 if ( !opacVal ) |
|
14 opacVal = 70; |
7 if(document.getElementById('specialLayer_darkener')) |
15 if(document.getElementById('specialLayer_darkener')) |
8 { |
16 { |
9 if(nofade) |
17 if(nofade) |
10 { |
18 { |
11 changeOpac(70, 'specialLayer_darkener'); |
19 changeOpac(opacVal, 'specialLayer_darkener'); |
12 document.getElementById('specialLayer_darkener').style.display = 'block'; |
20 document.getElementById('specialLayer_darkener').style.display = 'block'; |
|
21 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
13 } |
22 } |
14 else |
23 else |
15 { |
24 { |
16 document.getElementById('specialLayer_darkener').style.display = 'block'; |
25 if ( document.getElementById('specialLayer_darkener').style.display != 'none' ) |
17 opacity('specialLayer_darkener', 0, 70, 1000); |
26 { |
|
27 var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal; |
|
28 opacity('specialLayer_darkener', currentOpac, opacVal, 1000); |
|
29 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
|
30 } |
|
31 else |
|
32 { |
|
33 document.getElementById('specialLayer_darkener').style.display = 'block'; |
|
34 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
|
35 opacity('specialLayer_darkener', 0, opacVal, 1000); |
|
36 } |
18 } |
37 } |
19 } else { |
38 } else { |
20 w = getWidth(); |
39 w = getWidth(); |
21 h = getHeight(); |
40 h = getHeight(); |
22 var thediv = document.createElement('div'); |
41 var thediv = document.createElement('div'); |
39 thediv.style.backgroundColor = '#000000'; |
58 thediv.style.backgroundColor = '#000000'; |
40 thediv.style.width = '100%'; |
59 thediv.style.width = '100%'; |
41 thediv.style.height = '100%'; |
60 thediv.style.height = '100%'; |
42 thediv.zIndex = getHighestZ() + 5; |
61 thediv.zIndex = getHighestZ() + 5; |
43 thediv.id = 'specialLayer_darkener'; |
62 thediv.id = 'specialLayer_darkener'; |
|
63 thediv.myOpacVal = opacVal; |
44 if(nofade) |
64 if(nofade) |
45 { |
65 { |
46 thediv.style.opacity = '0.7'; |
66 thediv.style.opacity = ( parseFloat(opacVal) / 100 ); |
47 thediv.style.filter = 'alpha(opacity=70)'; |
67 thediv.style.filter = 'alpha(opacity=' + opacVal + ')'; |
48 body = document.getElementsByTagName('body'); |
68 body = document.getElementsByTagName('body'); |
49 body = body[0]; |
69 body = body[0]; |
50 body.appendChild(thediv); |
70 body.appendChild(thediv); |
51 } else { |
71 } else { |
52 body = document.getElementsByTagName('body'); |
72 body = document.getElementsByTagName('body'); |
53 body = body[0]; |
73 body = body[0]; |
54 body.appendChild(thediv); |
74 body.appendChild(thediv); |
55 opacity('specialLayer_darkener', 0, 70, 1000); |
75 opacity('specialLayer_darkener', 0, opacVal, 1000); |
56 } |
76 } |
57 } |
77 } |
58 } |
78 } |
|
79 |
|
80 /** |
|
81 * Un-darkens the screen and re-enables clicking of on-screen controls. |
|
82 * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE. |
|
83 */ |
59 |
84 |
60 function enlighten(nofade) |
85 function enlighten(nofade) |
61 { |
86 { |
62 if(IE) |
87 if(IE) |
63 nofade = true; |
88 nofade = true; |
65 { |
90 { |
66 if(nofade) |
91 if(nofade) |
67 { |
92 { |
68 document.getElementById('specialLayer_darkener').style.display = 'none'; |
93 document.getElementById('specialLayer_darkener').style.display = 'none'; |
69 } |
94 } |
70 opacity('specialLayer_darkener', 70, 0, 1000); |
95 else |
71 setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); |
96 { |
|
97 var from = document.getElementById('specialLayer_darkener').myOpacVal; |
|
98 // console.info('Fading from ' + from); |
|
99 opacity('specialLayer_darkener', from, 0, 1000); |
|
100 setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); |
|
101 } |
72 } |
102 } |
73 } |
103 } |
74 |
104 |
75 /** |
105 /** |
76 * The ultimate message box framework for Javascript |
106 * The ultimate message box framework for Javascript |
386 { |
416 { |
387 alert('You clicked Cancel!'); |
417 alert('You clicked Cancel!'); |
388 } |
418 } |
389 } |
419 } |
390 |
420 |
|
421 /** |
|
422 * The miniPrompt function, for creating small prompts and dialogs. The window will be flown in and the window darkened with opac=0.4. |
|
423 * @param function Will be passed an HTMLElement that is the body of the prompt window; the function can do with this as it pleases |
|
424 */ |
|
425 |
|
426 function miniPrompt(call_on_create) |
|
427 { |
|
428 darken(false, 40); |
|
429 |
|
430 var wrapper = document.createElement('div'); |
|
431 wrapper.className = 'miniprompt'; |
|
432 var top = document.createElement('div'); |
|
433 top.className = 'mp-top'; |
|
434 var body = document.createElement('div'); |
|
435 body.className = 'mp-body'; |
|
436 var bottom = document.createElement('div'); |
|
437 bottom.className = 'mp-bottom'; |
|
438 if ( typeof(call_on_create) == 'function' ) |
|
439 { |
|
440 call_on_create(body); |
|
441 } |
|
442 wrapper.appendChild(top); |
|
443 wrapper.appendChild(body); |
|
444 wrapper.appendChild(bottom); |
|
445 var left = ( getWidth() / 2 ) - ( 388 / 2 ); |
|
446 wrapper.style.left = left + 'px'; |
|
447 var top = getScrollOffset() - 27; |
|
448 wrapper.style.top = top + 'px'; |
|
449 domObjChangeOpac(0, wrapper); |
|
450 var realbody = document.getElementsByTagName('body')[0]; |
|
451 realbody.appendChild(wrapper); |
|
452 |
|
453 fly_in_top(wrapper, true, true); |
|
454 |
|
455 setTimeout(function() |
|
456 { |
|
457 domObjChangeOpac(100, wrapper); |
|
458 }, 40); |
|
459 } |
|
460 |
|
461 /** |
|
462 * For a given element, loops through the element and all of its ancestors looking for a miniPrompt div, and returns it. Returns false on failure. |
|
463 * @param object:HTMLElement Child node to scan |
|
464 * @return object |
|
465 */ |
|
466 |
|
467 function miniPromptGetParent(obj) |
|
468 { |
|
469 while ( true ) |
|
470 { |
|
471 // prevent infinite loops |
|
472 if ( !obj || obj.tagName == 'BODY' ) |
|
473 return false; |
|
474 |
|
475 if ( $dynano(obj).hasClass('miniprompt') ) |
|
476 { |
|
477 return obj; |
|
478 } |
|
479 obj = obj.parentNode; |
|
480 } |
|
481 return false; |
|
482 } |
|
483 |
|
484 /** |
|
485 * Destroys the first miniPrompt div encountered by recursively checking all parent nodes. |
|
486 * Usage: <a href="javascript:miniPromptDestroy(this);">click</a> |
|
487 * @param object:HTMLElement a child of the div.miniprompt |
|
488 * @param bool If true, does not call enlighten(). |
|
489 */ |
|
490 |
|
491 function miniPromptDestroy(obj, nofade) |
|
492 { |
|
493 obj = miniPromptGetParent(obj); |
|
494 if ( !obj ) |
|
495 return false; |
|
496 |
|
497 // found it |
|
498 var parent = obj.parentNode; |
|
499 if ( !nofade ) |
|
500 enlighten(); |
|
501 var timeout = fly_out_top(obj, true, true); |
|
502 setTimeout(function() |
|
503 { |
|
504 parent.removeChild(obj); |
|
505 }, timeout); |
|
506 } |
|
507 |
|
508 /** |
|
509 * Simple test case |
|
510 */ |
|
511 |
|
512 function miniPromptTest() |
|
513 { |
|
514 miniPrompt(function(div) { div.innerHTML = 'hello world! <a href="#" onclick="miniPromptDestroy(this); return false;">destroy me</a>'; }); |
|
515 } |
|
516 |
391 // Function to fade classes info-box, warning-box, error-box, etc. |
517 // Function to fade classes info-box, warning-box, error-box, etc. |
392 |
518 |
393 function fadeInfoBoxes() |
519 function fadeInfoBoxes() |
394 { |
520 { |
395 var divs = new Array(); |
521 var divs = new Array(); |