The client page uses some eye candy from Dojo. (Clients love eye candy!)
Animation
The client chat window can be open and closed at will. Laura decides that the window should fade in and fade out - an easy thing to do with Dojo.
An animation in Dojo terms is the graduated movement of a DOM node from one state to another. A fade-in, for example, is the movement of opacity (the opposite of transparency) from 0% to 100%. Animations cover a set span of time, so you can fade in over the course of milliseconds, seconds, or minutes. In Dojo Animation, the most general form of an animation is a function. Some animations are so popular, like fades and slides, that Dojo packages those functions for you.
The animation for fading in, triggered by the Show button, looks like this:
Show / Hide Tech Support Chat
<script type="dojo/method" event="onClick">
var anim = dojo.fadeIn({ node: helpNode.domNode, duration: 400 });
dojo.connect(anim,"beforeBegin",function(){
dojo.style(helpNode.domNode,"display","block");
helpNode.toggle();
_positionIt();
});
anim.play();
</script>
</button>
The fade-in lasts for 400 ms. We hook a snippet of code in front of the animation to set the panel to display:block mode first, turn it on and position it to the top of the screen. This is necessary because opacity only works on an element that's actually displayed ... if it's display:node, as our node starts out as, the fade in won't work at all.
Because the corresponding fade-out for hiding is very similar, we rewrite the extension point to handle both jobs. helpNode.open is true if the chat window is currently open.
Show / Hide Tech Support Chat
<script type="dojo/method" event="onClick">
var anim = dojo[(helpNode.open ? "fadeOut" : "fadeIn")]({ node: helpNode.domNode, duration: 400 });
dojo.connect(anim,(helpNode.open ? "onEnd" : "beforeBegin"),function(){
dojo.style(helpNode.domNode,"display",(helpNode.open ? "none" : "block"));
helpNode.toggle();
_positionIt();
});
anim.play();
</script>
</button>
Keeping the Window Visible
Of course we don't want the chat window to scroll up as the user scrolls up. So we hook some code into the onScroll event of the window. onScroll is one of those handy Dojo Events. It is actually a front for the DOM Level 2 event of the same name, which Firefox implements in a standard way, and IE in a non-standard way. Well, we don't have to worry about that. That gives Laura more time to be creative.
// this puts our help box in the top/right corner on scroll and show function _positionIt(evt){ if (helpNode.domNode.style.display == "block"){ dojo.style(helpNode.domNode,"top",(dijit.getViewport().t + 4) + "px"); } } var helpNode; dojo.addOnLoad(function(){ dojo.parser.parse(dojo.body()); helpNode = dijit.byId('helpPane'); dojo.connect(window,"onscroll","_positionIt"); // this is a placeholder for the cometd server, once we get a public one. dojox.cometd.init("http://comet.yours.com:9000/cometd"); });
_positionIt repositions the window to be 4 pixels from the top of the viewport, which Dijit provides through its handy dijit.viewport function. The four viewport coordinates are kept in properties t, b, l and w (top, bottom, length, width).
dojo.addOnLoad specifies a code snippet to be run after all the DOM nodes have loaded and widgets have been drawn. It's a good place for connecting events, as we've done here with onscroll. Finally, we connect to the cometd server for the chat.
Lastly, Laura needs the operator page...