jschat 0.1.1

data/lib/jschat/http/public/javascripts/app/protocol/display.js

@@ -0,0 +1,147 @@
+var Display = {
+  scrolled: false,
+
+  add_message: function(text, className, time) {
+    var time_html = '<span class="time">\#{time}</span>'.interpolate({ time: TextHelper.dateText(time) });
+    $('messages').insert({ bottom: '<li class="' + className + '">' + time_html + ' ' + text + '</li>' });
+    this.scrollMessagesToTop();
+  },
+
+  addImageOnLoads: function() {
+    $$('#messages li').last().select('img').each(function(element) {
+        element.observe('load', this.scrollMessagesToTop);
+    }.bind(this));
+  },
+
+  message: function(message) {
+    var name = $('name').innerHTML;
+    var user_class = name == message['user'] ? 'user active' : 'user';
+    var text = '<span class="\#{user_class}">\#{user}</span> <span class="\#{message_class}">\#{message}</span>';
+
+    if (message['message'].match(new RegExp(name, 'i')) && name != message['user']) {
+      user_class = 'user mentioned';
+    }
+
+    Display.clearIdleState(message['user']);
+
+    text = text.interpolate({ user_class: user_class, room: message['room'], user: TextHelper.truncateName(message['user']), message: TextHelper.decorateMessage(message['message']), message_class: 'message' });
+    this.add_message(text, 'message', message['time']);
+
+    this.addImageOnLoads();
+
+    if (this.show_unread) {
+      this.unread++;
+      document.title = 'JsChat: (' + this.unread + ') new messages';
+    }
+  },
+
+  messages: function(messages) {
+    $('messages').innerHTML = '';
+    this.ignore_notices = true;
+
+    $A(messages).each(function(json) {
+      try {
+        if (json['change']) {
+          Change[json['change']](json[json['change']]);
+        } else {
+          this[json['display']](json[json['display']]);
+        }
+      } catch (exception) {
+      }
+    }.bind(this));
+
+    this.ignore_notices = false;
+    this.scrollMessagesToTop();
+    /* This is assumed to be the point at which displaying /lastlog completes */
+    $('loading').hide();
+    Cookie.create('jschat-name', $('name').innerHTML, 28, '/');
+  },
+
+  scrollMessagesToTop: function() {
+    if (!this.scrolled) {
+      $('messages').scrollTop = $('messages').scrollHeight;
+    }
+  },
+
+  clearIdleState: function(user_name) {
+    $$('#names li').each(function(element) {
+      if (element.innerHTML == user_name && element.hasClassName('idle')) {
+        element.lastIdle = (new Date());
+        element.removeClassName('idle');
+      }
+    });
+  },
+
+  isIdle: function(dateValue) {
+    try {
+      var d = typeof dateValue == 'string' ? new Date(Date.parse(dateValue)) : dateValue,
+          now = new Date();
+      if (((now - d) / 1000) > (60 * 5)) {
+        return true;
+      }
+    } catch (exception) {
+      console.log(exception);
+    }
+    return false;
+  },
+
+  names: function(users) {
+    $('names').innerHTML = '';
+    users.each(function(user) {
+      var name = user['name'],
+          list_class = this.isIdle(user['last_activity']) ? 'idle' : '',
+          element = $(document.createElement('li'));
+
+      element.addClassName(list_class);
+      element.innerHTML = TextHelper.truncateName(name);
+      $('names').insert({ bottom: element });
+
+      try {
+        // Record the last idle time so the idle state can be dynamically updated
+        element.lastIdle = new Date(Date.parse(user['last_activity']));
+      } catch (exception) {
+        element.lastIdle = null;
+      }
+    }.bind(this));
+  },
+
+  join: function(join) {
+    $('room-name').innerHTML = TextHelper.truncateRoomName(join['room']);
+    $('room-name').title = PageHelper.currentRoom();
+  },
+
+  join_notice: function(join) {
+    this.add_user(join['user']);
+    this.add_message(join['user'] + ' has joined the room', 'server', join['time']);
+  },
+
+  add_user: function(name) {
+    if (!this.ignore_notices) {
+      $('names').insert({ bottom: '<li>' + TextHelper.truncateName(name) + '</li>' });
+    }
+  },
+
+  remove_user: function(name) {
+    if (!this.ignore_notices) {
+      $$('#names li').each(function(element) { if (element.innerHTML == name) element.remove(); });
+    }
+  },
+
+  part_notice: function(part) {
+    this.remove_user(part['user']);
+    this.add_message(part['user'] + ' has left the room', 'server', part['time']);
+  },
+
+  quit_notice: function(quit) {
+    this.remove_user(quit['user']);
+    this.add_message(quit['user'] + ' has quit', 'server', quit['time']);
+  },
+
+  notice: function(notice) {
+    this.add_message(notice, 'server');
+  },
+
+  error: function(error) {
+    this.add_message(error['message'], 'error');
+  }
+};

