Improved miniPrompt and fadefilter to properly overlap parent modal windows. MessageBox() is next. Fixed pref_disable_js_fx not working due to wrong type (number instead of boolean).
authorDan
Mon, 11 Aug 2008 11:56:25 -0400
changeset 677 2a263b598a2b
parent 676 47413d71c2d9
child 678 c5d4ce19e640
Improved miniPrompt and fadefilter to properly overlap parent modal windows. MessageBox() is next. Fixed pref_disable_js_fx not working due to wrong type (number instead of boolean).
images/icons/abort.png
images/icons/ignore.png
images/icons/retry.png
includes/clientside/static/acl.js
includes/clientside/static/enano-lib-basic.js
includes/clientside/static/fadefilter.js
includes/clientside/static/functions.js
includes/clientside/static/messagebox.js
includes/template.php
language/english/core.json
Binary file images/icons/abort.png has changed
Binary file images/icons/ignore.png has changed
Binary file images/icons/retry.png has changed
--- a/includes/clientside/static/acl.js	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/clientside/static/acl.js	Mon Aug 11 11:56:25 2008 -0400
@@ -13,6 +13,7 @@
   load_component('messagebox');
   load_component('fadefilter');
   load_component('template-compiler');
+  load_component('autofill');
   
   if(!page_id || !namespace)
   {
@@ -208,7 +209,7 @@
   usrsel = document.createElement('input');
   usrsel.type = 'text';
   usrsel.name = 'username';
-  usrsel.onkeyup = function() { new AutofillUsername(this, undefined, true); };
+  usrsel.className = 'autofill username';
   usrsel.id = 'userfield_' + aclManagerID;
   try {
     usrsel.setAttribute("autocomplete","off");
@@ -337,6 +338,10 @@
     theform.removeChild(theform.mode);
     theform.appendChild(mode);
   }
+  
+  autofill_init_element(usrsel, {
+      allow_anon: true
+    });
 }
 
 var aclDebugWin = false;
--- a/includes/clientside/static/enano-lib-basic.js	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/clientside/static/enano-lib-basic.js	Mon Aug 11 11:56:25 2008 -0400
@@ -235,14 +235,35 @@
   
   file = file + '.js';
   var uri = ( ENANO_JSRES_COMPRESSED ) ? scriptPath + '/includes/clientside/jsres.php?f=' + file : scriptPath + '/includes/clientside/static/' + file;
-  ajax.open('GET', uri, false);
-  ajax.send(null);
-  if ( ajax.readyState == 4 && ajax.status == 200 )
+  try
   {
-    onload_hooks = new Array();
-    eval_global(ajax.responseText);
+    ajax.open('GET', uri, false);
+    ajax.onreadystatechange = function()
+    {
+      if ( this.readyState == 4 && this.status != 200 )
+      {
+        alert('There was a problem loading a script from the server. Please check your network connection.');
+        load_hide_win();
+        throw('load_component(): XHR for component ' + file + ' failed');
+      }
+    }
+    ajax.send(null);
+    // async request, so if status != 200 at this point then we're screwed
+    if ( ajax.readyState == 4 && ajax.status == 200 )
+    {
+      onload_hooks = new Array();
+      eval_global(ajax.responseText);
+      load_hide_win();
+      runOnloadHooks();
+    }
+  }
+  catch(e)
+  {
+    alert('There was a problem loading a script from the server. Please check your network connection.');
     load_hide_win();
-    runOnloadHooks();
+    console.info("Component loader exception is shown below.");
+    console.debug(e);
+    throw('load_component(): XHR for component ' + file + ' failed');
   }
   
   loaded_components[file] = true;
--- a/includes/clientside/static/fadefilter.js	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/clientside/static/fadefilter.js	Mon Aug 11 11:56:25 2008 -0400
@@ -4,36 +4,37 @@
  * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100.
  */
 
-var darkener_index = 0;
+var darkener_index = [];
 
