Update of /cvsroot/dynapi/dynapi/examples In directory usw-pr-cvs1:/tmp/cvs-serv19253/examples Modified Files: dynapi.event.mouseevents.htm dynapi.ext.inline.htm dynapi.gui.button.html dynapi.gui.buttonimage.html Added Files: dynapi.api.inflow.htm dynapi.event.nocontextual.htm Log Message: Many bugfixes and improvements. --- NEW FILE --- <html> <head> <title>DynAPI Distribution: MouseEvents Example</title> <script language="Javascript" src="../src/dynapi.js"></script> <script language="Javascript"> DynAPI.setLibraryPath('../src/lib/'); DynAPI.include('dynapi.api.*'); DynAPI.include('dynapi.event.*') </script> <script language="Javascript"> myLayer = new DynLayer() myLayer.moveTo(30,30) myLayer.setSize(100,100) myLayer.setBgColor('#c0c0c0') myLayer.setHTML('<table border="0" width="100" height="100" cellpadding="5" cellspacing="5"><tr><td height="100%" width="100%"><table border="2" width="100%" height="100%" align="center" valign="middle"><tr><td align="center"><a href="#">Link</a></td></tr></table></td></tr></table>') myLayer.addChild(new DynLayer(null,10,10,20,20,'red')) myListener = new EventListener(DynAPI.document) myListener.onmouseover=function(e) { myLayer.setBgColor('#ffc000') } myListener.onmousemove=function(e) { myLayer.setBgColor('#ffc000') } myListener.onmouseout=function(e) { myLayer.setBgColor('#c0c0c0') } myListener.onmousedown=function(e) { myLayer.setBgColor('#0000c0') } myListener.onmouseup=function(e) { myLayer.setBgColor('#ffc000') } myListener.onrtmouseup=function(e) { myLayer.setBgColor('#ffcc00') } myListener.onrtmousedown=function(e) { myLayer.setBgColor('#00cc00') } myListener.onmdmousedown=function(e) { myLayer.setBgColor('#11cc00') } myListener.onmdmouseup=function(e) { myLayer.setBgColor('#ffcc00') } myListener.ondblclick=function(e) { alert('double-click') } myLayer.addEventListener(myListener) function cool() { myLayer.setSize(200,200) } </script> </head> <body bgcolor="#ffffff"> This is a small sample of embedding DYNAPI stuff inside the HTMl flow. Notice that you can do it at load time instead of waiting until the unLoad event is executed. This is not as flexible as we'd all want ( at the time being NS4 fails to resize but, well, it is a start.).<br> Consider this an alpha. In any case, you can now add layers to the document before the page has finished loading, and those will behave as expected. <script>DynAPI.document.addInflowChild(myLayer)</script> <p> <a href='javascript:cool()'>Make it bigger</a> <br> Note: it is IMPOSSIBLE to have NS4 reflow page contents after page load. The text going down to accomodate the layer's new size is a cool trick but it will never work in NS4, so don't bother trying. </body> </html> --- NEW FILE --- <html> <head> <title>DynAPI Distribution: Disabling contextual menu - Example</title> <script language="Javascript" src="../src/dynapi.js"></script> <script language="Javascript"> DynAPI.setLibraryPath('../src/lib/'); DynAPI.include('dynapi.api.*'); DynAPI.include('dynapi.event.*') </script> <script language="Javascript"> DynAPI.onLoad=function() { myLayer = new DynLayer() myLayer.setSize(100,100) myLayer.setBgColor('#c0c0c0') myLayer.moveTo(200,280) myLayer2 = new DynLayer() myLayer2.setSize(100,100) myLayer2.setBgColor('#c0c0c0') myLayer2.moveTo(400,280) myListener = new EventListener() myListener.onrtmouseup=function(e) { e.cancelBrowserEvent() } myListener.onrtmousedown=function(e) { e.cancelBrowserEvent() } myLayer.addEventListener(myListener) DynAPI.document.addChild(myLayer) DynAPI.document.addChild(myLayer2) } </script> </head> Left layer does not allow contextual menu to pop. Right one does. When a contextual menu is shown and without hiding it you rightclick on the layer to the left, the contextual menu shows anyway in NS4. This behaviour is to be studied but it may not be solvable.<p> <pre> myListener = new EventListener() myListener.onrtmouseup=function(e) { e.cancelBrowserEvent() } myListener.onrtmousedown=function(e) { e.cancelBrowserEvent() } </pre> <p> Notice that this can easily be made into an extension with DynObject.prototype.allowContextuals(true/false) that would add/remove the above listener to the layer calling the method. This is some easy homework for those who want to starting getting their hands dirty. <body bgcolor="#ffffff"> </body> </html> Index: dynapi.event.mouseevents.htm =================================================================== RCS file: /cvsroot/dynapi/dynapi/examples/dynapi.event.mouseevents.htm,v retrieving revision 1.1 retrieving revision 1.2 diff -C2 -r1.1 -r1.2 *** dynapi.event.mouseevents.htm 2001/03/25 06:04:16 1.1 --- dynapi.event.mouseevents.htm 2002/01/04 14:25:18 1.2 *************** *** 87,91 **** <tr><td valign="middle" align="right"><b>pageY: </b></td><td valign="middle"><input type="text" name="pagey" size="3"></td></tr> <tr><td valign="middle" align="right"><b>type: </b></td><td valign="middle"><input type="text" name="type" size="23"></td></tr> ! <tr><td valign="middle" align="right"><b>src: </b></td><td valign="middle"><input type="text" name="src" size="23"></td></tr> </table> </form> --- 87,91 ---- <tr><td valign="middle" align="right"><b>pageY: </b></td><td valign="middle"><input type="text" name="pagey" size="3"></td></tr> <tr><td valign="middle" align="right"><b>type: </b></td><td valign="middle"><input type="text" name="type" size="23"></td></tr> ! <tr><td valign="middle" align="right"><b>src: </b></td><td valign="middle"><input type="text" name="src" size="30"></td></tr> </table> </form> Index: dynapi.ext.inline.htm =================================================================== RCS file: /cvsroot/dynapi/dynapi/examples/dynapi.ext.inline.htm,v retrieving revision 1.7 retrieving revision 1.8 diff -C2 -r1.7 -r1.8 *** dynapi.ext.inline.htm 2001/03/25 06:04:16 1.7 --- dynapi.ext.inline.htm 2002/01/04 14:25:18 1.8 *************** *** 44,48 **** <body> <br><br> ! <div id="layer1" style="position:absolute; visibility:hidden"> <div id="clayer1" style="position:absolute; visibility:hidden; left:0px; top:0px; width:200px; height:20px;">Child Layer 1 (Click Me)</div><br> <div id="clayer2" style="position:absolute; visibility:hidden; left:0px; top:20px; width:200px; height:20px;">Child Layer 2 (Click Me)</div> --- 44,52 ---- <body> <br><br> ! sasa ! <br> ! <br> ! a ! <div id="layer1" style="position:relative; visibility:hidden"> <div id="clayer1" style="position:absolute; visibility:hidden; left:0px; top:0px; width:200px; height:20px;">Child Layer 1 (Click Me)</div><br> <div id="clayer2" style="position:absolute; visibility:hidden; left:0px; top:20px; width:200px; height:20px;">Child Layer 2 (Click Me)</div> Index: dynapi.gui.button.html =================================================================== RCS file: /cvsroot/dynapi/dynapi/examples/dynapi.gui.button.html,v retrieving revision 1.8 retrieving revision 1.9 diff -C2 -r1.8 -r1.9 *** dynapi.gui.button.html 2001/03/25 06:04:16 1.8 --- dynapi.gui.button.html 2002/01/04 14:25:18 1.9 *************** *** 63,67 **** o.setSize(o.w+10,o.h+10); } ! text3button.addEventListener(l); DynAPI.document.addChild(d); --- 63,67 ---- o.setSize(o.w+10,o.h+10); } ! text3button.addEventListener(l); DynAPI.document.addChild(d); Index: dynapi.gui.buttonimage.html =================================================================== RCS file: /cvsroot/dynapi/dynapi/examples/dynapi.gui.buttonimage.html,v retrieving revision 1.1 retrieving revision 1.2 diff -C2 -r1.1 -r1.2 *** dynapi.gui.buttonimage.html 2001/03/25 06:04:16 1.1 --- dynapi.gui.buttonimage.html 2002/01/04 14:25:18 1.2 *************** *** 16,20 **** <script language="Javascript"> - DynAPI.onLoad = function() { --- 16,19 ---- |