vines 0.1.1 → 0.2.0

data/web/chat/javascripts/init.js

@@ -0,0 +1,21 @@
+$(function() {
+  var buttons, icon, label, nav, pages, session;
+  session = new Session();
+  nav = new NavBar(session);
+  nav.draw();
+  buttons = {
+    Messages: ICONS.chat,
+    Logout: ICONS.power
+  };
+  for (label in buttons) {
+    icon = buttons[label];
+    nav.addButton(label, icon);
+  }
+  pages = {
+    '/messages': new ChatPage(session),
+    '/logout': new LogoutPage(session),
+    'default': new LoginPage(session, '/messages/')
+  };
+  new Router(pages).draw();
+  return nav.select($('#nav-link-messages').parent());
+});

data/web/chat/javascripts/logout.js

@@ -0,0 +1,11 @@
+var LogoutPage;
+LogoutPage = (function() {
+  function LogoutPage(session) {
+    this.session = session;
+  }
+  LogoutPage.prototype.draw = function() {
+    window.location.hash = '';
+    return window.location.reload();
+  };
+  return LogoutPage;
+})();

data/web/chat/stylesheets/chat.css

@@ -0,0 +1,290 @@
+#chat-page #container {
+  height: 100%;
+}
+#chat-page #alpha,
+#chat-page #beta,
+#chat-page #charlie {
+  height: 100%;
+  position: absolute;
+}
+#chat-page #alpha {
+  background: #f8f8f8;
+  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  width: 260px;
+}
+#chat-page #alpha h2,
+#chat-page #beta h2,
+#chat-page #charlie h2 {
+  border-bottom: 1px solid #ddd;
+  font-size: 10pt;
+  padding-left: 10px;
+  position: relative;
+  text-shadow: 0 -1px 1px #fff;
+}
+#chat-page #beta {
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  width: 460px;
+  left: 260px;
+  z-index: 1;
+}
+#chat-page #charlie {
+  background: #f8f8f8;
+  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  width: 260px;
+  left: 720px;
+}
+#chat-page #chat-title {
+  background: #f8f8f8;
+}
+#chat-page #messages {
+  background: #fff;
+  height: 100%;
+  list-style: none;
+  overflow-y: auto;
+  text-shadow: 0 1px 1px #ddd;
+  width: 100%;
+}
+#chat-page #messages::-webkit-scrollbar,
+#chat-page #roster::-webkit-scrollbar,
+#chat-page #notifications::-webkit-scrollbar {
+  width: 6px;
+}
+#chat-page #messages::-webkit-scrollbar-thumb,
+#chat-page #roster::-webkit-scrollbar-thumb,
+#chat-page #notifications::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+#chat-page #messages::-webkit-scrollbar-thumb:vertical,
+#chat-page #roster::-webkit-scrollbar-thumb:vertical,
+#chat-page #notifications::-webkit-scrollbar-thumb:vertical {
+  background: rgba(0, 0, 0, .2);
+}
+#chat-page #messages li {
+  border-bottom: 1px solid #f0f0f0;
+  min-height: 40px;
+  padding: 10px;
+  position: relative;
+}
+#chat-page #messages li:hover > span .time {
+  opacity: 0.3;
+}
+#chat-page #messages li img {
+  border: 3px solid #fff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  height: 40px;
+  width: 40px;
+}
+#chat-page #messages li p {
+  line-height: 1.5;
+  width: 90%;
+}
+#chat-page #messages li footer {
+  font-size: 9pt;
+  padding-right: 50px;
+  text-align: right;
+}
+#chat-page #messages li footer span {
+  color: #d8d8d8;
+  margin-right: 0.5em;
+  text-shadow: none;
+}
+#chat-page #messages li footer .author::before {
+  content: '\2014 ';
+}
+#chat-page #message-form {
+  background: #f8f8f8;
+  border-top: 1px solid #dfdfdf;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+#chat-page input[type="text"]:focus,
+#chat-page input[type="email"]:focus {
+  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6);
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6);
+}
+#chat-page #message {
+  display: block;
+  position: relative;
+  left: 10px;
+  top: 10px;
+  width: 428px;
+}
+#chat-page #roster,
+#chat-page #notifications {
+  height: 100%;
+  list-style: none;
+  overflow-y: auto;
+  text-shadow: 0 1px 1px #fff;
+  width: 260px;
+}
+#chat-page #roster li,
+#chat-page #notifications li {
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+  font-weight: bold;
+  min-height: 42px;
+  padding: 0 10px;
+  position: relative;
+  -moz-transition: background 0.3s;
+  -o-transition: background 0.3s;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+#chat-page #notifications li {
+  font-weight: normal;
+  padding: 10px 0 0 0;
+}
+#chat-page #roster li:hover,
+#chat-page #notifications li:hover {
+  background: rgba(255, 255, 255, 1.0);
+}
+#chat-page #roster li.offline > * {
+  opacity: 0.4;
+}
+#chat-page #roster li.selected > * {
+  opacity: 1.0;
+}
+#chat-page #roster li.selected {
+  background: #4693FF;
+  background: -moz-linear-gradient(#4693FF, #015de6);
+  background: -o-linear-gradient(#4693FF, #015de6);
+  background: -webkit-gradient(linear, left top, left bottom, from(#4693FF), to(#015de6));
+  border-bottom: 1px solid #fff;
+  color: #fff;
+  text-shadow: 0 -1px 1px #1b3a65;
+}
+#chat-page #roster li.selected .status-msg {
+  color: rgba(255, 255, 255, 0.85);
+}
+#chat-page #roster .status-msg {
+  display: block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 11px;
+}
+#chat-page #roster .unread {
+  background: #4693FF;
+  background: -moz-linear-gradient(#4693FF, #015de6);
+  background: -o-linear-gradient(#4693FF, #015de6);
+  background: -webkit-gradient(linear, left top, left bottom, from(#4693FF), to(#015de6));
+  border-radius: 30px;
+  color: #fff;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 15px;
+  padding: 0px 6px;
+  position: absolute;
+  right: 50px;
+  top: 14px;
+  text-shadow: none;
+}
+#chat-page #roster .vcard-img {
+  background: #fff;
+  border: 1px solid #fff;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+  height: 32px;
+  width: 32px;
+  position: absolute;
+  top: 4px;
+  right: 10px;
+}
+#chat-page #roster-controls,
+#chat-page #notification-controls {
+  background: rgba(255, 255, 255, 0.05);
+  border-top: 1px solid #ddd;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  width: 260px;
+}
+#chat-page #notification-controls {
+  text-align: right;
+}
+#chat-page #roster-controls > div,
+#chat-page #notification-controls > div {
+  cursor: pointer;
+  display: inline-block;
+  height: 27px;
+  margin: 0 10px;
+  position: relative;
+  top: 10px;
+  width: 27px;
+}
+#chat-page #roster-controls > div > svg,
+#chat-page #notification-controls > div > svg {
+  height: 27px;
+  width: 27px;
+}
+#chat-page .contact-form {
+  background: inherit;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #fff;
+  -webkit-box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
+  padding-top: 10px;
+  position: absolute;
+  bottom: 50px;
+  left: 0;
+  width: 260px;
+}
+#chat-page .contact-form h2,
+#chat-page .notify-form h2 {
+  border: none !important;
+  line-height: 1;
+  margin-bottom: 10px;
+}
+#chat-page .contact-form p,
+#chat-page .notify-form p {
+  line-height: 1.5;
+  margin: 0 10px 10px 10px;
+  text-shadow: 0 1px 1px #fff;
+}
+#chat-page .notify-form p {
+  margin-top: -5px;
+}
+#chat-page .contact-form .buttons,
+#chat-page .notify-form .buttons {
+  padding-right: 10px;
+  text-align: right;
+}
+#chat-page .contact-form input[type="text"],
+#chat-page .contact-form input[type="email"] {
+  margin-bottom: 10px;
+  width: 228px;
+  position: relative;
+  left: 10px;
+}
+#chat-page #edit-contact-jid {
+  color: #444;
+  margin-top: -5px;
+}
+#chat-page #search-roster {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  position: absolute;
+  right: 10px;
+  top: 6px;
+}
+#chat-page #search-roster svg {
+  height: 16px;
+  width: 16px;
+}
+#chat-page #search-roster-form {
+  border-bottom: 1px solid #ddd;
+  padding: 5px 10px;
+}
+#chat-page #search-roster-text {
+  width: 100%;
+}