-function darken(nofade, opacVal)
+function darken(nofade, opacVal, layerid)
 {
+  layerid = ( layerid ) ? layerid : 'specialLayer_darkener';
   if(IE)
     nofade = true;
   if ( !opacVal )
     opacVal = 70;
-  darkener_index++;
-  if(document.getElementById('specialLayer_darkener'))
+  darkener_index[layerid] = ( typeof(darkener_index[layerid]) == 'number' ) ? darkener_index[layerid] + 1 : 1;
+  if(document.getElementById(layerid))
   {
     if(nofade)
     {
-      changeOpac(opacVal, 'specialLayer_darkener');
-      document.getElementById('specialLayer_darkener').style.display = 'block';
-      document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
+      changeOpac(opacVal, layerid);
+      document.getElementById(layerid).style.display = 'block';
+      document.getElementById(layerid).myOpacVal = opacVal;
     }
     else
     {
-      if ( document.getElementById('specialLayer_darkener').style.display != 'none' )
+      if ( document.getElementById(layerid).style.display != 'none' )
       {
-        var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal;
-        opacity('specialLayer_darkener', currentOpac, opacVal, 1000);
-        document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
+        var currentOpac = document.getElementById(layerid).myOpacVal;
+        opacity(layerid, currentOpac, opacVal, 1000);
+        document.getElementById(layerid).myOpacVal = opacVal;
       }
       else
       {
-        document.getElementById('specialLayer_darkener').style.display = 'block';
-        document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
-        opacity('specialLayer_darkener', 0, opacVal, 1000);
+        document.getElementById(layerid).style.display = 'block';
+        document.getElementById(layerid).myOpacVal = opacVal;
+        opacity(layerid, 0, opacVal, 1000);
       }
     }
   } else {
@@ -59,8 +60,8 @@
     thediv.style.backgroundColor = '#000000';
     thediv.style.width =  '100%';
     thediv.style.height = '100%';
-    thediv.zIndex = getHighestZ() + 5;
-    thediv.id = 'specialLayer_darkener';
+    thediv.style.zIndex = getHighestZ() + 5;
+    thediv.id = layerid;
     thediv.myOpacVal = opacVal;
     if(nofade)
     {
@@ -73,9 +74,10 @@
       body = document.getElementsByTagName('body');
       body = body[0];
       body.appendChild(thediv);
-      opacity('specialLayer_darkener', 0, opacVal, 1000);
+      opacity(layerid, 0, opacVal, 1000);
     }
   }
+  return document.getElementById(layerid);
 }
 
 /**
@@ -83,25 +85,27 @@
  * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE.
  */
 
-function enlighten(nofade)
+function enlighten(nofade, layerid)
 {
+  layerid = ( layerid ) ? layerid : 'specialLayer_darkener';
+  
   if(IE)
     nofade = true;
-  darkener_index -= 1;
-  if ( darkener_index > 0 )
+  darkener_index[layerid] -= 1;
+  if ( darkener_index[layerid] > 0 )
     return false;
-  if(document.getElementById('specialLayer_darkener'))
+  if(document.getElementById(layerid))
   {
     if(nofade)
     {
-      document.getElementById('specialLayer_darkener').style.display = 'none';
+      document.getElementById(layerid).style.display = 'none';
     }
     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);
+      var from = document.getElementById(layerid).myOpacVal;
+      opacity(layerid, from, 0, 1000);
+      setTimeout("document.getElementById('" + layerid + "').style.display = 'none';", 1000);
     }
   }
+  return document.getElementById(layerid);
 }
--- a/includes/clientside/static/functions.js	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/clientside/static/functions.js	Mon Aug 11 11:56:25 2008 -0400
@@ -159,7 +159,7 @@
   load_component('flyin');
   load_component('l10n');
   
-  darken();
+  darken(aclDisableTransitionFX);
   
   var box = document.createElement('div');
   var mainwin = document.createElement('div');
