vines-web 0.1.0

data/app/assets/javascripts/lib/logout.coffee

@@ -0,0 +1,5 @@
+class @LogoutPage
+  constructor: (@session) ->
+  draw: ->
+    window.location.hash = ''
+    window.location.reload()

data/app/assets/javascripts/lib/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

data/app/assets/javascripts/lib/notification.coffee

@@ -0,0 +1,14 @@
+class @Notification
+  constructor: (@text) ->
+    this.draw()
+
+  draw: ->
+    node = $('<div class="notification float" style="display:none;"></div>').appendTo 'body'
+    node.text @text
+    top = node.outerHeight() / 2
+    left = node.outerWidth() / 2
+    node.css {marginTop: "-#{top}px", marginLeft: "-#{left}px"}
+    node.fadeIn 200
+    fn = ->
+      node.fadeOut 200, -> node.remove()
+    setTimeout fn, 1500

data/app/assets/javascripts/lib/router.coffee

@@ -0,0 +1,40 @@
+class @Router
+  constructor: (@pages) ->
+    @routes = this.build()
+    $(window).bind 'hashchange', => this.draw()
+
+  build: ->
+    routes = []
+    for pattern, page of @pages
+      routes.push route = args: [], page: page, re: null
+      if pattern == 'default'
+        route.re = pattern
+        continue
+
+      fragments = (f for f in pattern.split '/' when f.length > 0)
+      map = (fragment) ->
+        if fragment[0] == ':'
+          route.args.push fragment.replace ':', ''
+          '(/[^/]+)?'
+        else '/' + fragment
+      route.re = new RegExp '#' + (map f for f in fragments).join ''
+    routes
+
+  draw: ->
+    [route, args] = this.match()
+    route ||= this.defaultRoute()
+    return unless route
+    [opts, ix] = [{}, 0]
+    opts[name] = args[ix++] for name in route.args
+    route.page.draw(opts)
+
+  match: ->
+    for route in @routes
+      if match = window.location.hash.match route.re
+        args = (arg.replace '/', '' for arg in match[1..-1])
+        return [route, args]
+    []
+
+  defaultRoute: ->
+    for route in @routes
+      return route if route.re == 'default'

data/app/assets/javascripts/lib/session.coffee