data/web/lib/coffeescripts/contact.coffee

@@ -0,0 +1,32 @@
+class Contact
+  constructor: (node) ->
+    node  = $(node)
+    @jid  = node.attr 'jid'
+    @name = node.attr 'name'
+    @ask  = node.attr 'ask'
+    @subscription = node.attr 'subscription'
+    @groups = $('group', node).map(-> $(this).text()).get()
+    @presence = []
+
+  online: ->
+    @presence.length > 0
+
+  offline: ->
+    @presence.length == 0
+
+  available: ->
+    this.online() && (p for p in @presence when !p.away).length > 0
+
+  away: -> !this.available()
+
+  status: ->
+    available = (p.status for p in @presence when p.status && !p.away)[0] || 'Available'
+    away = (p.status for p in @presence when p.status && p.away)[0] || 'Away'
+    if this.offline()   then 'Offline'
+    else if this.away() then away
+    else available
+
+  update: (presence) ->
+    @presence = (p for p in @presence when p.from != presence.from)
+    @presence.push presence unless presence.type
+    @presence = [] if presence.type == 'unsubscribed'

data/web/lib/coffeescripts/layout.coffee

@@ -0,0 +1,30 @@
+class Layout
+  constructor: (@fn) ->
+    this.resize()
+    this.listen()
+    setTimeout (=> this.resize()), 250
+
+  resize: ->
+    this.fill '.x-fill', 'outerWidth', 'width'
+    this.fill '.y-fill', 'outerHeight', 'height'
+    this.fn()
+
+  fill: (selector, get, set) ->
+    $(selector).each (ix, node) =>
+      node = $(node)
+      getter = node[get]
+      parent = getter.call node.parent()
+      fixed = this.fixed node, selector, (n) -> getter.call n
+      node[set].call node, parent - fixed
+
+  fixed: (node, selector, fn) ->
+    node.siblings().not(selector).not('.float').filter(':visible')
+      .map(-> fn $ this).get()
+      .reduce ((sum, num) -> sum + num), 0
+
+  listen: ->
+    id = null
+    $(window).resize =>
+      clearTimeout id
+      id = setTimeout (=> this.resize()), 10
+      this.resize()