data/lib/jschat/http/public/javascripts/app/ui/commands.js

@@ -0,0 +1,55 @@
+var UserCommands = {
+  '/emotes': function() {
+    var text = '';
+    Display.add_message('<strong>Available Emotes</strong> &mdash; Prefix with a : to use', 'help');
+    Display.add_message(EmoteHelper.legalEmotes.join(', '), 'help');
+  },
+
+  '/help': function() {
+    var help = [];
+    Display.add_message('<strong>JsChat Help</strong> &mdash; Type the following commands into the message field:', 'help')
+    help.push(['/clear', 'Clears messages']);
+    help.push(['/lastlog', 'Shows recent activity']);
+    help.push(['/names', 'Refreshes the names list']);
+    help.push(['/name new_name', 'Changes your name']);
+    help.push(['/emotes', 'Shows available emotes']);
+    $A(help).each(function(options) {
+      var help_text = '<span class="command">#{command}</span><span class="command_help">#{text}</span>'.interpolate({ command: options[0], text: options[1]});
+      Display.add_message(help_text, 'help');
+    });
+  },
+
+  '/clear': function() {
+    $('messages').innerHTML = '';
+  },
+
+  '/lastlog': function() {
+    $('messages').innerHTML = '';
+    JsChat.Request.get('/lastlog', function(transport) {
+      this.displayMessages(transport.responseText);
+      $('names').innerHTML = '';
+      this.updateNames();
+    }.bind(this));
+  },
+
+  '/(name|nick)\\s+(.*)': function(name) {
+    name = name[2];
+    new Ajax.Request('/change-name', {
+      method: 'post',
+      parameters: { name: name },
+      onSuccess: function(response) {
+        this.displayMessages(response.responseText, function() {
+          $('name').innerHTML = name;
+          Cookie.create('jschat-name', name, 28, '/');
+        });
+      }.bind(this),
+      onFailure: function() {
+        Display.add_message("Server error: couldn't access: #{url}".interpolate({ url: url }), 'server');
+      }
+    });
+  },
+
+  '/names': function() {
+    JsChat.Request.get('/names', function(t) { this.displayMessages(t.responseText); }.bind(this));
+  }
+};

data/lib/jschat/http/public/javascripts/app/ui/tab_completion.js

