Skip to content
This repository

New feature suggestion: Add callback on refresh to be able to modify element #60

Open
wants to merge 2 commits into from

2 participants

Joel Larsson Jason Levine
Joel Larsson

Just added a simple callback function to be able to modify the time element on refresh. I use it to be able to style the date depending on the time. For example adding a class old if the time passed 10 minutes and such...

Jason Levine

Wow, this would be awesome. I was coming here to request an event that got fired whenever an element was modified; either way, it'd be great to be able to monitor modifications of the timeago element so that actions can be fired off when the modification meets whatever criteria you're looking for.

(For me, I'm using timeago to show times in the future and in the past, and am looking for a way to know when one of them crosses from the future to the past. Right now, I'm using setInterval to run a script every 500ms that looks at all the timeago elements that contain 'ago' in them, and then making sure I handle those I haven't already discovered... but there HAS to be an easier way!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 33 additions and 6 deletions. Show diff stats Hide diff stats

  1. +19 0 README.markdown
  2. +14 6 jquery.timeago.js
19 README.markdown
Source Rendered
@@ -37,6 +37,25 @@ into something like this:
37 37
38 38 As time passes, the timestamps will automatically update.
39 39
  40 +### Usage with callback on refresh
  41 +
  42 +If you want to have an callback to modify the specific element on refresh, just pass a function as a callback.
  43 +
  44 +```html
  45 +<script type="text/javascript">
  46 + jQuery(document).ready(function() {
  47 + $("abbr.timeago").timeago(function(distance) {
  48 + // my callback function where 'this' is the element and the parameter 'distance' is the difference between the current time and the elements time
  49 + var minutes = (distance / 60) / 1000; // get distance in minutes
  50 + // add old class if the time passes 10 minutes
  51 + if (minutes > 10) {
  52 + $(this).addClass("old");
  53 + }
  54 + });
  55 + });
  56 +</script>
  57 +```
  58 +
40 59 **For more usage and examples**: [http://timeago.yarp.com/](http://timeago.yarp.com/)
41 60
42 61 **For different language configurations**: [http://gist.github.com/6251](http://gist.github.com/6251)
20 jquery.timeago.js 100644 → 100755
@@ -101,22 +101,30 @@
101 101 return $t.parse(iso8601);
102 102 }
103 103 });
104   -
105   - $.fn.timeago = function() {
  104 +
  105 + // callback function param that gets called on each refresh
  106 + $.fn.timeago = function(callback) {
106 107 var self = this;
107   - self.each(refresh);
  108 +
  109 + self.each(function() {
  110 + refresh.call(this, callback);
  111 + });
108 112
109 113 var $s = $t.settings;
110 114 if ($s.refreshMillis > 0) {
111   - setInterval(function() { self.each(refresh); }, $s.refreshMillis);
  115 + setInterval(function() { self.each(function() {refresh.call(this, callback)}); }, $s.refreshMillis);
112 116 }
113 117 return self;
114 118 };
115   -
116   - function refresh() {
  119 +
  120 + function refresh(callback) {
117 121 var data = prepareData(this);
118 122 if (!isNaN(data.datetime)) {
119 123 $(this).text(inWords(data.datetime));
  124 + // make a call to the callback function if it exists
  125 + if (callback) {
  126 + callback.call(this, distance(data.datetime));
  127 + }
120 128 }
121 129 return this;
122 130 }

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.