home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 01_01 / Java / pinwheel / xLayer.js < prev    next >
Encoding:
JavaScript  |  2000-11-12  |  10.3 KB  |  300 lines
  1. /******************************************************************* 
  2. * 
  3. * File    : xLayer.js 
  4. * 
  5. * Created : 2000/06/08 
  6. * 
  7. * Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 
  8. * 
  9. * Purpose : To create a cross browser dynamic layers. This 
  10. *        library is based on the library defined in the 
  11. *        excellent book. "JavasScript - The Definitive guide" 
  12. *        by David Flanagan. Published by O'Reilly. 
  13. *        ISBN 1-56592-392-8 
  14. * 
  15. * History 
  16. * Date         Version        Description 
  17. * 
  18. * 2000-06-08    1.0        Initial version 
  19. * 2000-06-17    1.1        Changed function name to setzIndex()
  20. * 2000-06-17    1.2        Changed function name to getzIndex()
  21. * 2000-08-07    1.3        Added the event handling functionality
  22. *                    from the book.
  23. * 2000-08-15    1.4        Finally! The NS functions are now prototypes.
  24. * 2000-10-14    1.5        Attempting to add NS6 (W3C Standard) functionality
  25. * 2000-11-04    1.6        Added NS6 Event handling
  26. * 2000-11-06    1.7        Added xLayerFromObj - Allows pre existing 
  27. *                    layers/divs to gain the functionality of xLayer.
  28. ***********************************************************************/ 
  29. var xLayerNo=0; 
  30. function xLayer(newLayer, x, y, w) 
  31. {
  32.     if(x==null)x=0; 
  33.     if(y==null)y=0; 
  34.     if(w==null)w=100; 
  35.      if(document.layers) 
  36.     {
  37.         if(typeof newLayer == "string")
  38.         {
  39.             this.layer=new Layer(w); 
  40.             this.layer.document.open(); 
  41.             this.layer.document.write(newLayer); 
  42.             this.layer.document.close(); 
  43.         }
  44.         else
  45.             this.layer=newLayer;
  46.  
  47.         this.layer.moveTo(x,y); 
  48.         this.images=this.layer.document.images; 
  49.      } 
  50.     else 
  51.     if(document.all) 
  52.     {
  53.         var Xname;
  54.         if(typeof newLayer == "string")
  55.         {
  56.             xName="xLayer" + xLayerNo++; 
  57.              var txt =   "<DIV ID='" + xName 
  58.                 + "' STYLE=\"position:absolute;" 
  59.                 + "left:"  + x + ";" 
  60.                 + "top:"   + y + ";" 
  61.                 + "width:" + w + ";" 
  62.                 + "visibility:hidden\">" 
  63.                 + newLayer 
  64.                  + "</DIV>"; 
  65.  
  66.             document.body.insertAdjacentHTML("BeforeEnd",txt); 
  67.         }
  68.         else
  69.             xName=newLayer.id;
  70.  
  71.         this.content = document.all[xName]; 
  72.         this.layer   = document.all[xName].style; 
  73.         this.images  = document.images; 
  74.     } 
  75.     else 
  76.     if (document.getElementById)
  77.     {
  78.         /*** Add Netscape 6.0 support (NOTE: This may work in I.E. 5+. Will have to test***/
  79.  
  80.         var newDiv;
  81.  
  82.         if(typeof newLayer == "string")
  83.         {
  84.             var xName="xLayer" + xLayerNo++;
  85.  
  86.             var txt = ""
  87.                 + "position:absolute;"
  88.                 + "left:"  + x + "px;"
  89.                 + "top:"   + y + "px;"
  90.                 + "width:" + w + "px;"
  91.                 + "visibility:hidden";
  92.  
  93.             var newRange   = document.createRange();
  94.  
  95.             newDiv = document.createElement("DIV");
  96.             newDiv.setAttribute("style",txt);
  97.             newDiv.setAttribute("id", xName);
  98.  
  99.             document.body.appendChild(newDiv);
  100.  
  101.             newRange.setStartBefore(newDiv);
  102.             strFrag = newRange.createContextualFragment(newLayer);    
  103.             newDiv.appendChild(strFrag);
  104.         }
  105.         else
  106.             newDiv = newLayer;
  107.  
  108.         this.content = newDiv;    
  109.         this.layer   = newDiv.style;
  110.         this.images  = document.images;
  111.     }
  112.  
  113.     return(this); 
  114. } 
  115.  
  116. function xLayerFromObj(theObj)
  117. {
  118.     if(document.layers)
  119.         return(new xLayer(document.layers[theObj]));
  120.     else 
  121.     if(document.all)
  122.         return(new xLayer(document.all[theObj]));
  123.     else 
  124.     if(document.getElementById)
  125.         return(new xLayer(document.getElementById(theObj)));
  126. }
  127.  
  128. if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
  129. {
  130. var eventmasks = {
  131.       onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
  132.       onclick:Event.CLICK, ondblclick:Event.DBLCLICK, 
  133.       ondragdrop:Event.DRAGDROP, onerror:Event.ERROR, 
  134.       onfocus:Event.FOCUS, onkeydown:Event.KEYDOWN,
  135.       onkeypress:Event.KEYPRESS, onkeyup:Event.KEYUP, onload:Event.LOAD,
  136.       onmousedown:Event.MOUSEDOWN, onmousemove:Event.MOUSEMOVE, 
  137.       onmouseout:Event.MOUSEOUT, onmouseover:Event.MOUSEOVER, 
  138.       onmouseup:Event.MOUSEUP, onmove:Event.MOVE, onreset:Event.RESET,
  139.       onresize:Event.RESIZE, onselect:Event.SELECT, onsubmit:Event.SUBMIT,
  140.       onunload:Event.UNLOAD
  141. };
  142.  
  143. /**** START prototypes for NS ***/ 
  144. xLayer.prototype.moveTo     = function(x,y)     { this.layer.moveTo(x,y); }
  145. xLayer.prototype.moveBy     = function(x,y)     { this.layer.moveBy(x,y); }
  146. xLayer.prototype.show        = function()     { this.layer.visibility = "show"; }
  147. xLayer.prototype.hide         = function()     { this.layer.visibility = "hide"; }
  148. xLayer.prototype.setzIndex    = function(z)    { this.layer.zIndex = z; }
  149. xLayer.prototype.setBgColor     = function(color) { this.layer.bgColor = color; }
  150. xLayer.prototype.setBgImage     = function(image) { this.layer.background.src = image; }
  151. xLayer.prototype.getX         = function()     { return this.layer.left; }
  152. xLayer.prototype.getY         = function()     { return this.layer.top; }
  153. xLayer.prototype.getWidth     = function()     { return this.layer.width; }
  154. xLayer.prototype.getHeight     = function()     { return this.layer.height; }
  155. xLayer.prototype.getzIndex    = function()    { return this.layer.zIndex; }
  156. xLayer.prototype.isVisible     = function()     { return this.layer.visibility == "show"; }
  157. xLayer.prototype.setContent   = function(xHtml)
  158. {
  159.     this.layer.document.open();
  160.     this.layer.document.write(xHtml);
  161.     this.layer.document.close();
  162. }
  163.  
  164. xLayer.prototype.clip = function(x1,y1, x2,y2)
  165. {
  166.     this.layer.clip.top    =y1;
  167.     this.layer.clip.left    =x1;
  168.     this.layer.clip.bottom    =y2;
  169.     this.layer.clip.right    =x2;
  170. }
  171. xLayer.prototype.addEventHandler = function(eventname, handler) 
  172. {
  173.         this.layer.captureEvents(eventmasks[eventname]);
  174.         var xl = this;
  175.         this.layer[eventname] = function(event) { 
  176.             return handler(xl, event.type, event.x, event.y, 
  177.                            event.which, event.which,
  178.                            ((event.modifiers & Event.SHIFT_MASK) != 0),
  179.                            ((event.modifiers & Event.CTRL_MASK) != 0),
  180.                            ((event.modifiers & Event.ALT_MASK) != 0));
  181.         }
  182. }
  183.  
  184. /*** END NS ***/ 
  185. } 
  186. else if(document.all) 
  187. { 
  188. /*** START prototypes for IE ***/ 
  189. xLayer.prototype.moveTo = function(x,y) 
  190. { 
  191.     this.layer.pixelLeft = x; 
  192.     this.layer.pixelTop = y; 
  193. } 
  194. xLayer.prototype.moveBy = function(x,y) 
  195. { 
  196.     this.layer.pixelLeft += x; 
  197.     this.layer.pixelTop += y; 
  198. } 
  199. xLayer.prototype.show        = function()     { this.layer.visibility = "visible"; } 
  200. xLayer.prototype.hide        = function()     { this.layer.visibility = "hidden"; } 
  201. xLayer.prototype.setzIndex    = function(z)    { this.layer.zIndex = z; } 
  202. xLayer.prototype.setBgColor    = function(color) { this.layer.backgroundColor = color; } 
  203. xLayer.prototype.setBgImage    = function(image) { this.layer.backgroundImage = image; } 
  204. xLayer.prototype.setContent   = function(xHtml)    { this.content.innerHTML=xHtml; } 
  205. xLayer.prototype.getX        = function()     { return this.layer.pixelLeft; } 
  206. xLayer.prototype.getY        = function()     { return this.layer.pixelTop; } 
  207. xLayer.prototype.getWidth    = function()     { return this.layer.pixelWidth; } 
  208. xLayer.prototype.getHeight    = function()     { return this.layer.pixelHeight; } 
  209. xLayer.prototype.getzIndex    = function()    { return this.layer.zIndex; } 
  210. xLayer.prototype.isVisible    = function()    { return this.layer.visibility == "visible"; } 
  211. xLayer.prototype.clip        = function(x1,y1, x2,y2) 
  212. { 
  213.     this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; 
  214.     this.layer.pixelWidth=x2; 
  215.     this.layer.pixelHeight=y2; 
  216.     this.layer.overflow="hidden"; 
  217. }
  218. xLayer.prototype.addEventHandler = function(eventName, handler) 
  219. {
  220.     var xl = this;
  221.     this.content[eventName] = function() 
  222.     { 
  223.             var e = window.event;
  224.             e.cancelBubble = true;
  225.             return handler(xl, e.type, e.x, e.y, 
  226.                            e.button, e.keyCode, 
  227.                            e.shiftKey, e.ctrlKey, e.altKey); 
  228.         }
  229. }
  230.  /*** END IE ***/ 
  231. } 
  232. else if (document.getElementById) 
  233. {
  234. /*** W3C (NS 6) ***/ 
  235. xLayer.prototype.moveTo = function(x,y)
  236. {
  237.     this.layer.left = x+"px";
  238.     this.layer.top = y+"px";
  239. }
  240. xLayer.prototype.moveBy     = function(x,y)     { this.moveTo(this.getX()+x, this.getY()+y); } 
  241. xLayer.prototype.show        = function()     { this.layer.visibility = "visible"; }
  242. xLayer.prototype.hide        = function()     { this.layer.visibility = "hidden"; }
  243. xLayer.prototype.setzIndex    = function(z)    { this.layer.zIndex = z; }
  244. xLayer.prototype.setBgColor    = function(color) { this.layer.backgroundColor = color; }
  245. xLayer.prototype.setBgImage    = function(image) { this.layer.backgroundImage = image; }
  246. xLayer.prototype.getX        = function()     { return parseInt(this.layer.left); }
  247. xLayer.prototype.getY        = function()     { return parseInt(this.layer.top); }
  248. xLayer.prototype.getWidth    = function()     { return parseInt(this.layer.width); }
  249. xLayer.prototype.getHeight    = function()     { return parseInt(this.layer.height); }
  250. xLayer.prototype.getzIndex    = function()    { return this.layer.zIndex; }
  251. xLayer.prototype.isVisible    = function()    { return this.layer.visibility == "visible"; }
  252. xLayer.prototype.clip        = function(x1,y1, x2,y2)
  253. {
  254.     this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
  255.     this.layer.width=x2 + "px";
  256.     this.layer.height=y2+ "px";
  257.     this.layer.overflow="hidden";
  258. }
  259. xLayer.prototype.addEventHandler = function(eventName, handler) 
  260. {
  261.     var xl = this;
  262.     this.content[eventName] = function(e) 
  263.     { 
  264.             e.cancelBubble = true;
  265.             return handler(xl, e.type, e.pageX, e.pageY, 
  266.                            e.button, e.keyCode, 
  267.                            e.shiftKey, e.ctrlKey, e.altKey); 
  268.     }
  269. }
  270. xLayer.prototype.setContent   = function(xHtml)
  271. {
  272.     var newRange   = document.createRange();
  273.     newRange.setStartBefore(this.content);
  274.  
  275.     while (this.content.hasChildNodes())
  276.         this.content.removeChild(this.content.lastChild);
  277.  
  278.     var strFrag    = newRange.createContextualFragment(xHtml);    
  279.     this.content.appendChild(strFrag);
  280. }
  281.  
  282. } else
  283. {
  284. xLayer.prototype.moveTo     = function(x,y)     {  }
  285. xLayer.prototype.moveBy     = function(x,y)     {  }
  286. xLayer.prototype.show         = function()     {  }
  287. xLayer.prototype.hide         = function()     {  }
  288. xLayer.prototype.setzIndex    = function(z) {  }
  289. xLayer.prototype.setBgColor     = function(color) {  }
  290. xLayer.prototype.setBgImage     = function(image) {  }
  291. xLayer.prototype.getX         = function()     { return 0; }
  292. xLayer.prototype.getY         = function()     { return 0; }
  293. xLayer.prototype.getWidth     = function()     { return 0; }
  294. xLayer.prototype.getHeight     = function()     { return 0; }
  295. xLayer.prototype.getzIndex    = function()    { return 0; }
  296. xLayer.prototype.isVisible     = function()     { return false; }
  297. xlayer.prototype.setContent   = function(xHtml) { }
  298. }
  299.  
  300. /*** End  - xLayer - a cross browser layer object by www.Roy.Whittle.com ***/