Skip to content
116 changes: 68 additions & 48 deletions src/at.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ angular.module('At', ['ngCaret'])
}
},

insert: function (element, content, data, query, range) {
insert: function (element, content, data, query, range, ngModel) {
var insertNode, pos, sel, source, startStr, text;
if (element.attr('contenteditable') === 'true') {
insertNode = angular.element('<span contenteditable="false">@' + data + '&nbsp;</span>');
Expand All @@ -65,6 +65,7 @@ angular.module('At', ['ngCaret'])
startStr = source.slice(0, Math.max(query.headPos - 1, 0));
text = startStr + '@' + data + ' ' + (source.slice(query.endPos || 0));
element.val(text);
ngModel.$setViewValue(text);
}
},

Expand Down Expand Up @@ -104,7 +105,7 @@ angular.module('At', ['ngCaret'])
};
})

.directive('atUser', function (
.directive('atUser', ['$http', '$timeout', 'Caret', 'AtUtils', function (
$http,
$timeout,
Caret,
Expand All @@ -118,58 +119,70 @@ angular.module('At', ['ngCaret'])
var subtext, caretOffset;
var flag = attrs.flag || '@';
var lineHeight = scope.lineHeight || 16;
var updateInterval = attrs.updateinterval || 5; //ms
scope.isAtListHidden = true;

scope.watchDelayIdle = updateInterval; //ms
scope.watchDelayActive = 5; //ms
scope.watchDelay = scope.watchDelayIdle;
scope.watchTimer = false;

scope.$watch(function () {
return scope.caretPos;
}, function (nowCaretPos) {
if(scope.watchTimer){
$timeout.cancel(scope.watchTimer)
}
scope.watchTimer = $timeout(function(){
if (angular.isDefined(nowCaretPos)) {
scope.content = AtUtils.getContent(element);
subtext = scope.content.slice(0, nowCaretPos);
scope.query = AtUtils.query(subtext, flag);
caretOffset = Caret.getOffset(element);

if (scope.query === null) {
scope.isAtListHidden = true;
scope.watchDelay = scope.watchDelayIdle;
}

if (angular.isDefined(nowCaretPos)) {
scope.content = AtUtils.getContent(element);
subtext = scope.content.slice(0, nowCaretPos);
scope.query = AtUtils.query(subtext, flag);
caretOffset = Caret.getOffset(element);

if (scope.query === null) {
scope.isAtListHidden = true;
}

if (angular.isString(scope.query) && scope.query.length <= 10) {
if (scope.query === '' && element.next().attr('auto-follow') === 'true') {
element.next().find('ul').css({
left: caretOffset.left,
top: caretOffset.top + lineHeight
});
if (angular.isString(scope.query) && scope.query.length <= 10) {
if (scope.query === '' && element.next().attr('auto-follow') === 'true') {
element.next().find('ul').css({
left: caretOffset.left,
top: caretOffset.top + lineHeight
});
}
scope.query = {
'text': scope.query,
'headPos': nowCaretPos - scope.query.length,
'endPos': nowCaretPos
};
}
scope.query = {
'text': scope.query,
'headPos': nowCaretPos - scope.query.length,
'endPos': nowCaretPos
};
}

if (angular.isObject(scope.query)) {
scope.users = scope.response;
scope.isAtListHidden = false;

// $http.get('data/user.json').success(function (response) {
// scope.users = response.users;

// if (scope.users.length === 0) {
// scope.isAtListHidden = true;
// } else {
// scope.isAtListHidden = false;
// $timeout(function () {
// element.next().find('li').first().addClass('list-cur');
// });
// }
// });
if (angular.isObject(scope.query)) {
scope.isAtListHidden = false;
scope.watchDelay = scope.watchDelayActive;

// $http.get('data/user.json').success(function (response) {
// scope.users = response.users;

// if (scope.users.length === 0) {
// scope.isAtListHidden = true;
// } else {
// scope.isAtListHidden = false;
// $timeout(function () {
// element.next().find('li').first().addClass('list-cur');
// });
// }
// });
}
}
}
},scope.watchDelay);
});

element.bind('blur', function () {
scope.isAtListHidden = true;
scope.watchDelay = scope.watchDelayIdle;
});

element.bind('click touch keyup', function () {
Expand All @@ -179,28 +192,30 @@ angular.module('At', ['ngCaret'])
});
}
};
})
}])

.directive('autoComplete', function (
.directive('autoComplete', ['Caret', 'AtUtils', function (
Caret,
AtUtils
) {
'use strict';

return {
restrict: 'EA',
link: function (scope, element) {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var range;
var span = element.next();
var keyCode = {
up: 38,
down: 40,
enter: 13
enter: 13,
tab: 9
};

scope.autoComplete = function (object) {
element[0].focus();
AtUtils.insert(element, scope.content, object.username, scope.query, range);
AtUtils.insert(element, scope.content, object.username, scope.query, range, ngModel);
Caret.setPos(element, scope.query.headPos + object.username.length + 1);
};

Expand Down Expand Up @@ -229,12 +244,17 @@ angular.module('At', ['ngCaret'])
break;

case keyCode.enter:
case keyCode.tab:
e.originalEvent.preventDefault();
if(cur.length == 0) {
AtUtils.select.next(cur,lists);
cur = ul.children('.list-cur');
}
var insertContent = AtUtils.select.choose(cur);

scope.$apply(function () {
range = AtUtils.markRange();
AtUtils.insert(element, scope.content, insertContent, scope.query, range);
AtUtils.insert(element, scope.content, insertContent, scope.query, range, ngModel);
scope.isAtListHidden = true;
});
Caret.setPos(element, scope.query.headPos + insertContent.length + 1);
Expand All @@ -245,5 +265,5 @@ angular.module('At', ['ngCaret'])
});
}
};
});
}]);

12 changes: 6 additions & 6 deletions src/caret.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('ngCaret', [])
.factory('EditableCaret', function (
.factory('EditableCaret', ['CaretUtils', function (
CaretUtils
) {
'use strict';
Expand Down Expand Up @@ -83,9 +83,9 @@ angular.module('ngCaret', [])
};
}
};
})
}])

.factory('InputCaret', function (
.factory('InputCaret', ['Mirror', 'CaretUtils', function (
Mirror,
CaretUtils
) {
Expand Down Expand Up @@ -198,7 +198,7 @@ angular.module('ngCaret', [])
};
}
};
})
}])

.factory('Mirror', function () {
'use strict';
Expand Down Expand Up @@ -282,7 +282,7 @@ angular.module('ngCaret', [])
};
})

.factory('Caret', function (
.factory('Caret', ['InputCaret', 'EditableCaret', function (
InputCaret,
EditableCaret
) {
Expand Down Expand Up @@ -312,4 +312,4 @@ angular.module('ngCaret', [])
}
}
};
});
}]);