vines-web 0.1.0

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2010-2013 Negative Code
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,37 @@
+# Welcome to Vines
+
+Vines is a scalable XMPP chat server, using EventMachine for asynchronous IO.
+This gem provides a web chat client, used to test the server's BOSH support.
+
+Additional documentation can be found at [getvines.org](http://www.getvines.org/).
+
+## Usage
+
+```
+$ gem install vines vines-web
+$ vines-web init wonderland.lit
+$ cd wonderland.lit && vines start
+$ open http://localhost:5280
+```
+
+## Dependencies
+
+Vines requires Ruby 1.9.3 or better. Instructions for installing the
+needed OS packages, as well as Ruby itself, are available at
+[getvines.org/ruby](http://www.getvines.org/ruby).
+
+## Development
+
+```
+$ script/bootstrap
+$ script/tests
+$ script/server
+```
+
+## Contact
+
+* David Graham <david@negativecode.com>
+
+## License
+
+Vines is released under the MIT license. Check the LICENSE file for details.

data/Rakefile

@@ -0,0 +1,28 @@
+require 'rake'
+require 'rake/clean'
+
+CLOBBER.include('pkg', 'public/assets')
+
+directory 'pkg'
+
+desc 'Build distributable packages'
+task :build => [:assets, :pkg] do
+  system 'gem build vines-web.gemspec && mv vines-*.gem pkg/'
+end
+
+desc 'Compile web assets'
+task :assets do
+  require 'sprockets'
+  env = Sprockets::Environment.new
+  env.cache = Sprockets::Cache::FileStore.new(Dir.tmpdir)
+  env.append_path 'app/assets/javascripts'
+  env.append_path 'app/assets/stylesheets'
+  env.js_compressor = :uglifier
+
+  assets = %w[application.js vendor.js lib.js application.css]
+  assets.each do |asset|
+    env[asset].write_to "public/assets/#{asset}"
+  end
+end
+
+task :default => [:clobber, :build]

data/app/assets/javascripts/application.coffee

@@ -0,0 +1,19 @@
+#= require vendor
+#= require lib
+#= require chat
+
+$ ->
+  session = new Session()
+  nav = new NavBar(session)
+  nav.draw()
+  buttons =
+    Messages: ICONS.chat
+    Logout:   ICONS.power
+  nav.addButton(label, icon) for label, icon of buttons
+
+  pages =
+    '/messages': new ChatPage(session)
+    '/logout':   new LogoutPage(session)
+    'default':   new LoginPage(session, '/messages/')
+  new Router(pages).draw()
+  nav.select $('#nav-link-messages').parent()

data/app/assets/javascripts/chat.coffee

@@ -0,0 +1,362 @@
+class @ChatPage
+  constructor: (@session) ->
+    @session.onRoster   ( ) => this.roster()
+    @session.onCard     (c) => this.card(c)
+    @session.onMessage  (m) => this.message(m)
+    @session.onPresence (p) => this.presence(p)
+    @chats = {}
+    @currentContact = null
+    @layout = null
+
+  datef: (millis) ->
+    d = new Date(millis)
+    meridian = if d.getHours() >= 12 then ' pm' else ' am'
+    hour = if d.getHours() > 12 then d.getHours() - 12 else d.getHours()
+    hour = 12 if hour == 0
+    minutes = d.getMinutes() + ''
+    minutes = '0' + minutes if minutes.length == 1
+    hour + ':' + minutes + meridian
+
+  card: (card) ->
+    this.eachContact card.jid, (node) =>
+      $('.vcard-img', node).attr 'src', @session.avatar card.jid
+
+  roster: ->
+    roster = $('#roster')
+
+    $('li', roster).each (ix, node) =>
+      jid = $(node).attr('data-jid')
+      $(node).remove() unless @session.roster[jid]
+
+    setName = (node, contact) ->
+      $('.text', node).text contact.name || contact.jid
+      node.attr 'data-name', contact.name || ''
+
+    for jid, contact of @session.roster
+      found = $("#roster li[data-jid='#{jid}']")
+      setName(found, contact)
+      if found.length == 0
+        node = $("""
+          <li data-jid="#{jid}" data-name="" class="offline">
+            <span class="text"></span>
+            <span class="status-msg">Offline</span>
+            <span class="unread" style="display:none;"></span>
+            <img class="vcard-img" alt="#{jid}" src="#{@session.avatar jid}"/>
+          </li>
+        """).appendTo roster
+        setName(node, contact)
+        node.click (event) => this.selectContact(event)
+
+  message: (message) ->
+    return unless message.type == 'chat' && message.text
+    this.queueMessage message
+    me   = message.from == @session.jid()
+    from = message.from.split('/')[0]
+
+    if me || from == @currentContact
+      bottom = this.atBottom()
+      this.appendMessage message
+      this.scroll() if bottom
+    else
+      chat = this.chat message.from
+      chat.unread++
+      this.eachContact from, (node) ->
+        $('.unread', node).text(chat.unread).show()
+
+  eachContact: (jid, callback) ->
+    for node in $("#roster li[data-jid='#{jid}']").get()
+      callback $(node)
+
+  appendMessage: (message) ->
+    from    = message.from.split('/')[0]
+    contact = @session.roster[from]
+    name    = if contact then (contact.name || from) else from
+    name    = 'Me' if message.from == @session.jid()
+    node    = $("""
+      <li data-jid="#{from}" style="display:none;">
+        <p></p>
+        <img alt="#{from}" src="#{@session.avatar from}"/>
+        <footer>
+          <span class="author"></span>
+          <span class="time">#{this.datef message.received}</span>
+        </footer>
+      </li>
+    """).appendTo '#messages'
+
+    $('p', node).text message.text
+    $('.author', node).text name
+    node.fadeIn 200
+
+  queueMessage: (message) ->
+    me   = message.from == @session.jid()
+    full = message[if me then 'to' else 'from']
+    chat = this.chat full
+    chat.jid = full
+    chat.messages.push message
+
+  chat: (jid) ->
+    bare = jid.split('/')[0]
+    chat = @chats[bare]
+    unless chat
+      chat = jid: jid, messages: [], unread: 0
+      @chats[bare] = chat
+    chat
+
+  presence: (presence) ->
+    from = presence.from.split('/')[0]
+    return if from == @session.bareJid()
+    if !presence.type || presence.offline
+      contact = @session.roster[from]
+      this.eachContact from, (node) ->
+        $('.status-msg', node).text contact.status()
+        if contact.offline()
+          node.addClass 'offline'
+        else
+          node.removeClass 'offline'
+
+    if presence.offline
+      this.chat(from).jid = from
+
+    if presence.type == 'subscribe'
+      node = $("""
+        <li data-jid="#{presence.from}" style="display:none;">
+          <form class="inset">
+            <h2>Buddy Approval</h2>
+            <p>#{presence.from} wants to add you as a buddy.</p>
+            <fieldset class="buttons">
+              <input type="button" value="Decline"/>
+              <input type="submit" value="Accept"/>
+            </fieldset>
+          </form>
+        </li>
+      """).appendTo '#notifications'
+      node.fadeIn 200
+      $('form', node).submit => this.acceptContact node, presence.from
+      $('input[type="button"]', node).click => this.rejectContact node, presence.from
+
+  acceptContact: (node, jid) ->
+    node.fadeOut 200, -> node.remove()
+    @session.sendSubscribed jid
+    @session.sendSubscribe  jid
+    false
+
+  rejectContact: (node, jid) ->
+    node.fadeOut 200, -> node.remove()
+    @session.sendUnsubscribed jid
+
+  selectContact: (event) ->
+    jid = $(event.currentTarget).attr 'data-jid'
+    contact = @session.roster[jid]
+    return if @currentContact == jid
+    @currentContact = jid
+
+    $('#roster li').removeClass 'selected'
+    $(event.currentTarget).addClass 'selected'
+    $('#chat-title').text('Chat with ' + (contact.name || contact.jid))
+    $('#messages').empty()
+
+    chat = @chats[jid]
+    messages = []
+    if chat
+      messages = chat.messages
+      chat.unread = 0
+      this.eachContact jid, (node) ->
+        $('.unread', node).text('').hide()
+
+    this.appendMessage msg for msg in messages
+    this.scroll()
+
+    $('#remove-contact-msg').html "Are you sure you want to remove " +
+      "<strong>#{@currentContact}</strong> from your buddy list?"
+    $('#remove-contact-form .buttons').fadeIn 200
+
+    $('#edit-contact-jid').text @currentContact
+    $('#edit-contact-name').val @session.roster[@currentContact].name
+    $('#edit-contact-form input').fadeIn 200
+    $('#edit-contact-form .buttons').fadeIn 200
+
+  scroll: ->
+    msgs = $ '#messages'
+    msgs.animate(scrollTop: msgs.prop('scrollHeight'), 400)
+
+  atBottom: ->
+    msgs = $('#messages')
+    bottom = msgs.prop('scrollHeight') - msgs.outerHeight()
+    msgs.scrollTop() >= bottom
+
+  send: ->
+    return false unless @currentContact
+    input = $('#message')
+    text = input.val().trim()
+    if text
+      chat = @chats[@currentContact]
+      jid = if chat then chat.jid else @currentContact
+      this.message
+        from: @session.jid()
+        text: text
+        to: jid
+        type: 'chat'
+        received: new Date()
+      @session.sendMessage jid, text
+    input.val ''
+    false
+
+  addContact: ->
+    this.toggleForm '#add-contact-form'
+    contact =
+      jid: $('#add-contact-jid').val()
+      name: $('#add-contact-name').val()
+      groups: ['Buddies']
+    @session.updateContact contact, true if contact.jid
+    false
+
+  removeContact: ->
+    this.toggleForm '#remove-contact-form'
+    @session.removeContact @currentContact
+    @currentContact = null
+
+    $('#chat-title').text 'Select a buddy to chat'
+    $('#messages').empty()
+
+    $('#remove-contact-msg').html "Select a buddy in the list above to remove."
+    $('#remove-contact-form .buttons').hide()
+
+    $('#edit-contact-jid').text "Select a buddy in the list above to update."
+    $('#edit-contact-name').val ''
+    $('#edit-contact-form input').hide()
+    $('#edit-contact-form .buttons').hide()
+    false
+
+  updateContact: ->
+    this.toggleForm '#edit-contact-form'
+    contact =
+      jid: @currentContact
+      name: $('#edit-contact-name').val()
+      groups: @session.roster[@currentContact].groups
+    @session.updateContact contact
+    false
+
+  toggleForm: (form, fn) ->
+    form = $(form)
+    $('form.overlay').each ->
+      $(this).hide() unless this.id == form.attr 'id'
+    if form.is ':hidden'
+      fn() if fn
+      form.fadeIn 100
+    else
+      form.fadeOut 100, =>
+        form[0].reset()
+        @layout.resize()
+        fn() if fn
+
+  draw: ->
+    unless @session.connected()
+      window.location.hash = ''
+      return
+
+    $('body').attr 'id', 'chat-page'
+    $('#container').hide().empty()
+    $("""
+      <div id="alpha" class="sidebar column y-fill">
+        <h2>Buddies <div id="search-roster-icon"></div></h2>
+        <div id="search-roster-form"></div>
+        <ul id="roster" class="selectable scroll y-fill"></ul>
+        <div id="alpha-controls" class="controls">
+          <div id="add-contact"></div>
+          <div id="remove-contact"></div>
+          <div id="edit-contact"></div>
+        </div>
+        <form id="add-contact-form" class="overlay" style="display:none;">
+          <h2>Add Buddy</h2>
+          <input id="add-contact-jid" type="email" maxlength="1024" placeholder="Account name"/>
+          <input id="add-contact-name" type="text" maxlength="1024" placeholder="Real name"/>
+          <fieldset class="buttons">
+            <input id="add-contact-cancel" type="button" value="Cancel"/>
+            <input id="add-contact-ok" type="submit" value="Add"/>
+          </fieldset>
+        </form>
+        <form id="remove-contact-form" class="overlay" style="display:none;">
+          <h2>Remove Buddy</h2>
+          <p id="remove-contact-msg">Select a buddy in the list above to remove.</p>
+          <fieldset class="buttons" style="display:none;">
+            <input id="remove-contact-cancel" type="button" value="Cancel"/>
+            <input id="remove-contact-ok" type="submit" value="Remove"/>
+          </fieldset>
+        </form>
+        <form id="edit-contact-form" class="overlay" style="display:none;">
+          <h2>Update Profile</h2>
+          <p id="edit-contact-jid">Select a buddy in the list above to update.</p>
+          <input id="edit-contact-name" type="text" maxlength="1024" placeholder="Real name" style="display:none;"/>
+          <fieldset class="buttons" style="display:none;">
+            <input id="edit-contact-cancel" type="button" value="Cancel"/>
+            <input id="edit-contact-ok" type="submit" value="Save"/>
+          </fieldset>
+        </form>
+      </div>
+      <div id="beta" class="primary column x-fill y-fill">
+        <h2 id="chat-title">Select a buddy to chat</h2>
+        <ul id="messages" class="scroll y-fill"></ul>
+        <form id="message-form">
+          <input id="message" name="message" type="text" maxlength="1024" placeholder="Type a message and press enter to send"/>
+        </form>
+      </div>
+      <div id="charlie" class="sidebar column y-fill">
+        <h2>Notifications</h2>
+        <ul id="notifications" class="scroll y-fill"></ul>
+        <div id="charlie-controls" class="controls">
+          <div id="clear-notices"></div>
+        </div>
+      </div>
+    """).appendTo '#container'
+
+    this.roster()
+
+    new Button '#clear-notices',  ICONS.no
+    new Button '#add-contact',    ICONS.plus
+    new Button '#remove-contact', ICONS.minus
+    new Button '#edit-contact',   ICONS.user
+
+    $('#message').focus -> $('form.overlay').fadeOut()
+    $('#message-form').submit  => this.send()
+
+    $('#clear-notices').click  -> $('#notifications li').fadeOut 200
+
+    $('#add-contact').click    => this.toggleForm '#add-contact-form'
+    $('#remove-contact').click => this.toggleForm '#remove-contact-form'
+    $('#edit-contact').click   => this.toggleForm '#edit-contact-form', =>
+      if @currentContact
+        $('#edit-contact-jid').text @currentContact
+        $('#edit-contact-name').val @session.roster[@currentContact].name
+
+    $('#add-contact-cancel').click    => this.toggleForm '#add-contact-form'
+    $('#remove-contact-cancel').click => this.toggleForm '#remove-contact-form'
+    $('#edit-contact-cancel').click   => this.toggleForm '#edit-contact-form'
+
+    $('#add-contact-form').submit    => this.addContact()
+    $('#remove-contact-form').submit => this.removeContact()
+    $('#edit-contact-form').submit   => this.updateContact()
+
+    $('#container').fadeIn 200
+    @layout = this.resize()
+
+    fn = =>
+      @layout.resize()
+      @layout.resize() # not sure why two are needed
+
+    new Filter
+      list: '#roster'
+      icon: '#search-roster-icon'
+      form: '#search-roster-form'
+      attrs: ['data-jid', 'data-name']
+      open:  fn
+      close: fn
+
+  resize: ->
+    a    = $ '#alpha'
+    b    = $ '#beta'
+    c    = $ '#charlie'
+    msg  = $ '#message'
+    form = $ '#message-form'
+    new Layout ->
+      c.css 'left', a.width() + b.width()
+      msg.width form.width() - 32

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

@@ -0,0 +1,25 @@
+class @Button
+  constructor: (node, path, options) ->
+    @node = $ node
+    @path = path
+    @options = options || {}
+    @options.animate = true unless @options.animate?
+    this.draw()
+
+  draw: ->
+    paper = Raphael @node.get(0)
+
+    transform = "s#{@options.scale || 0.85}"
+    transform += ",t#{@options.translation}" if @options.translation
+
+    icon = paper.path(@path).attr
+      fill: @options.fill || '#000'
+      stroke: @options.stroke || '#fff'
+      'stroke-width': @options['stroke-width'] || 0.3
+      opacity: @options.opacity || 0.6
+      transform: transform
+
+    if @options.animate
+      @node.hover(
+        -> icon.animate(opacity: 1.0, 200),
+        -> icon.animate(opacity: 0.6, 200))

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

@@ -0,0 +1,49 @@
+class @Filter
+  constructor: (options) ->
+    @list  = options.list
+    @icon  = options.icon
+    @form  = options.form
+    @attrs = options.attrs
+    @open  = options.open
+    @close = options.close
+    this.draw()
+
+  draw: ->
+    $(@icon).addClass 'filter-button'
+    form = $('<form class="filter-form" style="display:none;"></form>').appendTo @form
+    text = $('<input class="filter-text" type="search" placeholder="Filter" results="5"/>').appendTo form
+
+    if @icon
+      new Button @icon, ICONS.search,
+        scale: 0.5
+        translation: '-16,-16'
+
+    form.submit -> false
+    text.keyup  => this.filter(text)
+    text.change => this.filter(text)
+    text.click  => this.filter(text)
+    $(@icon).click =>
+      if form.is ':hidden'
+        this.filter(text)
+        form.show()
+        this.open() if this.open
+      else
+        form.hide()
+        form[0].reset()
+        this.filter(text)
+        this.close() if this.close
+
+  filter: (input) ->
+    text = input.val().toLowerCase()
+    if text == ''
+      $('li', @list).show()
+      return
+
+    test = (node, attr) ->
+      val = (node.attr(attr) || '').toLowerCase()
+      val.indexOf(text) != -1
+
+    $('> li', @list).each (ix, node) =>
+      node = $ node
+      matches = (true for attr in @attrs when test node, attr)
+      if matches.length > 0 then node.show() else node.hide()

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

@@ -0,0 +1 @@
+#= require_tree .

data/app/assets/javascripts/lib/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).filter(':visible').each (ix, node) =>
+      node = $(node)
+      getter = node[get]
+      parent = getter.call node.parent(), true
+      fixed = this.fixed node, selector, (n) -> getter.call(n, true)
+      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/app/assets/javascripts/lib/login.coffee

@@ -0,0 +1,68 @@
+class @LoginPage
+  constructor: (@session, @startPage) ->
+
+  start: ->
+    $('#error').hide()
+
+    [jid, password] = ($(id).val().trim() for id in ['#jid', '#password'])
+    if jid.length == 0 || password.length == 0 || jid.indexOf('@') == -1
+      $('#error').show()
+      return
+
+    @session.connect jid, password, (success) =>
+      unless success
+        @session.disconnect()
+        $('#error').show()
+        $('#password').val('').focus()
+        return
+
+      localStorage['jid'] = jid
+      $('#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
+
+  draw: ->
+    @session.disconnect()
+    jid = localStorage['jid'] || ''
+    $('#navbar').hide()
+    $('body').attr 'id', 'login-page'
+    $('#container').hide().empty()
+    $("""
+      <form id="login-form">
+        <div id="icon"></div>
+        <h1>vines</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'
+    $('#container').fadeIn 1000
+    $('#login-form').submit => this.start(); false
+    $('#jid').keydown      -> $('#error').fadeOut()
+    $('#password').keydown -> $('#error').fadeOut()
+    this.resize()
+    this.icon()
+
+  icon: ->
+    opts =
+      fill: '90-#ccc-#fff'
+      stroke: '#fff'
+      'stroke-width': 1.1
+      opacity: 0.95
+      scale: 3.0
+      translation: '10,8'
+      animate: false
+    new Button('#icon', ICONS.chat, opts)
+
+  resize: ->
+    win  = $ window
+    form = $ '#login-form'
+    sizer = -> form.css 'top', win.height() / 2 - form.height() / 2
+    win.resize sizer
+    sizer()