@@ -288,20 +288,28 @@
     closer.onclick = function()
     {
       var parentdiv = this.parentNode.parentNode;
-      var effect = new Spry.Effect.Blind(parentdiv, {
-          from: '100%',
-          to: '0%',
-          duration: '1000'
-        });
-      var observer = {
-        onPostEffect: function()
-          {
-            parentdiv.parentNode.removeChild(parentdiv);
-            enlighten();
-          }
-        };
-      effect.addObserver(observer);
-      effect.start();
+      if ( aclDisableTransitionFX )
+      {
+        parentdiv.parentNode.removeChild(parentdiv);
+        enlighten(aclDisableTransitionFX);
+      }
+      else
+      {
+        var effect = new Spry.Effect.Blind(parentdiv, {
+            from: '100%',
+            to: '0%',
+            duration: '1000'
+          });
+        var observer = {
+          onPostEffect: function()
+            {
+              parentdiv.parentNode.removeChild(parentdiv);
+              enlighten();
+            }
+          };
+        effect.addObserver(observer);
+        effect.start();
+      }
     }
     panel.appendChild(closer);
     
@@ -316,6 +324,7 @@
     
     box.style.display = 'block';
     box.style.position = 'absolute';
+    box.style.zIndex = getHighestZ() + 1;
     domObjChangeOpac(0, box);
     
     var body = document.getElementsByTagName('body')[0];
@@ -331,17 +340,25 @@
     box.style.left = left + 'px';
     
     // we have width and height, set display to none and reset opacity
-    box.style.display = 'none';
-    domObjChangeOpac(100, box);
-    
-    setTimeout(function()
-      {
-        (new Spry.Effect.Blind(box, {
-            from: '0%',
-            to: '100%',
-            duration: 1000
-          })).start();
-      }, 1000);
+    if ( aclDisableTransitionFX )
+    {
+      domObjChangeOpac(100, box);
+      box.style.display = 'block';
+    }
+    else
+    {
+      box.style.display = 'none';
+      domObjChangeOpac(100, box);
+      
+      setTimeout(function()
+        {
+          (new Spry.Effect.Blind(box, {
+              from: '0%',
+              to: '100%',
+              duration: 1000
+            })).start();
+        }, 1000);
+    }
 }
 
 /**
@@ -721,7 +738,7 @@
   {
     if(divs[i].style.zIndex > z) z = divs[i].style.zIndex;
   }
-  return z;
+  return parseInt(z);
 }
 
 var shift = false;
--- a/includes/clientside/static/messagebox.js	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/clientside/static/messagebox.js	Mon Aug 11 11:56:25 2008 -0400
@@ -325,24 +325,9 @@
   if ( !aclDisableTransitionFX )
   {
     load_component('flyin');
+    load_component('SpryEffects');
   }
-  if ( document.getElementById('specialLayer_darkener') )
-  {
-    if ( document.getElementById('specialLayer_darkener').style.display != 'none' )
-    {
-      var opac = parseFloat(document.getElementById('specialLayer_darkener').style.opacity);
-      opac = opac * 100;
-      darken(aclDisableTransitionFX, opac);
-    }
-    else
-    {
-      darken(aclDisableTransitionFX, 40);
-    }
-  }
-  else
-  {
-    darken(aclDisableTransitionFX, 40);
-  }
+  var darkener = darken(aclDisableTransitionFX, 40, 'miniprompt_darkener');
   
   var wrapper = document.createElement('div');
   wrapper.className = 'miniprompt';
@@ -381,6 +366,17 @@
       }, 40);
   }
   
+  // set the darkener's onclick to refocus/shake the miniprompt
+  darkener.miniprompt = wrapper;
+  darkener.onclick = function()
+  {
+    if ( !aclDisableTransitionFX )
+    {
+      // for some reason, spry's pulsate effects takes duration in ms instead of seconds.
+      (new Spry.Effect.Pulsate(this.miniprompt, { duration: 500, from: '100%', to: '70%' })).start();
+    }
+  }
+  
   return wrapper;
 }
 
@@ -411,7 +407,7 @@
  * 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().
+ * @param bool (DEPRECATED) If true, does not call enlighten().
  */
 
 function miniPromptDestroy(obj, nofade)
