social_stream 0.20.2 → 0.21.0

data/presence/app/assets/javascripts/chat_persistence.js

@@ -64,11 +64,19 @@ function storeConversations() {
 
 
 function storeChatConnectionParametres() {
-	if (sessionStorage.getItem("cookie") == null){
-    sessionStorage.setItem("cookie", cookie);
-    sessionStorage.setItem("chat_user_name", user_name);
-    sessionStorage.setItem("chat_user_slug", user_slug);
-    sessionStorage.setItem("chat_user_jid", user_jid);
+	if ((sessionStorage.getItem("cookie") == null)||(sessionStorage.getItem("chat_user_name") == null)){
+		if ((typeof cookie != 'undefined')&&(cookie!=null)){
+			sessionStorage.setItem("cookie", cookie);
+		}
+    if ((typeof user_name != 'undefined') && (user_name != null)) {
+			sessionStorage.setItem("chat_user_name", user_name);
+	  }
+		if ((typeof user_slug != 'undefined') && (user_slug != null)) {
+			sessionStorage.setItem("chat_user_slug", user_slug);
+	  }
+		if ((typeof user_jid != 'undefined') && (user_jid != null)) {
+			sessionStorage.setItem("chat_user_jid", user_jid);
+	  }
 	}	
 }
 
@@ -104,6 +112,7 @@ function getRestoreUserChatStatus(){
 
 
 function restoreChatData(){
+	
   //Check for Session Storage support
   if (! window.sessionStorage){
     return
@@ -162,7 +171,7 @@ function restoreConversations() {
 							 window[getChatVariableFromSlug(guest_slug)].parent().toggle(false);
 						}			
 						if ((visibleMaxSlugs.indexOf(guest_slug)==-1)&&(visibleMinSlugs.indexOf(guest_slug)==-1)){
-              window[getChatVariableFromSlug(guest_slug)].chatbox("option", "boxManager").toggleBox(false);  
+							closeChatBox(guest_slug); 
             }
           } else {
 						//Always created.

data/presence/app/assets/javascripts/chat_utilities.js

@@ -6,6 +6,16 @@ function log(msg) {
     //console.log(msg)
 }
 
+function simulate_new_user_connected(slug) {
+  var stanza_test = '<presence xmlns="jabber:client" from="' + slug + '@localhost/27825459741328802387991286" to="demo@localhost/2517285379132880233667729">'
+  onPresence(stanza_test);
+}
+
+function simulate_new_user_disconnected(slug) {
+  var stanza_test = '<presence xmlns="jabber:client" type="unavailable" from="' + slug + '@localhost/27825459741328802387991286" to="demo@localhost/2517285379132880233667729">'
+  onPresence(stanza_test);
+}
+
 
 ////////////////////
 //Blink page title when focus lost on new messages
@@ -231,6 +241,9 @@ function getNameFromSlug(slug){
 }
 
 
+
+
+
 ////////////////////
 //Next features...
 ////////////////////

data/presence/app/assets/javascripts/chat_window_manager.js

@@ -41,17 +41,7 @@ function createChatBox(guest_slug,guest_name,guest_jid,user_name,user_jid){
 															position: position,
 															priority: visibleChatBoxes.length+1,
 															boxClosed: function(id) {
-                                
-																position = $("#" + guest_slug).chatbox("option", "position");
-																
-																for (i=position+1;i<visibleChatBoxes.length+1;i++){
-																	visibleChatBoxes[i-1].chatbox("option", "offset", visibleChatBoxes[i-1].chatbox("option", "offset") - chatBoxSeparation);
-																	visibleChatBoxes[i-1].chatbox("option", "position", visibleChatBoxes[i-1].chatbox("option", "position") - 1 );
-                                }
-																
-																visibleChatBoxes.splice(position-1,1);
-																$("#" + guest_slug).chatbox("option", "hidden", true);
-																nBox--;
+                                closeChatBox(guest_slug)
 															},
 															
                               messageSent : function(id, user, msg) {
@@ -111,30 +101,73 @@ function getBoxParams(){
 }
 
 
+function closeChatBox(guest_slug){
+	var position = $("#" + guest_slug).chatbox("option", "position");
+                                
+  for (i=position+1;i<visibleChatBoxes.length+1;i++){
+    visibleChatBoxes[i-1].chatbox("option", "offset", visibleChatBoxes[i-1].chatbox("option", "offset") - chatBoxSeparation);
+    visibleChatBoxes[i-1].chatbox("option", "position", visibleChatBoxes[i-1].chatbox("option", "position") - 1 );
+  }
+  
+  visibleChatBoxes.splice(position-1,1);
+  $("#" + guest_slug).chatbox("option", "hidden", true);
+  nBox--;
+}
+
+
 function getChatVariableFromSlug(slug){
 	return "slug_" + slug;
 }
 
-
 function getSlugFromChatVariable(variable){
 	return variable.split("_")[1];
 }
 
 function getVisibleChatBoxes(){
-	
 	for(i=0; i<visibleChatBoxes.length; i++){
 		if (visibleChatBoxes[i][0].id==chatSlugId){
       visibleChatBoxes.splice(i,1)
     }
 	}
-	
 	return visibleChatBoxes
 }
 
+
 function getAllChatBoxes(){
   return $(".chatbox").not(document.getElementById(chatSlugId))
 }
 
+function getChatBoxForSlug(slug){
+  if (typeof window[getChatVariableFromSlug(slug)] == 'undefined') {
+		return null;
+  } else {
+		return window[getChatVariableFromSlug(slug)];
+	}
+}
+
+
+function getAllSlugsWithChatBoxes(){
+	var slugsWithChatBox = [];
+	$.each(getAllChatBoxes(), function(index, value) {
+    slugsWithChatBox.push($(value).attr("id"))
+  });
+	return  slugsWithChatBox;
+}
+
+function getAllDisconnectedSlugsWithChatBoxes(){
+  var slugsWithChatBox = getAllSlugsWithChatBoxes();
+	var slugsConnected = getAllConnectedSlugs();
+	var allDisconnectedSlugsWithChatBox = [];
+	
+	$.each(slugsWithChatBox, function(index, value) {
+		if (slugsConnected.indexOf(value)==-1){
+			allDisconnectedSlugsWithChatBox.push(value);
+		}
+  });
+	return allDisconnectedSlugsWithChatBox;
+}
+
+
 ////////////////////
 //Box replacement
 ////////////////////
@@ -211,6 +244,14 @@ function getVideoEmbedForSlug(slug){
 ///////////////////////////
 
 var mainChatBox;
+var connectionBoxesForFile=5;
+var maxConnectionChatBoxesFilesWithoutOverflow = 11;
+var mainChatBoxWidth=150;
+var mainChatBoxaddonsHeight=50;
+var heightForConnectionBoxFile=30;
+var mainChatBoxHeightWhileSearchContacts=260;
+var mainChatBoxMinHeight=136;
+var mainChatBoxMaxHeight= mainChatBoxaddonsHeight + heightForConnectionBoxFile*maxConnectionChatBoxesFilesWithoutOverflow;
 var chatSlugId="SocialStream_MainChat";
 
 function createMainChatBox(){
@@ -233,22 +274,23 @@ function createMainChatBox(){
 			$(mainChatBox.parent()).find(".ui-chatbox-input").remove();
 			
 			//Set height
-			window[getChatVariableFromSlug(chatSlugId)].css( "height", "180" ); 
+			changeMainChatBoxHeight(getChatBoxHeightRequiredForConnectionBoxes());
 			
 			//Set width
-			var windowWidth=150;
-			window[getChatVariableFromSlug(chatSlugId)].parent().parent().css( "width", windowWidth );
-			$(mainChatBox.parent().parent()).find(".ui-chatbox-titlebar").css( "width", windowWidth-6 );
-			$(mainChatBox).css( "width", windowWidth-6 );
+			window[getChatVariableFromSlug(chatSlugId)].parent().parent().css( "width", mainChatBoxWidth );
+			$(mainChatBox.parent().parent()).find(".ui-chatbox-titlebar").css( "width", mainChatBoxWidth-6 );
+			$(mainChatBox).css( "width", mainChatBoxWidth-6 );
 			
 			
 			//Adjust window offset
-			offsetForFlowBox = 235-windowWidth;
+			offsetForFlowBox = 235-mainChatBoxWidth;
 			
 			//CSS Adjusts
 			$("#chat_partial").css("margin-top",-3)
       $("#chat_partial").css("margin-left",-3)
 			$(".dropdown dd ul").css("min-width",147) 
+			$(mainChatBox).css('overflow-x','hidden')
+      $(mainChatBox).css('overflow-y','hidden')
 			
 			//Header title
 			updateConnectedUsersOfMainChatBox();
@@ -280,3 +322,42 @@ function changeMainChatBoxHeaderTitle(title){
   	$($(mainChatBox.parent().parent()).find(".ui-chatbox-titlebar").find("span")[0]).html(title);
   }
 }
+
+
+function changeMainChatBoxHeight(height){
+	if (mainChatBox != null) {
+		
+		if(($("#search_chat_contact_flexselect").is(":focus"))&&(! (focusSearchContactsFlag))){
+			return;
+		} else {
+			focusSearchContactsFlag=false;
+		}
+		
+		if(height > mainChatBoxMaxHeight){
+      //overflow = true;
+			height = mainChatBoxMaxHeight;
+      $(mainChatBox).css('overflow-y','visible');
+      mainChatBox.chatbox("option", "offset","5px")
+      mainChatBox.chatbox("option", "width", mainChatBoxWidth + 5)
+    } else {
+      $(mainChatBox).css('overflow-y','hidden');
+      mainChatBox.chatbox("option", "offset","0px")
+      mainChatBox.chatbox("option", "width",mainChatBoxWidth)
+			height = Math.max(height,mainChatBoxMinHeight)
+    }
+		
+  	window[getChatVariableFromSlug(chatSlugId)].css("height", height);
+  }
+}
+
+
+function getChatBoxHeightRequiredForConnectionBoxes(){
+	if(mainChatBox!=null){
+	  var desiredHeight = mainChatBoxaddonsHeight + Math.ceil(getAllConnectedSlugs().length/connectionBoxesForFile) * heightForConnectionBoxFile;
+	  return desiredHeight;
+	} else {
+		return null;
+	}
+}
+
+

data/presence/app/assets/javascripts/social_stream-presence.js

@@ -2,4 +2,6 @@
 //= require strophe
 //= require jquery.tools.tooltip
 //= require jquery.ui.chatbox
+//= require jquery.flexselect
+//= require liquidmetal
 //= require_tree .

data/presence/app/assets/javascripts/xmpp_client_management.js.erb

@@ -136,7 +136,8 @@ var awayTimer;
 var timer;
 var reconnectTimer;
 var disconnectionFlag = true;
-var afterNewConnectionFlagFlag = false;
+var afterNewConnectionFlag = false;
+var afterFirstConnectionFlag = true;
 var requestContacts=false;
 var cyclesToRefresh = (refreshMinTime/timerPeriod);
 
@@ -219,8 +220,6 @@ function onConnect(status) {
 		
     awayTimer = setInterval("awayTimerFunction()", awayTimerPeriod);
     timer = setInterval("timerFunction()", timerPeriod);
-		
-    hideAllNotifications();
   }
   
   updateChatWindow();
@@ -285,6 +284,8 @@ function onMessage(msg) {
 ///////
 function onPresence(presence) {
     
+		log(presence)
+		
     //Check presence stanza type
     ptype = $(presence).attr('type');
         
@@ -332,8 +333,8 @@ function processUnavailablePresenceStanza(presence){
   
   if (slug != user_slug) {
     if (getConnectionBoxFromSlug(slug)!=null){
-      hideConnectionBoxFromSlug(slug)
-      showChatNotificationForSlug(slug,$(getConnectionBoxFromSlug(slug)).attr("name") + " is offline");
+      hideConnectionBoxFromSlug(slug);
+			showOfflineChatNotificationForSlug(slug);
 			updateConnectedUsersOfMainChatBox();
     }
   }

data/presence/app/assets/stylesheets/chat.css.scss

@@ -1,6 +1,5 @@
 @import "colors";
 
-
 /* Chatbox style sheet */
 
 .ui-widget-content{
@@ -208,7 +207,10 @@ input.connectChatButton{
 	padding: 2px 0 2px 0px;
 }
 
-
+p.zero_users_connected {
+	text-align: center;
+	margin-top: 10px;
+}
 
 
 /* Tooltip */
@@ -223,6 +225,7 @@ input.connectChatButton{
   color: white;
 	background:transparent url(black_arrow3.png);
 	text-align: center;
+	z-index: 10;
 }
 
 
@@ -283,7 +286,7 @@ input.connectChatButton{
 	width:auto; 
 	min-width:170px; 
 	list-style:none;
-	z-index: 1;
+	z-index: 2;
 }
 	
 .dropdown span.value { 
@@ -350,3 +353,40 @@ a.chatLink:link, a.chatLink:visited {
 a.chatImageLink:link, a.chatImageLink:visited {
     color: $main-color;
 }
+
+
+
+
+/* Chosen stylesheet */
+
+div.allContacts {
+  width: 100px;
+  display: block;
+}
+
+#search_chat_contact_flexselect {
+  background: url('btn/search_icon.png') 5px 50% no-repeat $secondary-color;
+  padding: 0 0px 0 0px;
+  font-size: 11px;
+  color: $main-color;
+  border: solid 1px $input-border-color;
+  height: 25px;
+  width: 122px;
+  padding: 0 3px 0 22px;
+  margin-bottom: 1px;
+}
+
+#search_chat_contact_flexselect_dropdown {
+	background: $secondary-color;
+}
+
+#search_chat_contact_flexselect_dropdown li {
+  background: $secondary-color;
+	font-size: 11px;
+  color: $main-color;
+}
+
+#search_chat_contact_flexselect_dropdown li:hover {
+	background: $separation-color;
+}
+

data/presence/app/assets/stylesheets/social_stream-presence.css

@@ -1,4 +1,5 @@
 /*
  *= require jquery.ui.chatbox
+ *= require flexselect
  *= require_tree .
  */

data/presence/app/helpers/xmpp_helper.rb

@@ -1,7 +1,8 @@
 module XmppHelper
   
   def getChatContacts 
-     connected_users = []   
+     connected_users = []
+     all_users = []
      
      #Get bidirectional contacts
      contacts = current_user.contact_actors(:type=>:user)
@@ -12,9 +13,10 @@ module XmppHelper
        if contact.user.connected
          connected_users << contact.user
        end
+       all_users << contact.user 
      end
 
-    return connected_users  
+    return [connected_users,all_users]  
   end
   
 end

data/presence/app/views/chat/_contacts.html.erb

@@ -1,44 +1,57 @@
-    <div>
-      	
-			<div class="block">
-		    <div class="header">
-		      <%=image_tag("btn/btn_friend.png", :class => "header_icon")%>
-		      <div class="header_text">
-		        <%=t('chat.title')%>
-		      </div>
-		    </div>
-				
-				<div id="status" class="dropdown">
-			    <dt><a href=""><span><%=t('chat.status.choose')%></span></a></dt>
-			    <dd>
-			        <ul id="statusList">
-					      <li><a id="available" href="#" class="option"><img class="flag" src="<%=image_path("status/available.png")%>" alt=""/> <%=t('chat.status.available')%> <span class="value">available</span></a></li>
-					      <li><a id="away" href="#" class="option"><img class="flag" src="<%=image_path("status/away.png")%>" alt=""/> <%=t('chat.status.away')%> <span class="value">away</span></a></li>
-					      <li><a id="dnd" href="#" class="option"><img class="flag" src="<%=image_path("status/dnd.png")%>" alt=""/> <%=t('chat.status.dnd')%> <span class="value">dnd</span></a></li>
-								<li><a id="offline" href="#" class="option"><img class="flag" src="<%=image_path("status/offline.png")%>" alt=""/> <%=t('chat.status.offline')%> <span class="value">offline</span></a></li>
-			        </ul>
-			    </dd>
-        </div>
-				
-		  </div>
+<div>
+	<div class="block">
+    <div class="header">
+      <%=image_tag("btn/btn_friend.png", :class => "header_icon")%>
+      <div class="header_text">
+        <%=t('chat.title')%>
+      </div>
+    </div>
+		
+		<div id="status" class="dropdown">
+	    <dt><a href=""><span><%=t('chat.status.choose')%></span></a></dt>
+	    <dd>
+	      <ul id="statusList">
+			    <li><a id="available" href="#" class="option"><img class="flag" src="<%=image_path("status/available.png")%>" alt=""/> <%=t('chat.status.available')%> <span class="value">available</span></a></li>
+			    <li><a id="away" href="#" class="option"><img class="flag" src="<%=image_path("status/away.png")%>" alt=""/> <%=t('chat.status.away')%> <span class="value">away</span></a></li>
+			    <li><a id="dnd" href="#" class="option"><img class="flag" src="<%=image_path("status/dnd.png")%>" alt=""/> <%=t('chat.status.dnd')%> <span class="value">dnd</span></a></li>
+				  <li><a id="offline" href="#" class="option"><img class="flag" src="<%=image_path("status/offline.png")%>" alt=""/> <%=t('chat.status.offline')%> <span class="value">offline</span></a></li>
+	      </ul>
+	    </dd>
+    </div>
+		
+  </div>
 	
-	    <% @contacts = getChatContacts %>
+  <% @contacts = getChatContacts %>
+  <% @online_contacts = @contacts[0] %>
+	<% @all_contacts = @contacts[1] %>
+
+	<div class="allContacts">      
+    <select data-placeholder="Search Contact" id="search_chat_contact" class="flexselect">
+      <option value=""></option>
+      <% unless @all_contacts.empty? %>
+        <%@all_contacts.each do |contact| %>
+          <option value="<%=contact.slug%>"><%=contact.name%></option>
+        <% end %>
+      <% else %>
+			  <option value="ZERO_CONTACTS"> <%=t('chat.zerocontacts')%></option>
+			<% end %>
+    </select>
+  </div>
 
-			<div class="users_connected">
-				<% unless @contacts.empty? %>
-				  <%@contacts.each do |contact| %>
-							<div class="user_presence" name='<%=contact.name%>' slug='<%=contact.slug%>'>
-								<a title='<%=contact.name%>' class="presence_user_link" width="28">
-								  <%=image_tag(contact.logo.url, :alt => contact.name , :size => "28x28")%>
-									<% if contact.user.status %>
-									  <%=image_tag("status/" + contact.user.status + ".png", :class => "presence_status") %></a>
-									<% end %>
-								</a>
-              </div>
-				  <%end%>
-				<% end %>
-			</div>
-			
-	  </div>
- 	
-		
+	<div class="users_connected">
+	  <% if @online_contacts.empty? %>
+	    <p class="zero_users_connected"> <%=t('chat.zerousers')%> </p>
+	  <% else %>
+		  <%@online_contacts.each do |contact| %>
+			  <div class="user_presence" name='<%=contact.name%>' slug='<%=contact.slug%>'>
+				  <a title='<%=contact.name%>' class="presence_user_link" width="28">
+					  <%=image_tag(contact.logo.url, :alt => contact.name , :size => "28x28")%>
+					  <% if contact.user.status %>
+					    <%=image_tag("status/" + contact.user.status + ".png", :class => "presence_status") %></a>
+					  <% end %>
+					</a>
+        </div>
+		  <%end%>
+		<% end %>
+	</div>	
+</div>