git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/demos/chat/client.html

   1 <html>
   2 <head>
   3     <title>Sample built in tech-support demonstration | The Dojo Toolkit </title>
   4     <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:false"></script>
   5     <script type="text/javascript" src="room.js"></script>
   6     <script type="text/javascript">
   7                 dojo.require("dijit.TitlePane");
   8                 dojo.require("dojo.parser");
   9                 dojo.require("dijit.form.Button");
  10
  11                 // this puts our help box in the top/right corner on scroll and show
  12                 function _positionIt(evt){
  13                         if (helpNode.domNode.style.display == "block"){
  14                                 dojo.style(helpNode.domNode,"top",(dijit.getViewport().t + 4) + "px");
  15                         }
  16                 }
  17
  18                 var helpNode;
  19                 dojo.addOnLoad(function(){
  20                         dojo.parser.parse(dojo.body());
  21                         helpNode = dijit.byId('helpPane');
  22                         dojo.connect(window,"onscroll","_positionIt");
  23                         // this is not a public cometd server :)
  24                         dojox.cometd.init("http://comet.sitepen.com:9190/cometd");
  25                 });
  26
  27     </script>
  28         <style type="text/css">
  29                 @import "chat.css";
  30                 @import "../../themes/tundra/tundra.css";
  31                 @import "../../tests/css/dijitTests.css";
  32         </style>
  33 </head>
  34 <body class="tundra">
  35
  36 <h1 class="testTitle">I am a <i>Sample</i> page</h1>
  37         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p>
  38
  39 <h3>Need help?</h3>
  40 <button dojoType="dijit.form.Button">
  41 Show / Hide Tech Support Chat
  42         <script type="dojo/method" event="onClick">
  43                 // simple dojo/method example. this is like doing button onClick="javascript:" but more robust
  44                 var anim = dojo[(helpNode.open ? "fadeOut" : "fadeIn")]({ node: helpNode.domNode, duration: 400 });
  45                 dojo.connect(anim,(helpNode.open ? "onEnd" : "beforeBegin"),function(){
  46                         dojo.style(helpNode.domNode,"display",(helpNode.open ? "none" : "block"));
  47                         helpNode.toggle();
  48                         _positionIt();
  49                 });
  50                 anim.play();
  51         </script>
  52 </button>
  53
  54
  55         <p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p>
  56         <p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p>
  57         <p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p>
  58
  59         <div title="Chat with Technical Support:" id="helpPane" dojoType="dijit.TitlePane"
  60                 style="width:275px; height:400px; position:absolute; top:4px; right:4px; margin:0; padding:0; display:none;" open="false" >
  61                 <div dojoType="dijit.demos.chat.Room" id="chatroom" isPrivate="true"></div>
  62         </div>
  63
  64 </body>
  65 </html>