vines-services 0.1.0

data/web/coffeescripts/systems.coffee

@@ -0,0 +1,371 @@
+class SystemsPage
+  constructor: (@session) ->
+    @session.onRoster   ( ) => this.roster()
+    @session.onCard     (c) => this.card(c)
+    @session.onMessage  (m) => this.message(m)
+    @session.onPresence (p) => this.presence(p)
+    @commands = new Commands
+    @chats = {}
+    @currentContact = 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 || ''
+      node.attr 'data-groups', contact.groups || ''
+
+    for jid, contact of @session.roster
+      found = $("#roster li[data-jid='#{jid}']")
+      setName(found, contact)
+      if found.length == 0
+        if contact.groups[0]=="Vines"
+          img_src = "/lib/images/default-service.png"
+        else
+          img_src = "#{@session.avatar jid}"
+        node = $("""
+          <li data-jid="#{jid}" data-name="" data-group="" class="offline">
+            <span class="text"></span>
+            <span class="status-msg">Offline</span>
+            <span class="unread" style="display:none;"></span>
+            <img class="vcard-img" id="#{jid}-avatar" alt="#{jid}" src="#{img_src}"/>
+          </li>
+        """).appendTo roster
+        setName(node, contact)
+        node.click (event) => this.selectContact(event)
+
+  message: (message) ->
+    this.queueMessage message
+    me     = message.from == @session.jid()
+    from   = message.from.split('/')[0]
+    thread = message.thread
+
+    if me || from || thread == @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><pre></pre></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'
+
+    $('pre', 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.height()
+    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
+        received: new Date()
+      @session.sendMessage jid, text
+      @commands.push 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()
+        fn() if fn
+
+  draw: ->
+    unless @session.connected()
+      window.location.hash = ''
+      return
+
+    $('body').attr 'id', 'servers-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 or service to start communicating</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').keyup (e) =>
+      switch e.keyCode # up, down keys trigger history
+        when 38 then $('#message').val @commands.prev()
+        when 40 then $('#message').val @commands.next()
+
+    $('#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').show()
+    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/web/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<title>Vines</title>
+<link rel="shortcut icon" type="image/png" href="/favicon.png">
+<script type="text/javascript" src="/lib/javascripts/base.js"></script>
+<script type="text/javascript" src="javascripts/app.js"></script>
+<link rel="stylesheet" href="/lib/stylesheets/base.css">
+<link rel="stylesheet" href="/lib/stylesheets/login.css">
+<link rel="stylesheet" href="stylesheets/app.css">
+</head>
+<body>
+</body>
+</html>

data/web/stylesheets/common.css

@@ -0,0 +1,52 @@
+#editor-buttons {
+  background: #f8f8f8;
+  border-top: 1px solid #dfdfdf;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+#editor-buttons {
+  text-align: right;
+}
+#editor-buttons #save {
+  position: relative;
+  right: 10px;
+  top: 10px;
+}
+form.sections h2 {
+  background: none;
+  border: none;
+  padding-left: 0;
+}
+form.sections label {
+  display: block;
+  font-weight: bold;
+  font-size: 9pt;
+  color: rgba(0,0,0,0.8);
+  margin: 10px 0 -2px 0;
+}
+form.sections input[type="text"],
+form.sections input[type="email"],
+form.sections input[type="password"],
+form.sections textarea {
+  width: 90%;
+}
+form.sections section {
+  border-bottom: 1px solid #ddd;
+  margin: 0 20px;
+}
+form.sections section fieldset {
+  padding-left: 30%;
+  margin-top: -33px;
+  margin-bottom: 10px;
+}
+form.sections section:last-child {
+  border-bottom: none;
+  margin-bottom: 20px;
+}
+form.sections .error {
+  color: #dd2828;
+  font-size: 8pt;
+  width: 89%;
+}

data/web/stylesheets/files.css

