1
+ − 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
38
+ − 131
if( ( type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION ) && !(type & MB_ICONLOCK) )
1
+ − 132
{
+ − 133
mydiv.style.paddingLeft = '50px';
+ − 134
mydiv.style.width = '360px';
+ − 135
mydiv.style.backgroundRepeat = 'no-repeat';
32
4d87aad3c4c0
Finished everything on the TODO list (yay!); several CSS cleanups; tons more changes in this commit - see the patch for details
Dan
diff
changeset
+ − 136
mydiv.style.backgroundPosition = '8px 8px';
1
+ − 137
}
38
+ − 138
else if ( type & MB_ICONLOCK )
+ − 139
{
+ − 140
mydiv.style.paddingLeft = '50px';
+ − 141
mydiv.style.width = '360px';
+ − 142
mydiv.style.backgroundRepeat = 'no-repeat';
+ − 143
}
1
+ − 144
+ − 145
if(type & MB_ICONINFORMATION)
+ − 146
{
+ − 147
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')';
+ − 148
}
+ − 149
+ − 150
if(type & MB_ICONQUESTION)
+ − 151
{
+ − 152
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')';
+ − 153
}
+ − 154
+ − 155
if(type & MB_ICONSTOP)
+ − 156
{
+ − 157
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')';
+ − 158
}
+ − 159
+ − 160
if(type & MB_ICONEXCLAMATION)
+ − 161
{
+ − 162
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')';
+ − 163
}
+ − 164
+ − 165
if(type & MB_ICONLOCK)
+ − 166
{
+ − 167
mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')';
+ − 168
}
+ − 169
+ − 170
if(type & MB_OK)
+ − 171
{
+ − 172
btn = document.createElement('input');
+ − 173
btn.type = 'button';
+ − 174
btn.value = 'OK';
+ − 175
btn.onclick = this.clickHandler;
+ − 176
btn.style.margin = '0 3px';
+ − 177
buttondiv.appendChild(btn);
+ − 178
}
+ − 179
+ − 180
if(type & MB_OKCANCEL)
+ − 181
{
+ − 182
btn = document.createElement('input');
+ − 183
btn.type = 'button';
+ − 184
btn.value = 'OK';
+ − 185
btn.onclick = this.clickHandler;
+ − 186
btn.style.margin = '0 3px';
+ − 187
buttondiv.appendChild(btn);
+ − 188
+ − 189
btn = document.createElement('input');
+ − 190
btn.type = 'button';
+ − 191
btn.value = 'Cancel';
+ − 192
btn.onclick = this.clickHandler;
+ − 193
btn.style.margin = '0 3px';
+ − 194
buttondiv.appendChild(btn);
+ − 195
}
+ − 196
+ − 197
if(type & MB_YESNO)
+ − 198
{
+ − 199
btn = document.createElement('input');
+ − 200
btn.type = 'button';
+ − 201
btn.value = 'Yes';
+ − 202
btn.onclick = this.clickHandler;
+ − 203
btn.style.margin = '0 3px';
+ − 204
buttondiv.appendChild(btn);
+ − 205
+ − 206
btn = document.createElement('input');
+ − 207
btn.type = 'button';
+ − 208
btn.value = 'No';
+ − 209
btn.onclick = this.clickHandler;
+ − 210
btn.style.margin = '0 3px';
+ − 211
buttondiv.appendChild(btn);
+ − 212
}
+ − 213
+ − 214
if(type & MB_YESNOCANCEL)
+ − 215
{
+ − 216
btn = document.createElement('input');
+ − 217
btn.type = 'button';
+ − 218
btn.value = 'Yes';
+ − 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 = 'No';
+ − 226
btn.onclick = this.clickHandler;
+ − 227
btn.style.margin = '0 3px';
+ − 228
buttondiv.appendChild(btn);
+ − 229
+ − 230
btn = document.createElement('input');
+ − 231
btn.type = 'button';
+ − 232
btn.value = 'Cancel';
+ − 233
btn.onclick = this.clickHandler;
+ − 234
btn.style.margin = '0 3px';
+ − 235
buttondiv.appendChild(btn);
+ − 236
}
+ − 237
+ − 238
heading = document.createElement('h2');
+ − 239
heading.innerHTML = title;
+ − 240
heading.style.color = '#50A0D0';
+ − 241
heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif';
+ − 242
heading.style.fontSize = '12pt';
+ − 243
heading.style.fontWeight = 'lighter';
+ − 244
heading.style.textTransform = 'lowercase';
+ − 245
heading.style.marginTop = '0';
+ − 246
mydiv.appendChild(heading);
+ − 247
+ − 248
var text = document.createElement('div');
+ − 249
text.innerHTML = String(message);
+ − 250
this.text_area = text;
+ − 251
mydiv.appendChild(text);
+ − 252
+ − 253
this.updateContent = function(text)
+ − 254
{
+ − 255
this.text_area.innerHTML = text;
+ − 256
};
+ − 257
+ − 258
//domObjChangeOpac(0, mydiv);
+ − 259
//domObjChangeOpac(0, master_div);
+ − 260
+ − 261
body = document.getElementsByTagName('body');
+ − 262
body = body[0];
+ − 263
master_div.appendChild(mydiv);
+ − 264
master_div.appendChild(buttondiv);
+ − 265
+ − 266
body.appendChild(master_div);
+ − 267
+ − 268
setTimeout('mb_runFlyIn();', 100);
+ − 269
+ − 270
this.onclick = new Array();
+ − 271
this.onbeforeclick = new Array();
+ − 272
mb_current_obj = this;
+ − 273
}
+ − 274
+ − 275
function mb_runFlyIn()
+ − 276
{
+ − 277
var mydiv = document.getElementById('messageBox');
+ − 278
var maindiv = mydiv.parentNode;
+ − 279
fly_in_top(maindiv, true, false);
+ − 280
}
+ − 281
+ − 282
function messagebox_click(obj, mb)
+ − 283
{
+ − 284
val = obj.value;
+ − 285
if(typeof mb.onbeforeclick[val] == 'function')
+ − 286
{
+ − 287
var o = mb.onbeforeclick[val];
+ − 288
var resp = o();
+ − 289
if ( resp )
+ − 290
return false;
+ − 291
o = false;
+ − 292
}
+ − 293
+ − 294
var mydiv = document.getElementById('messageBox');
+ − 295
var maindiv = mydiv.parentNode;
+ − 296
var to = fly_out_top(maindiv, true, false);
+ − 297
+ − 298
setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); enlighten(true);", to);
+ − 299
if(typeof mb.onclick[val] == 'function')
+ − 300
{
+ − 301
o = mb.onclick[val];
+ − 302
o();
+ − 303
o = false;
+ − 304
}
+ − 305
}
+ − 306
+ − 307
function testMessageBox()
+ − 308
{
+ − 309
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');
+ − 310
mb.onclick['OK'] = function()
+ − 311
{
+ − 312
alert('You clicked OK!');
+ − 313
}
+ − 314
mb.onbeforeclick['Cancel'] = function()
+ − 315
{
+ − 316
alert('You clicked Cancel!');
+ − 317
}
+ − 318
}
+ − 319
+ − 320
// Function to fade classes info-box, warning-box, error-box, etc.
+ − 321
+ − 322
function fadeInfoBoxes()
+ − 323
{
+ − 324
var divs = new Array();
+ − 325
d = document.getElementsByTagName('div');
+ − 326
j = 0;
+ − 327
for(var i in d)
+ − 328
{
+ − 329
if ( !d[i].tagName )
+ − 330
continue;
+ − 331
if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box')
+ − 332
{
+ − 333
divs[j] = d[i];
+ − 334
j++;
+ − 335
}
+ − 336
}
+ − 337
if(divs.length < 1) return;
+ − 338
for(i in divs)
+ − 339
{
+ − 340
if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000);
+ − 341
switch(divs[i].className)
+ − 342
{
+ − 343
case 'info-box':
+ − 344
default:
+ − 345
from = '#3333FF';
+ − 346
break;
+ − 347
case 'error-box':
+ − 348
from = '#FF3333';
+ − 349
break;
+ − 350
case 'warning-box':
+ − 351
from = '#FFFF33';
+ − 352
break;
+ − 353
case 'question-box':
+ − 354
from = '#33FF33';
+ − 355
break;
+ − 356
}
+ − 357
Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id));
+ − 358
}
+ − 359
}
+ − 360
+ − 361
// Alpha fades
+ − 362
+ − 363
function opacity(id, opacStart, opacEnd, millisec) {
+ − 364
//speed for each frame
+ − 365
var speed = Math.round(millisec / 100);
+ − 366
var timer = 0;
+ − 367
+ − 368
//determine the direction for the blending, if start and end are the same nothing happens
+ − 369
if(opacStart > opacEnd) {
+ − 370
for(i = opacStart; i >= opacEnd; i--) {
+ − 371
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
+ − 372
timer++;
+ − 373
}
+ − 374
} else if(opacStart < opacEnd) {
+ − 375
for(i = opacStart; i <= opacEnd; i++)
+ − 376
{
+ − 377
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
+ − 378
timer++;
+ − 379
}
+ − 380
}
+ − 381
}
+ − 382
53
+ − 383
var opacityDOMCache = new Object();
+ − 384
function domOpacity(obj, opacStart, opacEnd, millisec) {
+ − 385
//speed for each frame
+ − 386
var speed = Math.round(millisec / 100);
+ − 387
var timer = 0;
+ − 388
+ − 389
// unique ID for this animation
+ − 390
var uniqid = Math.floor(Math.random() * 1000000);
+ − 391
opacityDOMCache[uniqid] = obj;
+ − 392
+ − 393
//determine the direction for the blending, if start and end are the same nothing happens
+ − 394
if(opacStart > opacEnd) {
+ − 395
for(i = opacStart; i >= opacEnd; i--) {
+ − 396
setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));
+ − 397
timer++;
+ − 398
}
+ − 399
} else if(opacStart < opacEnd) {
+ − 400
for(i = opacStart; i <= opacEnd; i++)
+ − 401
{
+ − 402
setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));
+ − 403
timer++;
+ − 404
}
+ − 405
}
+ − 406
setTimeout("delete(opacityDOMCache["+uniqid+"]);",(timer * speed));
+ − 407
}
+ − 408
1
+ − 409
//change the opacity for different browsers
+ − 410
function changeOpac(opacity, id) {
+ − 411
var object = document.getElementById(id).style;
+ − 412
object.opacity = (opacity / 100);
+ − 413
object.MozOpacity = (opacity / 100);
+ − 414
object.KhtmlOpacity = (opacity / 100);
+ − 415
object.filter = "alpha(opacity=" + opacity + ")";
+ − 416
}
+ − 417
+ − 418
function mb_logout()
+ − 419
{
+ − 420
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.');
+ − 421
mb.onclick['Yes'] = function()
+ − 422
{
+ − 423
window.location = makeUrlNS('Special', 'Logout/' + title);
+ − 424
}
+ − 425
}
+ − 426