social_stream-presence 0.6.2 → 0.6.3

data/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/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/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/app/assets/stylesheets/social_stream-presence.css

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

data/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/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>	

data/config/locales/en.yml

@@ -6,6 +6,8 @@ en:
     unableconnect: "Chat Out of Service"
     title: "Chat"
     password: "Password"
+    zerousers: "No users connected"
+    zerocontacts: "No contacts found"
     status: 
       choose: "Choose status"
       available: "Available"
@@ -17,4 +19,5 @@ en:
       checkbox: "Enable or disable Social Stream Chat"  
       update: "Update Settings"
     notify:
-      offline: "You are offline"
+      offline: "You are offline"
+      guestOffline: "is offline"

data/config/locales/es.yml

@@ -6,6 +6,8 @@ es:
     unableconnect: "Chat Fuera de servicio"
     title: "Chat"
     password: "Contraseña"
+    zerousers: "No hay contactos conectados"
+    zerocontacts: "No se encontró ningún contacto"
     status:
       choose: "Establecer estado"
       available: "Disponible"
@@ -18,4 +20,4 @@ es:
       update: "Guardar configuración"
     notify:
       offline: "Desconectado"
-       
+      guestOffline: "está desconectado"

data/db/migrate/20110928135031_add_status_column_to_user.rb

@@ -1,6 +1,6 @@
 class AddStatusColumnToUser < ActiveRecord::Migration
   def self.up
-     add_column :users, :status, :string, :default => "chat"
+     add_column :users, :status, :string, :default => "available"
   end
 
   def self.down

data/lib/social_stream/presence/version.rb

@@ -1,5 +1,5 @@
 module Socialstream
   module Presence
-    VERSION = "0.6.2"
+    VERSION = "0.6.3"
   end
 end

data/vendor/assets/javascripts/jquery.flexselect.js

