1 // Message box and visual effect system |
|
2 |
|
3 /** |
|
4 * Darkens the browser screen. This will make the entire page un-clickable except for any floating divs created after this is called. Restore with enlighten(). |
|
5 * @param bool Controls whether the fade should be disabled or not. aclDisableTransitionFX will override this if set to true, and fades are never fired on IE. |
|
6 * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100. |
|
7 */ |
|
8 |
|
9 var darkener_index = 0; |
|
10 |
|
11 function darken(nofade, opacVal) |
|
12 { |
|
13 if(IE) |
|
14 nofade = true; |
|
15 if ( !opacVal ) |
|
16 opacVal = 70; |
|
17 darkener_index++; |
|
18 if(document.getElementById('specialLayer_darkener')) |
|
19 { |
|
20 if(nofade) |
|
21 { |
|
22 changeOpac(opacVal, 'specialLayer_darkener'); |
|
23 document.getElementById('specialLayer_darkener').style.display = 'block'; |
|
24 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
|
25 } |
|
26 else |
|
27 { |
|
28 if ( document.getElementById('specialLayer_darkener').style.display != 'none' ) |
|
29 { |
|
30 var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal; |
|
31 opacity('specialLayer_darkener', currentOpac, opacVal, 1000); |
|
32 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
|
33 } |
|
34 else |
|
35 { |
|
36 document.getElementById('specialLayer_darkener').style.display = 'block'; |
|
37 document.getElementById('specialLayer_darkener').myOpacVal = opacVal; |
|
38 opacity('specialLayer_darkener', 0, opacVal, 1000); |
|
39 } |
|
40 } |
|
41 } else { |
|
42 w = getWidth(); |
|
43 h = getHeight(); |
|
44 var thediv = document.createElement('div'); |
|
45 if(IE) |
|
46 thediv.style.position = 'absolute'; |
|
47 else |
|
48 thediv.style.position = 'fixed'; |
|
49 if ( IE ) |
|
50 { |
|
51 var top = getScrollOffset(); |
|
52 thediv.style.top = String(top) + 'px'; |
|
53 } |
|
54 else |
|
55 { |
|
56 thediv.style.top = '0px'; |
|
57 } |
|
58 thediv.style.left = '0px'; |
|
59 thediv.style.opacity = '0'; |
|
60 thediv.style.filter = 'alpha(opacity=0)'; |
|
61 thediv.style.backgroundColor = '#000000'; |
|
62 thediv.style.width = '100%'; |
|
63 thediv.style.height = '100%'; |
|
64 thediv.zIndex = getHighestZ() + 5; |
|
65 thediv.id = 'specialLayer_darkener'; |
|
66 thediv.myOpacVal = opacVal; |
|
67 if(nofade) |
|
68 { |
|
69 thediv.style.opacity = ( parseFloat(opacVal) / 100 ); |
|
70 thediv.style.filter = 'alpha(opacity=' + opacVal + ')'; |
|
71 body = document.getElementsByTagName('body'); |
|
72 body = body[0]; |
|
73 body.appendChild(thediv); |
|
74 } else { |
|
75 body = document.getElementsByTagName('body'); |
|
76 body = body[0]; |
|
77 body.appendChild(thediv); |
|
78 opacity('specialLayer_darkener', 0, opacVal, 1000); |
|
79 } |
|
80 } |
|
81 } |
|
82 |
|
83 /** |
|
84 * Un-darkens the screen and re-enables clicking of on-screen controls. |
|
85 * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE. |
|
86 */ |
|
87 |
|
88 function enlighten(nofade) |
|
89 { |
|
90 if(IE) |
|
91 nofade = true; |
|
92 darkener_index -= 1; |
|
93 if ( darkener_index > 0 ) |
|
94 return false; |
|
95 if(document.getElementById('specialLayer_darkener')) |
|
96 { |
|
97 if(nofade) |
|
98 { |
|
99 document.getElementById('specialLayer_darkener').style.display = 'none'; |
|
100 } |
|
101 else |
|
102 { |
|
103 var from = document.getElementById('specialLayer_darkener').myOpacVal; |
|
104 // console.info('Fading from ' + from); |
|
105 opacity('specialLayer_darkener', from, 0, 1000); |
|
106 setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000); |
|
107 } |
|
108 } |
|
109 } |
|
110 |
|
111 /** |
|
112 * The ultimate message box framework for Javascript |
|
113 * Syntax is (almost) identical to the MessageBox command in NSIS |
|
114 * @param int type - a bitfield consisting of the MB_* constants |
|
115 * @param string title - the blue text at the top of the window |
|
116 * @param string text - HTML for the body of the message box |
|
117 * Properties: |
|
118 * onclick - an array of functions to be called on button click events |
|
119 * NOTE: key names are to be strings, and they must be the value of the input, CaSe-SeNsItIvE |
|
120 * onbeforeclick - same as onclick but called before the messagebox div is destroyed |
|
121 * Methods: |
|
122 * destroy: kills the running message box |
|
123 * Example: |
|
124 * 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'); |
|
125 * my_message.onclick['OK'] = function() { |
|
126 * document.getElementById('password').value = ''; |
|
127 * }; |
|
128 * Deps: |
|
129 * Modern browser that supports DOM |
|
130 * darken() and enlighten() (above) |
|
131 * opacity() - required for darken() and enlighten() |
|
132 * MB_* constants are defined in enano-lib-basic.js |
|
133 */ |
|
134 |
|
135 var mb_current_obj; |
|
136 var mb_previously_had_darkener = false; |
|
137 |
|
138 function MessageBox(type, title, message) |
|
139 { |
|
140 var y = getScrollOffset(); |
|
141 |
|
142 // Prevent multiple instances |
|
143 if ( document.getElementById('messageBox') ) |
|
144 return; |
|
145 |
|
146 if ( document.getElementById('specialLayer_darkener') ) |
|
147 if ( document.getElementById('specialLayer_darkener').style.display == 'block' ) |
|
148 mb_previously_had_darkener = true; |
|
149 if ( !mb_previously_had_darkener ) |
|
150 darken(true); |
|
151 if ( aclDisableTransitionFX ) |
|
152 { |
|
153 document.getElementById('specialLayer_darkener').style.zIndex = '5'; |
|
154 } |
|
155 var master_div = document.createElement('div'); |
|
156 master_div.style.zIndex = String(getHighestZ() + 5); |
|
157 var mydiv = document.createElement('div'); |
|
158 mydiv.style.height = '200px'; |
|
159 w = getWidth(); |
|
160 h = getHeight(); |
|
161 if ( aclDisableTransitionFX ) |
|
162 { |
|
163 master_div.style.left = ((w / 2) - 200)+'px'; |
|
164 master_div.style.top = ((h / 2) + y - 120)+'px'; |
|
165 master_div.style.position = 'absolute'; |
|
166 } |
|
167 else |
|
168 { |
|
169 master_div.style.top = '-10000px'; |
|
170 master_div.style.position = ( IE ) ? 'absolute' : 'fixed'; |
|
171 } |
|
172 z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ(); |
|
173 mydiv.style.backgroundColor = '#FFFFFF'; |
|
174 mydiv.style.padding = '10px'; |
|
175 mydiv.style.marginBottom = '1px'; |
|
176 mydiv.id = 'messageBox'; |
|
177 mydiv.style.overflow = 'auto'; |
|
178 |
|
179 var buttondiv = document.createElement('div'); |
|
180 |
|
181 mydiv.style.width = '400px'; |
|
182 buttondiv.style.width = '400px'; |
|
183 |
|
184 w = getWidth(); |
|
185 h = getHeight(); |
|
186 if ( aclDisableTransitionFX ) |
|
187 { |
|
188 //buttondiv.style.left = ((w / 2) - 200)+'px'; |
|
189 //buttondiv.style.top = ((h / 2) + y + 101)+'px'; |
|
190 } |
|
191 //buttondiv.style.position = ( IE ) ? 'absolute' : 'fixed'; |
|
192 z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ(); |
|
193 buttondiv.style.backgroundColor = '#C0C0C0'; |
|
194 buttondiv.style.padding = '10px'; |
|
195 buttondiv.style.textAlign = 'right'; |
|
196 buttondiv.style.verticalAlign = 'middle'; |
|
197 buttondiv.id = 'messageBoxButtons'; |
|
198 |
|
199 this.clickHandler = function() { messagebox_click(this, mb_current_obj); }; |
|
200 |
|
201 if( ( type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION ) && !(type & MB_ICONLOCK) ) |
|
202 { |
|
203 mydiv.style.paddingLeft = '50px'; |
|
204 mydiv.style.width = '360px'; |
|
205 mydiv.style.backgroundRepeat = 'no-repeat'; |
|
206 mydiv.style.backgroundPosition = '8px 8px'; |
|
207 } |
|
208 else if ( type & MB_ICONLOCK ) |
|
209 { |
|
210 mydiv.style.paddingLeft = '50px'; |
|
211 mydiv.style.width = '360px'; |
|
212 mydiv.style.backgroundRepeat = 'no-repeat'; |
|
213 } |
|
214 |
|
215 if(type & MB_ICONINFORMATION) |
|
216 { |
|
217 mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')'; |
|
218 } |
|
219 |
|
220 if(type & MB_ICONQUESTION) |
|
221 { |
|
222 mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')'; |
|
223 } |
|
224 |
|
225 if(type & MB_ICONSTOP) |
|
226 { |
|
227 mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')'; |
|
228 } |
|
229 |
|
230 if(type & MB_ICONEXCLAMATION) |
|
231 { |
|
232 mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')'; |
|
233 } |
|
234 |
|
235 if(type & MB_ICONLOCK) |
|
236 { |
|
237 mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')'; |
|
238 } |
|
239 |
|
240 if(type & MB_OK) |
|
241 { |
|
242 btn = document.createElement('input'); |
|
243 btn.type = 'button'; |
|
244 btn.value = $lang.get('etc_ok'); |
|
245 btn._GenericName = 'OK'; |
|
246 btn.onclick = this.clickHandler; |
|
247 btn.style.margin = '0 3px'; |
|
248 buttondiv.appendChild(btn); |
|
249 } |
|
250 |
|
251 if(type & MB_OKCANCEL) |
|
252 { |
|
253 btn = document.createElement('input'); |
|
254 btn.type = 'button'; |
|
255 btn.value = $lang.get('etc_ok'); |
|
256 btn._GenericName = 'OK'; |
|
257 btn.onclick = this.clickHandler; |
|
258 btn.style.margin = '0 3px'; |
|
259 buttondiv.appendChild(btn); |
|
260 |
|
261 btn = document.createElement('input'); |
|
262 btn.type = 'button'; |
|
263 btn.value = $lang.get('etc_cancel'); |
|
264 btn._GenericName = 'Cancel'; |
|
265 btn.onclick = this.clickHandler; |
|
266 btn.style.margin = '0 3px'; |
|
267 buttondiv.appendChild(btn); |
|
268 } |
|
269 |
|
270 if(type & MB_YESNO) |
|
271 { |
|
272 btn = document.createElement('input'); |
|
273 btn.type = 'button'; |
|
274 btn.value = $lang.get('etc_yes'); |
|
275 btn._GenericName = 'Yes'; |
|
276 btn.onclick = this.clickHandler; |
|
277 btn.style.margin = '0 3px'; |
|
278 buttondiv.appendChild(btn); |
|
279 |
|
280 btn = document.createElement('input'); |
|
281 btn.type = 'button'; |
|
282 btn.value = $lang.get('etc_no'); |
|
283 btn._GenericName = 'No'; |
|
284 btn.onclick = this.clickHandler; |
|
285 btn.style.margin = '0 3px'; |
|
286 buttondiv.appendChild(btn); |
|
287 } |
|
288 |
|
289 if(type & MB_YESNOCANCEL) |
|
290 { |
|
291 btn = document.createElement('input'); |
|
292 btn.type = 'button'; |
|
293 btn.value = $lang.get('etc_yes'); |
|
294 btn._GenericName = 'Yes'; |
|
295 btn.onclick = this.clickHandler; |
|
296 btn.style.margin = '0 3px'; |
|
297 buttondiv.appendChild(btn); |
|
298 |
|
299 btn = document.createElement('input'); |
|
300 btn.type = 'button'; |
|
301 btn.value = $lang.get('etc_no'); |
|
302 btn._GenericName = 'No'; |
|
303 btn.onclick = this.clickHandler; |
|
304 btn.style.margin = '0 3px'; |
|
305 buttondiv.appendChild(btn); |
|
306 |
|
307 btn = document.createElement('input'); |
|
308 btn.type = 'button'; |
|
309 btn.value = $lang.get('etc_cancel'); |
|
310 btn._GenericName = 'Cancel'; |
|
311 btn.onclick = this.clickHandler; |
|
312 btn.style.margin = '0 3px'; |
|
313 buttondiv.appendChild(btn); |
|
314 } |
|
315 |
|
316 heading = document.createElement('h2'); |
|
317 heading.innerHTML = title; |
|
318 heading.style.color = '#50A0D0'; |
|
319 heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif'; |
|
320 heading.style.fontSize = '12pt'; |
|
321 heading.style.fontWeight = 'lighter'; |
|
322 heading.style.textTransform = 'lowercase'; |
|
323 heading.style.marginTop = '0'; |
|
324 mydiv.appendChild(heading); |
|
325 |
|
326 var text = document.createElement('div'); |
|
327 text.innerHTML = String(message); |
|
328 this.text_area = text; |
|
329 mydiv.appendChild(text); |
|
330 |
|
331 this.updateContent = function(text) |
|
332 { |
|
333 this.text_area.innerHTML = text; |
|
334 }; |
|
335 |
|
336 this.destroy = function() |
|
337 { |
|
338 var mbdiv = document.getElementById('messageBox'); |
|
339 mbdiv.parentNode.removeChild(mbdiv.nextSibling); |
|
340 mbdiv.parentNode.removeChild(mbdiv); |
|
341 if ( !mb_previously_had_darkener ) |
|
342 enlighten(true); |
|
343 }; |
|
344 |
|
345 //domObjChangeOpac(0, mydiv); |
|
346 //domObjChangeOpac(0, master_div); |
|
347 |
|
348 body = document.getElementsByTagName('body'); |
|
349 body = body[0]; |
|
350 master_div.appendChild(mydiv); |
|
351 master_div.appendChild(buttondiv); |
|
352 |
|
353 body.appendChild(master_div); |
|
354 |
|
355 if ( !aclDisableTransitionFX ) |
|
356 setTimeout('mb_runFlyIn();', 100); |
|
357 |
|
358 this.onclick = new Array(); |
|
359 this.onbeforeclick = new Array(); |
|
360 mb_current_obj = this; |
|
361 } |
|
362 |
|
363 var messagebox = MessageBox; |
|
364 |
|
365 function mb_runFlyIn() |
|
366 { |
|
367 var mydiv = document.getElementById('messageBox'); |
|
368 var maindiv = mydiv.parentNode; |
|
369 fly_in_top(maindiv, true, false); |
|
370 } |
|
371 |
|
372 function messagebox_click(obj, mb) |
|
373 { |
|
374 val = ( typeof ( obj._GenericName ) == 'string' ) ? obj._GenericName : obj.value; |
|
375 if(typeof mb.onbeforeclick[val] == 'function') |
|
376 { |
|
377 var o = mb.onbeforeclick[val]; |
|
378 var resp = o(); |
|
379 if ( resp ) |
|
380 return false; |
|
381 o = false; |
|
382 } |
|
383 |
|
384 var mydiv = document.getElementById('messageBox'); |
|
385 var maindiv = mydiv.parentNode; |
|
386 |
|
387 if ( aclDisableTransitionFX ) |
|
388 { |
|
389 var mbdiv = document.getElementById('messageBox'); |
|
390 mbdiv.parentNode.removeChild(mbdiv.nextSibling); |
|
391 mbdiv.parentNode.removeChild(mbdiv); |
|
392 if ( !mb_previously_had_darkener ) |
|
393 enlighten(true); |
|
394 } |
|
395 else |
|
396 { |
|
397 var to = fly_out_top(maindiv, true, false); |
|
398 setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); if ( !mb_previously_had_darkener ) enlighten(true);", to); |
|
399 } |
|
400 if(typeof mb.onclick[val] == 'function') |
|
401 { |
|
402 o = mb.onclick[val]; |
|
403 o(); |
|
404 o = false; |
|
405 } |
|
406 } |
|
407 |
|
408 function testMessageBox() |
|
409 { |
|
410 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'); |
|
411 mb.onclick['OK'] = function() |
|
412 { |
|
413 alert('You clicked OK!'); |
|
414 } |
|
415 mb.onbeforeclick['Cancel'] = function() |
|
416 { |
|
417 alert('You clicked Cancel!'); |
|
418 } |
|
419 } |
|
420 |
|
421 /** |
|
422 * The miniPrompt function, for creating small prompts and dialogs. The window will be flown in and the window darkened with opac=0.4. |
|
423 * @param function Will be passed an HTMLElement that is the body of the prompt window; the function can do with this as it pleases |
|
424 */ |
|
425 |
|
426 function miniPrompt(call_on_create) |
|
427 { |
|
428 if ( document.getElementById('specialLayer_darkener') ) |
|
429 { |
|
430 if ( document.getElementById('specialLayer_darkener').style.display != 'none' ) |
|
431 { |
|
432 var opac = parseFloat(document.getElementById('specialLayer_darkener').style.opacity); |
|
433 opac = opac * 100; |
|
434 darken(aclDisableTransitionFX, opac); |
|
435 } |
|
436 else |
|
437 { |
|
438 darken(aclDisableTransitionFX, 40); |
|
439 } |
|
440 } |
|
441 else |
|
442 { |
|
443 darken(aclDisableTransitionFX, 40); |
|
444 } |
|
445 |
|
446 var wrapper = document.createElement('div'); |
|
447 wrapper.className = 'miniprompt'; |
|
448 var top = document.createElement('div'); |
|
449 top.className = 'mp-top'; |
|
450 var body = document.createElement('div'); |
|
451 body.className = 'mp-body'; |
|
452 var bottom = document.createElement('div'); |
|
453 bottom.className = 'mp-bottom'; |
|
454 if ( typeof(call_on_create) == 'function' ) |
|
455 { |
|
456 call_on_create(body); |
|
457 } |
|
458 wrapper.appendChild(top); |
|
459 wrapper.appendChild(body); |
|
460 wrapper.appendChild(bottom); |
|
461 var left = ( getWidth() / 2 ) - ( 388 / 2 ); |
|
462 wrapper.style.left = left + 'px'; |
|
463 var top = getScrollOffset() - 27; |
|
464 wrapper.style.top = top + 'px'; |
|
465 domObjChangeOpac(0, wrapper); |
|
466 var realbody = document.getElementsByTagName('body')[0]; |
|
467 realbody.appendChild(wrapper); |
|
468 |
|
469 if ( aclDisableTransitionFX ) |
|
470 { |
|
471 domObjChangeOpac(100, wrapper); |
|
472 } |
|
473 else |
|
474 { |
|
475 fly_in_top(wrapper, true, true); |
|
476 |
|
477 setTimeout(function() |
|
478 { |
|
479 domObjChangeOpac(100, wrapper); |
|
480 }, 40); |
|
481 } |
|
482 } |
|
483 |
|
484 /** |
|
485 * For a given element, loops through the element and all of its ancestors looking for a miniPrompt div, and returns it. Returns false on failure. |
|
486 * @param object:HTMLElement Child node to scan |
|
487 * @return object |
|
488 */ |
|
489 |
|
490 function miniPromptGetParent(obj) |
|
491 { |
|
492 while ( true ) |
|
493 { |
|
494 // prevent infinite loops |
|
495 if ( !obj || obj.tagName == 'BODY' ) |
|
496 return false; |
|
497 |
|
498 if ( $dynano(obj).hasClass('miniprompt') ) |
|
499 { |
|
500 return obj; |
|
501 } |
|
502 obj = obj.parentNode; |
|
503 } |
|
504 return false; |
|
505 } |
|
506 |
|
507 /** |
|
508 * Destroys the first miniPrompt div encountered by recursively checking all parent nodes. |
|
509 * Usage: <a href="javascript:miniPromptDestroy(this);">click</a> |
|
510 * @param object:HTMLElement a child of the div.miniprompt |
|
511 * @param bool If true, does not call enlighten(). |
|
512 */ |
|
513 |
|
514 function miniPromptDestroy(obj, nofade) |
|
515 { |
|
516 obj = miniPromptGetParent(obj); |
|
517 if ( !obj ) |
|
518 return false; |
|
519 |
|
520 // found it |
|
521 var parent = obj.parentNode; |
|
522 if ( !nofade ) |
|
523 enlighten(aclDisableTransitionFX); |
|
524 if ( aclDisableTransitionFX ) |
|
525 { |
|
526 parent.removeChild(obj); |
|
527 } |
|
528 else |
|
529 { |
|
530 var timeout = fly_out_top(obj, true, true); |
|
531 setTimeout(function() |
|
532 { |
|
533 parent.removeChild(obj); |
|
534 }, timeout); |
|
535 } |
|
536 } |
|
537 |
|
538 /** |
|
539 * Simple test case |
|
540 */ |
|
541 |
|
542 function miniPromptTest() |
|
543 { |
|
544 miniPrompt(function(div) { div.innerHTML = 'hello world! <a href="#" onclick="miniPromptDestroy(this); return false;">destroy me</a>'; }); |
|
545 } |
|
546 |
|
547 /** |
|
548 * Message box system for miniPrompts. Less customization but easier to scale than the regular messageBox framework. |
|
549 * @example |
|
550 <code> |
|
551 miniPromptMessage({ |
|
552 title: 'Delete page', |
|
553 message: 'Do you really want to delete this page? This is reversible unless you clear the page logs.', |
|
554 buttons: [ |
|
555 { |
|
556 text: 'Delete', |
|
557 color: 'red', |
|
558 style: { |
|
559 fontWeight: 'bold' |
|
560 }, |
|
561 onclick: function() { |
|
562 ajaxDeletePage(); |
|
563 miniPromptDestroy(this); |
|
564 } |
|
565 }, |
|
566 { |
|
567 text: 'cancel', |
|
568 onclick: function() { |
|
569 miniPromptDestroy(this); |
|
570 } |
|
571 } |
|
572 ] |
|
573 }); |
|
574 </code> |
|
575 */ |
|
576 |
|
577 function miniPromptMessage(parms) |
|
578 { |
|
579 if ( !parms.title || !parms.message || !parms.buttons ) |
|
580 return false; |
|
581 |
|
582 return miniPrompt(function(parent) |
|
583 { |
|
584 try |
|
585 { |
|
586 var h3 = document.createElement('h3'); |
|
587 h3.appendChild(document.createTextNode(parms.title)); |
|
588 var body = document.createElement('p'); |
|
589 var message = parms.message.split(unescape('%0A')); |
|
590 for ( var i = 0; i < message.length; i++ ) |
|
591 { |
|
592 body.appendChild(document.createTextNode(message[i])); |
|
593 if ( i + 1 < message.length ) |
|
594 body.appendChild(document.createElement('br')); |
|
595 } |
|
596 |
|
597 parent.style.textAlign = 'center'; |
|
598 |
|
599 parent.appendChild(h3); |
|
600 parent.appendChild(body); |
|
601 parent.appendChild(document.createElement('br')); |
|
602 |
|
603 // construct buttons |
|
604 for ( var i = 0; i < parms.buttons.length; i++ ) |
|
605 { |
|
606 var button = parms.buttons[i]; |
|
607 button.input = document.createElement('a'); |
|
608 button.input.href = '#'; |
|
609 button.input.clickAction = button.onclick; |
|
610 button.input.className = 'abutton'; |
|
611 if ( button.color ) |
|
612 { |
|
613 button.input.className += ' abutton_' + button.color; |
|
614 } |
|
615 button.input.appendChild(document.createTextNode(button.text)); |
|
616 if ( button.style ) |
|
617 { |
|
618 for ( var j in button.style ) |
|
619 { |
|
620 button.input.style[j] = button.style[j]; |
|
621 } |
|
622 } |
|
623 button.input.onclick = function(e) |
|
624 { |
|
625 try |
|
626 { |
|
627 this.clickAction(e); |
|
628 } |
|
629 catch(e) |
|
630 { |
|
631 console.error(e); |
|
632 } |
|
633 return false; |
|
634 } |
|
635 parent.appendChild(button.input); |
|
636 } |
|
637 if ( parms.buttons[0] ) |
|
638 { |
|
639 setTimeout(function() |
|
640 { |
|
641 parms.buttons[0].input.focus(); |
|
642 }, 300); |
|
643 } |
|
644 } |
|
645 catch ( e ) |
|
646 { |
|
647 console.error(e); |
|
648 } |
|
649 }); |
|
650 } |
|
651 |
|
652 function testMPMessageBox() |
|
653 { |
|
654 miniPromptMessage({ |
|
655 title: 'The Game of LIFE question #73', |
|
656 message: 'You just got your girlfriend pregnant. Please select an option:', |
|
657 buttons: [ |
|
658 { |
|
659 text: 'Abort', |
|
660 color: 'red', |
|
661 style: { |
|
662 fontWeight: 'bold' |
|
663 }, |
|
664 onclick: function() { |
|
665 miniPromptDestroy(this); |
|
666 } |
|
667 }, |
|
668 { |
|
669 text: 'Retry', |
|
670 color: 'blue', |
|
671 onclick: function() { |
|
672 miniPromptDestroy(this); |
|
673 } |
|
674 }, |
|
675 { |
|
676 text: 'Ignore', |
|
677 color: 'green', |
|
678 onclick: function() { |
|
679 miniPromptDestroy(this); |
|
680 } |
|
681 } |
|
682 ] |
|
683 }); |
|
684 } |
|
685 |
|
686 // Function to fade classes info-box, warning-box, error-box, etc. |
|
687 |
|
688 function fadeInfoBoxes() |
|
689 { |
|
690 var divs = new Array(); |
|
691 d = document.getElementsByTagName('div'); |
|
692 j = 0; |
|
693 for(var i in d) |
|
694 { |
|
695 if ( !d[i] ) |
|
696 continue; |
|
697 if ( !d[i].tagName ) |
|
698 continue; |
|
699 if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box') |
|
700 { |
|
701 divs[j] = d[i]; |
|
702 j++; |
|
703 } |
|
704 } |
|
705 if(divs.length < 1) return; |
|
706 for(i in divs) |
|
707 { |
|
708 if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000); |
|
709 switch(divs[i].className) |
|
710 { |
|
711 case 'info-box': |
|
712 default: |
|
713 from = '#3333FF'; |
|
714 break; |
|
715 case 'error-box': |
|
716 from = '#FF3333'; |
|
717 break; |
|
718 case 'warning-box': |
|
719 from = '#FFFF33'; |
|
720 break; |
|
721 case 'question-box': |
|
722 from = '#33FF33'; |
|
723 break; |
|
724 } |
|
725 Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id)); |
|
726 } |
|
727 } |
|
728 |
|
729 // Alpha fades |
|
730 |
|
731 function opacity(id, opacStart, opacEnd, millisec) { |
|
732 //speed for each frame |
|
733 var speed = Math.round(millisec / 100); |
|
734 var timer = 0; |
|
735 |
|
736 //determine the direction for the blending, if start and end are the same nothing happens |
|
737 if(opacStart > opacEnd) { |
|
738 for(i = opacStart; i >= opacEnd; i--) { |
|
739 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); |
|
740 timer++; |
|
741 } |
|
742 } else if(opacStart < opacEnd) { |
|
743 for(i = opacStart; i <= opacEnd; i++) |
|
744 { |
|
745 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); |
|
746 timer++; |
|
747 } |
|
748 } |
|
749 } |
|
750 |
|
751 var opacityDOMCache = new Object(); |
|
752 function domOpacity(obj, opacStart, opacEnd, millisec) { |
|
753 //speed for each frame |
|
754 var speed = Math.round(millisec / 100); |
|
755 var timer = 0; |
|
756 |
|
757 // unique ID for this animation |
|
758 var uniqid = Math.floor(Math.random() * 1000000); |
|
759 opacityDOMCache[uniqid] = obj; |
|
760 |
|
761 //determine the direction for the blending, if start and end are the same nothing happens |
|
762 if(opacStart > opacEnd) { |
|
763 for(i = opacStart; i >= opacEnd; i--) { |
|
764 setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed)); |
|
765 timer++; |
|
766 } |
|
767 } else if(opacStart < opacEnd) { |
|
768 for(i = opacStart; i <= opacEnd; i++) |
|
769 { |
|
770 setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed)); |
|
771 timer++; |
|
772 } |
|
773 } |
|
774 setTimeout("delete(opacityDOMCache["+uniqid+"]);",(timer * speed)); |
|
775 } |
|
776 |
|
777 //change the opacity for different browsers |
|
778 function changeOpac(opacity, id) { |
|
779 var object = document.getElementById(id).style; |
|
780 object.opacity = (opacity / 100); |
|
781 object.MozOpacity = (opacity / 100); |
|
782 object.KhtmlOpacity = (opacity / 100); |
|
783 object.filter = "alpha(opacity=" + opacity + ")"; |
|
784 } |
|
785 |
|
786 function mb_logout() |
|
787 { |
|
788 var mb = new MessageBox(MB_YESNO|MB_ICONQUESTION, $lang.get('user_logout_confirm_title'), $lang.get('user_logout_confirm_body')); |
|
789 mb.onclick['Yes'] = function() |
|
790 { |
|
791 window.location = makeUrlNS('Special', 'Logout/' + csrf_token + '/' + title); |
|
792 } |
|
793 } |
|
794 |
|
795 function whiteOutElement(el) |
|
796 { |
|
797 var top = $(el).Top(); |
|
798 var left = $(el).Left(); |
|
799 var width = $(el).Width(); |
|
800 var height = $(el).Height(); |
|
801 |
|
802 var blackout = document.createElement('div'); |
|
803 blackout.style.position = 'absolute'; |
|
804 blackout.style.top = top + 'px'; |
|
805 blackout.style.left = left + 'px'; |
|
806 blackout.style.width = width + 'px'; |
|
807 blackout.style.height = height + 'px'; |
|
808 |
|
809 blackout.style.backgroundColor = '#FFFFFF'; |
|
810 domObjChangeOpac(60, blackout); |
|
811 blackout.style.backgroundImage = 'url(' + scriptPath + '/includes/clientside/tinymce/themes/advanced/skins/default/img/progress.gif)'; |
|
812 blackout.style.backgroundPosition = 'center center'; |
|
813 blackout.style.backgroundRepeat = 'no-repeat'; |
|
814 blackout.style.zIndex = getHighestZ() + 2; |
|
815 |
|
816 var body = document.getElementsByTagName('body')[0]; |
|
817 body.appendChild(blackout); |
|
818 |
|
819 return blackout; |
|
820 } |
|
821 |
|