a few fixes and performance increases:

* username autocompletes on click now instead of showing undefined
* an adjustable 'update interval' stops the huge performance hit by delaying events from firing until the user has stopped typing for a while
* nested controllers can cause issues because of prototypal inheritance if the models are not defined correctly... with ChatCtrl._chatMessage, this was the case. Modified it to fit in better with "best practices". See blog post here: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
This commit is contained in:
Nick Gordon
2013-11-12 20:04:37 -08:00
parent f2aaf88b1c
commit 66c0840e76
2 changed files with 18 additions and 7 deletions

View File

@@ -79,7 +79,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
} }
]) ])
.controller('AutocompleteCtrl', ['$scope', 'Groups', 'User', 'InputCaret', function ($scope,Groups,User,InputCaret) { .controller('AutocompleteCtrl', ['$scope', '$timeout', 'Groups', 'User', 'InputCaret', function ($scope,$timeout,Groups,User,InputCaret) {
$scope.clearUserlist = function() { $scope.clearUserlist = function() {
$scope.response = []; $scope.response = [];
$scope.usernames = []; $scope.usernames = [];
@@ -87,6 +87,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
$scope.addNewUser = function(user) { $scope.addNewUser = function(user) {
if($.inArray(user.user,$scope.usernames) == -1) { if($.inArray(user.user,$scope.usernames) == -1) {
user.username = user.user;
$scope.usernames.push(user.user); $scope.usernames.push(user.user);
$scope.response.push(user); $scope.response.push(user);
} }
@@ -102,6 +103,8 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
} }
} }
$scope.$watch('group.chat',$scope.chatChanged);
$scope.caretChanged = function(newCaretPos) { $scope.caretChanged = function(newCaretPos) {
var relativeelement = $('.-options'); var relativeelement = $('.-options');
var textarea = $('.chat-textarea'); var textarea = $('.chat-textarea');
@@ -119,12 +122,20 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
} }
} }
$scope.$watch('group.chat',$scope.chatChanged); $scope.updateTimer = false;
$scope.$watch(function () { return $scope.caretPos; },$scope.caretChanged);
$scope.$watch(function () { return $scope.caretPos; },function(newCaretPos) {
if($scope.updateTimer){
$timeout.cancel($scope.updateTimer)
}
$scope.updateTimer = $timeout(function(){
$scope.caretChanged(newCaretPos);
},$scope.watchDelay)
});
}]) }])
.controller('ChatCtrl', ['$scope', 'Groups', 'User', function($scope, Groups, User){ .controller('ChatCtrl', ['$scope', 'Groups', 'User', function($scope, Groups, User){
$scope._chatMessage = ''; $scope.message = {content:''};
$scope._sending = false; $scope._sending = false;
$scope.postChat = function(group, message){ $scope.postChat = function(group, message){
@@ -137,7 +148,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'A
}else if(data.message){ }else if(data.message){
group.chat.unshift(data.message); group.chat.unshift(data.message);
} }
$scope._chatMessage = ''; $scope.message.content = '';
$scope._sending = false; $scope._sending = false;
}, function(err){ }, function(err){
$scope._sending = false; $scope._sending = false;

View File

@@ -1,8 +1,8 @@
form(ng-submit='postChat(group,_chatMessage)') form(ng-submit='postChat(group,message.content)')
.-options .-options
//FIXME ng-model makes this painfully slow! using jquery for now, which is really non-angular-like //FIXME ng-model makes this painfully slow! using jquery for now, which is really non-angular-like
.control-group.option-large(ng-controller='AutocompleteCtrl') .control-group.option-large(ng-controller='AutocompleteCtrl')
textarea.chat-textarea.option-content(style='height:6em;', ui-keypress='{13:"postChat(group,_chatMessage)"}', ng-model='_chatMessage', flag='@', at-user, auto-complete) textarea.chat-textarea.option-content(style='height:6em;', ui-keypress='{13:"postChat(group,message.content)"}', ng-model='message.content', updateinterval='250', flag='@', at-user, auto-complete)
span.user-list(ng-show='!isAtListHidden') span.user-list(ng-show='!isAtListHidden')
ul.list-at-user ul.list-at-user
li(ng-repeat='user in users | filter:query.text | limitTo: 5', ng-click='autoComplete(user)') li(ng-repeat='user in users | filter:query.text | limitTo: 5', ng-click='autoComplete(user)')