@@ -422,8 +418,9 @@
   
   // found it
   var parent = obj.parentNode;
-  if ( !nofade )
-    enlighten(aclDisableTransitionFX);
+  // if ( !nofade )
+  //   enlighten(aclDisableTransitionFX);
+  enlighten(aclDisableTransitionFX, 'miniprompt_darkener');
   if ( aclDisableTransitionFX )
   {
     parent.removeChild(obj);
@@ -552,10 +549,11 @@
         }
         if ( parms.buttons[0] )
         {
+          var timeout = ( aclDisableTransitionFX ) ? 10 : 1000;
           setTimeout(function()
             {
               parms.buttons[0].input.focus();
-            }, 1000);
+            }, timeout);
         }
       }
       catch ( e )
@@ -577,6 +575,7 @@
         style: {
           fontWeight: 'bold'
         },
+        image: cdnPath + '/images/icons/abort.png',
         onclick: function() {
           miniPromptDestroy(this);
         }
@@ -584,6 +583,7 @@
       {
         text: 'Retry',
         color: 'blue',
+        image: cdnPath + '/images/icons/retry.png',
         onclick: function() {
           miniPromptDestroy(this);
         }
@@ -591,6 +591,7 @@
       {
         text: 'Ignore',
         color: 'green',
+        image: cdnPath + '/images/icons/ignore.png',
         onclick: function() {
           miniPromptDestroy(this);
         }
--- a/includes/template.php	Tue Aug 05 13:59:06 2008 -0400
+++ b/includes/template.php	Mon Aug 11 11:56:25 2008 -0400
@@ -1140,7 +1140,7 @@
       var USER_LEVEL_MOD = ' . USER_LEVEL_MOD . ';
       var USER_LEVEL_ADMIN = ' . USER_LEVEL_ADMIN . ';
       var disable_redirect = ' . ( isset($_GET['redirect']) && $_GET['redirect'] == 'no' ? 'true' : 'false' ) . ';
-      var pref_disable_js_fx = ' . ( @$session->user_extra['disable_js_fx'] == 1 ? '1' : '0' ) . ';
+      var pref_disable_js_fx = ' . ( @$session->user_extra['disable_js_fx'] == 1 ? 'true' : 'false' ) . ';
       var csrf_token = "' . $session->csrf_token . '";
       var editNotice = \'' . ( (getConfig('wiki_edit_notice')=='1') ? str_replace("\n", "\\\n", RenderMan::render(getConfig('wiki_edit_notice_text'))) : '' ) . '\';
       var prot = ' . ( ($protected) ? 'true' : 'false' ) .'; // No, hacking this var won\'t work, it\'s re-checked on the server
--- a/language/english/core.json	Tue Aug 05 13:59:06 2008 -0400
+++ b/language/english/core.json	Mon Aug 11 11:56:25 2008 -0400
@@ -470,7 +470,7 @@
       badjson_msg_viewashtml: 'You may also choose to view the response as HTML.',
       badjson_btn_viewashtml: 'View as HTML',
       badjson_html_confirm_title: 'View the response as HTML?',
-      badjson_html_confirm_body: 'If the server\'s response was modified by an attacker to include malicious code, viewing the response as HTML might allow that malicious code to run. Only continue if you have inspected the response text and verified that it is safe.',
+      badjson_html_confirm_body: 'If the server\'s response was modified by an attacker to include malicious code, viewing the response as HTML might allow that malicious code to run. Only continue if you have inspected the response text and verified that it is safe.\n\nThe information in JSON responses is typically only meant to be useful to developers and the Enano applets.',
       badjson_btn_close: 'Close',
       
       // Server-side responses