Chat feature

server.js

@@ -169,7 +169,13 @@ io.sockets.on('connection', function (socket) {
     draw.addImage(room, uid, data, position, name);
     io.sockets.in(room).emit('image:add', uid, data, position, name);
   });
-
+
+  //User sends a chat message
+  socket.on('chat:message', function(room, uid, message, name){
+      draw.chatMessage(room, uid, message, name);
+      io.sockets.in(room).emit('chat:message', uid, message, name);
+  });
+
 });
 
 // Subscribe a client to a room

src/static/css/style.css

@@ -488,7 +488,50 @@ input[type=checkbox] {
   right:0px;
   bottom:0px;
 }
+/*css for chat box starts here, should be consistent with the style of etherdraw*/
+#chatBox {
+  position: absolute;
+  bottom: 0px;
+  right: 60px;
+  width: 180px;
+  height: 200px;
+  z-index: 400;
+  background-color: #f7f7f7;
+  border-left: 1px solid #999;
+  border-right: 1px solid #999;
+  border-top: 1px solid #999;
+  padding: 3px;
+  padding-bottom: 10px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+#chatLabel {
+    font-size: 13px;
+    margin: 4px 2 2 4px;
+    position: absolute;
+    font-family: Helvetica;
+}
 
+#chatMessages {
+    position: relative;
+    height: 80%;
+    top: 10%;
+    background-color: #f0f0f0;
+    list-style: none;
+    font-size: 12px;
+    overflow: auto;
+}
+
+#chatInputBox {
+    position: absolute;
+    padding: 3px 2px;
+    bottom: 0;
+    right: 0;
+    left: 3px;
+
+}
+/*css for chat box ends here*/
 .whiteBG{
   background-color:#fff;
 }

src/static/html/draw.html

@@ -204,5 +204,24 @@ <h2 data-l10n-id="draw.importExport.export"></h2>
           </div>
 
         </div>
+
+      </div>
+
+    </div>
+
+    <div id="chatBox">
+
+        <span id="chatLabel">Chat</span>
+
+        <div id="chatMessages">
+
+        </div>
+        <div id="chatInputBox">
+            <form action="">
+                  <input id="chatInput" type="text" maxlength="999" autocomplete="off">
+            </form>
+        </div>
+    </div>
+
     </body>
 </html>

src/static/js/draw.js

@@ -19,7 +19,7 @@ function pickColor(color) {
  */
 function positionPickerInCanvas(cursor) {
   var picker = $('#mycolorpicker');
-  
+
   // Determine best place for color picker so it isn't off the screen
   var pickerSize = new Point(picker.width(), picker.height());
   var windowSize = new Point($(window).width(), $(window).height());
@@ -37,12 +37,12 @@ function positionPickerInCanvas(cursor) {
   } else if (brSpace.x > pickerSize.x) {
     newPos.x = cursor.x + spacer.x;
   }
-  
+
   // Get the canvasContainer's position so we can make sure the picker
   // doesn't go outside of the canvasContainer (to keep it pretty)
   var minY = 10;
   // Buffer so we don't get too close to the bottom cause scroll bars
-  var bBuffer = Math.max(50, (windowSize.y - ($('#canvasContainer').position().top 
+  var bBuffer = Math.max(50, (windowSize.y - ($('#canvasContainer').position().top
       + $('#canvasContainer').height())) + 70);
 
   // Favour having the picker in the middle of the cursor
@@ -53,7 +53,7 @@ function positionPickerInCanvas(cursor) {
   } else if (brSpace.y < ((pickerSize.y / 2) + bBuffer) && tlSpace.y > (brSpace.y - (pickerSize.y + bBuffer))) {
     newPos.y = windowSize.y - (pickerSize.y + bBuffer);
   }
-  
+
   $('#mycolorpicker').css({
     "left": newPos.x,
     "top": newPos.y
@@ -335,7 +335,7 @@ $('.toggleBackground').click(function() {
   $('#myCanvas').toggleClass('whiteBG');
 });
 
-// --------------------------------- 
+// ---------------------------------
 // DRAWING EVENTS
 
 
@@ -774,7 +774,7 @@ $('#myCanvas').bind('drop', function(e) {
 
 //@todo Find why view has no on function view.on('resize', updateCoordinates);
 
-// --------------------------------- 
+// ---------------------------------
 // CONTROLS EVENTS
 
 var $color = $('.colorSwatch:not(#pickerSwatch)');
@@ -964,7 +964,7 @@ function uploadImage(file) {
 
 
 
-// --------------------------------- 
+// ---------------------------------
 // SOCKET.IO EVENTS
 socket.on('settings', function(settings) {
   processSettings(settings);
@@ -1066,13 +1066,27 @@ socket.on('image:add', function(artist, data, position, name) {
   }
 });
 
+
 // --------------------------------- 
+
+socket.on('chat:message', function(uid, message, name) {
+  $('#chatMessages').append($('<li>').text(name + ": " + message));
+  if(30 > Math.abs( ($("#chatMessages")[0].scrollTop+ $("#chatMessages").height()) - $("#chatMessages")[0].scrollHeight )) {
+  //if the user is scrolled near the bottom, pull their scroll down with new text
+    $("#chatMessages").scrollTop($("#chatMessages")[0].scrollHeight);
+  }
+});
+
+
+console.log(view);
+
+// ---------------------------------
 // SOCKET.IO EVENT FUNCTIONS
 
 // Updates the active connections
 var $user_count = $('#online_count');
 
-function update_user_count(count) {  
+function update_user_count(count) {
   $user_count.text((count === 1) ? "1" : " " + count);
 }
 
@@ -1154,6 +1168,39 @@ function processSettings(settings) {
 
 }
 
+function chatToggleShow() {
+  //If it's currently big, make it small, vice versa
+  //If the user does not have a name, ask for one
+
+  if($("#chatBox").height() > 10){
+    $("#chatBox").animate({height : 10},200);
+    $("#chatMessages").hide();
+    $("#chatInput").hide();
+  } else {
+    if(chatName == ""){
+      chatName = prompt("What is your name?", "");
+    }
+    $("#chatBox").animate({height : 200},200);
+    $("#chatMessages").show();
+    $("#chatInput").show();
+  }
+
+}
+
+function sendChatMessage() {
+    //get the text, emit it, clear the text
+    var message = $('#chatInput').val();
+    socket.emit('chat:message', room, uid, message, chatName || "unnamed");
+    $('#chatInput').val('');
+    return(false);//prevents page reload on submit
+}
+  //does chatName belong here?
+  var chatName = "";
+  chatToggleShow();
+  $("#chatLabel").click(function() {chatToggleShow();} );
+  $('form').submit(sendChatMessage);
+
+
 // Periodically save drawing
 setInterval(function(){
   saveDrawing();

src/util/draw.js

@@ -136,3 +136,15 @@ exports.addImage = function(room, artist, data, position, name) {
     db.storeProject(room);
   }
 }
+
+exports.chatMessage = function(room, uid, message, name){
+    var project = projects[room].project;
+    if (project && project.activeLayer) {
+        project.messages = project.message || [];
+        project.messages.push({
+          "name": name,
+          "message": message
+        });
+        db.storeProject(room);
+    }
+};