Updates to examples/express_example: Added package.json; Improved sty…

…ling; Improved JS.
dahabit · Feb 17, 2012 · f782ebf · f782ebf
1 parent d7593c3
commit f782ebf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/examples/express_example/package.json b/examples/express_example/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "nowjs-express-example",
+  "version": "0.0.2",
+  "author": "ericz (Eric Zhang) <eric@nowjs.com>",
+  "description": "This is an example of an embedded chat window added to any site.",
+  "keywords": [
+    "nowjs",
+    "express",
+    "example"
+  ],
+  "dependencies" : {
+    "now"     :  ">=0.7",
+    "express" :  ">=2.4",
+    "ejs"     :  ">=0.5"
+  },
+  "engine": {
+    "node": ">=0.4"
+  }
+} 
diff --git a/examples/express_example/views/chat.ejs b/examples/express_example/views/chat.ejs
@@ -6,19 +6,28 @@
 </div>
 
 <script>
-    $(document).ready(function(){
-
-      now.receiveMessage = function(name, message){
-        $("#messages").append("<br>" + name + ": " + message);
+  $(document).ready(function(){
+    
+    now.receiveMessage = function(name, message){
+      $("#messages").append("<br>" + name + ": " + message);
+    }
+    
+    $("#send-button").click(function(){
+      now.distributeMessage($("#text-input").val());
+      $("#text-input").val("");
+      $("#text-input").focus();
+    });
+    
+    $("#text-input").keypress(function (e) {
+      if (e.which && e.which === 13) {
+        $("#send-button").click();
+        return false;
       }
-
-      $("#send-button").click(function(){
-        now.distributeMessage($("#text-input").val());
-        $("#text-input").val("");
-        $("#text-input").focus();
-      });
-
-      now.name = prompt("What's your name?", "");
-
     });
+    
+    now.name = prompt("What's your name?", "");
+    
+    $("#text-input").focus();
+    
+  });
 </script>
diff --git a/examples/express_example/views/index.ejs b/examples/express_example/views/index.ejs
@@ -1,13 +1,12 @@
 <h1><%= title %></h1>
 <p>Welcome to <%= title %></p>
 <p>This is an example of an embedded chat window added to any site. <a href='#' id='chat'>Chat with us</a></p>
-<div id="floater" style="position: absolute; right: 0; top:0; width="25%" height="100%"></div>
+<div id="floater" style="position: absolute; right: 0; top:0; width: 300px; height: 100%;"></div>
 <script>
-    $(document).ready(function() {
+  $(document).ready(function() {
     $('#chat').click(function(e) {
-        e.preventDefault();
-        $('<iframe width="300px" height="100%" sandbox="allow-same-origin allow-forms allow-scripts" src="http://localhost:8080/chat"></iframe>').appendTo('#floater');
-        });
-
+      e.preventDefault();
+      $('#floater').css("border-left", "1px solid #000").append('<iframe style="width: 300px; border: 0;" sandbox="allow-same-origin allow-forms allow-scripts" src="http://localhost:8080/chat"></iframe>');
     });
+  });
 </script>