Context Navigation

test_xmppService.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 15.2 KB

Line
1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html>
3	<head>
4	<style type="text/css">
5	@import "../../../dojo/resources/dojo.css";
6	@import "../../../dijit/themes/dijit.css";
7	@import "../../../dijit/themes/tundra/tundra.css";
8
9	html,body {
10	width: 100%;
11	height: 100%;
12	overflow: none;
13	}
14
15	.dijitSplitPane{
16	margin: 5px;
17	}
18
19	#buddyList {
20	cursor:pointer;
21	}
22
23	.presence {
24	background:#525252;
25	height: 10px;
26	width: 10px;
27	margin:5px;
28	}
29
30	.online,
31	.available {
32	background: #00AC00;
33	}
34
35
36	.away {
37	background: #E20000;
38	}
39
40
41	.offline {
42	background: #ccc;
43	}
44
45	</style>
46	<title>xmpp test page</title>
47
48	<script type="text/javascript"
49	src="../../../dojo/dojo.js" data-dojo-config="isDebug:true,parseOnLoad:true">
50	</script>
51	<script type="text/javascript">
52
53	dojo.require("dijit._base.popup");
54	dojo.require('dijit.layout.LayoutContainer');
55	dojo.require('dijit.layout.ContentPane');
56	dojo.require("dijit.layout.TabContainer");
57	dojo.require("dijit.form.FilteringSelect");
58	dojo.require("dijit.Menu");
59	dojo.require("dijit.Dialog");
60	dojo.require("dijit.Toolbar");
61	dojo.require("dijit.TitlePane");
62	dojo.require("dojox.xmpp.xmppSession");
63
64	dojo.require("dojox.xmpp.widget.ChatSession");
65
66	dojo.require("dojo.date");
67	dojo.require("dojo.date.locale");
68	dojo.require("dojo.parser");
69	</script>
70
71	<script type="text/javascript">
72
73
74	//We want to know which chat instance is selected, so we can associate
75	//the <input> area with it
76	var selectedTab = "";
77	var chatTabs = {};
78	var chatTabContainer = null;
79	var chatInstances = {};
80
81	/Local copy of the user's roster/
82	var roster = {};
83	var groups = {};
84	var rosterPresence = {};
85	var selectedJID = null;
86
87	dojo.addOnLoad(function() {
88
89	dijit.byId("loginDialog").show();
90	var buddyList = dojo.byId("buddyList");
91	dojo.connect(buddyList, "ondblclick",function(evt){
92	var target = findTargetContact(evt);
93	if(target) {
94	openChat(target.jid);
95	}
96	});
97
98
99	dojo.connect(buddyList, "oncontextmenu",function(evt){
100	selectedJID = null;
101	var target = findTargetContact(evt);
102	if(target) {
103	selectedJID = target.jid;
104	dojo.stopEvent(evt);
105	var pop = dijit.popup.open({
106	popup: dijit.byId("buddyMenu"),
107	around: target.target,
108	onExecute: function(){
109	dijit.popup.close( dijit.byId("buddyMenu"));
110	},
111	onCancel: function(){
112	dijit.popup.close( dijit.byId("buddyMenu"));
113	}
114	});
115
116	}
117	});
118
119
120
121	});
122
123	function findTargetContact(evt) {
124	var buddyList = dojo.byId("buddyList");
125	var jid = null;
126	var target = evt.target;
127	while(!jid && target != buddyList) {
128	jid = target.getAttribute("imContactId");
129	if(!jid) {
130	target = target.parentNode;
131	}
132	}
133	return jid ? {jid:jid, target:target} : null;
134	}
135
136	function login() {
137
138	var bindUrl = dijit.byId("bindUrl").attr("value");
139	var domain = dijit.byId("loginDomain").attr("value");
140	var jid = dijit.byId("loginJid").attr("value");
141	var password = dijit.byId("loginPassword").attr("value");
142
143	var useScriptSrcTransport = false;
144	if(bindUrl.indexOf("http") == 0) {
145	useScriptSrcTransport = true;
146	}
147	var options = {
148	serviceUrl:bindUrl,// "http://other.host.local/http-bind/",
149	hold: 1,
150	secure: false,
151	useScriptSrcTransport: useScriptSrcTransport,
152	wait: 60,
153	lang: 'en',
154	retryCount: 2,
155	domain: domain
156	};
157
158	session = new dojox.xmpp.xmppSession(options);
159	//TESTUSER
160
161	//currently svc.openSession doesn't accept any params
162	//so the iwc.userPrefs stuff above setup the user id, dont' forget it!
163	session.open(jid, password, "test-client");
164
165
166
167	buddyList = dojo.byId("buddyList");
168	chatTabContainer = dijit.byId("chatTabs");
169	//sendInput = dojo.byId("sendInput");
170
171	//When the session becomes active, get the buddy list and populate it
172	dojo.connect(session, "onActive", function(){
173	session.presenceService.publish({});
174	});
175
176	dojo.connect(this.session, 'onRosterAdded', buddyAdded);
177
178	dojo.connect(this.session, 'onRosterChanged', function(rosterItem, previousCopy) {
179	var presence = rosterPresence[rosterItem.id];
180	buddyRemoved(previousCopy);
181	buddyAdded(rosterItem);
182	if(presence) {
183	updateBuddyPresence(presence);
184	}
185	});
186	dojo.connect(this.session, 'onRosterRemoved', buddyRemoved);
187
188
189	dojo.connect(session, "onRosterUpdated", function() {
190	for(var i=0;i<session.roster.length;i++){
191	var buddy = session.roster[i];
192	roster[buddy.jid] = buddy;
193	if(buddy.groups.length == 0 ) {
194	addBuddyToGroup(buddy, "buddies");
195	} else {
196	for(var j= 0; j < buddy.groups.length; j++) {
197	addBuddyToGroup(buddy, buddy.groups[j]);
198	}
199	}
200	}
201	for(groupName in groups) {
202	createGroup(groupName);
203	}
204	});
205
206
207
208	//subscribe to presence notifications
209	dojo.connect(session, 'onPresenceUpdate', updateBuddyPresence);
210
211
212	//subscribe to onSubscriptionRequest. For this test, we'll just
213	//automatically accept any susbscription request
214	dojo.connect(session, "onSubscriptionRequest", function(from){
215	session.presenceService.approveSubscription(from);
216	});
217
218
219
220	dojo.connect(session, "onRegisterChatInstance", function(instance, message){
221
222	//in the case of we are creating a new chat instance, defer the tab creation
223	//until the invite has occurred and the contact's uid has been added
224	if (instance.uid){
225	if(!chatInstances[instance.uid] \|\| chatInstances[instance.uid].chatid != instance.chatid){
226	newMessage(instance, instance.uid, message);
227	}
228	chatInstances[instance.uid] = instance;
229	}
230
231	dojo.connect(instance, "onInvite", dojo.hitch(this,function(contact){
232	chatInstances[contact] = instance;
233	newMessage(instance, contact, null);
234	}));
235
236
237	//do something when we get a new message from this chat instance
238	dojo.connect(instance, "onNewMessage", dojo.hitch(this, function(msg){
239	newMessage(instance, instance.uid, msg);
240	}));
241
242	//I'm not going to wire this up for this example, but this
243	//is the event that would signal whether a person is writing,
244	//idle, etc (ie, the little pencil in adium)
245	dojo.connect(instance, "setState", function(state){
246	console.log("IM: ", instance.uid, " is now ", state);
247	});
248	});
249
250	}
251
252	function createGroup(groupName) {
253	var div = document.createElement("div");
254	buddyList.appendChild(div);
255	var groupItems = groups[groupName].items;
256	var buffer = new dojox.string.Builder();
257	for(var i=0;i<groupItems.length;i++){
258	var buddy = groupItems[i];
259	renderBuddy(buffer, buddy);
260	}
261	div.innerHTML = buffer.toString();
262	var titlePane = new dijit.TitlePane({title: groupName}, div);
263
264	groups[groupName].container = titlePane;
265	return titlePane;
266	}
267
268	function updateBuddyPresence(p){
269	rosterPresence[p.from] = p;
270	dojo.query('div[imContactId="'+p.from+'"]', buddyList).forEach(function(contact) {
271	contact.firstChild.className = "dijitInline presence " + p.show;
272	});
273
274	}
275
276	function buddyRemoved(buddy){
277	delete roster[buddy.id];
278	delete rosterPresence[buddy.id];
279	dojo.query('div[imContactId="'+buddy.id+'"]', buddyList).forEach(function(contact) {
280	contact.parentNode.removeChild(contact);
281	});
282	}
283
284	function buddyAdded(buddy) {
285	roster[buddy.id] =buddy
286	if(buddy) {
287	var div = null;
288	if(buddy.groups.length == 0 ) {
289	addBuddyToGroup(buddy, "buddies");
290	var container = groups["buddies"].container;
291	if(container) {
292	div = container.containerNode;
293	var buffer = new dojox.string.Builder();
294	buffer.append(div.innerHTML);
295	renderBuddy(buffer, buddy);
296	div.innerHTML = buffer;
297	} else {
298	div = createGroup("buddies").containerNode;
299	}
300
301	} else {
302	for(var j= 0; j < buddy.groups.length; j++) {
303	var groupName = buddy.groups[j];
304	addBuddyToGroup(buddy, groupName);
305	var container = groups[groupName].container;
306	if(container) {
307	div = container.containerNode;
308	var buffer = new dojox.string.Builder();
309	buffer.append(div.innerHTML);
310	renderBuddy(buffer, buddy);
311	div.innerHTML = buffer;
312	} else {
313	div = createGroup(groupName).containerNode;
314	}
315
316	}
317	}
318	}
319
320	}
321
322
323	function renderBuddy(buffer, buddy) {
324	buffer.append('<div imContactId="');
325	buffer.append(buddy.jid);
326	buffer.append('"><div class="dijitInline presence"></div><div class="dijitInline ">');
327	buffer.append(buddy.name?buddy.name:buddy.jid);
328	buffer.append('</div></div>');
329	}
330
331	function addBuddyToGroup(buddy, groupName) {
332	var group = groups[groupName];
333	if(!group) {
334	group = {name:groupName, items: []};
335	groups[groupName] =group;
336	}
337	group.items.push(buddy);
338	}
339
340	function newMessage(instance, jid, message) {
341	var tab = chatTabs[jid];
342	if(!tab) {
343	var div = document.createElement("div");
344	var buddy = roster[jid];
345	var chatWith = jid;
346	if(buddy && buddy.name) {
347	chatWith = buddy.name;
348	}
349	tab = new dojox.xmpp.widget.ChatSession({title: jid, chatWith: chatWith, instance: instance, closable: true}, div);
350	dojo.connect(tab, "onClose", function() {
351	delete chatTabs[jid];
352	});
353	chatTabContainer.addChild(tab);
354	chatTabContainer.selectChild(tab);
355	chatTabContainer.layout();
356	chatTabs[jid] = tab;
357	}
358	tab.displayMessage(message);
359
360	}
361
362	function openChat(jid){
363	var tab = chatTabs[jid];
364	if(tab) {
365	chatTabContainer.selectChild(tab);
366	}
367
368	var chatInstance = new dojox.xmpp.ChatService();
369	session.registerChatInstance(chatInstance);
370	chatInstance.invite(jid);
371	}
372
373
374	function updatePresence(p){
375	//since the filtering select wants to call its onChange
376	//at startup and the svc isn't started up yet, we just ignore it
377	//for this test case
378	if (session && session.presenceService) {
379	session.presenceService.publish({show:p});
380	}
381	}
382
383
384	function addUser() {
385	var userJID = dijit.byId("userJID").attr("value");
386	var userAlias = dijit.byId("userAlias").attr("value");
387	var userGroups = dijit.byId("userGroups").attr("value");
388
389	var groups = userGroups.split(",");
390	session.rosterService.addRosterItem(userJID, userAlias, groups);
391	}
392
393	function showAddBuddy() {
394	dijit.byId("userJID").setValue("");
395	dijit.byId("userJID").setDisabled(false);
396
397	dijit.byId("userAlias").setValue("");
398	dijit.byId("userGroups").setValue("");
399	dijit.byId('addUser').show();
400	}
401
402	function showEditBuddy() {
403	var buddy = roster[selectedJID];
404	if(buddy) {
405	dijit.byId("userJID").setValue(selectedJID);
406	dijit.byId("userJID").setDisabled(true);
407
408	dijit.byId("userAlias").setValue(buddy.name? buddy.name : "");
409	dijit.byId("userGroups").setValue(buddy.groups? buddy.groups.join(",") : "");
410	dijit.byId('addUser').show();
411	}
412	}
413
414	function subscribeBuddy(){
415	session.presenceService.subscribe(selectedJID);
416	}
417
418
419	function deleteBuddy(){
420	if(confirm("Sure you want to delete " + selectedJID + " ?")) {
421	session.rosterService.removeRosterItem(selectedJID);
422	}
423	}
424
425	</script>
426	</head>
427
428	<body class="tundra">
429	foo
430	<div dojoType="dijit.Dialog" id="loginDialog" style="display: none; width:400px" title="Login">
431	<table>
432	<tr>
433	<td><label for="name">JID: </label></td>
434	<td><input dojoType="dijit.form.TextBox" type="text" id="loginJid" value="foo"></td>
435	</tr>
436	<tr>
437	<td><label for="loc">Password: </label></td>
438	<td><input dojoType="dijit.form.TextBox" type="password" id="loginPassword" value="papajeza"></td>
439	</tr>
440	<tr>
441	<td><label for="loc">Domain: </label></td>
442	<td><input dojoType="dijit.form.TextBox" type="text" id="loginDomain" value="mac"></td>
443	</tr>
444	<tr>
445	<td><label for="loc">HTTP-Bind URL: </label></td>
446	<td><input dojoType="dijit.form.TextBox" type="text" id="bindUrl" value="http://127.0.0.1:7070/http-bind/"></td>
447	</tr>
448	<tr>
449	<td colspan="2"><small>Note: a relative Bind URL will use the standard XHR transport and a full URL will use the cross-domain BOSH script syntax.</small></td>
450	</tr>
451	<tr>
452	<td colspan="2" align="center">
453	<button dojoType="dijit.form.Button" onClick="login()" type="submit">Login</button></td>
454	</tr>
455	</table>
456	</div>
457
458	<div dojoType="dijit.Dialog" id="addUser" style="display: none" title="Add User">
459	<table>
460	<tr>
461	<td><label for="name">JID: </label></td>
462	<td><input dojoType="dijit.form.TextBox" type="text" id="userJID" value=""></td>
463	</tr>
464	<tr>
465	<td><label for="name">Alias: </label></td>
466	<td><input dojoType="dijit.form.TextBox" type="text" id="userAlias" value=""></td>
467	</tr>
468	<tr>
469	<td><label for="name">Groups: </label></td>
470	<td><input dojoType="dijit.form.TextBox" type="text" id="userGroups" value=""></td>
471	</tr>
472	<tr>
473	<td colspan="2" align="center">
474	<button dojoType="dijit.form.Button" onClick="addUser()" type="submit">Save</button>
475	<button dojoType="dijit.form.Button" onClick="dijit.byId('addUser').hide();" type="submit">Cancel</button></td>
476	</tr>
477	</table>
478	</div>
479	<div dojoType="dijit.Menu" id="buddyMenu" style="display:none; width: 190px;">
480
481	<div dojoType="dijit.MenuItem" onClick="showEditBuddy" >
482	Edit Buddy
483	</div>
484	<div dojoType="dijit.MenuItem" onClick="subscribeBuddy">
485	Re-request subscription
486	</div>
487	<div dojoType="dijit.MenuItem" onClick="deleteBuddy">
488	Delete
489	</div>
490
491	</div>
492
493	<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%;">
494	<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="height: 50px; background: #999999;">
495	XMPP Test Client
496	<div style="top:10px; float: right;">
497	Status: <select dojoType="dijit.form.FilteringSelect" id="presence" name="presence" autoComplete="false" onChange="updatePresence(arguments[0]);">
498	<option value="available" selected>Online</option>
499	<option value="away">Away</option>
500	<option value="chat">Free to Chat</option>
501	<option value="dnd">Do Not Disturb</option>
502	<option value="xa">Extended Away</option>
503	</select>
504	<button dojoType="dijit.form.Button" id="addUserButton" onClick="showAddBuddy()">Add Buddy</button>
505	</div>
506	</div>
507
508	<div id="buddyListCP" dojoType="dijit.layout.ContentPane" layoutAlign="right" style="width: 200px; border: 1px solid #999999; overflow:auto;">
509
510	<div id="buddyList">
511	</div>
512	</div>
513	<div id="chatTabs" dojoType="dijit.layout.TabContainer" layoutAlign="client" style="border: 1px solid #999999; height:100%"></div>
514	</div>
515	</body>
516	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/xmpp/tests/test_xmppService.html

Download in other formats: