added submit

cpetzold · Apr 29, 2012 · 8b7deaf · 8b7deaf
1 parent 7a438b0
commit 8b7deaf
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 28 deletions.
diff --git a/src/orca/index.coffee b/src/orca/index.coffee
@@ -25,12 +25,16 @@ orca.get '/:channel', (page, model, params) ->
 
     model.ref '_channel', channel
     model.refList '_messages', 'messages', '_messageIds'
+    model.setNull '_user',
+      nick: 'conner'
     page.render()
 
 orca.ready (model) ->
   window.model = model
 
   messages = model.at '_messages'
+  channel = model.at '_channel'
+  user = model.at '_user'
 
   elInput = document.getElementById 'input'
   elMessages = document.getElementById 'messages'
@@ -48,14 +52,30 @@ orca.ready (model) ->
   #     toggleActions.innerText = 'Hide actions'
   #     messages.className = ''
 
+  exports.submit = (e) ->
+    messages.push
+      timestamp: Date.now()
+      channel: channel.get().id
+      from: user.get().nick
+      type: 'message'
+      message: elInput.value
+      new: true
+    elInput.value = ''
+
   model.on 'set', 'messages.*', (id, message) ->
     return if message.new
     m = messages.get()
     i = m.length
     i-- while m[i-1].timestamp > message.timestamp
     message.new = true
     messages.insert i, message
+
+  model.on 'insert', '_messages', ->
+    document.body.scrollTop = elMessages.offsetHeight
 
+  model.on 'push', '_messages', ->
+    document.body.scrollTop = elMessages.offsetHeight
+
+
+
 
-  model.on 'insert', '_messages', (message, len) ->
-    document.body.scrollTop = elMessages.offsetHeight
diff --git a/styles/orca.styl b/styles/orca.styl
@@ -1,42 +1,49 @@
 @import 'nib'
 
+*
+  box-sizing: border-box
+
 body
   background: #2c2b2c
   color: #fff
   font: 11px/14px "Andale Mono", "Lucida Console", Consolas, monospace
   margin: 5px
-  padding: 0 0 32px
+  padding: 0 0 26px
   overflow-x: hidden
 
 input
   border: 0
   &:focus
     outline: none
 
-#controls
+#input
   position: fixed
   bottom: 0
-  left: 0
+  right: 0
   width: 100%
-
-#input
-  display: none
-  width: 100%
-  padding: 10px 5px
-  margin: 1px 0 0
-  color: #eee
-  background: #2c2b2c
-  border-top: 1px solid #222
+  padding: 6px 5px
+  margin: 0
+  color: #aaa
+  background: #2a2a2a
+  border-top: 1px solid #1a1a1a
   box-shadow: inset 0 5px 15px -5px #222
+  transition: background ease-out 0.3s, color ease-out 0.3s, box-shadow ease-out 0.3s
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder
+    color: #444
+    transition: color ease-out 0.3s
+  &:hover,
   &:focus
+    color: #eee
+    background: #262626
     box-shadow: inset 0 5px 15px -5px #111
-
-#channels
-  padding: 0 4px
-  background: #111
-  color: #eee
-  border-top: 5px solid #222
-  box-shadow: 0 -1px 0 #3e3e3e, inset 0 1px 0 #3e3e3e, inset 0 1px 6px #000
+    &::-webkit-input-placeholder,
+    &::-moz-placeholder
+      color: #777
+  &:focus
+    &::-webkit-input-placeholder,
+    &::-moz-placeholder
+      opacity: 0
 
 .channel
   display: inline-block

diff --git a/views/orca/index.html b/views/orca/index.html
@@ -6,15 +6,14 @@
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 
 <Body:>
-  <div id='controls'>
-    <input id='input' type='text' />
-    <ul id='channels'>
-      {#each channels}<app:channelTab>{/}
+  <div id='container'>
+    <form x-bind='submit: submit'>
+      <input id='input' type='text' placeholder='Enter text here' />
+    </form>
+    <ul id='messages'>
+      {#each _messages}<app:message>{/}
     </ul>
   </div>
-  <ul id='messages'>
-    {#each _messages}<app:message>{/}
-  </ul>
 
 <channelTab:>
   <li><a href='/{{_id}}' class='channel'>