Skip to content

Commit 6137b77

Browse files
HashNukeHashNuke
committed
Adds per-channel chatbox
Signed-off-by: Akash Manohar J <akash@akash.im>
1 parent f981ecb commit 6137b77

16 files changed

+112
-85
lines changed

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

-7
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,6 @@ window.Kandan =
3636
window.broadcaster = new Kandan.Broadcasters.FayeBroadcaster()
3737
window.broadcaster.subscribe "/channels/*"
3838

39-
40-
initChatbox: ()->
41-
chatbox = new Kandan.Views.Chatbox()
42-
$(".main-area").append(chatbox.render().el)
43-
44-
4539
initTabs: ()->
4640
$('#channels').tabs({
4741
select: (event, ui)->
@@ -74,7 +68,6 @@ window.Kandan =
7468
Kandan.registerPlugins()
7569
Kandan.Plugins.initAll()
7670
Kandan.initChatArea(channels)
77-
Kandan.initChatbox()
7871
Kandan.initTabs()
7972
Kandan.Widgets.initAll()
8073

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class Kandan.Views.ChannelPane extends Backbone.View
2+
tagName: 'div'
3+
4+
render: ()->
5+
@channel = @options.channel
6+
7+
paginatedActivitiesView = new Kandan.Views.PaginatedActivities({channel: @channel})
8+
$(@el).html paginatedActivitiesView.render().el
9+
10+
chatbox = new Kandan.Views.Chatbox({channel: @channel})
11+
$(@el).append chatbox.render().el
12+
13+
$(@el).attr "id", "channels-#{@channel.get("id")}"
14+
$(@el).data "channel_id", @channel.get('id')
15+
@

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class Kandan.Views.ChatArea extends Backbone.View
1010
render: ->
1111
$(@el).html(@template({channels: @options.channels}))
1212
for channel in @options.channels.models
13-
view = new Kandan.Views.ListActivities({channel: channel})
13+
view = new Kandan.Views.ChannelPane({channel: channel})
1414
$(@el).append(view.render().el)
1515
$(@el).attr('id', 'channels')
1616
@

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

+10-9
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,31 @@ class Kandan.Views.Chatbox extends Backbone.View
22

33
template: JST['chatbox']
44
tagName: 'div'
5-
className: 'chatbox-area'
5+
className: 'chatbox'
66

77

88
events:
9-
"keypress .chatbox": 'post_message_on_enter'
10-
"click .post-button": 'post_message'
9+
"keypress textarea": 'postMessageOnEnter'
10+
"click button" : 'postMessage'
1111

1212

13-
post_message_on_enter: (event)->
14-
@post_message() if event.keyCode== 13
13+
postMessageOnEnter: (event)->
14+
@postMessage() if event.keyCode== 13
1515

1616

17-
post_message: (event)->
18-
$chatbox = $(".chatbox")
17+
postMessage: (event)->
18+
$chatbox = $(@el).find('textarea')
1919
activity = new Kandan.Models.Activity({
2020
'content': $chatbox.val(),
2121
'action': 'message',
22-
'channel_id': Kandan.Helpers.Channels.getActiveChannelId()
22+
'channel_id': @channel.get('id')
2323
})
2424

2525
activity.save({},{success: ()->
26-
$(".chatbox").val("")
26+
$chatbox = $(@el).find('textarea')
2727
})
2828

2929
render: ()->
30+
@channel = @options.channel
3031
$(@el).html(@template())
3132
@

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

+5-32
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,18 @@
11
class Kandan.Views.ListActivities extends Backbone.View
22
tagName: 'div'
3-
# className: 'activities'
4-
5-
events: {
6-
"click .pagination": "load_more_activities"
7-
}
3+
className: 'channel-activities'
84

95
render: ()->
106
@channel = @options.channel
11-
$activities_list = $("<div class='channel-activities'></div>").attr('id', "channel-activities-#{@channel.get('id')}")
7+
$(@el).attr('id', "channel-activities-#{@channel.get('id')}")
128
oldest = 0
139

1410
if @channel.activities
1511
console.log "channel has activities"
1612
for activity in @channel.activities.models
17-
activity_view = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
18-
$activities_list.append(activity_view.render().el)
19-
oldest = @channel.activities.toJSON()[0].id if @channel.activities.toJSON()[0]
20-
21-
$pagination = $("<div class='pagination'>previous messages</div>")
13+
activityView = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
14+
$(@el).append(activityView.render().el)
2215

23-
$pagination.data('oldest', oldest)
24-
$(@el).append($pagination)
25-
$(@el).find(".pagination").hide() if @channel.more_activities != true
26-
$(@el).append($activities_list)
27-
$(@el).attr('id', "channels-#{@channel.get('id')}")
28-
$(@el).data('channel_id', @channel.get('id'))
16+
$(@el).prev().hide() if @channel.more_activities != true
2917
@
3018

31-
load_more_activities: ()->
32-
oldest = $(@el).find(".pagination").data('oldest')
33-
activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
34-
activities.fetch({
35-
data: { oldest: oldest },
36-
success: (collection)=>
37-
_.each collection.models.reverse(), (activity)=>
38-
activity_view = new Kandan.Views.ShowActivity({activity: activity})
39-
$(@el).find(".channel-activities").prepend(activity_view.render().el)
40-
Kandan.Helpers.Channels.set_pagination_state(
41-
collection.channel_id,
42-
collection.more_activities,
43-
_.last(collection.models).get('id')
44-
)
45-
})

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
class Kandan.Views.PaginatedActivities extends Backbone.View
2+
3+
tagName: 'div'
4+
className: 'paginated_activities'
5+
template: JST['paginated_activities']
6+
7+
events:
8+
"click .pagination": "load_more_activities"
9+
10+
setPagination: ()->
11+
oldestActivityId = 0
12+
if @channel.activities and @channel.activities.models.length > 0
13+
oldestActivityId = _.last(@channel.activities.models).get('id')
14+
15+
$(@el).find(".pagination").data('oldest', oldestActivityId)
16+
17+
18+
render: ()->
19+
@channel = @options.channel
20+
$(@el).html @template()
21+
@setPagination()
22+
23+
listActivitiesView = new Kandan.Views.ListActivities({channel: @channel})
24+
$(@el).append listActivitiesView.render().el
25+
@
26+
27+
28+
load_more_activities: ()->
29+
oldest = $(@el).find(".pagination").data('oldest')
30+
activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
31+
activities.fetch({
32+
data: { oldest: oldest },
33+
success: (collection)=>
34+
for activity in collection.models.reverse()
35+
activityView = new Kandan.Views.ShowActivity({activity: activity})
36+
$(@el).find(".channel-activities").prepend(activityView.render().el)
37+
38+
Kandan.Helpers.Channels.set_pagination_state(
39+
collection.channel_id,
40+
collection.more_activities,
41+
_.last(collection.models).get('id')
42+
)
43+
})
44+

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

-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
//
2-
// Activity
3-
//
4-
51
.activity {
62
float: left;
73
width: 100%;

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

-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
$main-area-width: 80%;
2-
$page-bg: #E6EBEE;
3-
$panel-bg: $page-bg;
4-
5-
$sidebar-width: 20%;
6-
$sidebar-bg: #E6EBEE;
7-
8-
$header-height: 30px;
9-
$header-bg-1: #566569;
10-
$header-bg-2: #3F494B;
11-
$search-bg: #5D676B;
12-
$search-color: #CCC;
13-
14-
$widget-title-color: #7F8587;
15-
$widget-title-bg-1: #F3F8F9;
16-
$widget-title-bg-2: #DBDFE0;
17-
18-
191
@mixin full-height {
202
min-height: 100%;
213
height: 100%;

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2+
3+
14
#channels {
25
border-right: 1px solid #CDD1D4;
36
margin-top: 0px;
@@ -69,9 +72,9 @@
6972
cursor: pointer;
7073
}
7174

72-
.chatbox-area {
75+
.chatbox {
7376
@include border-bottom-radius(4px);
74-
@include background-image(linear-gradient($widget-title-bg-1, $widget-title-bg-2));
77+
@include background-image(linear-gradient($chatbox-bg-1, $chatbox-bg-2));
7578
@include box-shadow(5px 0px 5px -3px #CCC, -5px 0px 5px -3px #CCC, 0px 5px 5px 0px #CCC);
7679
border-top: 1px solid #EBEFF1;
7780
padding: 10px 0px 10px 10px;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.sidebar {
2-
@include full-height;
2+
min-height: 100%;
3+
height: 100%;
34
background: $sidebar-bg;
45
width: $sidebar-width;
56
float: left;

‎app/assets/stylesheets/_variables.scss

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
$panel-bg: #E6EBEE;
2+
$chatbox-bg-1: #F3F8F9;
3+
$chatbox-bg-2: #DBDFE0;
4+
5+
$header-height: 30px;
6+
$header-bg-1: #566569;
7+
$header-bg-2: #3F494B;
8+
9+
$widget-title-color: #7F8587;
10+
$widget-title-bg-1: #F3F8F9;
11+
$widget-title-bg-2: #DBDFE0;
12+
13+
$sidebar-width: 20%;
14+
$sidebar-bg: #E6EBEE;
15+
16+
$search-bg: #5D676B;
17+
$search-color: #CCC;
18+
19+
$page-bg: #E6EBEE;
20+
$main-area-width: 80%;
21+

‎app/assets/stylesheets/application.css.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@import "lib/normalize";
22
@import "bourbon";
3+
4+
@import "variables";
5+
6+
7+
38
@import "base";
49
@import "chat_area";
510
@import "activity";

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
//
2-
// Attachments plugin
3-
//
4-
51
#file {
62
display: none;
73
}
84

95
.file_list {
106
float: left;
11-
clear: both;T
7+
clear: both;
128
width: 100%;
139

1410
.file_item {

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

-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
//
2-
// UserList plugin
3-
//
4-
51
.user_list {
62
padding-bottom: 10px;
73
float: left;

‎app/assets/templates/chatbox.jst.eco

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<textarea class="chatbox"></textarea>
2-
<button class="post-button">Post</button>
1+
<textarea></textarea>
2+
<button>Post</button>

‎app/assets/templates/paginated_activities.jst.eco

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="pagination">previous messages</div>

0 commit comments

Comments
 (0)