Download as
Browse Code »

Commit 9c5b8242f48b11d77e79423648d68bc55b4853f1

Authored by Rodrigo Souto
1 parent 09f458cb
Exists in master and in 27 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, temp_ratings, tests, tests_fixies

chat: join/leave and room occupants

Showing 3 changed files with 94 additions and 22 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @9c5b824
... ... @@ -57,6 +57,9 @@
57 57 </div>
58 58 </div>
59 59  
  60 + <a class='join room-action'><%= _('Join room') %></a>
  61 + <a class='leave room-action' style="display: none"><%= _('Leave room') %></a>
  62 +
60 63 <div class="buddy-item">
61 64 <li class='%{presence_status}'>
62 65 <a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
... ... @@ -68,7 +71,7 @@
68 71 </div>
69 72  
70 73 <div class="occupant-list-template">
71   - <div class="occupants">
  74 + <div class="occupants room-action">
72 75 <a href="#" class="up"><%= _('Online') %>&nbsp;(<span class="occupants-online">0</span>)</a>
73 76 <ul class='occupant-list'></ul>
74 77 </div>
... ...
public/javascripts/chat.js
  Diff comments   View file @9c5b824
... ... @@ -51,7 +51,7 @@ jQuery(function($) {
51 51 return Jabber.jids[jid_id].unread_messages;
52 52 },
53 53  
54   - insert_or_update_user: function (list, item, jid, name, presence, template, type) {
  54 + insert_or_update_user: function (list, item, jid, name, presence, template, type, remove_on_offline) {
55 55 var jid_id = Jabber.jid_to_id(jid);
56 56 var identifier = Strophe.getNodeFromJid(jid);
57 57 var html = template
... ... @@ -61,12 +61,13 @@ jQuery(function($) {
61 61 .replace('%{name}', name);
62 62  
63 63 $(item).parent().remove();
64   - $(list).append(html);
  64 + if(presence != 'offline' || !remove_on_offline)
  65 + $(list).append(html);
65 66 Jabber.jids[jid_id] = {jid: jid, name: name, type: type, presence: presence};
66 67 },
67 68 insert_or_update_group: function (jid, presence) {
68 69 var jid_id = Jabber.jid_to_id(jid);
69   - var list = $('#buddy-list .buddies ul.online');
  70 + var list = $('#buddy-list .buddies ul.'+presence);
70 71 var item = $('#' + jid_id);
71 72 presence = presence || ($(item).length > 0 ? $(item).parent('li').attr('class') : 'offline');
72 73 log('adding or updating contact ' + jid + ' as ' + presence);
... ... @@ -90,14 +91,22 @@ jQuery(function($) {
90 91 insert_or_update_occupant: function (jid, name, presence, room_jid) {
91 92 log('adding or updating occupant ' + jid + ' as ' + presence);
92 93 var jid_id = Jabber.jid_to_id(jid);
93   - var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul');
  94 + var room_jid_id = Jabber.jid_to_id(room_jid);
  95 + var list = $('#' + Jabber.conversation_prefix + room_jid_id + ' .occupants ul');
94 96 var item = $(list).find('a[data-id='+ jid_id +']');
95   - Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
96   - if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
97   - Jabber.rooms[Jabber.jid_to_id(room_jid)] = {};
  97 + Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat', true);
  98 + if (Jabber.rooms[room_jid_id] === undefined)
  99 + Jabber.rooms[room_jid_id] = {};
  100 +
  101 + var room = Jabber.rooms[room_jid_id];
  102 + if(presence == 'offline') {
  103 + delete Jabber.rooms[room_jid_id][name];
  104 + }
  105 + else {
  106 + Jabber.rooms[room_jid_id][name] = jid;
98 107 }
99   - Jabber.rooms[Jabber.jid_to_id(room_jid)][name] = jid;
100   - list.parents('.occupants').find('.occupants-online').text(list.find('li').length);
  108 +
  109 + list.parents('.occupants').find('.occupants-online').text(Object.keys(Jabber.rooms[room_jid_id]).length);
101 110 },
102 111  
103 112 remove_contact: function(jid) {
... ... @@ -183,6 +192,7 @@ jQuery(function($) {
183 192  
184 193 leave_room: function(room_jid) {
185 194 Jabber.connection.send($pres({from: Jabber.connection.jid, to: room_jid + '/' + $own_name, type: 'unavailable'}))
  195 + Jabber.insert_or_update_group(room_jid, 'offline');
186 196 //FIXME remove group
187 197 },
188 198  
... ... @@ -238,10 +248,10 @@ jQuery(function($) {
238 248 dataType: 'json',
239 249 success: function(data){
240 250 data.each(function(room){
241   - console.log('==> '+room.jid);
242 251 var jid_id = Jabber.jid_to_id(room.jid);
243 252 Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'};
244   - Jabber.insert_or_update_group(room.jid, 'online');
  253 + //FIXME This must check on session if the user is inside the room...
  254 + Jabber.insert_or_update_group(room.jid, 'offline');
245 255 });
246 256 },
247 257 error: function(data, textStatus, jqXHR){
... ... @@ -599,8 +609,11 @@ jQuery(function($) {
599 609 textarea.attr('name', panel.id);
600 610  
601 611 if (Jabber.is_a_room(jid_id)) {
602   - panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
  612 + panel.append(Jabber.template('.occupant-list-template'));
603 613 panel.find('.history').addClass('room');
  614 + var room_actions = $('#chat-templates .room-action').clone();
  615 + room_actions.data('jid', jid);
  616 + panel.find('.history').after(room_actions);
604 617 $('#chat .occupants .occupant-list').perfectScrollbar();
605 618 }
606 619 textarea.attr('data-to', jid);
... ... @@ -793,4 +806,19 @@ jQuery(function($) {
793 806 $('#chat-label').click(function(){
794 807 toggle_chat_window();
795 808 });
  809 +
  810 + $('.room-action.join').live('click', function(){
  811 + Jabber.enter_room($(this).data('jid'));
  812 + $(this).hide();
  813 + $(this).siblings('.leave').show();
  814 + sort_conversations();
  815 + });
  816 +
  817 + $('.room-action.leave').live('click', function(){
  818 + Jabber.leave_room($(this).data('jid'));
  819 + $(this).hide();
  820 + $(this).siblings('.join').show();
  821 + sort_conversations();
  822 + });
  823 +
796 824 });
... ...
public/stylesheets/chat.css
  Diff comments   View file @9c5b824
... ... @@ -68,9 +68,18 @@
68 68 padding: 0;
69 69 margin: 0;
70 70 }
71   -#buddy-list .buddies a:hover, .occupant-list li a:hover {
72   - background-color: #EEEEEC;
  71 +#buddy-list .buddies a:hover {
  72 + background-color: #eeeeec;
73 73 }
  74 +
  75 +.occupant-list li a:hover {
  76 + background-color: black;
  77 +}
  78 +
  79 +.occupant-list .icon-menu-chat-11 {
  80 + background-image: none;
  81 +}
  82 +
74 83 #buddy-list .buddies li a, .occupant-list li a {
75 84 background-position: 0% 50%;
76 85 display: block;
... ... @@ -88,6 +97,10 @@
88 97 max-width: 128px;
89 98 overflow: hidden;
90 99 }
  100 +.occupant-list li a .name {
  101 + color: white;
  102 +}
  103 +
91 104 #buddy-list .buddies li a img, .occupant-list li a img, #chat .avatar {
92 105 border-radius: 5px;
93 106 width: 32px;
... ... @@ -150,9 +163,9 @@
150 163 position: absolute;
151 164 right: 0;
152 165 left: 0;
153   - bottom: 0;
  166 + bottom: 33px;
154 167 height: 80px;
155   - padding: 20px 15px 31px 7px;
  168 + padding-left: 7px;
156 169 }
157 170 .msie7 .conversation .input-div {
158 171 padding-left: 5px;
... ... @@ -184,6 +197,10 @@
184 197 bottom: 100px;
185 198 }
186 199  
  200 +#conversations .history.room {
  201 + bottom: 132px;
  202 +}
  203 +
187 204 #chat .unread-messages {
188 205 height: 32px;
189 206 line-height: 32px;
... ... @@ -266,12 +283,11 @@
266 283 transition: 0.2s;
267 284 }
268 285  
269   -div.occupants {
270   - position: absolute;
271   - width: 100%;
272   - bottom: 98px;
273   - background-color: rgba(0, 0, 0, 0.7);
  286 +.conversation div.occupants {
  287 + bottom: 118px;
  288 + background-color: #2e3436;
274 289 }
  290 +
275 291 div.occupants ul.occupant-list {
276 292 padding: 0;
277 293 margin: 0;
... ... @@ -281,6 +297,10 @@ div.occupants ul.occupant-list {
281 297 display: none;
282 298 border-top: 1px solid rgb(37, 37, 37);
283 299 }
  300 +div.occupants ul.occupant-list {
  301 + text-align: left;
  302 +}
  303 +
284 304 div.occupants > a {
285 305 color: rgb(168, 168, 168);
286 306 text-align: center;
... ... @@ -561,3 +581,24 @@ div.occupants &gt; a.up {
561 581 #chat-label.opened div {
562 582 display: inline-block;
563 583 }
  584 +
  585 +.conversation .room-action {
  586 + position: absolute;
  587 + bottom: 100px;
  588 + left: 7px;
  589 + right: 79px;
  590 + text-align: center;
  591 + cursor: pointer;
  592 + z-index: 1;
  593 + color: white;
  594 + border-radius: 3px;
  595 + font-size: 14px;
  596 +}
  597 +
  598 +.conversation .join {
  599 + background-color: #4E9A06;
  600 +}
  601 +
  602 +.conversation .leave {
  603 + background-color: #A40000;
  604 +}
... ...