Mercurial > repos > chrisb > gap_all_glycan_tools
comparison get_data/cfg_array/info/Primary Screen_files/PopupWindow.js @ 0:89592faa2875 draft
Uploaded
author | chrisb |
---|---|
date | Wed, 23 Mar 2016 14:35:56 -0400 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:89592faa2875 |
---|---|
1 // =================================================================== | |
2 // Author: Matt Kruse <matt@mattkruse.com> | |
3 // WWW: http://www.mattkruse.com/ | |
4 // | |
5 // NOTICE: You may use this code for any purpose, commercial or | |
6 // private, without any further permission from the author. You may | |
7 // remove this notice from your final code if you wish, however it is | |
8 // appreciated by the author if at least my web site address is kept. | |
9 // | |
10 // You may *NOT* re-distribute this code in any way except through its | |
11 // use. That means, you can include it in your product, or your web | |
12 // site, or any other form where the code is actually being used. You | |
13 // may not put the plain javascript up on your site for download or | |
14 // include it in your javascript libraries for download. | |
15 // If you wish to share this code with others, please just point them | |
16 // to the URL instead. | |
17 // Please DO NOT link directly to my .js files from your site. Copy | |
18 // the files to your server and use them there. Thank you. | |
19 // =================================================================== | |
20 | |
21 /* | |
22 PopupWindow.js | |
23 Author: Matt Kruse | |
24 Last modified: 02/16/04 | |
25 | |
26 DESCRIPTION: This object allows you to easily and quickly popup a window | |
27 in a certain place. The window can either be a DIV or a separate browser | |
28 window. | |
29 | |
30 COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small | |
31 positioning errors - usually with Window positioning - occur on the | |
32 Macintosh platform. Due to bugs in Netscape 4.x, populating the popup | |
33 window with <STYLE> tags may cause errors. | |
34 | |
35 USAGE: | |
36 // Create an object for a WINDOW popup | |
37 var win = new PopupWindow(); | |
38 | |
39 // Create an object for a DIV window using the DIV named 'mydiv' | |
40 var win = new PopupWindow('mydiv'); | |
41 | |
42 // Set the window to automatically hide itself when the user clicks | |
43 // anywhere else on the page except the popup | |
44 win.autoHide(); | |
45 | |
46 // Show the window relative to the anchor name passed in | |
47 win.showPopup(anchorname); | |
48 | |
49 // Hide the popup | |
50 win.hidePopup(); | |
51 | |
52 // Set the size of the popup window (only applies to WINDOW popups | |
53 win.setSize(width,height); | |
54 | |
55 // Populate the contents of the popup window that will be shown. If you | |
56 // change the contents while it is displayed, you will need to refresh() | |
57 win.populate(string); | |
58 | |
59 // set the URL of the window, rather than populating its contents | |
60 // manually | |
61 win.setUrl("http://www.site.com/"); | |
62 | |
63 // Refresh the contents of the popup | |
64 win.refresh(); | |
65 | |
66 // Specify how many pixels to the right of the anchor the popup will appear | |
67 win.offsetX = 50; | |
68 | |
69 // Specify how many pixels below the anchor the popup will appear | |
70 win.offsetY = 100; | |
71 | |
72 NOTES: | |
73 1) Requires the functions in AnchorPosition.js | |
74 | |
75 2) Your anchor tag MUST contain both NAME and ID attributes which are the | |
76 same. For example: | |
77 <A NAME="test" ID="test"> </A> | |
78 | |
79 3) There must be at least a space between <A> </A> for IE5.5 to see the | |
80 anchor tag correctly. Do not do <A></A> with no space. | |
81 | |
82 4) When a PopupWindow object is created, a handler for 'onmouseup' is | |
83 attached to any event handler you may have already defined. Do NOT define | |
84 an event handler for 'onmouseup' after you define a PopupWindow object or | |
85 the autoHide() will not work correctly. | |
86 */ | |
87 | |
88 // Set the position of the popup window based on the anchor | |
89 function PopupWindow_getXYPosition(anchorname) { | |
90 var coordinates; | |
91 if (this.type == "WINDOW") { | |
92 coordinates = getAnchorWindowPosition(anchorname); | |
93 } | |
94 else { | |
95 coordinates = getAnchorPosition(anchorname); | |
96 } | |
97 this.x = coordinates.x; | |
98 this.y = coordinates.y; | |
99 } | |
100 // Set width/height of DIV/popup window | |
101 function PopupWindow_setSize(width,height) { | |
102 this.width = width; | |
103 this.height = height; | |
104 } | |
105 // Fill the window with contents | |
106 function PopupWindow_populate(contents) { | |
107 this.contents = contents; | |
108 this.populated = false; | |
109 } | |
110 // Set the URL to go to | |
111 function PopupWindow_setUrl(url) { | |
112 this.url = url; | |
113 } | |
114 // Set the window popup properties | |
115 function PopupWindow_setWindowProperties(props) { | |
116 this.windowProperties = props; | |
117 } | |
118 // Refresh the displayed contents of the popup | |
119 function PopupWindow_refresh() { | |
120 if (this.divName != null) { | |
121 // refresh the DIV object | |
122 if (this.use_gebi) { | |
123 document.getElementById(this.divName).innerHTML = this.contents; | |
124 } | |
125 else if (this.use_css) { | |
126 document.all[this.divName].innerHTML = this.contents; | |
127 } | |
128 else if (this.use_layers) { | |
129 var d = document.layers[this.divName]; | |
130 d.document.open(); | |
131 d.document.writeln(this.contents); | |
132 d.document.close(); | |
133 } | |
134 } | |
135 else { | |
136 if (this.popupWindow != null && !this.popupWindow.closed) { | |
137 if (this.url!="") { | |
138 this.popupWindow.location.href=this.url; | |
139 } | |
140 else { | |
141 this.popupWindow.document.open(); | |
142 this.popupWindow.document.writeln(this.contents); | |
143 this.popupWindow.document.close(); | |
144 } | |
145 this.popupWindow.focus(); | |
146 } | |
147 } | |
148 } | |
149 // Position and show the popup, relative to an anchor object | |
150 function PopupWindow_showPopup(anchorname) { | |
151 this.getXYPosition(anchorname); | |
152 this.x += this.offsetX; | |
153 this.y += this.offsetY; | |
154 if (!this.populated && (this.contents != "")) { | |
155 this.populated = true; | |
156 this.refresh(); | |
157 } | |
158 if (this.divName != null) { | |
159 // Show the DIV object | |
160 if (this.use_gebi) { | |
161 document.getElementById(this.divName).style.left = this.x + "px"; | |
162 document.getElementById(this.divName).style.top = this.y + "px"; | |
163 document.getElementById(this.divName).style.visibility = "visible"; | |
164 } | |
165 else if (this.use_css) { | |
166 document.all[this.divName].style.left = this.x; | |
167 document.all[this.divName].style.top = this.y; | |
168 document.all[this.divName].style.visibility = "visible"; | |
169 } | |
170 else if (this.use_layers) { | |
171 document.layers[this.divName].left = this.x; | |
172 document.layers[this.divName].top = this.y; | |
173 document.layers[this.divName].visibility = "visible"; | |
174 } | |
175 } | |
176 else { | |
177 if (this.popupWindow == null || this.popupWindow.closed) { | |
178 // If the popup window will go off-screen, move it so it doesn't | |
179 if (this.x<0) { this.x=0; } | |
180 if (this.y<0) { this.y=0; } | |
181 if (screen && screen.availHeight) { | |
182 if ((this.y + this.height) > screen.availHeight) { | |
183 this.y = screen.availHeight - this.height; | |
184 } | |
185 } | |
186 if (screen && screen.availWidth) { | |
187 if ((this.x + this.width) > screen.availWidth) { | |
188 this.x = screen.availWidth - this.width; | |
189 } | |
190 } | |
191 var avoidAboutBlank = window.opera || ( document.layers && !navigator.mimeTypes['*'] ) || navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled ); | |
192 this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_"+anchorname,this.windowProperties+",width="+this.width+",height="+this.height+",screenX="+this.x+",left="+this.x+",screenY="+this.y+",top="+this.y+""); | |
193 } | |
194 this.refresh(); | |
195 } | |
196 } | |
197 // Hide the popup | |
198 function PopupWindow_hidePopup() { | |
199 if (this.divName != null) { | |
200 if (this.use_gebi) { | |
201 document.getElementById(this.divName).style.visibility = "hidden"; | |
202 } | |
203 else if (this.use_css) { | |
204 document.all[this.divName].style.visibility = "hidden"; | |
205 } | |
206 else if (this.use_layers) { | |
207 document.layers[this.divName].visibility = "hidden"; | |
208 } | |
209 } | |
210 else { | |
211 if (this.popupWindow && !this.popupWindow.closed) { | |
212 this.popupWindow.close(); | |
213 this.popupWindow = null; | |
214 } | |
215 } | |
216 } | |
217 // Pass an event and return whether or not it was the popup DIV that was clicked | |
218 function PopupWindow_isClicked(e) { | |
219 if (this.divName != null) { | |
220 if (this.use_layers) { | |
221 var clickX = e.pageX; | |
222 var clickY = e.pageY; | |
223 var t = document.layers[this.divName]; | |
224 if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) { | |
225 return true; | |
226 } | |
227 else { return false; } | |
228 } | |
229 else if (document.all) { // Need to hard-code this to trap IE for error-handling | |
230 var t = window.event.srcElement; | |
231 while (t.parentElement != null) { | |
232 if (t.id==this.divName) { | |
233 return true; | |
234 } | |
235 t = t.parentElement; | |
236 } | |
237 return false; | |
238 } | |
239 else if (this.use_gebi && e) { | |
240 var t = e.originalTarget; | |
241 while (t.parentNode != null) { | |
242 if (t.id==this.divName) { | |
243 return true; | |
244 } | |
245 t = t.parentNode; | |
246 } | |
247 return false; | |
248 } | |
249 return false; | |
250 } | |
251 return false; | |
252 } | |
253 | |
254 // Check an onMouseDown event to see if we should hide | |
255 function PopupWindow_hideIfNotClicked(e) { | |
256 if (this.autoHideEnabled && !this.isClicked(e)) { | |
257 this.hidePopup(); | |
258 } | |
259 } | |
260 // Call this to make the DIV disable automatically when mouse is clicked outside it | |
261 function PopupWindow_autoHide() { | |
262 this.autoHideEnabled = true; | |
263 } | |
264 // This global function checks all PopupWindow objects onmouseup to see if they should be hidden | |
265 function PopupWindow_hidePopupWindows(e) { | |
266 for (var i=0; i<popupWindowObjects.length; i++) { | |
267 if (popupWindowObjects[i] != null) { | |
268 var p = popupWindowObjects[i]; | |
269 p.hideIfNotClicked(e); | |
270 } | |
271 } | |
272 } | |
273 // Run this immediately to attach the event listener | |
274 function PopupWindow_attachListener() { | |
275 if (document.layers) { | |
276 document.captureEvents(Event.MOUSEUP); | |
277 } | |
278 window.popupWindowOldEventListener = document.onmouseup; | |
279 if (window.popupWindowOldEventListener != null) { | |
280 document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();"); | |
281 } | |
282 else { | |
283 document.onmouseup = PopupWindow_hidePopupWindows; | |
284 } | |
285 } | |
286 // CONSTRUCTOR for the PopupWindow object | |
287 // Pass it a DIV name to use a DHTML popup, otherwise will default to window popup | |
288 function PopupWindow() { | |
289 if (!window.popupWindowIndex) { window.popupWindowIndex = 0; } | |
290 if (!window.popupWindowObjects) { window.popupWindowObjects = new Array(); } | |
291 if (!window.listenerAttached) { | |
292 window.listenerAttached = true; | |
293 PopupWindow_attachListener(); | |
294 } | |
295 this.index = popupWindowIndex++; | |
296 popupWindowObjects[this.index] = this; | |
297 this.divName = null; | |
298 this.popupWindow = null; | |
299 this.width=0; | |
300 this.height=0; | |
301 this.populated = false; | |
302 this.visible = false; | |
303 this.autoHideEnabled = false; | |
304 | |
305 this.contents = ""; | |
306 this.url=""; | |
307 this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no"; | |
308 if (arguments.length>0) { | |
309 this.type="DIV"; | |
310 this.divName = arguments[0]; | |
311 } | |
312 else { | |
313 this.type="WINDOW"; | |
314 } | |
315 this.use_gebi = false; | |
316 this.use_css = false; | |
317 this.use_layers = false; | |
318 if (document.getElementById) { this.use_gebi = true; } | |
319 else if (document.all) { this.use_css = true; } | |
320 else if (document.layers) { this.use_layers = true; } | |
321 else { this.type = "WINDOW"; } | |
322 this.offsetX = 0; | |
323 this.offsetY = 0; | |
324 // Method mappings | |
325 this.getXYPosition = PopupWindow_getXYPosition; | |
326 this.populate = PopupWindow_populate; | |
327 this.setUrl = PopupWindow_setUrl; | |
328 this.setWindowProperties = PopupWindow_setWindowProperties; | |
329 this.refresh = PopupWindow_refresh; | |
330 this.showPopup = PopupWindow_showPopup; | |
331 this.hidePopup = PopupWindow_hidePopup; | |
332 this.setSize = PopupWindow_setSize; | |
333 this.isClicked = PopupWindow_isClicked; | |
334 this.autoHide = PopupWindow_autoHide; | |
335 this.hideIfNotClicked = PopupWindow_hideIfNotClicked; | |
336 } |