includes/clientside/static/faders.js
changeset 1 fe660c52c48f
child 32 4d87aad3c4c0
equal deleted inserted replaced
0:902822492a68 1:fe660c52c48f
       
     1 // Message box system
       
     2 
       
     3 function darken(nofade)
       
     4 {
       
     5   if(IE)
       
     6     nofade = true;
       
     7   if(document.getElementById('specialLayer_darkener'))
       
     8   {
       
     9     document.getElementById('specialLayer_darkener').style.display = 'block';
       
    10     if(nofade)
       
    11     {
       
    12       document.getElementById('specialLayer_darkener').style.opacity = '0.7';
       
    13       document.getElementById('specialLayer_darkener').style.filter = 'alpha(opacity=70)';
       
    14     }
       
    15     else
       
    16     {
       
    17       opacity('specialLayer_darkener', 0, 70, 1000);
       
    18     }
       
    19   } else {
       
    20     w = getWidth();
       
    21     h = getHeight();
       
    22     var thediv = document.createElement('div');
       
    23     if(IE)
       
    24       thediv.style.position = 'absolute';
       
    25     else
       
    26       thediv.style.position = 'fixed';
       
    27     thediv.style.top = '0px';
       
    28     thediv.style.left = '0px';
       
    29     thediv.style.opacity = '0';
       
    30     thediv.style.filter = 'alpha(opacity=0)';
       
    31     thediv.style.backgroundColor = '#000000';
       
    32     thediv.style.width =  '100%';
       
    33     thediv.style.height = '100%';
       
    34     thediv.zIndex = getHighestZ() + 5;
       
    35     thediv.id = 'specialLayer_darkener';
       
    36     if(nofade)
       
    37     {
       
    38       thediv.style.opacity = '0.7';
       
    39       thediv.style.filter = 'alpha(opacity=70)';
       
    40       body = document.getElementsByTagName('body');
       
    41       body = body[0];
       
    42       body.appendChild(thediv);
       
    43     } else {
       
    44       body = document.getElementsByTagName('body');
       
    45       body = body[0];
       
    46       body.appendChild(thediv);
       
    47       opacity('specialLayer_darkener', 0, 70, 1000);
       
    48     }
       
    49   }
       
    50 }
       
    51 
       
    52 function enlighten(nofade)
       
    53 {
       
    54   if(IE)
       
    55     nofade = true;
       
    56   if(document.getElementById('specialLayer_darkener'))
       
    57   {
       
    58     if(nofade)
       
    59     {
       
    60       document.getElementById('specialLayer_darkener').style.display = 'none';
       
    61     }
       
    62     opacity('specialLayer_darkener', 70, 0, 1000);
       
    63     setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000);
       
    64   }
       
    65 }
       
    66 
       
    67 /**
       
    68  * The ultimate message box framework for Javascript
       
    69  * Syntax is (almost) identical to the MessageBox command in NSIS
       
    70  * @param int type - a bitfield consisting of the MB_* constants
       
    71  * @param string title - the blue text at the top of the window
       
    72  * @param string text - HTML for the body of the message box
       
    73  * Properties:
       
    74  *   onclick - an array of functions to be called on button click events
       
    75  *             NOTE: key names are to be strings, and they must be the value of the input, CaSe-SeNsItIvE
       
    76  *   onbeforeclick - same as onclick but called before the messagebox div is destroyed
       
    77  * Example:
       
    78  *   var my_message = new messagebox(MB_OK|MB_ICONSTOP, 'Error logging in', 'The username and/or password is incorrect. Please check the username and retype your password');
       
    79  *   my_message.onclick['OK'] = function() {
       
    80  *       document.getElementById('password').value = '';
       
    81  *     };
       
    82  * Deps:
       
    83  *   Modern browser that supports DOM
       
    84  *   darken() and enlighten() (above)
       
    85  *   opacity() - required for darken() and enlighten()
       
    86  *   MB_* constants are defined in enano-lib-basic.js
       
    87  */
       
    88 
       
    89 var mb_current_obj;
       
    90 
       
    91 function messagebox(type, title, message)
       
    92 {
       
    93   var y = getScrollOffset();
       
    94   if(document.getElementById('messageBox')) return;
       
    95   darken(true);
       
    96   var master_div = document.createElement('div');
       
    97   var mydiv = document.createElement('div');
       
    98   mydiv.style.width = '400px';
       
    99   mydiv.style.height = '200px';
       
   100   w = getWidth();
       
   101   h = getHeight();
       
   102   //master_div.style.left = (w / 2) - 200+'px';
       
   103   //master_div.style.top = (h / 2) + y - 120+'px';
       
   104   master_div.style.top = '-10000px';
       
   105   master_div.style.position = ( IE ) ? 'absolute' : 'fixed';
       
   106   z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex;
       
   107   mydiv.style.zIndex = parseInt(z) + 1;
       
   108   mydiv.style.backgroundColor = '#FFFFFF';
       
   109   mydiv.style.padding = '10px';
       
   110   mydiv.style.marginBottom = '1px';
       
   111   mydiv.id = 'messageBox';
       
   112   mydiv.style.overflow = 'auto';
       
   113   
       
   114   var buttondiv = document.createElement('div');
       
   115   buttondiv.style.width = '400px';
       
   116   w = getWidth();
       
   117   h = getHeight();
       
   118   // buttondiv.style.left = (w / 2) - 200+'px';
       
   119   // buttondiv.style.top = (h / 2) + y + 101+'px';
       
   120   // buttondiv.style.position = ( IE ) ? 'absolute' : 'fixed';
       
   121   z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex;
       
   122   buttondiv.style.zIndex = parseInt(z) + 1;
       
   123   buttondiv.style.backgroundColor = '#C0C0C0';
       
   124   buttondiv.style.padding = '10px';
       
   125   buttondiv.style.textAlign = 'right';
       
   126   buttondiv.style.verticalAlign = 'middle';
       
   127   buttondiv.id = 'messageBoxButtons';
       
   128   
       
   129   this.clickHandler = function() { messagebox_click(this, mb_current_obj); };
       
   130   
       
   131   if(type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION || type & MB_ICONLOCK)
       
   132   {
       
   133     mydiv.style.paddingLeft = '50px';
       
   134     mydiv.style.width = '360px';
       
   135     mydiv.style.backgroundRepeat = 'no-repeat';
       
   136   }
       
   137   
       
   138   if(type & MB_ICONINFORMATION)
       
   139   {
       
   140     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')';
       
   141   }
       
   142   
       
   143   if(type & MB_ICONQUESTION)
       
   144   {
       
   145     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')';
       
   146   }
       
   147   
       
   148   if(type & MB_ICONSTOP)
       
   149   {
       
   150     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')';
       
   151   }
       
   152   
       
   153   if(type & MB_ICONEXCLAMATION)
       
   154   {
       
   155     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')';
       
   156   }
       
   157   
       
   158   if(type & MB_ICONLOCK)
       
   159   {
       
   160     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')';
       
   161   }
       
   162   
       
   163   if(type & MB_OK)
       
   164   {
       
   165     btn = document.createElement('input');
       
   166     btn.type = 'button';
       
   167     btn.value = 'OK';
       
   168     btn.onclick = this.clickHandler;
       
   169     btn.style.margin = '0 3px';
       
   170     buttondiv.appendChild(btn);
       
   171   }
       
   172   
       
   173   if(type & MB_OKCANCEL)
       
   174   {
       
   175     btn = document.createElement('input');
       
   176     btn.type = 'button';
       
   177     btn.value = 'OK';
       
   178     btn.onclick = this.clickHandler;
       
   179     btn.style.margin = '0 3px';
       
   180     buttondiv.appendChild(btn);
       
   181     
       
   182     btn = document.createElement('input');
       
   183     btn.type = 'button';
       
   184     btn.value = 'Cancel';
       
   185     btn.onclick = this.clickHandler;
       
   186     btn.style.margin = '0 3px';
       
   187     buttondiv.appendChild(btn);
       
   188   }
       
   189   
       
   190   if(type & MB_YESNO)
       
   191   {
       
   192     btn = document.createElement('input');
       
   193     btn.type = 'button';
       
   194     btn.value = 'Yes';
       
   195     btn.onclick = this.clickHandler;
       
   196     btn.style.margin = '0 3px';
       
   197     buttondiv.appendChild(btn);
       
   198     
       
   199     btn = document.createElement('input');
       
   200     btn.type = 'button';
       
   201     btn.value = 'No';
       
   202     btn.onclick = this.clickHandler;
       
   203     btn.style.margin = '0 3px';
       
   204     buttondiv.appendChild(btn);
       
   205   }
       
   206   
       
   207   if(type & MB_YESNOCANCEL)
       
   208   {
       
   209     btn = document.createElement('input');
       
   210     btn.type = 'button';
       
   211     btn.value = 'Yes';
       
   212     btn.onclick = this.clickHandler;
       
   213     btn.style.margin = '0 3px';
       
   214     buttondiv.appendChild(btn);
       
   215     
       
   216     btn = document.createElement('input');
       
   217     btn.type = 'button';
       
   218     btn.value = 'No';
       
   219     btn.onclick = this.clickHandler;
       
   220     btn.style.margin = '0 3px';
       
   221     buttondiv.appendChild(btn);
       
   222     
       
   223     btn = document.createElement('input');
       
   224     btn.type = 'button';
       
   225     btn.value = 'Cancel';
       
   226     btn.onclick = this.clickHandler;
       
   227     btn.style.margin = '0 3px';
       
   228     buttondiv.appendChild(btn);
       
   229   }
       
   230   
       
   231   heading = document.createElement('h2');
       
   232   heading.innerHTML = title;
       
   233   heading.style.color = '#50A0D0';
       
   234   heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif';
       
   235   heading.style.fontSize = '12pt';
       
   236   heading.style.fontWeight = 'lighter';
       
   237   heading.style.textTransform = 'lowercase';
       
   238   heading.style.marginTop = '0';
       
   239   mydiv.appendChild(heading);
       
   240   
       
   241   var text = document.createElement('div');
       
   242   text.innerHTML = String(message);
       
   243   this.text_area = text;
       
   244   mydiv.appendChild(text);
       
   245   
       
   246   this.updateContent = function(text)
       
   247     {
       
   248       this.text_area.innerHTML = text;
       
   249     };
       
   250   
       
   251   //domObjChangeOpac(0, mydiv);
       
   252   //domObjChangeOpac(0, master_div);
       
   253   
       
   254   body = document.getElementsByTagName('body');
       
   255   body = body[0];
       
   256   master_div.appendChild(mydiv);
       
   257   master_div.appendChild(buttondiv);
       
   258   
       
   259   body.appendChild(master_div);
       
   260   
       
   261   setTimeout('mb_runFlyIn();', 100);
       
   262   
       
   263   this.onclick = new Array();
       
   264   this.onbeforeclick = new Array();
       
   265   mb_current_obj = this;
       
   266 }
       
   267 
       
   268 function mb_runFlyIn()
       
   269 {
       
   270   var mydiv = document.getElementById('messageBox');
       
   271   var maindiv = mydiv.parentNode;
       
   272   fly_in_top(maindiv, true, false);
       
   273 }
       
   274 
       
   275 function messagebox_click(obj, mb)
       
   276 {
       
   277   val = obj.value;
       
   278   if(typeof mb.onbeforeclick[val] == 'function')
       
   279   {
       
   280     var o = mb.onbeforeclick[val];
       
   281     var resp = o();
       
   282     if ( resp )
       
   283       return false;
       
   284     o = false;
       
   285   }
       
   286   
       
   287   var mydiv = document.getElementById('messageBox');
       
   288   var maindiv = mydiv.parentNode;
       
   289   var to = fly_out_top(maindiv, true, false);
       
   290   
       
   291   setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); enlighten(true);", to);
       
   292   if(typeof mb.onclick[val] == 'function')
       
   293   {
       
   294     o = mb.onclick[val];
       
   295     o();
       
   296     o = false;
       
   297   }
       
   298 }
       
   299 
       
   300 function testMessageBox()
       
   301 {
       
   302   mb = new messagebox(MB_OKCANCEL|MB_ICONINFORMATION, 'Javascripted dynamic message boxes', 'This is soooooo coool, now if only document.createElement() worked in IE!<br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text');
       
   303   mb.onclick['OK'] = function()
       
   304     {
       
   305       alert('You clicked OK!');
       
   306     }
       
   307   mb.onbeforeclick['Cancel'] = function()
       
   308     {
       
   309       alert('You clicked Cancel!');
       
   310     }
       
   311 }
       
   312 
       
   313 // Function to fade classes info-box, warning-box, error-box, etc.
       
   314 
       
   315 function fadeInfoBoxes()
       
   316 {
       
   317   var divs = new Array();
       
   318   d = document.getElementsByTagName('div');
       
   319   j = 0;
       
   320   for(var i in d)
       
   321   {
       
   322     if ( !d[i].tagName )
       
   323       continue;
       
   324     if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box')
       
   325     {
       
   326       divs[j] = d[i];
       
   327       j++;
       
   328     }
       
   329   }
       
   330   if(divs.length < 1) return;
       
   331   for(i in divs)
       
   332   {
       
   333     if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000);
       
   334     switch(divs[i].className)
       
   335     {
       
   336       case 'info-box':
       
   337       default:
       
   338         from = '#3333FF';
       
   339         break;
       
   340       case 'error-box':
       
   341         from = '#FF3333';
       
   342         break;
       
   343       case 'warning-box':
       
   344         from = '#FFFF33';
       
   345         break;
       
   346       case 'question-box':
       
   347         from = '#33FF33';
       
   348         break;
       
   349     }
       
   350     Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id));
       
   351   }
       
   352 }
       
   353 
       
   354 // Alpha fades
       
   355 
       
   356 function opacity(id, opacStart, opacEnd, millisec) {
       
   357     //speed for each frame
       
   358     var speed = Math.round(millisec / 100);
       
   359     var timer = 0;
       
   360 
       
   361     //determine the direction for the blending, if start and end are the same nothing happens
       
   362     if(opacStart > opacEnd) {
       
   363         for(i = opacStart; i >= opacEnd; i--) {
       
   364             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
       
   365             timer++;
       
   366         }
       
   367     } else if(opacStart < opacEnd) {
       
   368         for(i = opacStart; i <= opacEnd; i++)
       
   369             {
       
   370             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
       
   371             timer++;
       
   372         }
       
   373     }
       
   374 }
       
   375 
       
   376 //change the opacity for different browsers
       
   377 function changeOpac(opacity, id) {
       
   378     var object = document.getElementById(id).style;
       
   379     object.opacity = (opacity / 100);
       
   380     object.MozOpacity = (opacity / 100);
       
   381     object.KhtmlOpacity = (opacity / 100);
       
   382     object.filter = "alpha(opacity=" + opacity + ")";
       
   383 }
       
   384 
       
   385 function mb_logout()
       
   386 {
       
   387   var mb = new messagebox(MB_YESNO|MB_ICONQUESTION, 'Are you sure you want to log out?', 'If you log out, you will no longer be able to access your user preferences, your private messages, or certain areas of this site until you log in again.');
       
   388   mb.onclick['Yes'] = function()
       
   389     {
       
   390       window.location = makeUrlNS('Special', 'Logout/' + title);
       
   391     }
       
   392 }
       
   393