@@ -0,0 +1,122 @@
+var TabCompletion = Class.create({
+  initialize: function(element) {
+    this.element = $(element);
+    this.matches = [];
+    this.match_offset = 0;
+    this.cycling = false;
+    this.has_focus = true;
+
+    document.observe('keydown', this.keyboardEvents.bindAsEventListener(this));
+    this.element.observe('focus', this.onFocus.bindAsEventListener(this));
+    this.element.observe('blur', this.onBlur.bindAsEventListener(this));
+    this.element.observe('click', this.onFocus.bindAsEventListener(this));
+  },
+
+  onBlur: function() {
+    this.has_focus = false;
+    this.reset();
+  },
+
+  onFocus: function() {
+    this.has_focus = true;
+    this.reset();
+  },
+
+  tabSearch: function(input) {
+    var names = $$('#names li').collect(function(element) { return element.innerHTML });
+    return names.findAll(function(name) { return name.toLowerCase().match(input.toLowerCase()) });
+  },
+
+  textToLeft: function() {
+    var text = this.element.value;
+    var caret_position = FormHelpers.getCaretPosition(this.element);
+    if (caret_position < text.length) {
+      text = text.slice(0, caret_position);
+    }
+
+    text = text.split(' ').last();
+    return text;
+  },
+
+  elementFocused: function(e) {
+    if (typeof document.activeElement == 'undefined') {
+      return this.has_focus;
+    } else {
+      return document.activeElement == this.element;
+    }
+  },
+
+  keyboardEvents: function(e) {
+    if (this.elementFocused()) {
+      switch (e.keyCode) {
+        case Event.KEY_TAB:
+          var caret_position = FormHelpers.getCaretPosition(this.element);
+
+          if (this.element.value.length > 0) {
+            var search_text = '';
+            var search_result = '';
+            var replace_inline = false;
+            var editedText = this.element.value.match(/[^a-z0-9]/i);
+
+            if (this.cycling) {
+              if (this.element.value == '#{last_result}: '.interpolate({ last_result: this.last_result })) {
+                editedText = false;
+              } else {
+                replace_inline = true;
+              }
+              search_text = this.last_result;
+            } else if (editedText && this.matches.length == 0) {
+              search_text = this.textToLeft();
+              replace_inline = true;
+            } else {
+              search_text = this.element.value;
+            }
+
+            if (this.matches.length == 0) {
+              this.matches = this.tabSearch(search_text);
+              search_result = this.matches.first();
+              this.cycling = true;
+            } else {
+              this.match_offset++;
+              if (this.match_offset >= this.matches.length) {
+                this.match_offset = 0;
+              }
+              search_result = this.matches[this.match_offset];
+            }
+            
+            if (search_result && search_result.length > 0) {
+              if (this.cycling && this.last_result) {
+                search_text = this.last_result;
+              }
+              this.last_result = search_result;
+
+              if (replace_inline) {
+                var slice_start = caret_position - search_text.length;
+                if (slice_start > 0) {
+                  this.element.value = this.element.value.substr(0, slice_start) + search_result + this.element.value.substr(caret_position, this.element.value.length);
+                  FormHelpers.setCaretPosition(this.element, slice_start + search_result.length);
+                }
+              } else if (!editedText) {
+                this.element.value = '#{search_result}: '.interpolate({ search_result: search_result });
+              }
+            }
+          }
+
+          Event.stop(e);
+          return false;
+        break;
+
+        default:
+          this.reset();
+        break;
+      }
+    }
+  },
+
+  reset: function() {
+    this.matches = [];
+    this.match_offset = 0;
+    this.last_result = null;
+    this.cycling = false;
+  }
+});

data/lib/jschat/http/public/javascripts/init.js

@@ -0,0 +1,19 @@
+var JsChat = {};
+
+document.observe('dom:loaded', function() {
+ if ($('post_message')) {
+    var chatController = new JsChat.ChatController();
+  }
+
+  if ($('sign-on')) {
+    if (Cookie.find('jschat-name')) {
+      $('name').value = Cookie.find('jschat-name');
+    }
+
+    if ($('room') && window.location.hash) {
+      $('room').value = window.location.hash;
+    }
+ 
+    var signOnController = new JsChat.SignOnController();
+  }
+});

data/lib/jschat/http/public/stylesheets/iphone.css

@@ -0,0 +1,3 @@
+body { font-size: 200% }
+input { font-size: 150% }
+#info { display: none }

data/lib/jschat/http/public/stylesheets/screen.css

