includes/clientside/static/faders.js
changeset 522 fd46b1bf708e
parent 509 175df10e0b56
child 537 547b7ba6d535
--- 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: <a href="javascript:miniPromptDestroy(this);">click</a>
+ * @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! <a href="#" onclick="miniPromptDestroy(this); return false;">destroy me</a>'; });
+}
+
 // Function to fade classes info-box, warning-box, error-box, etc.
 
 function fadeInfoBoxes()