Assign class to timeAgo directive base on value being a past or future value.
gorgamore opened this issue · 1 comments
gorgamore commented
I needed a way to style values based on them being past or future. Not sure if this is the correct way to do this but I found it very useful. Hopefully this information can help someone else who needs it.
link: function(scope, elem) {
var fromTime;
// Track changes to fromTime
scope.$watch('fromTime', function(value) {
fromTime = timeAgo.parse(scope.fromTime);
});
// Track changes to time difference
scope.$watch(function() {
return nowTime() - fromTime;
}, function(value) {
var elemHandle = angular.element(elem);
elemHandle.text(timeAgo.inWords(value, fromTime, scope.format));
if(fromTime < nowTime()){
if(elemHandle.hasClass('time-ago-future')){
elemHandle.removeClass('time-ago-future');
}
if(!elemHandle.hasClass('time-ago-past')){
elemHandle.addClass('time-ago-past');
}
}else{
if(elemHandle.hasClass('time-ago-past')){
elemHandle.removeClass('time-ago-past');
}
if(!elemHandle.hasClass('time-ago-future')){
elemHandle.addClass('time-ago-future');
}
}
});
}
astik commented
The current implementation can be quite consuming as the watcher would be executed at every cycle. One idea to make it better, if the date has not changed and is already in the past, no need to check for the classes.
Also, I think this enhancement may not be a timeago feature but a separate directive that works directly on the date. I think the 2 feature should not be linked into a single directive as they are for 2 separate concerns.
@yaru22 any though about that ?