<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fun With Magnets</title>
<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<!--
<script type="text/javascript" src="../../dojo/dojo.js"></script>
-->
<script type="text/javascript" src="../../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.registerModulePath("dojofun","../examples/magnets/dojofun");
dojo.require("dojo.debug.console");
dojo.require("dojo.html.layout");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.Dialog");
dojo.require("dojofun.widget.Magnet");
function addMagnets(type, data, e){
var tray = dojo.widget.byId("tray");
for(var x=0; x<data.phrases.length; x++){
var tmp = dojo.widget.createWidget("dojofun:Magnet",
{ phrase: data.phrases[x],
constrainTo: "layout"
}
);
tray.addChild(tmp);
}
dojo.lang.forEach(tray.children, function(ttmp){
dojo.event.connect(ttmp.drag, "onDragStart", function(){
cometd.publish("/magnets/moveStart", {
source: cometd.clientId,
widgetId: ttmp.widgetId
});
});
dojo.event.connect(ttmp.drag, "onDragEnd", function(){
cometd.publish("/magnets/move", {
source: cometd.clientId,
widgetId: ttmp.widgetId,
pos: dojo.html.abs(ttmp.domNode)
});
});
});
}
function serverMagnetMove(msg){
if(msg.data.source != cometd.clientId){
var tmp = dojo.widget.byId(msg.data.widgetId);
tmp.unhighlight();
tmp.moveTo(msg.data.pos);
}
}
function serverMagnetMoveStart(msg){
if(msg.data.source != cometd.clientId){
dojo.debug("serverMagnetMoveStart", dojo.widget.byId(msg.data.widgetId));
dojo.widget.byId(msg.data.widgetId).highlight();
}
}
function setUpConnection(){
dojo.require("dojo.io.cometd");
cometd.init({}, new String(document.location).replace(/http:\/\/[^\/]*/,'').replace(/\/examples\/.*$/,'')+"/cometd");
cometd.subscribe("/magnets/move", true, "serverMagnetMove");
cometd.subscribe("/magnets/moveStart", true, "serverMagnetMoveStart");
}
dojo.addOnLoad(function(){
dojo.dnd.dragManager.threshold = 1;
dojo.io.bind({
url: "phrases.js",
load: addMagnets,
error: function(type, e){
dojo.debug("error loading phrases: " + e);
dojo.debugShallow(e);
},
mimetype: "text/json"
});
setUpConnection();
});
</script>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
#tray {
width: 200px;
background: #ababab;
overflow: visible;
}
#layout {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
background: #f5f0bf;
}
</style>
<script type="text/javascript" src="../chat/behaviour.js"></script>
<script type="text/javascript" src="../chat/chat.js"></script>
<link rel="stylesheet" type="text/css" href="../chat/chat.css"></link>
</head>
<body>
<!--
<div id="dojoDebug"
style="position: absolute; width: 300px; height: 300px; overflow: auto; border: 1px solid black; top: 20px; left: 20px;"> blah blah blah </div>
-->
<div dojoType="LayoutContainer" id="layout">
<div dojoType="ContentPane" id="tray" layoutAlign="left">
<h3>Combined Demo</h3>
<p>
A chat room and magnet demo on the same page, both using cometd.
</p>
<div id="chatroom">
<div id="chat"></div>
<div id="input">
<div id="join" >
Username: <input id="username" type="text"/><input id="joinB" class="button" type="submit" name="join" value="Join"/>
</div>
<div id="joined" class="hidden">
Chat: <input id="phrase" type="text"></input>
<input id="sendB" class="button" type="submit" name="join" value="Send"/>
<input id="leaveB" class="button" type="submit" name="join" value="Leave"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>