@@ -0,0 +1,229 @@
+class @Session
+  constructor: ->
+    @xmpp = new Strophe.Connection '/xmpp'
+    @roster = {}
+    @listeners =
+      card:     []
+      message:  []
+      presence: []
+      roster:   []
+
+  connect: (jid, password, callback) ->
+    @xmpp.connect jid, password, (status) =>
+      switch status
+        when Strophe.Status.AUTHFAIL, Strophe.Status.CONNFAIL
+          callback false
+        when Strophe.Status.CONNECTED
+          @xmpp.addHandler ((el) => this.handleIq(el)), null, 'iq'
+          @xmpp.addHandler ((el) => this.handleMessage(el)), null, 'message'
+          @xmpp.addHandler ((el) => this.handlePresence(el)), null, 'presence'
+          callback true
+          this.findRoster =>
+            this.notify('roster')
+            @xmpp.send this.xml '<presence/>'
+            this.findCards()
+
+  disconnect: -> @xmpp.disconnect()
+
+  onCard: (callback) ->
+    @listeners['card'].push callback
+
+  onRoster: (callback) ->
+    @listeners['roster'].push callback
+
+  onMessage: (callback) ->
+    @listeners['message'].push callback
+
+  onPresence: (callback) ->
+    @listeners['presence'].push callback
+
+  connected: ->
+    @xmpp.jid && @xmpp.jid.length > 0
+
+  jid: -> @xmpp.jid
+
+  bareJid: -> @xmpp.jid.split('/')[0]
+
+  uniqueId: -> @xmpp.getUniqueId()
+
+  avatar: (jid) ->
+    card = this.loadCard(jid)
+    if card && card.photo
+      "data:#{card.photo.type};base64,#{card.photo.binval}"
+    else
+      '/lib/images/default-user.png'
+
+  loadCard: (jid) ->
+    jid = jid.split('/')[0]
+    found = localStorage['vcard:' + jid]
+    JSON.parse found if found
+
+  storeCard: (card) ->
+    localStorage['vcard:' + card.jid] = JSON.stringify card
+
+  findCards: ->
+    jids = (jid for jid, contacts of @roster when !this.loadCard jid)
+    jids.push this.bareJid() if !this.loadCard(this.bareJid())
+
+    success = (card) =>
+      this.findCard jids.shift(), success
+      if card
+        this.storeCard card
+        this.notify 'card', card
+
+    this.findCard jids.shift(), success
+
+  findCard: (jid, callback) ->
+    return unless jid
+    node = this.xml """
+      <iq id="#{this.uniqueId()}" to="#{jid}" type="get">
+        <vCard xmlns="vcard-temp"/>
+      </iq>
+    """
+    this.sendIQ node, (result) ->
+      card  = $('vCard', result)
+      photo = $('PHOTO', card)
+      type  = $('TYPE', photo).text()
+      bin   = $('BINVAL', photo).text()
+      photo =
+        if type && bin
+          type: type, binval: bin.replace(/\n/g, '')
+        else null
+      vcard = jid: jid, photo: photo, retrieved: new Date()
+      callback if card.size() > 0 then vcard else null
+
+  parseRoster: (node) ->
+    $('item', node).map(-> new Contact this ).get()
+
+  findRoster: (callback) ->
+    node = this.xml """
+      <iq id='#{this.uniqueId()}' type="get">
+        <query xmlns="jabber:iq:roster"/>
+      </iq>
+    """
+    this.sendIQ node, (result) =>
+      contacts = this.parseRoster(result)
+      @roster[contact.jid] = contact for contact in contacts
+      callback()
+
+  sendMessage: (jid, message) ->
+    node = this.xml """
+      <message id="#{this.uniqueId()}" to="#{jid}" type="chat">
+        <body></body>
+      </message>
+    """
+    $('body', node).text message
+    @xmpp.send node
+
+  sendPresence: (away, status) ->
+    node = $ this.xml '<presence/>'
+    if away
+      node.append $(this.xml '<show>xa</show>')
+      node.append $(this.xml '<status/>').text status if status != 'Away'
+    else
+      node.append $(this.xml '<status/>').text status if status != 'Available'
+    @xmpp.send node
+
+  sendIQ: (node, callback) ->
+    @xmpp.sendIQ node, callback, callback, 5000
+
+  updateContact: (contact, add) ->
+    node = this.xml """
+      <iq id="#{this.uniqueId()}" type="set">
+        <query xmlns="jabber:iq:roster">
+          <item name="" jid="#{contact.jid}"/>
+        </query>
+      </iq>
+    """
+    $('item', node).attr 'name', contact.name
+    for group in contact.groups
+      $('item', node).append $(this.xml '<group></group>').text group
+    @xmpp.send node
+    this.sendSubscribe(contact.jid) if add
+
+  removeContact: (jid) ->
+    node = this.xml """
+      <iq id="#{this.uniqueId()}" type="set">
+        <query xmlns="jabber:iq:roster">
+          <item jid="#{jid}" subscription="remove"/>
+        </query>
+      </iq>
+    """
+    @xmpp.send node
+
+  sendSubscribe: (jid) ->
+    @xmpp.send this.presence jid, 'subscribe'
+
+  sendSubscribed: (jid) ->
+    @xmpp.send this.presence jid, 'subscribed'
+
+  sendUnsubscribed: (jid) ->
+    @xmpp.send this.presence jid, 'unsubscribed'
+
+  presence: (to, type) ->
+    this.xml """
+      <presence
+        id="#{this.uniqueId()}"
+        to="#{to}"
+        type="#{type}"/>
+    """
+
+  handleIq: (node) ->
+    node = $(node)
+    type = node.attr 'type'
+    ns   = node.find('query').attr 'xmlns'
+    if type == 'set' && ns == 'jabber:iq:roster'
+      contacts = this.parseRoster(node)
+      for contact in contacts
+        if contact.subscription == 'remove'
+          delete @roster[contact.jid]
+        else
+          old = @roster[contact.jid]
+          contact.presence = old.presence if old
+          @roster[contact.jid] = contact
+      this.notify('roster')
+    true # keep handler alive
+
+  handleMessage: (node) ->
+    node   = $(node)
+    to     = node.attr 'to'
+    from   = node.attr 'from'
+    type   = node.attr 'type'
+    thread = node.find('thread').first()
+    body   = node.find('body').first()
+    this.notify 'message',
+      to:   to
+      from: from
+      type: type
+      thread: thread.text()
+      text: body.text()
+      received: new Date()
+      node: node
+    true # keep handler alive
+
+  handlePresence: (node) ->
+    node   = $(node)
+    to     = node.attr 'to'
+    from   = node.attr 'from'
+    type   = node.attr 'type'
+    show   = node.find('show').first()
+    status = node.find('status').first()
+    presence =
+      to:      to
+      from:    from
+      status:  status.text()
+      show:    show.text()
+      type:    type
+      offline: type == 'unavailable' || type == 'error'
+      away:    show.text() == 'away' || show.text() == 'xa'
+      dnd:     show.text() == 'dnd'
+      node:    node
+    contact = @roster[from.split('/')[0]]
+    contact.update presence if contact
+    this.notify 'presence', presence
+    true # keep handler alive
+
+  notify: (type, obj) ->
+    callback(obj) for callback in (@listeners[type] || [])
+
+  xml: (xml) -> $.parseXML(xml).documentElement

