vines-services 0.1.0 → 0.1.1

data/web/javascripts/systems.js

@@ -0,0 +1,342 @@
+var SystemsPage;
+var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+SystemsPage = (function() {
+  function SystemsPage(session) {
+    this.session = session;
+    this.session.onRoster(__bind(function() {
+      return this.roster();
+    }, this));
+    this.session.onMessage(__bind(function(m) {
+      return this.message(m);
+    }, this));
+    this.session.onPresence(__bind(function(p) {
+      return this.presence(p);
+    }, this));
+    this.commands = new Commands;
+    this.chats = {};
+    this.currentContact = null;
+    this.layout = null;
+  }
+  SystemsPage.prototype.datef = function(millis) {
+    var d, hour, meridian, minutes;
+    d = new Date(millis);
+    meridian = d.getHours() >= 12 ? ' pm' : ' am';
+    hour = d.getHours() > 12 ? d.getHours() - 12 : d.getHours();
+    if (hour === 0) {
+      hour = 12;
+    }
+    minutes = d.getMinutes() + '';
+    if (minutes.length === 1) {
+      minutes = '0' + minutes;
+    }
+    return hour + ':' + minutes + meridian;
+  };
+  SystemsPage.prototype.groupContacts = function() {
+    var contact, group, groups, jid, _i, _len, _ref, _ref2;
+    groups = {};
+    _ref = this.session.roster;
+    for (jid in _ref) {
+      contact = _ref[jid];
+      _ref2 = contact.groups;
+      for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+        group = _ref2[_i];
+        (groups[group] || (groups[group] = [])).push(contact);
+      }
+    }
+    return groups;
+  };
+  SystemsPage.prototype.roster = function() {
+    var contact, contacts, group, groups, items, name, optgroup, option, sorted, _i, _len, _results;
+    groups = this.groupContacts();
+    sorted = (function() {
+      var _results;
+      _results = [];
+      for (group in groups) {
+        contacts = groups[group];
+        _results.push(group);
+      }
+      return _results;
+    })();
+    sorted = sorted.sort(function(a, b) {
+      a = a.toLowerCase();
+      b = b.toLowerCase();
+      if (a > b) {
+        return 1;
+      } else if (a < b) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    items = $('#roster-items').empty();
+    _results = [];
+    for (_i = 0, _len = sorted.length; _i < _len; _i++) {
+      group = sorted[_i];
+      contacts = groups[group];
+      optgroup = $('<li class="group"></li>').appendTo(items);
+      optgroup.text(group);
+      optgroup.attr('data-group', group);
+      _results.push((function() {
+        var _j, _len2, _results2;
+        _results2 = [];
+        for (_j = 0, _len2 = contacts.length; _j < _len2; _j++) {
+          contact = contacts[_j];
+          option = $("<li data-jid=\"" + contact.jid + "\">\n  <span class=\"text\"></span>\n  <span class=\"unread\" style=\"display:none;\"></span>\n</li>").appendTo(items);
+          if (contact.offline()) {
+            option.addClass('offline');
+          }
+          option.click(__bind(function(event) {
+            return this.selectContact(event);
+          }, this));
+          name = contact.name || contact.jid.split('@')[0];
+          option.attr('data-name', name);
+          option.attr('data-group', group);
+          _results2.push($('.text', option).text(name));
+        }
+        return _results2;
+      }).call(this));
+    }
+    return _results;
+  };
+  SystemsPage.prototype.message = function(message) {
+    var bottom, chat, from, me;
+    this.queueMessage(message);
+    me = message.from === this.session.jid();
+    from = message.from.split('/')[0];
+    if (me || from === this.currentContact) {
+      bottom = this.atBottom();
+      this.appendMessage(message);
+      if (bottom) {
+        return this.scroll({
+          animate: true
+        });
+      }
+    } else {
+      chat = this.chat(message.from);
+      chat.unread++;
+      return this.eachContact(from, function(node) {
+        return $('.unread', node).text(chat.unread).show();
+      });
+    }
+  };
+  SystemsPage.prototype.eachContact = function(jid, callback) {
+    var node, _i, _len, _ref, _results;
+    _ref = $("#roster-items li[data-jid='" + jid + "']").get();
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      node = _ref[_i];
+      _results.push(callback($(node)));
+    }
+    return _results;
+  };
+  SystemsPage.prototype.appendMessage = function(message) {
+    var contact, from, me, name, node, prefix, proxied;
+    me = message.from === this.session.jid();
+    proxied = $('jid', message.node).text();
+    from = (proxied || message.from).split('/')[0];
+    contact = this.session.roster[from];
+    name = contact ? contact.name || from : from;
+    node = $("<li data-jid=\"" + from + "\"><pre></pre></li>").appendTo('#messages');
+    prefix = me ? '$ ' : '';
+    $('pre', node).text(prefix + message.text);
+    if (!me) {
+      node.append("<footer>\n  <span class=\"author\"></span> @\n  <span class=\"time\">" + (this.datef(message.received)) + "</span>\n</footer>");
+      return $('.author', node).text(name);
+    }
+  };
+  SystemsPage.prototype.queueMessage = function(message) {
+    var chat, full, me;
+    me = message.from === this.session.jid();
+    full = message[me ? 'to' : 'from'];
+    chat = this.chat(full);
+    chat.jid = full;
+    return chat.messages.push(message);
+  };
+  SystemsPage.prototype.chat = function(jid) {
+    var bare, chat;
+    bare = jid.split('/')[0];
+    chat = this.chats[bare];
+    if (!chat) {
+      chat = {
+        jid: jid,
+        messages: [],
+        unread: 0
+      };
+      this.chats[bare] = chat;
+    }
+    return chat;
+  };
+  SystemsPage.prototype.presence = function(presence) {
+    var contact, from;
+    from = presence.from.split('/')[0];
+    if (from === this.session.bareJid()) {
+      return;
+    }
+    if (!presence.type || presence.offline) {
+      contact = this.session.roster[from];
+      this.eachContact(from, function(node) {
+        if (contact.offline()) {
+          return node.addClass('offline');
+        } else {
+          return node.removeClass('offline');
+        }
+      });
+    }
+    if (presence.offline) {
+      return this.chat(from).jid = from;
+    }
+  };
+  SystemsPage.prototype.selectContact = function(event) {
+    var contact, jid, selected;
+    $('#blank-slate').fadeOut(200, function() {
+      return $(this).remove();
+    });
+    $('#roster').hide();
+    selected = $(event.currentTarget);
+    jid = selected.attr('data-jid');
+    contact = this.session.roster[jid];
+    if (this.currentContact === jid) {
+      return;
+    }
+    this.currentContact = jid;
+    $('#message-label').text($('.text', selected).text());
+    $('#messages').empty();
+    $('#message').focus();
+    this.layout.resize();
+    return this.restoreChat(jid);
+  };
+  SystemsPage.prototype.restoreChat = function(jid) {
+    var chat, messages, msg, _i, _len;
+    chat = this.chats[jid];
+    messages = [];
+    if (chat) {
+      messages = chat.messages;
+      chat.unread = 0;
+      this.eachContact(jid, function(node) {
+        return $('.unread', node).text('').hide();
+      });
+    }
+    for (_i = 0, _len = messages.length; _i < _len; _i++) {
+      msg = messages[_i];
+      this.appendMessage(msg);
+    }
+    return this.scroll();
+  };
+  SystemsPage.prototype.scroll = function(opts) {
+    var msgs;
+    opts || (opts = {});
+    msgs = $('#messages');
+    if (opts.animate) {
+      return msgs.animate({
+        scrollTop: msgs.prop('scrollHeight')
+      }, 400);
+    } else {
+      return msgs.scrollTop(msgs.prop('scrollHeight'));
+    }
+  };
+  SystemsPage.prototype.atBottom = function() {
+    var bottom, msgs;
+    msgs = $('#messages');
+    bottom = msgs.prop('scrollHeight') - msgs.outerHeight();
+    return msgs.scrollTop() >= bottom;
+  };
+  SystemsPage.prototype.send = function() {
+    var chat, input, jid, text;
+    if (!this.currentContact) {
+      return false;
+    }
+    input = $('#message');
+    text = input.val().trim();
+    if (text) {
+      chat = this.chats[this.currentContact];
+      jid = chat ? chat.jid : this.currentContact;
+      this.message({
+        from: this.session.jid(),
+        text: text,
+        to: jid,
+        received: new Date()
+      });
+      this.session.sendMessage(jid, text);
+      this.commands.push(text);
+    }
+    input.val('');
+    return false;
+  };
+  SystemsPage.prototype.drawBlankSlate = function() {
+    $("<form id=\"blank-slate\" class=\"float\">\n  <p>\n    Services, and individual systems, can be controlled by sending\n    them shell commands through this terminal. Select a system to chat with\n    to get started.\n  </p>\n  <input type=\"submit\" value=\"Select System\"/>\n</form>").appendTo('#alpha');
+    return $('#blank-slate').submit(__bind(function() {
+      $('#roster').show();
+      this.layout.resize();
+      return false;
+    }, this));
+  };
+  SystemsPage.prototype.draw = function() {
+    var contact, name;
+    if (!this.session.connected()) {
+      window.location.hash = '';
+      return;
+    }
+    $('body').attr('id', 'systems-page');
+    $('#container').hide().empty();
+    $("<div id=\"alpha\" class=\"primary column x-fill y-fill\">\n  <ul id=\"messages\" class=\"scroll y-fill\"></ul>\n  <form id=\"message-form\">\n    <label id=\"message-label\"></label>\n    <input id=\"message\" name=\"message\" type=\"text\" maxlength=\"1024\" placeholder=\"Type a command and press enter to send\"/>\n  </form>\n  <div id=\"roster\" class=\"float\" style=\"display:none;\">\n    <ul id=\"roster-items\"></ul>\n    <div id=\"roster-form\"></div>\n  </div>\n</div>").appendTo('#container');
+    $('#message-form').submit(__bind(function() {
+      return this.send();
+    }, this));
+    $('#messages').click(function() {
+      return $('#roster').hide();
+    });
+    $('#message').focus(function() {
+      return $('#roster').hide();
+    });
+    this.roster();
+    $('#message-label').click(__bind(function() {
+      return $('#roster').toggle();
+    }, this));
+    $('#message').keyup(__bind(function(e) {
+      switch (e.keyCode) {
+        case 38:
+          return $('#message').val(this.commands.prev());
+        case 40:
+          return $('#message').val(this.commands.next());
+      }
+    }, this));
+    if (this.currentContact) {
+      if (this.currentContact) {
+        this.restoreChat(this.currentContact);
+      }
+      contact = this.session.roster[this.currentContact];
+      name = contact.name || contact.jid.split('@')[0];
+      $('#message-label').text(name);
+      $('#message').focus();
+    } else {
+      this.drawBlankSlate();
+    }
+    $('#container').show();
+    this.layout = this.resize();
+    this.scroll();
+    new Filter({
+      list: '#roster-items',
+      form: '#roster-form',
+      attrs: ['data-jid', 'data-name']
+    });
+    return $('form', '#roster-form').show();
+  };
+  SystemsPage.prototype.resize = function() {
+    var container, form, items, label, msg, rform, roster;
+    container = $('#container');
+    roster = $('#roster');
+    items = $('#roster-items');
+    rform = $('#roster-form');
+    msg = $('#message');
+    form = $('#message-form');
+    label = $('#message-label');
+    return new Layout(function() {
+      var height;
+      msg.width(form.width() - label.width() - 32);
+      height = container.height() - form.height() - 10;
+      roster.css('max-height', height);
+      return items.css('max-height', height - rform.outerHeight() - 10);
+    });
+  };
+  return SystemsPage;
+})();