@@ -0,0 +1,218 @@
+#files-page #container {
+  height: 100%;
+}
+#files-page #files-title {
+  background: #f8f8f8;
+}
+#files-page #files {
+  background: #fff;
+  height: 100%;
+  list-style: none;
+  width: 100%;
+}
+#files-page #files li {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 10px;
+  position: relative;
+}
+#files-page #files li .file-icon {
+  float: left;
+}
+#files-page #files li .file-icon > svg {
+  height: 30px;
+  width: 30px;
+}
+#files-page #files li .file-icon .size {
+  color: rgba(0, 0, 0, 0.7);
+  display: block;
+  font-size: 9pt;
+  line-height: 1;
+}
+#files-page #files li h2 {
+  border: none;
+  line-height: 1;
+  padding: 0 0 0 50px;
+}
+#files-page #files li:hover {
+  background: #fdfdfd;
+}
+#files-page #files li .file-form {
+  opacity: 0;
+  position: absolute;
+  right: 10px;
+  top: 22px;
+  -moz-transition: opacity 0.3s;
+  -o-transition: opacity 0.3s;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+#files-page #files li:hover .file-form {
+  opacity: 1.0;
+}
+#files-page #files li:hover footer {
+  color: rgba(0, 0, 0, 0.7);
+}
+#files-page #files li footer {
+  color: rgba(0, 0, 0, 0.3);
+  font-size: 9pt;
+  padding-left: 50px;
+  -moz-transition: color 0.3s;
+  -o-transition: color 0.3s;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+#files-page #files li .time {
+  display: block;
+}
+#files-page #files li .labels {
+  line-height: 1;
+  min-height: 10px;
+  width: 80%;
+}
+#files-page #files li .labels li {
+  border: none;
+  display: inline-block;
+  line-height: 1;
+  margin-right: 10px;
+  margin-bottom: 7px;
+  padding: 0 12px 0 0;
+  position: relative;
+  text-transform: capitalize;
+}
+#files-page #files li .labels li .remove {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: -2px;
+  width: 14px;
+}
+#files-page #files li .labels li .remove svg {
+  height: 12px;
+  width: 12px;
+}
+#files-page #files .add-label-button {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 3px;
+}
+#files-page #files .add-label-button svg {
+  height: 14px;
+  width: 14px;
+}
+#files-page #files form.add-label input[type="text"] {
+  display: inline-block;
+  font-size: 8pt;
+  padding: 2px;
+  position: relative;
+  top: -4px;
+  width: 100px;
+}
+#files-page #file-chooser {
+  height: 30px;
+  opacity: 0;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+#files-page #open-file-chooser {
+  height: 30px;
+  margin: 0;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 240px;
+}
+#files-page #upload-dnd {
+  color: #ababab;
+  font-weight: bold;
+  font-size: 14px;
+  position: absolute;
+  top: 27px;
+  text-align: center;
+  text-shadow: 0 1px 1px #fff;
+  width: 260px;
+}
+#files-page #uploads .progress {
+  background: #fff;
+  border: 1px solid #448ccd;
+  border-top: 1px solid #5da8db;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 1px #fff, inset 0 1px 1px rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1px 1px #fff, inset 0 1px 1px rgba(255, 255, 255, 0.5);
+  color: #0d4078;
+  font-size: 11px;
+  font-weight: bold;
+  height: 15px;
+  line-height: 15px;
+  margin: 0 10px 10px 10px;
+  position: relative;
+  text-align: center;
+  text-shadow: 0 1px 1px #a2d8f8;
+}
+#files-page #uploads .progress .text {
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+#files-page #uploads .progress .meter {
+  background: #8dd2f7;
+  background: -moz-linear-gradient(#8dd2f7, #58b8f4);
+  background: -o-linear-gradient(#8dd2f7, #58b8f4);
+  background: -webkit-gradient(linear, left top, left bottom, from(#8dd2f7), to(#58b8f4));
+  height: 15px;
+  position: absolute;
+  top: 0;
+}
+#files-page #uploads .progress .cancel {
+  height: 100%;
+  width: 16px;
+  position: absolute;
+  right: 0;
+}
+#files-page #labels,
+#files-page #uploads {
+  height: 100%;
+  list-style: none;
+  text-shadow: 0 1px 1px #fff;
+  width: 260px;
+}
+#files-page #labels li .text {
+  text-transform: capitalize;
+}
+#files-page #labels li,
+#files-page #uploads 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;
+}
+#files-page #uploads li {
+  font-weight: normal;
+  padding: 10px 0 0 0;
+  background: #f8f8f8;
+}
+#files-page #labels li:hover:not(.selected),
+#files-page #uploads li:hover {
+  background: rgba(255, 255, 255, 1.0);
+}
+#files-page #labels li.selected .count {
+  color: rgba(255, 255, 255, 0.85);
+}
+#files-page #labels .count {
+  display: block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 11px;
+}
+#files-page #charlie-controls {
+  text-align: right;
+}
+#files-page #search-files-form {
+  background: #f8f8f8;
+}