data/app/assets/javascripts/lib/transfer.coffee

@@ -0,0 +1,106 @@
+class @Transfer
+  constructor: (options) ->
+    @session  = options.session
+    @file     = options.file
+    @to       = options.to
+    @progress = options.progress
+    @complete = options.complete
+    @chunks   = new Chunks @file
+    @opened   = false
+    @closed   = false
+    @sid      = @session.uniqueId()
+    @seq      = 0
+    @sent     = 0
+
+  start: ->
+    node = $("""
+      <iq id="#{@session.uniqueId()}" to="#{@to}" type="set">
+        <si xmlns="http://jabber.org/protocol/si" id="#{@session.uniqueId()}" profile="http://jabber.org/protocol/si/profile/file-transfer">
+          <file xmlns="http://jabber.org/protocol/si/profile/file-transfer" name="" size="#{@file.size}"/>
+          <feature xmlns="http://jabber.org/protocol/feature-neg">
+            <x xmlns="jabber:x:data" type="form">
+              <field var="stream-method" type="list-single">
+                <option><value>http://jabber.org/protocol/ibb</value></option>
+              </field>
+            </x>
+          </feature>
+        </si>
+      </iq>
+    """)
+    $('file', node).attr 'name', @file.name
+
+    @session.sendIQ node.get(0), (result) =>
+      methods = $('si feature x field[var="stream-method"] value', result)
+      ok = (true for m in methods when $(m).text() == 'http://jabber.org/protocol/ibb').length > 0
+      this.open() if ok
+
+  open: ->
+    node = $("""
+      <iq id="#{@session.uniqueId()}" to="#{@to}" type="set">
+        <open xmlns="http://jabber.org/protocol/ibb" sid="#{@sid}" block-size="4096"/>
+      </iq>
+    """)
+    @session.sendIQ node.get(0), (result) =>
+      if this.ok result
+        @opened = true
+        this.sendChunk()
+
+  sendChunk: ->
+    return if @closed
+    @chunks.chunk (chunk) =>
+      unless chunk
+        this.close()
+        return
+
+      node = $("""
+        <iq id="#{@session.uniqueId()}" to="#{@to}" type="set">
+          <data xmlns="http://jabber.org/protocol/ibb" sid="#{@sid}" seq="#{@seq++}">#{chunk}</data>
+        </iq>
+      """)
+      @seq = 0 if @seq > 65535
+
+      @session.sendIQ node.get(0), (result) =>
+        return unless this.ok result
+        pct = Math.ceil ++@sent / @chunks.total * 100
+        this.progress pct
+        this.sendChunk()
+
+  close: ->
+    return if @closed
+    @closed = true
+    node = $("""
+      <iq id="#{@session.uniqueId()}" to="#{@to}" type="set">
+        <close xmlns="http://jabber.org/protocol/ibb" sid="#{@sid}"/>
+      </iq>
+    """)
+    @session.sendIQ node.get(0), ->
+    this.complete()
+
+  stop: ->
+    if @opened
+      this.close()
+    else
+      this.complete()
+
+  ok: (result) -> $(result).attr('type') == 'result'
+
+  class Chunks
+    CHUNK_SIZE = 3 / 4 * 4096
+
+    constructor: (@file) ->
+      @total = Math.ceil @file.size / CHUNK_SIZE
+      @slice = @file.slice || @file.webkitSlice || @file.mozSlice
+      @pos   = 0
+
+    chunk: (callback) ->
+      start = @pos
+      end   = @pos + CHUNK_SIZE
+      @pos  = end
+      if start > @file.size
+        callback null
+      else
+        chunk = @slice.call @file, start, end
+        reader = new FileReader()
+        reader.onload = (event) ->
+          callback btoa event.target.result
+        reader.readAsBinaryString chunk