Adds per-channel chatbox

Signed-off-by: Akash Manohar J <akash@akash.im>

app/assets/javascripts/backbone/kandan.js.coffee

@@ -36,12 +36,6 @@ window.Kandan =
     window.broadcaster = new Kandan.Broadcasters.FayeBroadcaster()
     window.broadcaster.subscribe "/channels/*"
 
-
-  initChatbox: ()->
-    chatbox = new Kandan.Views.Chatbox()
-    $(".main-area").append(chatbox.render().el)
-
-
   initTabs: ()->
     $('#channels').tabs({
       select: (event, ui)->
@@ -74,7 +68,6 @@ window.Kandan =
       Kandan.registerPlugins()
       Kandan.Plugins.initAll()
       Kandan.initChatArea(channels)
-      Kandan.initChatbox()
       Kandan.initTabs()
       Kandan.Widgets.initAll()
 

app/assets/javascripts/backbone/views/channel_pane.js.coffee

@@ -0,0 +1,15 @@
+class Kandan.Views.ChannelPane extends Backbone.View
+  tagName: 'div'
+
+  render: ()->
+    @channel = @options.channel
+
+    paginatedActivitiesView = new Kandan.Views.PaginatedActivities({channel: @channel})
+    $(@el).html paginatedActivitiesView.render().el
+
+    chatbox = new Kandan.Views.Chatbox({channel: @channel})
+    $(@el).append chatbox.render().el
+
+    $(@el).attr "id", "channels-#{@channel.get("id")}"
+    $(@el).data "channel_id", @channel.get('id')
+    @

app/assets/javascripts/backbone/views/chatarea.js.coffee

@@ -10,7 +10,7 @@ class Kandan.Views.ChatArea extends Backbone.View
   render: ->
     $(@el).html(@template({channels: @options.channels}))
     for channel in @options.channels.models
-      view = new Kandan.Views.ListActivities({channel: channel})
+      view = new Kandan.Views.ChannelPane({channel: channel})
       $(@el).append(view.render().el)
     $(@el).attr('id', 'channels')
     @

app/assets/javascripts/backbone/views/chatbox.js.coffee

@@ -2,30 +2,31 @@ class Kandan.Views.Chatbox extends Backbone.View
 
   template: JST['chatbox']
   tagName: 'div'
-  className: 'chatbox-area'
+  className: 'chatbox'
 
 
   events:
-    "keypress    .chatbox": 'post_message_on_enter'
-    "click   .post-button": 'post_message'
+    "keypress textarea": 'postMessageOnEnter'
+    "click    button"  : 'postMessage'
 
 
-  post_message_on_enter: (event)->
-    @post_message() if event.keyCode== 13
+  postMessageOnEnter: (event)->
+    @postMessage() if event.keyCode== 13
 
 
-  post_message: (event)->
-    $chatbox = $(".chatbox")
+  postMessage: (event)->
+    $chatbox = $(@el).find('textarea')
     activity = new Kandan.Models.Activity({
       'content':    $chatbox.val(),
       'action':     'message',
-      'channel_id': Kandan.Helpers.Channels.getActiveChannelId()
+      'channel_id': @channel.get('id')
     })
 
     activity.save({},{success: ()->
-      $(".chatbox").val("")
+      $chatbox = $(@el).find('textarea')
     })
 
   render: ()->
+    @channel = @options.channel
     $(@el).html(@template())
     @

app/assets/javascripts/backbone/views/list_activities.js.coffee

@@ -1,45 +1,18 @@
 class Kandan.Views.ListActivities extends Backbone.View
   tagName: 'div'
-  # className: 'activities'
-
-  events: {
-    "click .pagination": "load_more_activities"
-  }
+  className: 'channel-activities'
 
   render: ()->
     @channel = @options.channel
-    $activities_list = $("<div class='channel-activities'></div>").attr('id', "channel-activities-#{@channel.get('id')}")
+    $(@el).attr('id', "channel-activities-#{@channel.get('id')}")
     oldest = 0
 
     if @channel.activities
       console.log "channel has activities"
       for activity in @channel.activities.models
-        activity_view = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
-        $activities_list.append(activity_view.render().el)
-      oldest = @channel.activities.toJSON()[0].id if @channel.activities.toJSON()[0]
-
-    $pagination = $("<div class='pagination'>previous messages</div>")
+        activityView = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
+        $(@el).append(activityView.render().el)
 
-    $pagination.data('oldest', oldest)
-    $(@el).append($pagination)
-    $(@el).find(".pagination").hide() if @channel.more_activities != true
-    $(@el).append($activities_list)
-    $(@el).attr('id', "channels-#{@channel.get('id')}")
-    $(@el).data('channel_id', @channel.get('id'))
+    $(@el).prev().hide() if @channel.more_activities != true
     @
 
-  load_more_activities: ()->
-    oldest = $(@el).find(".pagination").data('oldest')
-    activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
-    activities.fetch({
-      data: { oldest: oldest },
-      success: (collection)=>
-        _.each collection.models.reverse(), (activity)=>
-          activity_view = new Kandan.Views.ShowActivity({activity: activity})
-          $(@el).find(".channel-activities").prepend(activity_view.render().el)
-        Kandan.Helpers.Channels.set_pagination_state(
-          collection.channel_id,
-          collection.more_activities,
-          _.last(collection.models).get('id')
-        )
-    })

app/assets/javascripts/backbone/views/paginated_activities.js.coffee

@@ -0,0 +1,44 @@
+class Kandan.Views.PaginatedActivities extends Backbone.View
+
+  tagName: 'div'
+  className: 'paginated_activities'
+  template: JST['paginated_activities']
+
+  events:
+    "click .pagination": "load_more_activities"
+
+  setPagination: ()->
+    oldestActivityId = 0
+    if @channel.activities and @channel.activities.models.length > 0
+      oldestActivityId = _.last(@channel.activities.models).get('id')
+
+    $(@el).find(".pagination").data('oldest', oldestActivityId)
+
+
+  render: ()->
+    @channel = @options.channel
+    $(@el).html @template()
+    @setPagination()
+
+    listActivitiesView = new Kandan.Views.ListActivities({channel: @channel})
+    $(@el).append listActivitiesView.render().el
+    @
+
+
+  load_more_activities: ()->
+    oldest = $(@el).find(".pagination").data('oldest')
+    activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
+    activities.fetch({
+      data: { oldest: oldest },
+      success: (collection)=>
+        for activity in collection.models.reverse()
+          activityView = new Kandan.Views.ShowActivity({activity: activity})
+          $(@el).find(".channel-activities").prepend(activityView.render().el)
+
+        Kandan.Helpers.Channels.set_pagination_state(
+          collection.channel_id,
+          collection.more_activities,
+          _.last(collection.models).get('id')
+        )
+    })
+

app/assets/stylesheets/activity.css.scss → app/assets/stylesheets/_activity.scss

@@ -1,7 +1,3 @@
-//
-// Activity
-//
-
 .activity {
   float: left;
   width: 100%;

app/assets/stylesheets/base.css.scss → app/assets/stylesheets/_base.scss

@@ -1,21 +1,3 @@
-$main-area-width: 80%;
-$page-bg: #E6EBEE;
-$panel-bg: $page-bg;
-
-$sidebar-width: 20%;
-$sidebar-bg: #E6EBEE;
-
-$header-height: 30px;
-$header-bg-1: #566569;
-$header-bg-2: #3F494B;
-$search-bg: #5D676B;
-$search-color: #CCC;
-
-$widget-title-color: #7F8587;
-$widget-title-bg-1: #F3F8F9;
-$widget-title-bg-2: #DBDFE0;
-
-
 @mixin full-height {
   min-height: 100%;
   height: 100%;

app/assets/stylesheets/chat_area.css.scss → app/assets/stylesheets/_chat_area.scss

@@ -1,3 +1,6 @@
+
+
+
 #channels {
   border-right: 1px solid #CDD1D4;
   margin-top: 0px;
@@ -69,9 +72,9 @@
   cursor: pointer;
 }
 
-.chatbox-area {
+.chatbox {
   @include border-bottom-radius(4px);
-  @include background-image(linear-gradient($widget-title-bg-1, $widget-title-bg-2));
+  @include background-image(linear-gradient($chatbox-bg-1, $chatbox-bg-2));
   @include box-shadow(5px 0px 5px -3px #CCC, -5px 0px 5px -3px #CCC, 0px 5px 5px 0px #CCC);
   border-top: 1px solid #EBEFF1;
   padding: 10px 0px 10px 10px;

app/assets/stylesheets/sidebar.css.scss → app/assets/stylesheets/_sidebar.scss

@@ -1,5 +1,6 @@
 .sidebar {
-  @include full-height;
+  min-height: 100%;
+  height: 100%;
   background: $sidebar-bg;
   width: $sidebar-width;
   float: left;

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,21 @@
+$panel-bg: #E6EBEE;
+$chatbox-bg-1: #F3F8F9;
+$chatbox-bg-2: #DBDFE0;
+
+$header-height: 30px;
+$header-bg-1: #566569;
+$header-bg-2: #3F494B;
+
+$widget-title-color: #7F8587;
+$widget-title-bg-1: #F3F8F9;
+$widget-title-bg-2: #DBDFE0;
+
+$sidebar-width: 20%;
+$sidebar-bg: #E6EBEE;
+
+$search-bg: #5D676B;
+$search-color: #CCC;
+
+$page-bg: #E6EBEE;
+$main-area-width: 80%;
+

app/assets/stylesheets/application.css.scss

@@ -1,5 +1,10 @@
 @import "lib/normalize";
 @import "bourbon";
+
+@import "variables";
+
+
+
 @import "base";
 @import "chat_area";
 @import "activity";

app/assets/stylesheets/plugins/attachments.css.scss → app/assets/stylesheets/plugins/_attachments.scss

@@ -1,14 +1,10 @@
-//
-// Attachments plugin
-//
-
 #file {
   display: none;
 }
 
 .file_list {
   float: left;
-  clear: both;T
+  clear: both;
   width: 100%;
 
   .file_item {

app/assets/stylesheets/plugins/user_list.css.scss → app/assets/stylesheets/plugins/_user_list.scss

@@ -1,7 +1,3 @@
-//
-// UserList plugin
-//
-
 .user_list {
   padding-bottom: 10px;
   float: left;

app/assets/templates/chatbox.jst.eco

@@ -1,2 +1,2 @@
-<textarea class="chatbox"></textarea>
-<button class="post-button">Post</button>
+<textarea></textarea>
+<button>Post</button>

app/assets/templates/paginated_activities.jst.eco

@@ -0,0 +1 @@
+<div class="pagination">previous messages</div>