Browse Source

Improve buddy sorting. Remove join create extra buddys.

pull/154/head
Evan Theurer 12 years ago
parent
commit
b8d03796f5
  1. 48
      src/styles/components/_buddycondensed.scss
  2. 76
      static/js/directives/buddycondensed.js
  3. 5
      static/js/directives/directives.js
  4. 115
      static/js/libs/jquery/jquery.hoverIntent.js
  5. 5
      static/js/main.js
  6. 8
      static/partials/buddycondensed.html

48
src/styles/components/_buddycondensed.scss

@ -22,6 +22,9 @@ @@ -22,6 +22,9 @@
display: inline-block;
position: fixed;
padding-left: 20px;
@media (max-width: 1125px) {
display: none;
}
}
.buddycondensed {
&.buddy {
@ -34,12 +37,27 @@ @@ -34,12 +37,27 @@
.buddyPicture {
margin: 2px;
}
&:hover .desc {
height: 0;
opacity: 0;
overflow: hidden;
}
.defaultDisplayNum {
&:hover .overDefaultDisplayNum {
height: 51px;
opacity: 1;
overflow: visible;
}
}
.overNum ~ .overDefaultDisplayNum {
width: 250px;
}
.overDefaultDisplayNum {
background: #f8f8f8;
display: none;
display: inline-block;
height: 0;
opacity: 0;
overflow: hidden;
max-width: 80%;
position: fixed;
top: 49px;
}
@ -52,17 +70,27 @@ @@ -52,17 +70,27 @@
display: inline-block;
}
}
.buddyPicture:hover .actions {
height: 51px;
opacity: 1;
}
.actions {
background: #FFF;
border: 1px solid rgba(128, 128, 128, 0.16);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(128,128,128,0.16);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
border-radius: 2px;
display: none;
cursor: default;
height: 51px;
padding: 0 15px;
bottom: 10px;
position: relative;
display: inline-block;
height: 0;
left: 0;
opacity: 0;
overflow: hidden;
padding: 0 10px;
bottom: 12px;
position: absolute;
top: 48px;
-webkit-transition: opacity .1s .1s linear, height .4s .1s ease-out;
transition: opacity .1s .1s linear, height .4s .1s ease-out;
white-space: nowrap;
z-index: 10;
.btn-group {
@ -82,7 +110,7 @@ @@ -82,7 +110,7 @@
}
}
.buddyPicture {
cursor: pointer;
cursor: default;
overflow: visible;
}
}

76
static/js/directives/buddycondensed.js

