home *** CD-ROM | disk | FTP | other *** search
/ PC Online 1999 February / PCO_0299.ISO / filesbbs / w9x / visdhtml.exe / visual / components / dialog / dialog.js < prev   
Encoding:
JavaScript  |  1998-03-31  |  17.5 KB  |  479 lines
  1. /**
  2.  * dialog.js  0.4  97/Nov/15
  3.  *
  4.  * Copyright (c) 1997 Netscape Communications Corp. All Rights Reserved.
  5.  *
  6.  * Netscape grants you a non-exclusive, royalty free, license to use,
  7.  * modify and redistribute this software in source and binary code form,
  8.  * provided that this copyright notice and license appear on all copies of
  9.  * the software.
  10.  *
  11.  * This software is provided "AS IS," without a warranty of any kind.
  12.  *
  13.  * author: gary smith 
  14.  * for sample code (still under construction)
  15.  */
  16.  
  17. /**
  18.  * Constructs a Dialog object 
  19.  */
  20. function Dialog() {
  21.     this.dialogTitle = "Dialog";
  22.     this.dialogContent = "";
  23.     this.dialogSRC = "URL";
  24.     this.dialogPageX = (100 + self.pageXOffset) || 100;
  25.     this.dialogPageY = (100 + self.pageYOffset) || 100;
  26.     this.dialogWidth = null;
  27.     this.dialogHeight = null;
  28.     this.dialogMorph = false;
  29.     this.dialogBgColor = "#C1CDCD"; //C1CDCD
  30.     this.dialogMainBgColor = "#C1CDCD";  //cool colors: D2B48C 9AC0CD 5F9EA0 B4CDCD A2B5CD 9FB6CD D2B48C 6CA6CD 66CDAA 458B74
  31.     this.dialogButtonBgColor = "#CDB79E"; //9FB6CD CDC9A5 CDCDC1 CDC0B0 D2B48C BDB76B CDB79E CDB7B5
  32.     this.dialogButtonHiliteBgColor = "#999999";
  33.     this.dialogTitleBgColor = "#000084";
  34.     this.dialogButtons = new Array();
  35.     this.dialogButtonsCentered = new Array();
  36.     this.dialogButtonsCenteredWidth = 0;
  37.  
  38.     //methods
  39.     this.openDialog = openDialog;
  40.     this.exampleDialog = exampleDialog;
  41.     this.setDialogContent = setDialogContent; 
  42.     this.setDialogTitle = setDialogTitle;
  43.     this.setDialogPageX = setDialogPageX;
  44.     this.setDialogPageY = setDialogPageY;
  45.     this.setDialogWidth = setDialogWidth;
  46.     this.setDialogHeight = setDialogHeight;
  47.     this.setDialogBgColor = setDialogBgColor;
  48.     this.setDialogMainBgColor = setDialogMainBgColor;
  49.     this.setDialogButtonBgColor = setDialogButtonBgColor;
  50.     this.setDialogTitleBgColor = setDialogTitleBgColor;
  51.     this.setDialogMorph = setDialogMorph;
  52.  
  53.     //button methods
  54.     this.dialogButton = dialogButton;
  55.     this.setDialogBase = setDialogBase;
  56.     this.setDialogButton = setDialogButton;
  57.     this.setTitleBarButton = setTitleBarButton;
  58.     this.addDialogButton = addDialogButton;
  59.     this.onDialogButton = onDialogButton;
  60.     this.dialogButtonMouseOver = dialogButtonMouseOver;
  61.     this.dialogButtonMouseOut = dialogButtonMouseOut;
  62.     this.dialogTitleMouseOver = dialogTitleMouseOver;
  63.     this.dialogTitleMouseOut = dialogTitleMouseOut;
  64.  
  65.     this.cDrag = cDrag;
  66.     this.cDragStart = cDragStart;
  67.     this.cDragEnd = cDragEnd;
  68.     this.cDragSet = cDragSet;
  69.     this.dialogWinMorph = dialogWinMorph;
  70.     this.nsDialogObject = nsDialogObject;
  71.     this.nsDialogObject();
  72. }
  73.  
  74. function openDialog(label, arbitrary) {
  75.     if(window.NdialogLabel == label) return;
  76.     window.NdialogLabel = label;
  77.     
  78.     if(window.Ndialog) {
  79.         this.win = window.Ndialog;
  80.         if(this.win.base.visibility == 'hide') {
  81.            //java.lang.System.out.println("activeD");
  82.            this.win.title.document.open('text/html');
  83.            this.win.title.document.writeln('<BODY><NOBR><FONT COLOR="#FFFFFF"><B><SPAN ID=font14>  '+ this.dialogTitle +'</SPAN></B></FONT></BODY>');
  84.            this.win.title.document.close();
  85.            this.win.doc.visibility = "hide";
  86.            this.win.doc = null;
  87.         } else {
  88.            this.setDialogBase(label);
  89.         }
  90.     } else {
  91.         this.setDialogBase(label);
  92.     }
  93.  
  94.     var temp = makeLayer(label, this.dialogContent, this.win.base, 0,0, 4,4, "", "hide");
  95.     if(temp.clip.width < 100) 
  96.         temp.clip.width = 100;
  97.     this.boxW = 100;
  98.     if(this.dialogWidth == null) 
  99.         this.boxW = temp.clip.width;
  100.     else this.boxW  = this.dialogWidth -10;
  101.     this.win.main.document.open('text/html');
  102.     this.win.main.document.writeln(" ");
  103.     this.win.main.document.close();
  104.     this.win.doc  = makeLayer('ddoc', this.dialogContent, this.win.base, this.boxW,0, 4,25, this.dialogBgColor);
  105.     if(this.win.doc.clip.width > this.boxW) 
  106.         this.boxW = this.win.doc.clip.width +5;
  107.     this.boxW += 10;
  108.     this.boxH = 100;
  109.     if(this.dialogHeight == null) 
  110.         this.boxH = this.win.title.clip.height + this.win.doc.clip.height;
  111.     else this.boxH = this.dialogHeight;
  112.     //this.win.doc.clip.height = this.boxH;
  113.     if(this.dialogButtons.length > 0)
  114.         this.boxH += 40;
  115.     this.boxW += 10;
  116.     this.boxH += 10;
  117.     this.dialogWidth = this.boxW;
  118.     this.dialogHeight = this.boxH;
  119.     this.win.doc.clip.width    = this.boxW -4;
  120.     this.win.base.clip.width   = this.boxW +4;
  121.     this.win.base.clip.height  = this.boxH +4;
  122.     this.win.edge.clip.width   = this.boxW +4;
  123.     this.win.edge.clip.height  = this.boxH +4;
  124.     this.win.base.visibility   = 'inherit';
  125.     this.win.dark.clip.width   = this.boxW +2;
  126.     this.win.dark.clip.height  = this.boxH +2;
  127.     this.win.lite.clip.width   = this.boxW +1;
  128.     this.win.lite.clip.height  = this.boxH +1;
  129.     this.win.main.clip.width   = this.boxW;
  130.     this.win.main.clip.height  = this.boxH;
  131.     this.win.title.clip.width  = this.boxW -4;
  132.     this.win.title.clip.height = 20;
  133.     this.win.title.saveBgColor = this.dialogTitleBgColor;
  134.     this.win.titleBarButton.left = this.win.title.clip.width -15;
  135.     this.win.title.cDragSet = this.cDragSet;
  136.     this.win.title.cDragLayer  = this.win.base;
  137.     this.win.title.onMouseOver = this.dialogTitleMouseOver;
  138.     this.win.title.onMouseOut  = this.dialogTitleMouseOut;
  139.     this.win.base.that = this;
  140.     this.win.base.moveTo(this.dialogPageX,this.dialogPageY);
  141.  
  142.     if(this.dialogButtons.length > 0) {
  143.        //this.win.button.visibility = "hide";
  144.        this.win.button.dialogButtons = new Array();
  145.        for(var i=0; i<this.dialogButtons.length; i++) {
  146.            var b = this.dialogButtons[i];
  147.            this.win.button.dialogButtons[i] = this.setDialogButton(b.label, b.value, this.win.main, null, null, b.x, b.y, this.win, b.onDialogButton);
  148.        }
  149.        var centeredBase = (this.boxW - this.dialogButtonsCenteredWidth) /2;
  150.        for(var i=0; i<this.dialogButtonsCentered.length; i++) {
  151.            if(this.dialogButtonsCentered[i -1]) 
  152.                centeredBase += this.dialogButtonsCentered[i -1].clip.width +1;
  153.            this.dialogButtonsCentered[i].left = centeredBase;
  154.        }
  155.        for(var i=0; i<this.dialogButtons.length; i++) {
  156.            this.win.button.dialogButtons[i].visibility = "inherit";
  157.        }
  158.     }
  159.     //if(this.dialogButtons.length <= 0) {
  160.         //this.boxH = this.win.title.clip.height + this.win.doc.clip.height +5;
  161.     //} else {
  162.         //this.boxH = this.win.title.clip.height + this.win.doc.clip.height + this.win.buttonsHeight +5;
  163.         //Ndialog.button.left = (this.boxW - Ndialog.button.clip.width) /2;
  164.         //Ndialog.button.top  = this.boxH - Ndialog.button.clip.height -5;
  165.         //Ndialog.button.visibility = "inherit";
  166.     //}
  167.     window.captureEvents(Event.RESIZE);
  168.     window.onresize=resetDialog;
  169.     eval( arbitrary );
  170.     if(this.dialogSRC != "URL") 
  171.         this.win.doc.src = this.dialogSRC;
  172. }
  173.  
  174. function setDialogBase(label) {
  175.        //java.lang.System.out.println("no activeD");
  176.        this.win = new Object();
  177.        this.win.base = new Layer(100);
  178.        this.win.base.bgColor = '#000000';
  179.        this.win.base = makeLayer(label, "", null, 0,0, -1,-1, '#000000');
  180.        this.win.edge = makeLayer(label, "", this.win.base, 0,0, -1,-1, '#DDDDDD');
  181.        this.win.dark = makeLayer(label, "", this.win.base, 0,0, 1,1, '#888888');
  182.        this.win.lite = makeLayer(label, "", this.win.base, 0,0, 1,1, '#FFFFFF');
  183.        this.win.main = makeLayer(label, "", this.win.base, 0,0, 2,2, this.dialogMainBgColor);
  184.        this.win.title  = makeLayer('title', '<BODY><NOBR><FONT COLOR="#FFFFFF"><B><SPAN ID=font14>  '+ this.dialogTitle +'</SPAN></B></FONT></BODY>', this.win.base, 0,0, 4,4, this.dialogTitleBgColor);
  185.        this.win.titleBarButton = this.setTitleBarButton('titleX', "", this.win.base, null,null, 177, null, this.win);
  186.        this.win.button = new Layer();
  187.        window.Ndialog = this.win;
  188. }
  189.  
  190. function addDialogButton(label, value, x, y, onDialogButton) {
  191.     newDialogButton = new this.dialogButton(label, value, x, y, onDialogButton);
  192.     this.dialogButtons[this.dialogButtons.length++] = newDialogButton;
  193. }
  194.  
  195. function dialogButton(label, value, x, y, onDialogButton) {
  196.     this.label = label;
  197.     this.value = value;
  198.     this.x = x;
  199.     this.y = y;
  200.     this.onDialogButton = onDialogButton;
  201. }
  202.  
  203. function setDialogButton(label, value, parentLyr, width, height, x, y, dialogObj, onDialogButton) {
  204.     if(typeof(x) != 'number') 
  205.         var trueX = x; x = 0;
  206.     if(typeof(y) != 'number')
  207.         y = 0;
  208.     value = ' '+ value +' ';
  209.     var button = makeLayer(label, value, parentLyr, 0,0, x,y, '#000000', "hide");
  210.     //this.boxH = dialogObj.title.clip.height + dialogObj.doc.clip.height + button.clip.height +10;
  211.     button.clip.width += 4;
  212.     button.clip.height += 4;
  213.     button.lite  = makeLayer(label, "", button, button.clip.width -1, button.clip.height -1, 0,0, '#FFFFFF');
  214.     button.dark  = makeLayer(label, "", button, button.clip.width -2, button.clip.height -2, 1,1, '#666666');
  215.     button.shade = makeLayer(label, "", button, button.clip.width -3, button.clip.height -3, 1,1, '#CCCCCC');
  216.     button.value = makeLayer(label, value, button, button.clip.width -4, button.clip.height -4, 2,2, this.dialogButtonBgColor);
  217.     button.value.saveBgColor = this.dialogButtonBgColor;
  218.     button.value.saveHiliteBgColor = this.dialogButtonHiliteBgColor;
  219.     button.value.win = dialogObj;
  220.     button.value.dialogButtons = this.dialogButtons;
  221.     button.value.label = label;
  222.     button.value.onDialogButton = onDialogButton;
  223.     button.value.onFocus = this.onDialogButton;
  224.     button.value.onMouseOver =  this.dialogButtonMouseOver;
  225.     button.value.onMouseOut  =  this.dialogButtonMouseOut;
  226.     button.top = dialogObj.title.clip.height + dialogObj.doc.clip.height +5;
  227.     if(trueX == 'center' && this.dialogButtons) {
  228.          this.dialogButtonsCentered[this.dialogButtonsCentered.length++] = button;
  229.          this.dialogButtonsCenteredWidth += button.clip.width;
  230.     }
  231.     if(trueX == 'right') 
  232.         button.left = this.boxW - (button.clip.width +5);
  233.     button.top += 7;
  234.     dialogObj.buttonsHeight = button.clip.height +12;
  235.     return button;
  236. }
  237.  
  238. function setTitleBarButton(label, value, parentLyr, width, height, x, y, dialogObj, onDialogButton) {
  239.     if(typeof(x) != 'number') 
  240.         var trueX = x; x = 0; 
  241.     if(typeof(y) != 'number') 
  242.         y = 0;
  243.     var button = makeLayer(label, value, parentLyr, 0,0, x,y, '#000000');
  244.     button.clip.width = 16;
  245.     button.clip.height = 14;        
  246.     button.lite  = makeLayer(label, "", button, button.clip.width -1, button.clip.height -1, 0,0, '#FFFFFF');
  247.     button.dark  = makeLayer(label, "", button, button.clip.width -2, button.clip.height -2, 1,1, '#666666');
  248.     button.shade = makeLayer(label, "", button, button.clip.width -3, button.clip.height -3, 1,1, '#CCCCCC');
  249.     button.value = makeLayer(label, value, button, button.clip.width -4, button.clip.height -4, 2,2, this.dialogMainBgColor);
  250.     button.value.saveBgColor = this.dialogMainBgColor;
  251.     button.value.win = dialogObj;
  252.     button.value.label = button;
  253.     button.value.onDialogButton = onDialogButton;
  254.     button.value.onFocus = this.onDialogButton;
  255.     button.value.onMouseOver =  this.dialogButtonMouseOver;
  256.     button.value.onMouseOut  =  this.dialogButtonMouseOut;
  257.      button.value.top -= 5;
  258.      button.value.clip.top += 5;        
  259.      button.value.clip.height += 5;        
  260.      button.value.left += 3;        
  261.      button.value.clip.left -= 3;        
  262.      button.value.clip.width -= 3;        
  263.     button.top = 7;
  264.     return button;
  265. }
  266.  
  267. function onDialogButton(e) {
  268.     this.bgColor='#888888';
  269.     this.dialog = this.win.doc;
  270.     this.win.base.visibility = 'hide';
  271.     eval( this.onDialogButton );
  272.     //this.win = null;
  273.     window.NdialogLabel = null;
  274. }
  275.  
  276. function dialogButtonMouseOver(e) {
  277.     this.bgColor = this.saveHiliteBgColor || "#999999";
  278. }
  279.  
  280. function dialogButtonMouseOut(e) {
  281.     this.bgColor = this.saveBgColor;
  282. }
  283.  
  284. function dialogTitleMouseOver(e) {
  285.     this.cDragSet(this);
  286.     this.bgColor = '#0000CD';
  287. }
  288.  
  289. function dialogTitleMouseOut(e) {
  290.     this.bgColor = this.saveBgColor;
  291. }
  292.  
  293. function setDialogContent(str) { 
  294.     this.dialogContent = str; 
  295. }
  296.  
  297. function setDialogTitle(str) { 
  298.     this.dialogTitle = str; 
  299. }
  300.  
  301. function setDialogPageX(i) {
  302.     this.dialogPageX = i; 
  303. }
  304.  
  305. function setDialogPageY(i) {
  306.     this.dialogPageY = i; 
  307. }
  308.  
  309. function setDialogWidth(i) {
  310.     this.dialogWidth = i; 
  311. }
  312.  
  313. function setDialogHeight(i) {
  314.     this.dialogHeight = i; 
  315. }
  316.  
  317. function setDialogBgColor(str) {
  318.     this.dialogBgColor = str; 
  319. }
  320.  
  321. function setDialogMainBgColor(str) {
  322.     this.dialogMainBgColor = str; 
  323. }
  324.  
  325. function setDialogButtonBgColor(str) {
  326.     this.dialogButtonBgColor = str; 
  327. }
  328.  
  329. function setDialogButtonHiliteBgColor(str) {
  330.     this.dialogButtonHiliteBgColor = str; 
  331. }
  332.  
  333. function setDialogTitleBgColor(str) {
  334.     this.dialogTitleBgColor = str; 
  335. }
  336.  
  337. function setDialogMorph(boo) {
  338.     this.dialogMorph = boo; 
  339. }
  340.  
  341. function cDragSet(l) {
  342.     d = this;
  343.     d.cDragLayer = l.cDragLayer || l.parentLayer || l;
  344.     d.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
  345.     d.onmousedown=cDragStart;
  346.     d.onmouseup=cDragEnd;
  347. }
  348.  
  349. function cDrag(e) {
  350.     var x = window.innerWidth;
  351.     var y = window.innerHeight;
  352.     if(e.pageX > -5 && e.pageY > -5 && e.pageX < x && e.pageY < y) {
  353.         d.cDragLayer.moveBy(e.pageX-d.offX,e.pageY-d.offY);
  354.     } else {
  355.         if(d.cDragLayer.that.dialogMorph) { 
  356.             cDragEnd(e);
  357.             dialogWinMorph(e, this);
  358.         }
  359.     }
  360.     d.offX = e.pageX;
  361.     d.offY = e.pageY;
  362.     d.dragged = true;
  363. }
  364.  
  365. function dialogWinMorph(e, l) {
  366.     //java.lang.System.out.println("value=" + l.that.dialogContent);
  367.     //java.lang.System.out.println("l.pageX=" + l.pageX);
  368.     if(!l.that) return;
  369.     if(!window.dialogWinMorphs) 
  370.         window.dialogWinMorphs = new Array();
  371.     java.lang.System.out.println("len=" + window.dialogWinMorphs.length);
  372.     l.that.win.base.visibility = "hide";
  373.     //if(!l.that.dialogMorphWin) l.that.dialogMorphWin = {};
  374.     //if(!l.that.dialogMorphWin.close) {
  375.         var width = l.that.dialogWidth +20;
  376.         var height = l.that.dialogHeight +20;
  377.         var y = l.pageY + window.screenY + window.outerHeight - window.innerHeight -20;
  378.         if(l.pageX > 0) 
  379.             var x = window.screenX + window.outerWidth;
  380.         else
  381.             var x = window.screenX - 100;
  382.         var id = window.dialogWinMorphs.length;
  383.         var win = window.open("",'win' + id,'outerWidth='+ width +',outerHeight='+ height +',left='+ x +',top='+ y);
  384.         win.document.open("text/html");
  385.         win.document.writeln('<BODY BGCOLOR="'+ l.that.dialogBgColor +'">');
  386.         win.document.writeln('<TITLE>'+ l.that.dialogTitle +'</TITLE>');
  387.         win.document.writeln(l.that.dialogContent +'</BODY>');
  388.         win.document.close();
  389.         NdialogLabel = null;
  390.         if(window.dev) 
  391.             win.dev = window.dev;
  392.         win.focus();
  393.         window.dialogWinMorphs[l.that.dialogTitle] = win;
  394.         window.dialogWinMorphs[id] = win;
  395.     //}
  396. }
  397.  
  398. function cDragStart(e) {
  399.     //java.lang.System.out.println("this=" + this);
  400.     d.cDragLayer.captureEvents(Event.MOUSEMOVE);
  401.     d.cDragLayer.onmousemove=cDrag; 
  402.     d.offX=e.pageX;
  403.     d.offY=e.pageY;
  404. }
  405.  
  406. function cDragEnd(e) {
  407.     d.cDragLayer.onmousemove=0;
  408.     if(d.dragged == true) {
  409.         if(d.refresh) {
  410.             d.cDragLayer.visibility="hide"; 
  411.             setTimeout('if(d.cDragLayer) d.cDragLayer.visibility="inherit";',1);
  412.         }
  413.         d.cDragLayer.releaseEvents(Event.MOUSEDOWN|Event.MOUSEUP|Event.MOUSEMOVE|Event.MOUSEDRAG);
  414.         d.dragged = false;
  415.         if(e.pageY < 0) 
  416.             d.cDragLayer.top = -5;
  417.         //if(e.pageX > window.width) d.cDragLayer.top = window.width -20;
  418.     }
  419. }
  420.  
  421. function nsDialogObject() {
  422.     if(!window.nsDialogObjects) {
  423.         window.nsDialogObjects = new Array();
  424.         window.nsDialogObjects[0] = this;
  425.     } else {
  426.         window.nsDialogObjects[window.nsDialogObjects.length++] = this;
  427.     }
  428. }
  429.  
  430. function resetDialog(e) {
  431.     for(var i=0; i < window.nsDialogObjects.length; i++) {
  432.         if(window.nsDialogObjects[i].win) 
  433.             window.nsDialogObjects[i].openDialog();
  434.     }
  435. }
  436.  
  437. function exampleDialog(str) {
  438.     var dialog = new Dialog();
  439.     var value = (str || '<CENTER><BR>Enter a local <B>filename</B>: <FORM><INPUT TYPE=FILE NAME="fileName" VALUE="" SIZE=40>   </FORM></CENTER>');
  440.     dialog.setDialogContent(value);
  441.     dialog.setDialogTitle('Dialog');
  442.     dialog.setDialogBgColor("#DDDDDD");
  443.     //dialog.setDialogWidth(600);
  444.     //dialog.setDialogHeight(150);
  445.     //dialog.setDialogPageX(200);
  446.     //dialog.setDialogPageY(250);
  447.     //dialog.dialogSRC = "../../";
  448.     dialog.addDialogButton("OKlabel", "   OK   ", "center", 3, "alert('You entered filename: ' + this.dialog.document.forms[0].fileName.value)");
  449.     dialog.addDialogButton("CancelLabel", "Cancel", "center", 3, "");
  450.     //dialog.addDialogButton("AnotherLabel", "Another", "right", 3, "");
  451.     dialog.openDialog('exampleLabel');
  452. }
  453.  
  454. function makeLayer(label, value, parentLyr, width, height, x, y, color, viso) {
  455.     //java.lang.System.out.println(""+ parentLyr);
  456.     if(!value) 
  457.         value = " ";
  458.     if(parentLyr) 
  459.         var l = new Layer(width, parentLyr);
  460.     else var l = new Layer(width);
  461.     l.document.ids.font14.fontSize = 14;
  462.     l.document.ids.sysFont.fontSize = 12;
  463.     l.document.ids.sysFont.fontFamily = "Arial, Espy, sans-serif";
  464.     l.document.open("text/html");
  465.     l.document.writeln(value);
  466.     l.document.close();
  467.     l.label = label;
  468.     l.moveTo(x,y);
  469.     if(color != "") 
  470.         l.bgColor = color;
  471.     if(width) 
  472.         l.clip.width = width;
  473.     if(height) 
  474.         l.clip.height = height;
  475.     if(!viso) 
  476.         l.visibility = "inherit";
  477.     return l;
  478. }
  479.