Javascript lib: UX: When whiteOutReportSuccess() is called on a whiteout over a miniPrompt, the miniPrompt and whiteout are now flown out together. Also, a bit of improvement to message box DOM object destruction code; this fixes problems with message boxes appearing below the shade when ajax auth is done 3 or more times in one page load.
--- a/includes/clientside/static/ajax.js Sat Sep 26 15:26:14 2009 -0400
+++ b/includes/clientside/static/ajax.js Wed Sep 30 20:01:23 2009 -0400
@@ -144,10 +144,6 @@
if ( response.success )
{
whiteOutReportSuccess(whitey);
- setTimeout(function()
- {
- miniPromptDestroy(mp);
- }, 1250);
// update protect button
var btn = $('#tb_ajax_protect_btn').get(0);
btn.level = level;
@@ -584,10 +580,6 @@
ajaxGet(stdAjaxPrefix+'&_mode=resetdelvotes', function(ajax) {
if ( ajax.readyState == 4 && ajax.status == 200 ) {
whiteOutReportSuccess(whitey);
- setTimeout(function()
- {
- miniPromptDestroy(box);
- }, 1250);
item = document.getElementById('mdgDeleteVoteNoticeBox');
if(item)
--- a/includes/clientside/static/flyin.js Sat Sep 26 15:26:14 2009 -0400
+++ b/includes/clientside/static/flyin.js Wed Sep 30 20:01:23 2009 -0400
@@ -10,6 +10,8 @@
var FI_OUT = 2;
var FI_UP = 1;
var FI_DOWN = 2;
+// increase to slow down transitions (for debug)
+var FI_MULTIPLIER = 1;
/**
* You can thank Robert Penner for the math used here. Ported from an ActionScript class.
@@ -68,6 +70,11 @@
{
if ( !element || typeof(element) != 'object' )
return false;
+
+ // force to array
+ if ( !element.length )
+ element = [ element ];
+
// target dimensions
var top, left;
// initial dimensions
@@ -81,10 +88,11 @@
// temp vars
var dim, off, diff, dist, ratio, opac_factor;
// setup element
- element.style.position = 'absolute';
+ for ( var i = 0; i < element.length; i++ )
+ element[i].style.position = 'absolute';
- dim = [ $dynano(element).Height(), $dynano(element).Width() ];
- off = [ $dynano(element).Top(), $dynano(element).Left() ];
+ dim = [ $dynano(element[0]).Height(), $dynano(element[0]).Width() ];
+ off = [ $dynano(element[0]).Top(), $dynano(element[0]).Left() ];
if ( height_taken_care_of )
{
@@ -127,7 +135,7 @@
var frames = 100;
var timeout = 0;
- var timerstep = 8;
+ var timerstep = 8 * FI_MULTIPLIER;
// cache element so it can be changed from within setTimeout()
var rand_seed = Math.floor(Math.random() * 1000000);
@@ -137,11 +145,17 @@
{
topc = GlideEffect.easeInOut(i, topi, diff_top, frames);
leftc = GlideEffect.easeInOut(i, lefti, diff_left, frames);
- var code = 'var o = fly_in_cache['+rand_seed+']; o.style.top=\''+topc+'px\';';
+
+ var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
+ code += 'for ( var i = 0; i < element.length; i++ )' + "\n";
+ code += '{' + "\n";
+ code += ' element[i].style.top = "' + topc + 'px";' + "\n";
if ( !height_taken_care_of )
- code += ' o.style.left=\''+leftc+'px\'';
- code += ';';
+ code += ' element[i].style.left = "' + leftc + 'px";' + "\n";
+ code += '}';
+
setTimeout(code, timeout);
+
timeout += timerstep;
var ratio = i / frames;
@@ -152,7 +166,14 @@
var opac_factor = ratio * 100;
if ( direction == FI_OUT )
opac_factor = 100 - opac_factor;
- setTimeout('var o = fly_in_cache['+rand_seed+']; domObjChangeOpac('+opac_factor+', o);', timeout);
+
+ var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
+ code += 'for ( var i = 0; i < element.length; i++ )' + "\n";
+ code += '{' + "\n";
+ code += ' domObjChangeOpac(' + opac_factor + ', element[i]);' + "\n";
+ code += '}';
+
+ setTimeout(code, timeout);
}
}
--- a/includes/clientside/static/functions.js Sat Sep 26 15:26:14 2009 -0400
+++ b/includes/clientside/static/functions.js Wed Sep 30 20:01:23 2009 -0400
@@ -672,20 +672,28 @@
* briefly fades in, then fades out and destroys the box so as to re-allow control over the underlying element
*/
-function whiteOutReportSuccess(whitey)
+function whiteOutReportSuccess(whitey, nodestroy_mp)
{
- whiteOutDestroyWithImage(whitey, cdnPath + '/images/check.png');
+ whiteOutDestroyWithImage(whitey, cdnPath + '/images/check.png', nodestroy_mp);
}
-function whiteOutReportFailure(whitey)
+function whiteOutReportFailure(whitey, nodestroy_mp)
{
- whiteOutDestroyWithImage(whitey, cdnPath + '/images/checkbad.png');
+ if ( typeof(nodestroy_mp) == undefined )
+ nodestroy_mp = true;
+
+ whiteOutDestroyWithImage(whitey, cdnPath + '/images/checkbad.png', nodestroy_mp);
}
-function whiteOutDestroyWithImage(whitey, image)
+function whiteOutDestroyWithImage(whitey, image, nodestroy_mp)
{
// fade the status indicator in and then out
whitey.style.backgroundImage = 'url(' + image + ')';
+ if ( whitey.isMiniPrompt && !nodestroy_mp )
+ {
+ whiteOutDestroyOnMiniPrompt(whitey);
+ return true;
+ }
if ( aclDisableTransitionFX )
{
domObjChangeOpac(80, whitey);
@@ -868,7 +876,7 @@
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
{
- if(divs[i].style.zIndex > z) z = divs[i].style.zIndex;
+ if(divs[i].style.zIndex > z && divs[i].style.display != 'none' && divs[i].innerHTML != '') z = divs[i].style.zIndex;
}
return parseInt(z);
}
--- a/includes/clientside/static/login.js Sat Sep 26 15:26:14 2009 -0400
+++ b/includes/clientside/static/login.js Wed Sep 30 20:01:23 2009 -0400
@@ -1170,10 +1170,6 @@
}, function(response)
{
whiteOutReportSuccess(whitey);
- setTimeout(function()
- {
- miniPromptDestroy(mp);
- }, 1250);
});
return false;
}
--- a/includes/clientside/static/messagebox.js Sat Sep 26 15:26:14 2009 -0400
+++ b/includes/clientside/static/messagebox.js Wed Sep 30 20:01:23 2009 -0400
@@ -233,8 +233,7 @@
this.destroy = function()
{
var mbdiv = document.getElementById('messageBox');
- mbdiv.parentNode.removeChild(mbdiv.nextSibling);
- mbdiv.parentNode.removeChild(mbdiv);
+ mbdiv.parentNode.parentNode.removeChild(mbdiv.parentNode);
if ( !mb_previously_had_darkener )
enlighten(true);
};
@@ -292,7 +291,7 @@
else
{
var to = fly_out_top(maindiv, true, false);
- setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); if ( !mb_previously_had_darkener ) enlighten(true);", to);
+ setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.parentNode.removeChild(mbdiv.parentNode); if ( !mb_previously_had_darkener ) enlighten(true);", to);
}
if(typeof mb.onclick[val] == 'function')
{
@@ -578,33 +577,55 @@
function whiteOutMiniPrompt(el)
{
- var top = getScrollOffset();
- var left = ( getWidth() / 2 ) - ( 320 / 2);
+ el = miniPromptGetParent(el);
var width = 320;
var height = $dynano(el).Height() - 58;
+ var topoffset = 27;
+
+ var container = document.createElement('div');
+ container.style.padding = topoffset + 'px 0 0 0';
+
+ var top = getScrollOffset();
+ var left = getWidth() / 2 - width / 2;
+
+ // using fixed here allows modal windows to be blacked out
+ container.style.position = 'absolute';
+ container.style.top = ( top - topoffset ) + 'px';
+ container.style.left = left + 'px';
+ container.style.zIndex = 1000;
var blackout = document.createElement('div');
- // using fixed here allows modal windows to be blacked out
- blackout.style.position = ( el.style.position == 'fixed' ) ? 'fixed' : 'absolute';
- blackout.style.top = top + 'px';
- blackout.style.left = left + 'px';
+ blackout.style.backgroundColor = '#ffffff';
blackout.style.width = width + 'px';
blackout.style.height = height + 'px';
-
- blackout.style.backgroundColor = '#FFFFFF';
domObjChangeOpac(60, blackout);
var background = ( $dynano(el).Height() < 48 ) ? 'url(' + scriptPath + '/images/loading.gif)' : 'url(' + scriptPath + '/includes/clientside/tinymce/themes/advanced/skins/default/img/progress.gif)';
blackout.style.backgroundImage = background;
blackout.style.backgroundPosition = 'center center';
blackout.style.backgroundRepeat = 'no-repeat';
- blackout.style.zIndex = '1000';
+ blackout.isMiniPrompt = true;
+ blackout.miniPromptObj = el;
+ container.appendChild(blackout);
var body = document.getElementsByTagName('body')[0];
- body.appendChild(blackout);
+ body.appendChild(container);
return blackout;
}
+function whiteOutDestroyOnMiniPrompt(whitey)
+{
+ var body = document.getElementsByTagName('body')[0];
+ var parent = whitey.miniPromptObj;
+ fly_out_top([parent, whitey.parentNode], true, true);
+ setTimeout(function()
+ {
+ body.removeChild(parent);
+ body.removeChild(whitey.parentNode);
+ }, 1000 * FI_MULTIPLIER);
+ enlighten(true, 'miniprompt_darkener');
+}
+
function testMPMessageBox()
{
miniPromptMessage({
@@ -619,7 +640,18 @@
},
sprite: [ cdnPath + '/images/icons/abortretryignore-sprite.png', 16, 16, 0, 0 ],
onclick: function() {
- miniPromptDestroy(this);
+ var w = whiteOutMiniPrompt(this);
+ var me = this;
+ setTimeout(function()
+ {
+ whiteOutReportSuccess(w, true);
+ void(me);
+ setTimeout(function()
+ {
+ miniPromptDestroy(me);
+ }, 1250);
+ }, 500);
+ return false;
}
},
{
@@ -627,7 +659,12 @@
color: 'blue',
sprite: [ cdnPath + '/images/icons/abortretryignore-sprite.png', 16, 16, 0, 16 ],
onclick: function() {
- miniPromptDestroy(this);
+ var w = whiteOutMiniPrompt(this);
+ setTimeout(function()
+ {
+ whiteOutReportSuccess(w);
+ }, 1500);
+ return false;
}
},
{