diff options
Diffstat (limited to 'includes/js/dijit/demos/chat')
| -rw-r--r-- | includes/js/dijit/demos/chat/chat.css | 40 | ||||
| -rw-r--r-- | includes/js/dijit/demos/chat/chat.css.commented.css | 46 | ||||
| -rw-r--r-- | includes/js/dijit/demos/chat/client.html | 65 | ||||
| -rw-r--r-- | includes/js/dijit/demos/chat/community.html | 114 | ||||
| -rw-r--r-- | includes/js/dijit/demos/chat/operator.html | 83 | ||||
| -rw-r--r-- | includes/js/dijit/demos/chat/room.js | 127 |
6 files changed, 475 insertions, 0 deletions
diff --git a/includes/js/dijit/demos/chat/chat.css b/includes/js/dijit/demos/chat/chat.css new file mode 100644 index 0000000..9dde485 --- /dev/null +++ b/includes/js/dijit/demos/chat/chat.css @@ -0,0 +1,40 @@ +.chatroom +{ + position:relative; + height:240px; + background-color: #e0e0e0; + border: 0px solid black; +} +.chat +{ + height: 200px; + overflow: auto; + background-color: #fff; + padding: 4px; + border: 0px solid black; +} +.dijitTabContainer .chat { + height:auto; +} +.input { + position:absolute; + bottom:0px; + display:block; + padding: 4px; + border: 0px solid black; + border-top: 1px solid black; +} +.phrase +{ + width:200px; + background-color:#ededed; +} +.username +{ + width:145px; + background-color: #ededed; +} +.hidden { display: none; } +.from { font-weight: bold; } +.alert { font-style: italic; } +.dijitTitlePaneContentInner { padding:0px !important; } diff --git a/includes/js/dijit/demos/chat/chat.css.commented.css b/includes/js/dijit/demos/chat/chat.css.commented.css new file mode 100644 index 0000000..0874a53 --- /dev/null +++ b/includes/js/dijit/demos/chat/chat.css.commented.css @@ -0,0 +1,46 @@ +.chatroom +{ + position:relative; + height:240px; + background-color: #e0e0e0; + border: 0px solid black; +} + +.chat +{ + height: 200px; + overflow: auto; + background-color: #fff; + padding: 4px; + border: 0px solid black; +} +.dijitTabContainer .chat { + height:auto; +} + +.input { + position:absolute; + bottom:0px; + display:block; + padding: 4px; + border: 0px solid black; + border-top: 1px solid black; +} + +.phrase +{ + width:200px; + background-color:#ededed; +} + +.username +{ + width:145px; + background-color: #ededed; +} + +.hidden { display: none; } +.from { font-weight: bold; } +.alert { font-style: italic; } +.dijitTitlePaneContentInner { padding:0px !important; } + diff --git a/includes/js/dijit/demos/chat/client.html b/includes/js/dijit/demos/chat/client.html new file mode 100644 index 0000000..5471272 --- /dev/null +++ b/includes/js/dijit/demos/chat/client.html @@ -0,0 +1,65 @@ +<html> +<head> + <title>Sample built in tech-support demonstration | The Dojo Toolkit </title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:false"></script> + <script type="text/javascript" src="room.js"></script> + <script type="text/javascript"> + dojo.require("dijit.TitlePane"); + dojo.require("dojo.parser"); + dojo.require("dijit.form.Button"); + + // 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 not a public cometd server :) + dojox.cometd.init("http://comet.sitepen.com:9190/cometd"); + }); + + </script> + <style type="text/css"> + @import "chat.css"; + @import "../../themes/tundra/tundra.css"; + @import "../../tests/css/dijitTests.css"; + </style> +</head> +<body class="tundra"> + +<h1 class="testTitle">I am a <i>Sample</i> page</h1> + <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> + +<h3>Need help?</h3> +<button dojoType="dijit.form.Button"> +Show / Hide Tech Support Chat + <script type="dojo/method" event="onClick"> + // simple dojo/method example. this is like doing button onClick="javascript:" but more robust + 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> + + + <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> + <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> + <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> + + <div title="Chat with Technical Support:" id="helpPane" dojoType="dijit.TitlePane" + style="width:275px; height:400px; position:absolute; top:4px; right:4px; margin:0; padding:0; display:none;" open="false" > + <div dojoType="dijit.demos.chat.Room" id="chatroom" isPrivate="true"></div> + </div> + +</body> +</html> diff --git a/includes/js/dijit/demos/chat/community.html b/includes/js/dijit/demos/chat/community.html new file mode 100644 index 0000000..4c208a0 --- /dev/null +++ b/includes/js/dijit/demos/chat/community.html @@ -0,0 +1,114 @@ +<html> +<head> + <title>Cometd chat / Operator Page</title> + + <style type="text/css"> + @import "chat.css"; + @import "../../tests/css/dijitTests.css"; + @import "../../themes/tundra/tundra.css"; + @import "../../../dojox/widget/SortList/SortList.css"; + + html, body { margin:0; padding:0; height:100%; width:100%; overflow:hidden; } + + #status { position:absolute; top:5px; right:25px; } + #mainPane { background:#fff; } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:false"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="room.js"></script> + <script type="text/javascript"> + dojo.require("dijit.Dialog"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.Button"); + + // custom widget created for this demo: + dojo.require("dojox.widget.SortList"); + + dojo.require("dojo.parser"); + + // not for production use? + //dojox.cometd.init("http://comet.sitepen.com:9000/cometd"); + + var control = { + _chats: [], + _getAlert: function(e){ + console.log(e); + if (!this._chats[(e.data.user)] && (operator != e.data.user)){ + dojox.cometd.subscribe("/chat/demo/"+e.data.joined,this,"_privateChat"); + + var tabNode = document.createElement('div'); + tabNode.id = "chatWith" + e.data.user; + var chatNode = document.createElement('div'); + chatNode.id = e.data.user + "Widget"; + tabNode.appendChild(chatNode); + var newTab = new dijit.layout.ContentPane({ + title: e.data.user, + closable: true + },tabNode); + dijit.byId('tabView').addChild(newTab); + var chat = new dijit.demos.chat.Room({ + roomId: e.data.joined, + registeredAs: operator + },chatNode); + chat.startup(); + this._chats[(e.data.user)]=true; + } + }, + + _privateChat: function(e){ + var thisChat = dijit.byId(e.data.user+"Widget") || false; + if (thisChat) { thisChat._chat(e); } + } + }; + + function registerOperator(){ + dijit.byId('loginDialog').hide(); + + } + + dojo.addOnLoad(function(){ + dojo.parser.parse(dojo.body()); + // dojox.cometd.subscribe("/chat/demo/poundDojo",control,"_getAlert"); + var widget = dijit.byId('userList'); + for (var i = 0; i<50; i++){ + var node = document.createElement('li'); + node.innerHTML = i+": list item sample"; + widget.containerNode.appendChild(node); + } + widget.onSort(); + }); + </script> +</head> +<body> +<div dojoType="dijit.layout.LayoutContainer" style="width:100%; height:100%;"> + <div dojoType="dijit.layout.SplitContainer" orientation="vertical" style="height:100%" layoutAlign="client" sizerWidth="7"> + <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7" activeSizing="true" layoutAlign="top" sizeShare="80"> + <div id="mainPane" dojoType="dijit.layout.ContentPane" title="Home" style="padding:8px;" sizeShare="80" layoutAlign="left" style="background:#fff;"> + <h3>Dojo community chat demo</h3> + <h2>NON-WORKING PROTOTYPE</h2> + + <button dojoType="dijit.form.Button">Login + <script type="dojo/method" event="onClick"> + console.log('foo?'); + dijit.byId('loginDialog').show(); + </script> + </button> + + </div> + <div title="Users in #dojo" id="userList" dojoType="dojox.widget.SortList" sizeShare="20" sizeMin="15" layoutAlign="right"></div> + </div> + <div dojoType="dijit.layout.ContentPane" sizeShare="20" layoutAlign="bottom"> + bottom. (input area) + </div> + </div> +</div> +<div dojoType="dijit.Dialog" id="loginDialog" title="Select Username:"> + Name: <input type="text" name="username" id="opName" value="" /> + <input type="submit" value="login" onclick="registerOperator()"/> +</div> +</body> +</html> diff --git a/includes/js/dijit/demos/chat/operator.html b/includes/js/dijit/demos/chat/operator.html new file mode 100644 index 0000000..594fc6e --- /dev/null +++ b/includes/js/dijit/demos/chat/operator.html @@ -0,0 +1,83 @@ +<html> +<head> + <title>Cometd chat / Operator Page</title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad:false"></script> + <script type="text/javascript" src="room.js"></script> + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dojo.parser"); + var control = { + _chats: {}, + _getAlert: function(e){ + console.log(e); + if (!this._chats[(e.data.user)] && (operator != e.data.user)){ + dojox.cometd.subscribe("/chat/demo/"+e.data.joined,this,"_privateChat"); + + var tabNode = document.createElement('div'); + tabNode.id = "chatWith" + e.data.user; + var chatNode = document.createElement('div'); + chatNode.id = e.data.user + "Widget"; + tabNode.appendChild(chatNode); + var newTab = new dijit.layout.ContentPane({ + title: e.data.user, + closable: true + },tabNode); + dijit.byId('tabView').addChild(newTab); + var chat = new dijit.demos.chat.Room({ + roomId: e.data.joined, + registeredAs: operator + },chatNode); + chat.startup(); + this._chats[(e.data.user)]=true; + } + }, + + _privateChat: function(e){ + var thisChat = dijit.byId(e.data.user+"Widget") || false; + if (thisChat) { /* thisChat._chat(e); */} + } + }; + + dojo.addOnLoad(function(){ + dojo.parser.parse(dojo.body()); + + dojox.cometd.init("http://comet.sitepen.com:9190/cometd"); + dojox.cometd.subscribe("/chat/demo",control,"_getAlert"); + + }); + + var operator; + function registerOperator(){ + operator = dojo.byId('opName').value; + dojo.byId('login').style.display = "none"; + dojo.byId('status').innerHTML = "You are: <b>"+operator+"</b>"; + } + + </script> + <style type="text/css"> + @import "chat.css"; + @import "../../tests/css/dijitTests.css"; + @import "../../themes/tundra/tundra.css"; + #status { position:absolute; top:5px; right:25px; } + </style> +</head> +<body class="tundra"> + +<h1 class="testTitle">Tech Support Operator Page:</h1> + +<div id="tabView" dojoType="dijit.layout.TabContainer" style="width:100%; height:75%; "> + + <div dojoType="dijit.layout.ContentPane" title="Home" style="padding:8px;" > + <h3>Welcome Operator</h3> + <p>It is your job to respond to incoming Support Requests. Sit here, and watch the screen.</p> + <p id="login">Please Login as an operator: + <br><br> + Name: <input type="text" name="username" id="opName" value="" /> <input type="submit" value="login" onclick="registerOperator()"/> + </p> + </div><!-- home tab --> + +</div><!-- tabContainer --> +<div id="status"></div> +</body> +</html> diff --git a/includes/js/dijit/demos/chat/room.js b/includes/js/dijit/demos/chat/room.js new file mode 100644 index 0000000..b1847f4 --- /dev/null +++ b/includes/js/dijit/demos/chat/room.js @@ -0,0 +1,127 @@ +if(!dojo._hasResource["dijit.demos.chat.room"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.demos.chat.room"] = true; +dojo.provide("dijit.demos.chat.room"); + +dojo.require("dojox.cometd"); +dojo.require("dijit._Widget"); +dojo.require("dijit._Templated"); + +dojo.declare("dijit.demos.chat.Room", + [dijit._Widget,dijit._Templated], + { + + _last: "", + _username: null, + roomId: "public", + isPrivate: false, + prompt: "Name:", + + templateString: '<div id="${id}" class="chatroom">' + +'<div dojoAttachPoint="chatNode" class="chat"></div>' + +'<div dojoAttachPoint="input" class="input">' + +'<div dojoAttachPoint="joining">' + +'<span>${prompt}</span><input class="username" dojoAttachPoint="username" type="text" dojoAttachEvent="onkeyup: _join"> <input dojoAttachPoint="joinB" class="button" type="submit" name="join" value="Contact" dojoAttachEvent="onclick: _join"/>' + +'</div>' + +'<div dojoAttachPoint="joined" class="hidden">' + +'<input type="text" class="phrase" dojoAttachPoint="phrase" dojoAttachEvent="onkeyup: _cleanInput" />' + +'<input type="submit" class="button" value="Send" dojoAttachPoint="sendB" dojoAttachEvent="onclick: _sendPhrase"/>' + +'</div>' + +'</div>' + +'</div>', + + join: function(name){ + if(name == null || name.length==0){ + alert('Please enter a username!'); + }else{ + if(this.isPrivate){ this.roomId = name; } + this._username=name; + this.joining.className='hidden'; + this.joined.className=''; + this.phrase.focus(); + console.log(this.roomId); + dojox.cometd.subscribe("/chat/demo/" + this.roomId, this, "_chat"); + dojox.cometd.publish("/chat/demo/" + this.roomId, { user: this._username, join: true, chat : this._username+" has joined the room."}); + dojox.cometd.publish("/chat/demo", { user: this._username, joined: this.roomId }); + } + }, + + _join: function(/* Event */e){ + var key = (e.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : e.keyCode); + if (key == dojo.keys.ENTER || e.type=="click"){ + this.join(this.username.value); + } + }, + + leave: function(){ + dojox.cometd.unsubscribe("/chat/demo/" + this.roomId, this, "_chat"); + dojox.cometd.publish("/chat/demo/" + this.roomId, { user: this._username, leave: true, chat : this._username+" has left the chat."}); + + // switch the input form back to login mode + this.joining.className=''; + this.joined.className='hidden'; + this.username.focus(); + this._username=null; + }, + + chat: function(text){ + // summary: publish a text message to the room + if(text != null && text.length>0){ + // lame attempt to prevent markup + text=text.replace(/</g,'<'); + text=text.replace(/>/g,'>'); + dojox.cometd.publish("/chat/demo/" + this.roomId, { user: this._username, chat: text}); + } + }, + + _chat: function(message){ + // summary: process an incoming message + if (!message.data){ + console.warn("bad message format "+message); + return; + } + var from=message.data.user; + var special=message.data.join || message.data.leave; + var text=message.data.chat; + if(text!=null){ + if(!special && from == this._last ){ from="..."; + }else{ + this._last=from; + from+=":"; + } + + if(special){ + this.chatNode.innerHTML += "<span class=\"alert\"><span class=\"from\">"+from+" </span><span class=\"text\">"+text+"</span></span><br/>"; + this._last=""; + }else{ + this.chatNode.innerHTML += "<span class=\"from\">"+from+" </span><span class=\"text\">"+text+"</span><br/>"; + this.chatNode.scrollTop = this.chatNode.scrollHeight - this.chatNode.clientHeight; + } + } + }, + + startup: function(){ + this.joining.className=''; + this.joined.className='hidden'; + //this.username.focus(); + this.username.setAttribute("autocomplete","OFF"); + if (this.registeredAs) { this.join(this.registeredAs); } + this.inherited("startup",arguments); + }, + + _cleanInput: function(/* Event */e){ + var key = (e.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : e.keyCode); + if(key == dojo.keys.ENTER || key == 13){ + this.chat(this.phrase.value); + this.phrase.value=''; + } + }, + + _sendPhrase: function(/* Event */e){ + if (this.phrase.value){ + this.chat(this.phrase.value); + this.phrase.value=''; + } + } +}); + +} |