data/web/lib/coffeescripts/login.coffee

@@ -0,0 +1,52 @@
+class LoginPage
+  constructor: (@session, @startPage) ->
+
+  start: ->
+    $('#error').hide()
+    callback = (success) =>
+      unless success
+        @session.disconnect()
+        $('#error').show()
+        $('#password').val('').focus()
+        return
+
+      localStorage['jid'] = $('#jid').val()
+      $('#current-user-name').text @session.bareJid()
+      $('#current-user-avatar').attr 'src', @session.avatar(@session.jid())
+      $('#current-user-avatar').attr 'alt', @session.bareJid()
+      $('#container').fadeOut 200, =>
+        $('#navbar').show()
+        window.location.hash = @startPage
+
+    @session.connect $('#jid').val(), $('#password').val(), callback
+    false
+
+  draw: ->
+    @session.disconnect()
+    jid = localStorage['jid'] || ''
+    $('#navbar').hide()
+    $('body').attr 'id', 'login-page'
+    $('#container').hide().empty()
+    $("""
+      <form id="login-form">
+        <h1>vines&gt;</h1>
+        <fieldset id="login-form-controls">
+          <input id="jid" name="jid" type="email" maxlength="1024" value="#{jid}" placeholder="Your user name"/>
+          <input id="password" name="password" type="password" maxlength="1024" placeholder="Your password"/>
+          <input id="start" type="submit" value="Sign in"/>
+        </fieldset>
+        <p id="error" style="display:none;">User name and password not found.</p>
+      </form>
+    """).appendTo '#container'
+    $('#login-form').submit => this.start()
+    $('#container').fadeIn 1000
+    $('#jid').keydown      -> $('#error').fadeOut()
+    $('#password').keydown -> $('#error').fadeOut()
+    this.resize()
+
+  resize: ->
+    win  = $ window
+    form = $ '#login-form'
+    sizer = -> form.css 'top', win.height() / 2 - form.height() / 2
+    win.resize sizer
+    sizer()