@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent'], function(angular, $, template) {
define(['jquery', 'text!partials/buddycondensed.html'], function($, template) {
// buddycondensed
return [function() {
@ -34,15 +34,14 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent'] @@ -34,15 +34,14 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent']
return session && session.Id ? session.Id : null;
};
var empty = function(x) {
return x === null || x === undefined || isNaN(x) || x === "";
return x === null || x === undefined || x === "";
};
var sortCondensed = function() {
var unnamed = buddycondensed.length;
buddycondensed.sort(function(current, next) {
if(!current.Status || current.Status && empty(current.Status.displayName)) {
if (!current.Status || current.Status && empty(current.Status.displayName)) {
return 1;
} else {
if(next.Status && !empty(next.Status.displayName)) {
if (next.Status && !empty(next.Status.displayName)) {
if (current.Status.displayName < next.Status.displayName) {
return -1;
} else if (current.Status.displayName > next.Status.displayName) {
@ -58,11 +57,10 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent'] @@ -58,11 +57,10 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent']
};
var joined = function(buddy) {
buddycondensed.push(buddy);
buddycondensed.push(angular.extend({}, buddy));
};
var left = function(id) {
for (var i in buddycondensed) {
if(buddycondensed[i].Id === id) {
if (buddycondensed[i].Id === id) {
buddycondensed.splice(i,1);
break;
}
@ -74,36 +72,35 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent'] @@ -74,36 +72,35 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent']
var hasSession = false;
for (var i in buddycondensed) {
// replace session data with contact data
if(buddycondensed[i].Userid === data.Userid) {
if (buddycondensed[i].Userid === data.Userid) {
buddycondensed[i] = data;
//console.log('contactadded replaced', 'data', data.Status && data.Status.displayName, 'buddycondensed[i]', buddycondensed[i].Status && buddycondensed[i].Status.displayName);
hasSession = true;
break;
}
}
if(!hasSession) {
if (!hasSession) {
joined(data);
}
$scope.$apply();
};
$scope.call = function(userid) {
mediaStream.webrtc.doCall(getContactSessionId(userid));
$scope.doCall = function(buddy) {
mediaStream.webrtc.doCall(getContactSessionId(buddy.Userid));
};
$scope.chat = function(userid) {
$scope.$emit("startchat", getContactSessionId(userid), {
$scope.doChat = function(buddy) {
$scope.$emit("startchat", getContactSessionId(buddy.Userid), {
autofocus: true,
restore: true
});
};
$scope.listDefault = function() {
if(buddycondensed.length >= $scope.maxBuddiesToShow) {
if (buddycondensed.length > $scope.maxBuddiesToShow) {
return buddycondensed.slice(0, $scope.maxBuddiesToShow);
} else {
return buddycondensed;
}
};
$scope.listOverDefault = function() {
if(buddycondensed.length >= $scope.maxBuddiesToShow) {
if (buddycondensed.length > $scope.maxBuddiesToShow) {
return buddycondensed.slice($scope.maxBuddiesToShow);
} else {
return [];
@ -136,52 +133,7 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent'] @@ -136,52 +133,7 @@ define(['angular', 'jquery', 'text!partials/buddycondensed.html', 'hoverIntent']
});
}];
var link = function($scope, elem, attrs, ctrl) {
var overDefaultDisplayNum = elem.find(".overDefaultDisplayNum");
var desc = elem.find(".desc");
var aboveElem1 = false;
var aboveElem2 = false;
var outMoreBuddy = function(event) {
//console.log('out', event.currentTarget.className);
if (event.currentTarget === desc.get(0)) {
aboveElem1 = false;
} else if (event.currentTarget === overDefaultDisplayNum.get(0)) {
aboveElem2 = false;
}
if(!aboveElem1 && !aboveElem2) {
overDefaultDisplayNum.hide();
}
};
var overMoreBuddy = function(event) {
//console.log('out', event.currentTarget.className);
if (event.currentTarget === desc.get(0)) {
aboveElem1 = true;
} else if (event.currentTarget === overDefaultDisplayNum.get(0)) {
aboveElem2 = true;
}
overDefaultDisplayNum.show();
};
elem.hoverIntent({
over: overMoreBuddy,
out: outMoreBuddy,
timeout: 1000,
selector: '.desc, .overDefaultDisplayNum'
});
var overBuddyPicture = function(event) {
//console.log('overBuddyPicture', event.currentTarget.className);
$(event.currentTarget).find(".actions").css("display", "inline-block");
};
var outBuddyPicture = function(event) {
//console.log('outBuddyPicture', event.currentTarget.className);
$(event.currentTarget).find(".actions").css("display", "none");
};
elem.hoverIntent({
over: overBuddyPicture,
out: outBuddyPicture,
timeout: 100,
selector: '.buddyPicture'
});
};
var link = function($scope, elem, attrs, ctrl) {};
return {
restrict: 'E',

5
static/js/directives/directives.js

@ -71,11 +71,8 @@ define([ @@ -71,11 +71,8 @@ define([
presentation: presentation,
youtubevideo: youtubevideo,
bfi: bfi,
<<<<<<< HEAD
title: title
=======
title: title,
buddycondensed: buddycondensed
>>>>>>> 4177988... Add buddycondensed directive and css.
};
var initialize = function(angModule) {

115
static/js/libs/jquery/jquery.hoverIntent.js

@ -1,115 +0,0 @@ @@ -1,115 +0,0 @@
/*!
* hoverIntent v1.8.1 // 2014.08.11 // jQuery v1.9.1+
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*
* You may use hoverIntent under the terms of the MIT license. Basically that
* means you are free to use hoverIntent as long as this header is left intact.
* Copyright 2007, 2014 Brian Cherne
*/
/* hoverIntent is similar to jQuery's built-in "hover" method except that
* instead of firing the handlerIn function immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the event. The handlerOut function is only
* called after a matching handlerIn.
*
* // basic usage ... just like .hover()
* .hoverIntent( handlerIn, handlerOut )
* .hoverIntent( handlerInOut )
*
* // basic usage ... with event delegation!
* .hoverIntent( handlerIn, handlerOut, selector )
* .hoverIntent( handlerInOut, selector )
*
* // using a basic configuration object
* .hoverIntent( config )
*
* @param handlerIn function OR configuration object
* @param handlerOut function OR selector for delegation OR undefined
* @param selector selector OR undefined
* @author Brian Cherne <brian(at)cherne(dot)net>
*/
(function($) {
$.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
// default configuration values
var cfg = {
interval: 100,
sensitivity: 6,
timeout: 0
};
if ( typeof handlerIn === "object" ) {
cfg = $.extend(cfg, handlerIn );
} else if ($.isFunction(handlerOut)) {
cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
} else {
cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
}
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( Math.sqrt( (pX-cX)*(pX-cX) + (pY-cY)*(pY-cY) ) < cfg.sensitivity ) {
$(ob).off("mousemove.hoverIntent",track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = true;
return cfg.over.apply(ob,[ev]);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = false;
return cfg.out.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = $.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// if e.type === "mouseenter"
if (e.type === "mouseenter") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).on("mousemove.hoverIntent",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (!ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "mouseleave"
} else {
// unbind expensive mousemove event
$(ob).off("mousemove.hoverIntent",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};
// listen for mouseenter and mouseleave
return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
};
})(jQuery);

5
static/js/main.js

@ -43,7 +43,6 @@ require.config({ @@ -43,7 +43,6 @@ require.config({
'avltree': 'libs/avltree',
'injectCSS': 'libs/jquery/jquery.injectCSS',
'mobile-events': 'libs/jquery/jquery.mobile-events',
'hoverIntent': 'libs/jquery/jquery.hoverIntent',
'jed': 'libs/jed',
'audiocontext': 'libs/audiocontext',
'rAF': 'libs/rAF',
@ -113,10 +112,6 @@ require.config({ @@ -113,10 +112,6 @@ require.config({
deps: ['jquery'],
exports: '$'
},
'hoverIntent': {
deps: ['jquery'],
exports: '$'
},
'sjcl': {
exports: 'sjcl'
},

8
static/partials/buddycondensed.html

@ -9,8 +9,8 @@ @@ -9,8 +9,8 @@
<span class="actions">
<span class="displayName">{{buddy.Userid|displayName}}</span>
<div class="btn-group">
<a class="btn btn-primary" ng-click="call(buddy.Userid)" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" ng-click="chat(buddy.Userid)" title="Start chat"><i class="fa fa-comments-o"></i></a>
<a class="btn btn-primary" ng-click="doCall(buddy)" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" ng-click="doChat(buddy)" title="Start chat"><i class="fa fa-comments-o"></i></a>
</div>
</span>
</span>
@ -24,8 +24,8 @@ @@ -24,8 +24,8 @@
<span class="actions">
<span class="displayName">{{buddy.Userid|displayName}}</span>
<div class="btn-group">
<a class="btn btn-primary" ng-click="call(buddy.Userid)" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" ng-click="chat(buddy.Userid)" title="Start chat"><i class="fa fa-comments-o"></i></a>
<a class="btn btn-primary" ng-click="doCall(buddy)" title="Start video call"><i class="fa fa-phone"></i></a>
<a class="btn btn-primary" ng-click="doChat(buddy)" title="Start chat"><i class="fa fa-comments-o"></i></a>
</div>
</span>
</span>

Loading…
Cancel
Save