diff -r 94214ec0871c -r fd46b1bf708e includes/clientside/static/faders.js --- a/includes/clientside/static/faders.js Sun Apr 06 15:30:39 2008 -0400 +++ b/includes/clientside/static/faders.js Tue Apr 08 20:08:35 2008 -0400 @@ -1,20 +1,39 @@ -// Message box system +// Message box and visual effect system -function darken(nofade) +/** + * 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(). + * @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. + * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100. + */ + +function darken(nofade, opacVal) { if(IE) nofade = true; + if ( !opacVal ) + opacVal = 70; if(document.getElementById('specialLayer_darkener')) { if(nofade) { - changeOpac(70, 'specialLayer_darkener'); + changeOpac(opacVal, 'specialLayer_darkener'); document.getElementById('specialLayer_darkener').style.display = 'block'; + document.getElementById('specialLayer_darkener').myOpacVal = opacVal; } else { - document.getElementById('specialLayer_darkener').style.display = 'block'; - opacity('specialLayer_darkener', 0, 70, 1000); + if ( document.getElementById('specialLayer_darkener').style.display != 'none' ) + { + var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal; + opacity('specialLayer_darkener', currentOpac, opacVal, 1000); + document.getElementById('specialLayer_darkener').myOpacVal = opacVal; + } + else + { + document.getElementById('specialLayer_darkener').style.display = 'block'; + document.getElementById('specialLayer_darkener').myOpacVal = opacVal; + opacity('specialLayer_darkener', 0, opacVal, 1000); + } } } else { w = getWidth(); @@ -41,10 +60,11 @@ thediv.style.height = '100%'; thediv.zIndex = getHighestZ() + 5; thediv.id = 'specialLayer_darkener'; + thediv.myOpacVal = opacVal; if(nofade) { - thediv.style.opacity = '0.7'; - thediv.style.filter = 'alpha(opacity=70)'; + thediv.style.opacity = ( parseFloat(opacVal) / 100 ); + thediv.style.filter = 'alpha(opacity=' + opacVal + ')'; body = document.getElementsByTagName('body'); body = body[0]; body.appendChild(thediv); @@ -52,11 +72,16 @@ body = document.getElementsByTagName('body'); body = body[0]; body.appendChild(thediv); - opacity('specialLayer_darkener', 0, 70, 1000); + opacity('specialLayer_darkener', 0, opacVal, 1000); } } } +/** + * Un-darkens the screen and re-enables clicking of on-screen controls. + * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE. + */ + function enlighten(nofade) { if(IE) @@ -67,8 +92,13 @@ { document.getElementById('specialLayer_darkener').style.display = 'none'; } - opacity('specialLayer_darkener', 70, 0, 1000); - setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); + else + { + var from = document.getElementById('specialLayer_darkener').myOpacVal; + // console.info('Fading from ' + from); + opacity('specialLayer_darkener', from, 0, 1000); + setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); + } } } @@ -388,6 +418,102 @@ } } +/** + * The miniPrompt function, for creating small prompts and dialogs. The window will be flown in and the window darkened with opac=0.4. + * @param function Will be passed an HTMLElement that is the body of the prompt window; the function can do with this as it pleases + */ + +function miniPrompt(call_on_create) +{ + darken(false, 40); + + var wrapper = document.createElement('div'); + wrapper.className = 'miniprompt'; + var top = document.createElement('div'); + top.className = 'mp-top'; + var body = document.createElement('div'); + body.className = 'mp-body'; + var bottom = document.createElement('div'); + bottom.className = 'mp-bottom'; + if ( typeof(call_on_create) == 'function' ) + { + call_on_create(body); + } + wrapper.appendChild(top); + wrapper.appendChild(body); + wrapper.appendChild(bottom); + var left = ( getWidth() / 2 ) - ( 388 / 2 ); + wrapper.style.left = left + 'px'; + var top = getScrollOffset() - 27; + wrapper.style.top = top + 'px'; + domObjChangeOpac(0, wrapper); + var realbody = document.getElementsByTagName('body')[0]; + realbody.appendChild(wrapper); + + fly_in_top(wrapper, true, true); + + setTimeout(function() + { + domObjChangeOpac(100, wrapper); + }, 40); +} + +/** + * 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. + * @param object:HTMLElement Child node to scan + * @return object + */ + +function miniPromptGetParent(obj) +{ + while ( true ) + { + // prevent infinite loops + if ( !obj || obj.tagName == 'BODY' ) + return false; + + if ( $dynano(obj).hasClass('miniprompt') ) + { + return obj; + } + obj = obj.parentNode; + } + return false; +} + +/** + * Destroys the first miniPrompt div encountered by recursively checking all parent nodes. + * Usage: click + * @param object:HTMLElement a child of the div.miniprompt + * @param bool If true, does not call enlighten(). + */ + +function miniPromptDestroy(obj, nofade) +{ + obj = miniPromptGetParent(obj); + if ( !obj ) + return false; + + // found it + var parent = obj.parentNode; + if ( !nofade ) + enlighten(); + var timeout = fly_out_top(obj, true, true); + setTimeout(function() + { + parent.removeChild(obj); + }, timeout); +} + +/** + * Simple test case + */ + +function miniPromptTest() +{ + miniPrompt(function(div) { div.innerHTML = 'hello world! destroy me'; }); +} + // Function to fade classes info-box, warning-box, error-box, etc. function fadeInfoBoxes()