data/web/lib/coffeescripts/navbar.coffee

@@ -0,0 +1,84 @@
+class NavBar
+  constructor: (@session) ->
+    @session.onCard (card) =>
+      if card.jid == @session.bareJid()
+        $('#current-user-avatar').attr 'src', @session.avatar card.jid
+
+  draw: ->
+    $("""
+      <header id="navbar" class="x-fill">
+        <h1 id="logo">vines&gt;</h1>
+        <div id="current-user">
+          <img id="current-user-avatar" alt="#{@session.bareJid()}" src="#{@session.avatar(@session.jid())}"/>
+          <div id="current-user-info">
+            <h1 id="current-user-name">#{@session.bareJid()}</h1>
+            <form id="current-user-presence-form">
+              <span class="select">
+                <span class="text">Available</span>
+                <select id="current-user-presence">
+                  <optgroup label="Available">
+                    <option>Available</option>
+                    <option>Surfing the web</option>
+                    <option>Reading email</option>
+                  </optgroup>
+                  <optgroup label="Away">
+                    <option value="xa">Away</option>
+                    <option value="xa">Out to lunch</option>
+                    <option value="xa">On the phone</option>
+                    <option value="xa">In a meeting</option>
+                  </optgroup>
+                </select>
+              </span>
+            </form>
+          </div>
+        </div>
+        <nav id="app-nav" class="x-fill">
+          <ul id="nav-links"></ul>
+        </nav>
+      </header>
+    """).appendTo 'body'
+    $('<div id="container" class="x-fill y-fill"></div>').appendTo 'body'
+
+    $('#current-user-presence').change (event) =>
+      selected = $ 'option:selected', event.currentTarget
+      $('#current-user-presence-form .text').text selected.text()
+      @session.sendPresence selected.val() == 'xa', selected.text()
+
+  addButton: (label, icon) ->
+    id = "nav-link-#{label.toLowerCase()}"
+    node = $("""
+      <li>
+        <a id="#{id}" href="#/#{label.toLowerCase()}">
+          <span>#{label}</span>
+        </a>
+      </li>
+    """).appendTo '#nav-links'
+    this.button(id, icon)
+    node.click (event) => this.select(event.currentTarget)
+
+  select: (button) ->
+    button = $(button)
+    $('#nav-links li').removeClass('selected')
+    $('#nav-links li a').removeClass('selected')
+    button.addClass('selected')
+    $('a', button).addClass('selected')
+    dark = $('#nav-links svg path')
+    dark.attr 'opacity', '0.6'
+    dark.css  'opacity', '0.6'
+    light = $('svg path', button)
+    light.attr 'opacity', '1.0'
+    light.css  'opacity', '1.0'
+
+  button: (id, path) ->
+    paper = Raphael(id)
+    icon = paper.path(path).attr
+      fill: '#fff'
+      stroke: '#000'
+      'stroke-width': 0.3
+      opacity: 0.6
+
+    node = $('#' + id)
+    node.hover(
+      -> icon.animate(opacity: 1.0, 200),
+      -> icon.animate(opacity: 0.6, 200) unless node.hasClass('selected'))
+    node.get 0