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