Permalink
Browse files

text events and sync working

  • Loading branch information...
1 parent e8ee4bb commit 9fcc9fb1dd8f76feba47c889148878b56e0f1bbe @jtwb2 jtwb2 committed Feb 28, 2010
Showing with 54 additions and 30 deletions.
  1. +9 −3 fayeserver.js
  2. +5 −0 static/draggies.css
  3. +39 −26 static/draggies.js
  4. +1 −1 static/index.html
View
@@ -16,10 +16,16 @@ client.subscribe('/general', function(message) {
sys.puts('message type == ' + message.type);
switch (message.type) {
case 'place' :
- state[message.el] = {
+ state[message.el] || (state[message.el] = {});
+ process.mixin(state[message.el], {
x: message.x,
y: message.y
- };
+ });
+ break;
+ case 'text' :
+ process.mixin(state[message.el], {
+ text: message.text,
+ });
break;
case 'delete' :
delete state[message.el];
@@ -29,7 +35,7 @@ client.subscribe('/general', function(message) {
sys.puts(json.stringify(state));
});
-var port = 8010;
+var port = 80;
sys.puts('Listening on ' + port);
View
@@ -41,6 +41,11 @@ html, body {
position: absolute;
top: 0;
left: 0;
+ text-align: center;
+}
+
+.dg-box .dg-letter {
+ font-size: 764%;
}
.dg-selected {
View
@@ -28,16 +28,7 @@ Remote.prototype = {
fire: function(eventType, parameters) {
console.log('starting fayesend');
var data = { client: this.clientId, type: eventType };
- switch (eventType) {
- case 'place':
- data.el = parameters.el;
- data.x = parameters.pos.left;
- data.y = parameters.pos.top;
- break;
- case 'delete':
- data.el = parameters.el;
- break;
- }
+ $.extend(data, parameters);
console.log('sending data');
console.log(data);
this.publish(data);
@@ -67,6 +58,12 @@ $(function(){
console.log(message.el);
});
+ $('body').bind('dg-text', function(e, message) {
+ console.log('text handler');
+ console.log(message);
+ $('#'+message.el).html('<span class="dg-letter">'+message.text+'</span>');
+ });
+
$('body').bind('dg-delete', function(e, message) {
console.log('deletion handler');
console.log(message);
@@ -81,8 +78,10 @@ $(function(){
$(selected).removeClass('dg-selected');
selected = el == null ? null : $(el).addClass('dg-selected');
},
- boxHtml = '<div class="dg-box"></div>',
- newBox = function(id, pos) {
+ newBox = function(id, data) {
+ var boxHtml = data.text
+ ? '<div class="dg-box"><span class="dg-letter">'+data.text+'</div>'
+ : '<div class="dg-box"></div>';
return $(boxHtml).appendTo($('#dg-boxstart'))
.draggable({
containment: 'window',
@@ -93,17 +92,18 @@ $(function(){
select(ui.helper);
remote.fire('place', {
el: ui.helper.attr('id'),
- pos: ui.position,
+ x: ui.position.left,
+ y: ui.position.top
});
}
}).css({
- top: pos.top || pos.y || pos[1],
- left: pos.left || pos.x || pos[0]
+ top: data.top || data.y,
+ left: data.left || data.x
}).attr('id', id)
.click(function(e) {
console.log('box click fired');
- console.log(e.target);
- select(e.target);
+ console.log(e.currentTarget);
+ select(e.currentTarget);
});
};
@@ -117,7 +117,8 @@ $(function(){
select(box);
remote.fire('place', {
el: newId,
- pos: ui.position
+ x: ui.position.left,
+ y: ui.position.top,
});
}
});
@@ -131,27 +132,39 @@ $(function(){
});
// listen for deselect-click
- $('html').click(function(e){
+ $('html').add('.dg-banner').click(function(e){
e.preventDefault();
// deselect any selected items
if (e.target == this) {
- console.log('html.click deselect');
+ console.log('click deselect');
select(null);
}
});
// listen for ESC (deselect)
- // TODO why doesn't this work?
- $('document').keypress(function(e){
- console.log(e.which);
- e.which == $.keyCode.ESCAPE && console.log('ESC triggered');
+ // TODO get this shit working
+ /*$(document).keypress(function(e){
+ console.log('keypress');
+ console.log(e);
+ e.charCode == 27 && console.log('ESC triggered');
+ });*/
+ $(document).keydown(function(e){
+ console.log('keydown');
+ console.log(e.keyCode);
+ var key = e.which || e.keyCode;
+ if (32 <= key && key <= 126) {
+ //set selected state to keyCode
+ var text = String.fromCharCode(key);
+ $(selected).html('<span class="dg-letter">' + text + '</div>');
+ remote.fire('text', { el: $(selected).attr('id'), text: text });
+ }
});
$.getJSON('/sync', function(data) {
console.log('sync data recieved: ');
console.log(data);
- $.each(data, function(id, pos) {
- newBox(id, pos);
+ $.each(data, function(id, data) {
+ newBox(id, data);
});
});
});
View
@@ -1,7 +1,7 @@
<html>
<head>
<title>draggies</title>
-<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.0.0/build/cssreset/reset-min.css&3.0.0/build/cssfonts/fonts-min.css">
<link rel="stylesheet" href="draggies.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

0 comments on commit 9fcc9fb

Please sign in to comment.