Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assign class to timeAgo directive base on value being a past or future value. #71

Open
gorgamore opened this issue May 27, 2016 · 1 comment

Comments

@gorgamore
Copy link

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
Copy link
Collaborator

astik commented Oct 15, 2016

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants