# HG changeset patch # User Dan # Date 1254355283 14400 # Node ID 367768040a6151450e25b71f3586428a9e142a9d # Parent 1e956881d362ea5a338c0ae07f1d3a53f90e7ef7 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. diff -r 1e956881d362 -r 367768040a61 includes/clientside/static/ajax.js --- 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) diff -r 1e956881d362 -r 367768040a61 includes/clientside/static/flyin.js --- 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); } } diff -r 1e956881d362 -r 367768040a61 includes/clientside/static/functions.js --- 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); } diff -r 1e956881d362 -r 367768040a61 includes/clientside/static/login.js --- 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; } diff -r 1e956881d362 -r 367768040a61 includes/clientside/static/messagebox.js --- 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; } }, {