Subversion Repositories Applications.papyrus

Compare Revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dijit/demos/chat/client.html
New file
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:9000/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>
/trunk/api/js/dojo1.0/dijit/demos/chat/chat.css
New file
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; }
 
/trunk/api/js/dojo1.0/dijit/demos/chat/community.html
New file
0,0 → 1,112
<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="../../../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>
<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>
</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>
/trunk/api/js/dojo1.0/dijit/demos/chat/room.js
New file
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,'&lt;');
text=text.replace(/>/g,'&gt;');
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+"&nbsp;</span><span class=\"text\">"+text+"</span></span><br/>";
this._last="";
}else{
this.chatNode.innerHTML += "<span class=\"from\">"+from+"&nbsp;</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='';
}
}
});
 
}
/trunk/api/js/dojo1.0/dijit/demos/chat/operator.html
New file
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:9000/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>