@@ -0,0 +1,68 @@
+body { margin: 0 auto; padding: 0; font-family: 'Lucida Grande', arial, helvetica, sans-serif; color: #111; text-align: center; }
+html, body { background: #f0f0f0; }
+
+h1, h2, h3, h4 { margin: 0; padding: 0; }
+
+h1 { text-align: left; margin-left: 20px }
+
+.header { position: absolute; top: 0; height: 59px; left: 0; width: 100%; z-index: 10; background-color: #ffc; clear: both; }
+.header img { border: none; margin: 5px 0 0 0 }
+.header h1 { width: 200px; float: left }
+.header .navigation { float: right; list-style-type: none; margin: 18px 0 0 0; padding: 0 }
+.header .navigation li { float: left; margin: 0 20px 0 0; padding: 0 }
+.header .navigation li a { text-decoration: none; color: #fff; background-color: #777; padding: 1px 3px }
+.header .navigation li a:hover { background-color: #fff; color: #555 }
+.header .navigation li#quit-nav a { background-color: #990000  }
+.header .navigation li#quit-nav a:hover { color: #990000; background-color: #fff }
+.header-shadow { width: 100%; height: 6px; position: absolute; top: 59px; left: 0; background-image: url('/images/shadow.png'); background-repeat: repeat-x }
+
+.page { margin-top: 60px }
+
+#messages { width: 500px; height: 300px; margin: 0 20px 10px 20px; padding: 0; overflow: auto; background-color: #fff; float: left; text-align: left; display: inline; }
+#messages { list-style-type: none; overflow: auto }
+#messages li { padding: 0.25em 0; border-bottom: 1px solid #f0f0f0; float: left; width: 100%; line-height: 1.5em }
+#messages span.user { margin: 0; text-align: left; font-weight: bold; display: inline; float: left }
+#messages .active { color: #000099 }
+#messages .mentioned { color: #cccc00 }
+#messages span.time { text-align: left; margin: 0 10px; display: block; float: left; color: #ccc !important; font-style: normal !important }
+#messages span.message { display: inline; padding: 0 0 0 10px }
+#messages .help { color: #990000 }
+#messages .help span.command { width: 12em; display: block; float: left; font-weight: bold }
+#messages li.server { color: #999; font-style: italic }
+#messages li.error { color: #990000; font-style: italic; font-weight: bold }
+#messages li.server span.time,
+#messages li.error span.time { color: #999 }
+img.inline-image { border: 1px solid #ccc; padding: 2px }
+img.inline-image {
+  max-width: 200px;
+  width: expression(this.width > 200 ? 200: true);
+}
+
+#input { clear: both; text-align: left; margin: 0 0 0 20px; padding: 0; }
+form { margin: 0; padding: 0; }
+#message { width: 100% }
+#message:focus { background-color: #ffc }
+
+#info { text-align: left; margin: 0 0 0 20px }
+#room-name { padding: 10px 0; font-size: 125% }
+
+ul#names { margin: 0; padding: 0; list-style-type: none; height: 200px; overflow: auto; } 
+ul#names li { margin: 0; padding: 0.25em 0; } 
+ul#names li.idle { color: #777 } 
+
+.footer { border-top: 1px solid #ccc; padding: 8px 0 0 0; font-size: 80%; font-style: italic; color: #444; margin: 40px 0 0 0 }
+
+/* Front page */
+#sign-on { padding: 10px 0; margin: 10px auto; background-color: #fff; border: 1px solid #ccc; clear: both; text-align: center }
+#sign-on input[type="text"] { width: 12em }
+#sign-on input:focus { background-color: #ffc }
+.content { text-align: left; margin: 0 20px; padding: 5px 0 }
+.content em { padding: 1px 2px; font-style: normal; background-color: #ffc; color: #880000 }
+.content h2 { margin-top: 20px }
+
+#feedback .error { padding: 10px; border: 2px solid #990000; background-color: #fff; margin: 10px 0 }
+#loading { background-color: #990000; color: #fff; font-weight: bold; padding: 3px; margin: 0 auto; position: absolute; z-index: 1020; top: 0; right: 10px; border-top: none }
+.angry { color: #990000 }
+.big_message { background-color: #fff; border: 1px solid #ccc; padding: 10px; }
+.big_message h2, .big_message p { margin: 0; padding 0 }
+.big_message h2 { margin-bottom: 10px }

data/lib/jschat/http/script/sprockets.rb

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+require 'rubygems'
+require 'sprockets'
+
+sprockets_root = File.join(File.dirname(__FILE__), '..')
+sprockets_config = YAML.load(IO.read(File.join(sprockets_root, 'config', 'sprockets.yml')))
+
+secretary = Sprockets::Secretary.new(
+  :root         => sprockets_root, 
+  :load_path    => sprockets_config[:load_path],
+  :source_files => sprockets_config[:source_files]
+)
+
+secretary.concatenation.save_to(File.join(sprockets_root, sprockets_config[:output_file]))

data/lib/jschat/http/views/index.erb

@@ -0,0 +1,23 @@
+<div class="content">
+  <h2>About</h2>
+  <p>JsChat is an <em>open source</em> chat system that uses a simple protocol based on <acronym title="JavaScript Object Notation">JSON</acronym>.</p>
+  <p>To download the code and an irssi-like <em>console client</em>, visit <a href="http://github.com/alexyoung/jschat/">GitHub</a>.</p>
+  <p>Read more on the <a href="http://blog.jschat.org">JsChat Blog</a>.</p>
+  <h2>Try JsChat Now</h2>
+  <div id="feedback" class="error" style="display: none"></div>
+  <form method="post" action="/identify" id="sign-on">
+    Enter name: <input name="name" id="name" value="" type="text" />
+    and room: <input name="room" id="room" value="#jschat" type="text" />
+    <input type="submit" value="Go" id="sign-on-submit" />
+  </form>
+  <h2>Features</h2>
+  <ul>
+    <li>Simple protocol that makes it easy to implement clients and bots</li>
+    <li>Console client designed to look and feel like IRC clients</li>
+    <li>Web client auto links and displays images/YouTube videos inline</li>
+    <li>Protocol designed to be close to executable code, so creating clients and bots is easy</li>
+  </ul>
+</div>
+<div class="footer">
+  An open source project by <a href="http://helicoid.net">Helicoid</a>
+</div>

data/lib/jschat/http/views/iphone.erb

@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>JsChat iPhone</title>
+  <link rel="icon" href="/favicon.ico" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
+  <script src="/javascripts/all.js?<%= Time.now.to_i %>" type="text/javascript"></script>
+  <link href="/stylesheets/screen.css?<%= Time.now.to_i %>" media="screen" rel="stylesheet" type="text/css" />
+  <link href="/stylesheets/iphone.css?<%= Time.now.to_i %>" media="screen" rel="stylesheet" type="text/css" />
+</head>
+<body class="iphone">
+  <div id="loading" style="display: none">Loading...</div>
+  <div class="header">
+    <h1><a href="/"><img src="/images/jschat.gif" alt="JsChat" /></a></h1>
+    <ul class="navigation">
+      <li><a href="/">Home</a></li>
+      <li><a href="http://github.com/alexyoung/jschat">Download</a>
+      <li id="help-nav" style="display: none"><a href="#" id="help-link">Help</a>
+      <li id="quit-nav" style="display: none"><a href="/quit">Quit</a>
+    </ul>
+  </div>
+  <div class="header-shadow"></div>
+  <div class="page">
+    <%= yield %>
+  </div>
+</body>
+</html>

data/lib/jschat/http/views/layout.erb

@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>JsChat</title>
+  <link rel="icon" href="/favicon.ico" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
+  <script src="/javascripts/all.js?<%= Time.now.to_i %>" type="text/javascript"></script>
+  <link href="/stylesheets/screen.css?<%= Time.now.to_i %>" media="screen" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div id="loading" style="display: none">Loading...</div>
+  <div class="header">
+    <h1><a href="/"><img src="/images/jschat.gif" alt="JsChat" /></a></h1>
+    <ul class="navigation">
+      <li><a href="/">Home</a></li>
+      <li><a href="http://github.com/alexyoung/jschat">Download</a>
+      <li id="help-nav" style="display: none"><a href="#" id="help-link">Help</a>
+      <li id="quit-nav" style="display: none"><a href="/quit">Quit</a>
+    </ul>
+  </div>
+  <div class="header-shadow"></div>
+  <div class="page">
+    <%= yield %>
+  </div>
+</body>
+</html>
+

data/lib/jschat/http/views/message_form.erb

@@ -0,0 +1,15 @@
+<ul id="messages">
+</ul>
+<div id="info">
+  <h2 id="room-name">Loading...</h2>
+  <div id="name" style="display: none"><%= nickname %></div>
+  <ul id="names"> 
+  </ul>
+</div>
+<div id="input">
+  <form method="post" action="/message" id="post_message">
+    <input name="message" id="message" value="" type="text" autocomplete="off" />
+    <input name="submit" type="submit" id="send_button" value="Send" />
+  </form>
+</div>
+