|
1 /* |
|
2 * Enano JWS - Javascript Windowing System |
|
3 * Sorry if I stole the name ;) |
|
4 * Copyright (C) 2006-2007 Dan Fuhry |
|
5 * Yes, it's part of Enano, so it's GPL |
|
6 */ |
|
7 |
|
8 var position; |
|
9 function getScrollOffset() |
|
10 { |
|
11 var position; |
|
12 if (self.pageYOffset) |
|
13 { |
|
14 position = self.pageYOffset; |
|
15 } |
|
16 else if (document.documentElement && document.documentElement.scrollTop) |
|
17 { |
|
18 position = document.documentElement.scrollTop; |
|
19 } |
|
20 else if (document.body) |
|
21 { |
|
22 position = document.body.scrollTop; |
|
23 } |
|
24 return position; |
|
25 } |
|
26 position = getScrollOffset(); |
|
27 |
|
28 var jws = { |
|
29 position : position, |
|
30 obj : null, |
|
31 startup : function() { |
|
32 jws.debug('jws.startup()'); |
|
33 var divs = document.getElementsByTagName('div'); |
|
34 if(IE) { position = document.body.scrollTop; } |
|
35 else { position = window.pageYOffset; } |
|
36 for(i=0;i<divs.length;i++) { |
|
37 if(divs[i].id && divs[i].id.substr(0, 4) == 'root') { |
|
38 divs[i].onClick = 'jws.focus(\''+divs[i].id+'\')'; |
|
39 var tb = i + 1 |
|
40 tb = divs[tb]; |
|
41 tb.innerHTML = '<table border="0" width="100%"><tr><td>' + tb.innerHTML + '</td><td align="right"><div align="center" class="closebtn" onclick="jws.closeWin(\''+divs[i].id+'\');">X</div></td></tr></table>'; |
|
42 divs[i].style.width = '640px'; |
|
43 divs[i].style.height = '480px'; |
|
44 Drag.init(tb, divs[i]); |
|
45 } |
|
46 } |
|
47 }, |
|
48 initWindow : function(o) { |
|
49 jws.debug('jws.initWindow('+o+' ['+o.id+'])'); |
|
50 var divs = document.getElementsByTagName('div'); |
|
51 for(i=0;i<divs.length;i++) { |
|
52 if(divs[i].id && divs[i].id == o.id) { |
|
53 var tb = i + 1 |
|
54 tb = divs[tb]; |
|
55 tb.innerHTML = '<table border="0" width="100%"><tr><td>' + tb.innerHTML + '</td><td align="right"><div class="closebtn" onclick="jws.closeWin(\''+divs[i].id+'\');"></div></td></tr></table>'; |
|
56 divs[i].style.width = '640px'; |
|
57 divs[i].style.height = '480px'; |
|
58 Drag.init(tb, divs[i]); |
|
59 } |
|
60 } |
|
61 }, |
|
62 closeWin : function(id) { |
|
63 jws.debug('jws.closeWin(\''+id+'\')'); |
|
64 document.getElementById(id).style.display = 'none'; |
|
65 enlighten(); |
|
66 }, |
|
67 openWin : function(id, x, y) { |
|
68 darken(); |
|
69 var e = document.getElementById(id); |
|
70 if(!x) x = 640; |
|
71 if(!y) y = 480; |
|
72 jws.debug('jws.openWin(\''+id+'\', '+x+', '+y+')'); |
|
73 e.style.display = 'block'; |
|
74 e.style.width = x+'px'; |
|
75 e.style.height = y+'px'; |
|
76 |
|
77 var divs = document.getElementsByTagName('div'); |
|
78 for(i=0;i<divs.length;i++) { |
|
79 if(divs[i].id && divs[i].id == e.id) { |
|
80 var cn = i + 3; |
|
81 cn = divs[cn]; |
|
82 |
|
83 var h = getElementHeight(e.id) - 53; |
|
84 var w = getElementWidth(cn.id) - 20; |
|
85 cn.style.width = w + 'px'; |
|
86 cn.style.height = h + 'px'; |
|
87 cn.style.clip.top = 0 + 'px'; |
|
88 cn.style.clip.left = 0 + 'px'; |
|
89 cn.style.clip.right = w + 'px'; |
|
90 cn.style.clip.bottom = h + 'px'; |
|
91 cn.style.overflow = 'auto'; |
|
92 } |
|
93 } |
|
94 jws.setpos(id); |
|
95 jws.focus(id); |
|
96 }, |
|
97 setpos : function(el) { |
|
98 jws.debug('jws.setpos(\''+el+'\')'); |
|
99 el = document.getElementById(el); |
|
100 var w = getWidth(); |
|
101 var h = getHeight(); |
|
102 var ew = getElementWidth(el.id); |
|
103 var eh = getElementHeight(el.id); |
|
104 px = (w/2) - (ew/2); |
|
105 py = (h/2) - (eh/2); |
|
106 if (IE) { position = document.body.scrollTop; } |
|
107 else { position = window.pageYOffset; } |
|
108 py=py+0; |
|
109 if ( IE ) |
|
110 el.style.position = "absolute"; |
|
111 else |
|
112 el.style.position = "fixed"; |
|
113 el.style.left=px+'px'; |
|
114 el.style.top =py+'px'; |
|
115 }, |
|
116 scrollHandler : function() { |
|
117 var divs = document.getElementsByTagName('div'); |
|
118 for(i=0;i<divs.length;i++) { |
|
119 if(divs[i].id && divs[i].id.substr(0, 4) == 'root' && divs[i].style.display == 'block') { |
|
120 c = divs[i]; |
|
121 jws.debug('jws.scrollHandler(): moving element: '+c.id); |
|
122 var t = c.style.top; |
|
123 var py = t.substr(0, t.length - 2); |
|
124 py = parseInt(py); |
|
125 if(jws.position) { py = py - jws.position; } |
|
126 position = getScrollOffset(); |
|
127 py=py+position; |
|
128 c.style.position = "absolute"; |
|
129 if(!isNaN(py)) c.style.top =py+'px'; |
|
130 jws.debug('jws.scrollHandler(): value of py: '+py); |
|
131 } |
|
132 } |
|
133 jws.position = position; |
|
134 }, |
|
135 focus : function(e) { |
|
136 e = document.getElementById(e); |
|
137 if(e.style.zindex) z = e.style.zindex; |
|
138 else z = 1; |
|
139 z=z+5; |
|
140 e.style.zIndex = z; |
|
141 }, |
|
142 debug : function(t) { |
|
143 if(document.getElementById('jsw-debug-console')) { |
|
144 dbg = document.getElementById('jsw-debug-console'); |
|
145 debugdata = dbg.innerHTML; |
|
146 dbg.innerHTML = debugdata+"<br />"+t; |
|
147 } |
|
148 } |
|
149 } // class jws |
|
150 |
|
151 //window.onscroll=jws['scrollHandler']; |
|
152 |
|
153 /* |
|
154 * Utility functions |
|
155 */ |
|
156 |
|
157 // getElementWidth() and getElementHeight() |
|
158 // Source: http://www.aspandjavascript.co.uk/javascript/javascript_api/get_element_width_height.asp |
|
159 |
|
160 function getElementHeight(Elem) { |
|
161 if (ns4) { |
|
162 var elem = getObjNN4(document, Elem); |
|
163 return elem.clip.height; |
|
164 } else { |
|
165 if(document.getElementById) { |
|
166 var elem = document.getElementById(Elem); |
|
167 } else if (document.all){ |
|
168 var elem = document.all[Elem]; |
|
169 } |
|
170 if (op5) { |
|
171 xPos = elem.style.pixelHeight; |
|
172 } else { |
|
173 xPos = elem.offsetHeight; |
|
174 } |
|
175 return xPos; |
|
176 } |
|
177 } |
|
178 |
|
179 function getElementWidth(Elem) { |
|
180 if (ns4) { |
|
181 var elem = getObjNN4(document, Elem); |
|
182 return elem.clip.width; |
|
183 } else { |
|
184 if(document.getElementById) { |
|
185 var elem = document.getElementById(Elem); |
|
186 } else if (document.all){ |
|
187 var elem = document.all[Elem]; |
|
188 } |
|
189 if (op5) { |
|
190 xPos = elem.style.pixelWidth; |
|
191 } else { |
|
192 xPos = elem.offsetWidth; |
|
193 } |
|
194 return xPos; |
|
195 } |
|
196 } |
|
197 |
|
198 function getHeight() { |
|
199 var myHeight = 0; |
|
200 if( typeof( window.innerWidth ) == 'number' ) { |
|
201 myHeight = window.innerHeight; |
|
202 } else if( document.documentElement && |
|
203 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { |
|
204 myHeight = document.documentElement.clientHeight; |
|
205 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { |
|
206 myHeight = document.body.clientHeight; |
|
207 } |
|
208 return myHeight; |
|
209 } |
|
210 |
|
211 function getWidth() { |
|
212 var myWidth = 0; |
|
213 if( typeof( window.innerWidth ) == 'number' ) { |
|
214 myWidth = window.innerWidth; |
|
215 } else if( document.documentElement && |
|
216 ( document.documentElement.clientWidth || document.documentElement.clientWidth ) ) { |
|
217 myWidth = document.documentElement.clientWidth; |
|
218 } else if( document.body && ( document.body.clientWidth || document.body.clientWidth ) ) { |
|
219 myWidth = document.body.clientWidth; |
|
220 } |
|
221 return myWidth; |
|
222 } |
|
223 |
|
224 /************************************************** |
|
225 * dom-drag.js |
|
226 * 09.25.2001 |
|
227 * www.youngpup.net |
|
228 **************************************************/ |
|
229 |
|
230 var Drag = { |
|
231 |
|
232 obj : null, |
|
233 |
|
234 init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) |
|
235 { |
|
236 o.onmousedown = Drag.start; |
|
237 |
|
238 o.hmode = bSwapHorzRef ? false : true ; |
|
239 o.vmode = bSwapVertRef ? false : true ; |
|
240 |
|
241 o.root = oRoot && oRoot != null ? oRoot : o ; |
|
242 |
|
243 if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px"; |
|
244 if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px"; |
|
245 if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px"; |
|
246 if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px"; |
|
247 |
|
248 o.minX = typeof minX != 'undefined' ? minX : null; |
|
249 o.minY = typeof minY != 'undefined' ? minY : null; |
|
250 o.maxX = typeof maxX != 'undefined' ? maxX : null; |
|
251 o.maxY = typeof maxY != 'undefined' ? maxY : null; |
|
252 |
|
253 o.xMapper = fXMapper ? fXMapper : null; |
|
254 o.yMapper = fYMapper ? fYMapper : null; |
|
255 |
|
256 o.root.onDragStart = new Function(); |
|
257 o.root.onDragEnd = new Function(); |
|
258 o.root.onDrag = new Function(); |
|
259 }, |
|
260 |
|
261 start : function(e) |
|
262 { |
|
263 var o = Drag.obj = this; |
|
264 e = Drag.fixE(e); |
|
265 var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); |
|
266 var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); |
|
267 o.root.onDragStart(x, y); |
|
268 |
|
269 o.lastMouseX = e.clientX; |
|
270 o.lastMouseY = e.clientY; |
|
271 |
|
272 if (o.hmode) { |
|
273 if (o.minX != null) o.minMouseX = e.clientX - x + o.minX; |
|
274 if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX; |
|
275 } else { |
|
276 if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; |
|
277 if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; |
|
278 } |
|
279 |
|
280 if (o.vmode) { |
|
281 if (o.minY != null) o.minMouseY = e.clientY - y + o.minY; |
|
282 if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY; |
|
283 } else { |
|
284 if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; |
|
285 if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; |
|
286 } |
|
287 |
|
288 document.onmousemove = Drag.drag; |
|
289 document.onmouseup = Drag.end; |
|
290 |
|
291 return false; |
|
292 }, |
|
293 |
|
294 drag : function(e) |
|
295 { |
|
296 e = Drag.fixE(e); |
|
297 var o = Drag.obj; |
|
298 |
|
299 var ey = e.clientY; |
|
300 var ex = e.clientX; |
|
301 var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); |
|
302 var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); |
|
303 var nx, ny; |
|
304 |
|
305 if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); |
|
306 if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); |
|
307 if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); |
|
308 if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY); |
|
309 |
|
310 nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); |
|
311 ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1)); |
|
312 |
|
313 if (o.xMapper) nx = o.xMapper(y) |
|
314 else if (o.yMapper) ny = o.yMapper(x) |
|
315 |
|
316 Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; |
|
317 Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; |
|
318 Drag.obj.lastMouseX = ex; |
|
319 Drag.obj.lastMouseY = ey; |
|
320 |
|
321 Drag.obj.root.onDrag(nx, ny); |
|
322 return false; |
|
323 }, |
|
324 |
|
325 end : function() |
|
326 { |
|
327 document.onmousemove = getMouseXY; |
|
328 document.onmouseup = null; |
|
329 Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), |
|
330 parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"])); |
|
331 Drag.obj = null; |
|
332 }, |
|
333 |
|
334 fixE : function(e) |
|
335 { |
|
336 if (typeof e == 'undefined') e = window.event; |
|
337 if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; |
|
338 if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; |
|
339 return e; |
|
340 } |
|
341 }; |
|
342 |