@@ -0,0 +1,265 @@
+/**
+ * flexselect: a jQuery plugin, version: 0.3 (2011-12-17)
+ * @requires jQuery v1.3 or later
+ *
+ * FlexSelect is a jQuery plugin that makes it easy to convert a select box into
+ * a Quicksilver-style, autocompleting, flex matching selection tool.
+ *
+ * For usage and examples, visit:
+ * http://rmm5t.github.com/jquery-flexselect/
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright (c) 2009-2012, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+  $.flexselect = function(select, options) { this.init(select, options); };
+
+  $.extend($.flexselect.prototype, {
+    settings: {
+      allowMismatch: false,
+      selectedClass: "flexselect_selected",
+      dropdownClass: "flexselect_dropdown",
+      inputIdTransform:    function(id)   { return id + "_flexselect"; },
+      inputNameTransform:  function(name) { return; },
+      dropdownIdTransform: function(id)   { return id + "_flexselect_dropdown"; }
+    },
+    select: null,
+    input: null,
+    hidden: null,
+    dropdown: null,
+    dropdownList: null,
+    cache: [],
+    results: [],
+    lastAbbreviation: null,
+    abbreviationBeforeFocus: null,
+    selectedIndex: 0,
+    picked: false,
+    dropdownMouseover: false, // Workaround for poor IE behaviors
+
+    init: function(select, options) {
+      this.settings = $.extend({}, this.settings, options);
+      this.select = $(select);
+      this.preloadCache();
+      this.renderControls();
+      this.wire();
+    },
+
+    preloadCache: function() {
+      this.cache = this.select.children("option").map(function() {
+        return { name: $.trim($(this).text()), value: $(this).val(), score: 0.0 };
+      });
+    },
+
+    renderControls: function() {
+      var selected = this.select.children("option:selected");
+
+      this.hidden = $("<input type='hidden'/>").attr({
+        id: this.select.attr("id"),
+        name: this.select.attr("name")
+      }).val(selected.val());
+
+      this.input = $("<input type='text' autocomplete='off' />").attr({
+        id: this.settings.inputIdTransform(this.select.attr("id")),
+        name: this.settings.inputNameTransform(this.select.attr("name")),
+        accesskey: this.select.attr("accesskey"),
+        tabindex: this.select.attr("tabindex"),
+        style: this.select.attr("style")
+      }).addClass(this.select.attr("class")).val($.trim(selected.text()));
+
+      this.dropdown = $("<div></div>").attr({
+        id: this.settings.dropdownIdTransform(this.select.attr("id"))
+      }).addClass(this.settings.dropdownClass);
+      this.dropdownList = $("<ul></ul>");
+      this.dropdown.append(this.dropdownList);
+
+      this.select.after(this.input).after(this.hidden).remove();
+      $("body").append(this.dropdown);
+    },
+
+    wire: function() {
+      var self = this;
+
+      this.input.click(function() {
+        self.lastAbbreviation = null;
+        self.focus();
+      });
+
+      this.input.mouseup(function(event) {
+        // This is so Safari selection actually occurs.
+        event.preventDefault();
+      });
+
+      this.input.focus(function() {
+        self.abbreviationBeforeFocus = self.input.val();
+        self.input.select();
+        if (!self.picked) self.filterResults();
+      });
+
+      this.input.blur(function() {
+        if (!self.dropdownMouseover) {
+          self.hide();
+          if (!self.settings.allowMismatch && !self.picked) self.reset();
+        }
+      });
+
+      this.dropdownList.mouseover(function (event) {
+        if (event.target.tagName == "LI") {
+          var rows = self.dropdown.find("li");
+          self.markSelected(rows.index($(event.target)));
+        }
+      });
+      this.dropdownList.mouseleave(function () {
+        self.markSelected(-1);
+      });
+      this.dropdownList.mouseup(function (event) {
+        self.pickSelected();
+        self.focusAndHide();
+      });
+      this.dropdown.mouseover(function (event) {
+        self.dropdownMouseover = true;
+      });
+      this.dropdown.mouseleave(function (event) {
+        self.dropdownMouseover = false;
+      });
+      this.dropdown.mousedown(function (event) {
+        event.preventDefault();
+      });
+
+      this.input.keyup(function(event) {
+        switch (event.keyCode) {
+          case 13: // return
+            event.preventDefault();
+            self.pickSelected();
+            self.focusAndHide();
+            break;
+          case 27: // esc
+            event.preventDefault();
+            self.reset();
+            self.focusAndHide();
+            break;
+          default:
+            self.filterResults();
+            break;
+        }
+      });
+
+      this.input.keydown(function(event) {
+        switch (event.keyCode) {
+          case 9:  // tab
+            self.pickSelected();
+            self.hide();
+            break;
+          case 33: // pgup
+            event.preventDefault();
+            self.markFirst();
+            break;
+          case 34: // pgedown
+            event.preventDefault();
+            self.markLast();
+            break;
+          case 38: // up
+            event.preventDefault();
+            self.moveSelected(-1);
+            break;
+          case 40: // down
+            event.preventDefault();
+            self.moveSelected(1);
+            break;
+          case 13: // return
+          case 27: // esc
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+        }
+      });
+    },
+
+    filterResults: function() {
+      var abbreviation = this.input.val();
+      if (abbreviation == this.lastAbbreviation) return;
+
+      var results = [];
+      $.each(this.cache, function() {
+        this.score = LiquidMetal.score(this.name, abbreviation);
+        if (this.score > 0.0) results.push(this);
+      });
+      this.results = results;
+
+      this.sortResults();
+      this.renderDropdown();
+      this.markFirst();
+      this.lastAbbreviation = abbreviation;
+      this.picked = false;
+    },
+
+    sortResults: function() {
+      this.results.sort(function(a, b) { return b.score - a.score; });
+    },
+
+    renderDropdown: function() {
+      var dropdownBorderWidth = this.dropdown.outerWidth() - this.dropdown.innerWidth();
+      var inputOffset = this.input.offset();
+      this.dropdown.css({
+        width: (this.input.outerWidth() - dropdownBorderWidth) + "px",
+        top: (inputOffset.top + this.input.outerHeight()) + "px",
+        left: inputOffset.left + "px"
+      });
+
+      var list = this.dropdownList.html("");
+      $.each(this.results, function() {
+        // list.append($("<li/>").html(this.name + " <small>[" + Math.round(this.score*100)/100 + "]</small>"));
+        list.append($("<li/>").html(this.name));
+      });
+      this.dropdown.show();
+    },
+
+    markSelected: function(n) {
+      if (n > this.results.length) return;
+
+      var rows = this.dropdown.find("li");
+      rows.removeClass(this.settings.selectedClass);
+      this.selectedIndex = n;
+
+      if (n >= 0) $(rows[n]).addClass(this.settings.selectedClass);
+    },
+
+    pickSelected: function() {
+      var selected = this.results[this.selectedIndex];
+      if (selected) {
+        //this.input.val(selected.name);
+        //this.picked = true;
+				if(typeof changeSelectContactValue == "function"){
+          changeSelectContactValue(selected.name,selected.value);
+        } 
+				this.hidden.val(selected.value);
+      } else if (this.settings.allowMismatch) {
+        this.hidden.val("");
+      } else {
+        this.reset();
+      }
+			this.input.val("");
+    },
+
+    hide: function() {
+      this.dropdown.hide();
+      this.lastAbbreviation = null;
+    },
+
+    moveSelected: function(n) { this.markSelected(this.selectedIndex+n); },
+    markFirst:    function()  { this.markSelected(0); },
+    markLast:     function()  { this.markSelected(this.results.length - 1); },
+    reset:        function()  { this.input.val(this.abbreviationBeforeFocus); },
+    focus:        function()  { this.input.focus(); },
+    focusAndHide: function()  { this.hide(); //this.focus();
+    }
+  });
+
+  $.fn.flexselect = function(options) {
+    this.each(function() {
+      if (this.tagName == "SELECT") new $.flexselect(this, options);
+    });
+    return this;
+  };
+})(jQuery);