New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge 2008-11-13 09:49:11 +0000
committer: mensonge 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/demos/chat
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip
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,'&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='';
+		}
+	}
+});
+
+}
author	mensonge	2008-11-13 09:49:11 +0000
committer	mensonge	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/demos/chat
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip