home *** CD-ROM | disk | FTP | other *** search
/ PC Professionell 2004 December / PCpro_2004_12.ISO / files / webserver / xampp / xampp-cocoon-addon-1.4.9-installer.exe / PopupWindow.js < prev    next >
Encoding:
JavaScript  |  2004-07-12  |  10.7 KB  |  337 lines
  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. COMPATIBILITY: 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.     }
  337.