├── README.md
├── index.html
└── timeago.js
/README.md:
--------------------------------------------------------------------------------
1 | timeago
2 | =======
3 |
4 | Turn absolute dates into relative time
5 |
6 | Uses a single 'global' setTimeout call once a second, rather than a separate setInterval for every element
7 |
8 | Init
9 | ----
10 | To start, call ```timeAgo.init();```
11 |
12 |
13 | Adding Dates
14 | ---
15 | To add a relative date, call ```timeAgo.add($el);``` where ```$el``` is a jQuery object containing the element
16 |
17 |
18 | HTML
19 | ---
20 | Can be used with HTML element, but it must have a data attribute of ```datetime``` which is correctly ISO8601 formatted, e.g. ```2013-04-27 22:58:43``` - this can be generated easily with JavaScript or a server-side language
21 |
22 |
23 | Requirements
24 | ---
25 | Just import jQuery, and then the timeAgo script
26 |
27 |
28 | Credits
29 | ---
30 | Inspired by [Smart Time Ago](http://pragmaticly.github.io/smart-time-ago/) and [timeago](http://timeago.yarp.com)
31 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | timeAgo - relative time with JavaScript
6 |
7 |
8 |
9 | timeago - relative time with JavaScript
10 |
11 | Click here button to add new elements
12 | View source to see how it's done
13 |
16 |
17 |
18 |
19 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/timeago.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Calculate relative times
3 | */
4 | var timeAgo = (function() {
5 |
6 | var
7 | timeout,
8 | interval = 1000,
9 | els = [],
10 | init, count, add, parseTime, calculateTimeDifferenceInSeconds, calculateTimeDifference;
11 |
12 | init = function(){
13 | if (!!timeout) return;
14 | count();
15 | };
16 |
17 | add = function($el) {
18 | $el.data('time', parseTime($el.data('datetime')));
19 | els.push($el);
20 | };
21 |
22 | count = function() {
23 | var counter, len, $el, time, difference;
24 |
25 | for (counter = 0, len = els.length; counter < len; counter++) {
26 | $el = els[counter];
27 | time = $el.data('time');
28 | difference = calculateTimeDifference(time);
29 | $el.text(difference);
30 | }
31 |
32 | timeout = setTimeout(count, interval);
33 | };
34 |
35 | parseTime = function(time) {
36 | time = $.trim(time);
37 | time = time.replace(/\.\d\d\d+/, "");
38 | time = time.replace(/-/, "/").replace(/-/, "/");
39 | time = time.replace(/T/, " ").replace(/Z/, " UTC");
40 | time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
41 | return new Date(time);
42 | };
43 |
44 | calculateTimeDifferenceInSeconds = function(time) {
45 | var timeDifference;
46 | timeDifference = new Date().getTime() - time.getTime();
47 | return Math.round((Math.abs(timeDifference) / 1000));
48 | };
49 |
50 | calculateTimeDifference = function(time) {
51 | var sec, min;
52 | sec = calculateTimeDifferenceInSeconds(time);
53 | min = Math.round(sec / 60);
54 |
55 | if (sec < 60) {
56 | return sec + "s";
57 | } else if (min <= 60) {
58 | return min + "m";
59 | } else if (min <= 1439) {
60 | return (Math.round(min / 60)) + "h";
61 | } else if (min <= 43199) {
62 | return (Math.round(min / 1440)) + "d";
63 | } else if (min <= 525599) {
64 | return (Math.round(min / 43200)) + "months";
65 | } else {
66 | return (Math.round(min / 525600)) + " years";
67 | }
68 | };
69 |
70 | return {
71 | init : init,
72 | add : add
73 | };
74 | })();
75 |
--------------------------------------------------------------------------------