|
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, certain areas of this site, and this awesome logout confirmation screen until you login again.<br /><br />OK, not funny. I\'ll remove the bad humor in Banshee.'); |
|
388 mb.onclick['Yes'] = function() |
|
389 { |
|
390 window.location = makeUrlNS('Special', 'Logout/' + title); |
|
391 } |
|
392 } |
|
393 |