Code Monkey home page Code Monkey logo

smart-time-ago's Introduction

Smart Time Ago

Smart Time Ago is a little jQuery library to update the relative timestamps in your document intelligently. (e.g "3 hours ago").

It's originally built for https://fengche.co/ (Originally Pragmatic.ly).

It's inspired by another jQuery plugin http://timeago.yarp.com/ but give more flexibility and more intelligently.

Installation

You can use it as a jQuery plugin.

Just copy the lib/timeago.js or src/timeago.coffee to your project folder then load it after jQuery.

Or if you use node, you can install it from npm.

$ npm install -g smart-time-ago

Why Smart?

Smart Time Ago will check and update the relative time every 60000 millisecond (60 seconds) in the scope you specify at the beginning. Latter it will check the newest time in your scope then tune the checking time interval to a proper value.

For example, if the newest time in the scope you specify is '2 hours ago'. There is no need to check and update the relative time every 60 seconds. Instead, Smart Time Ago will automaticly make the checking time interval longer to 30 minutes.

Rules:

The newest time is less than 44 minutes, the checking time interval will set to 1 minute.

The newest time is between 44 and 89 minutes, the checking time interval will set to 22 minutes.

The newest time is between 90 minutes and 42 hours, the checking time interval will set to 30 minutes.

The newest time is more than 42 hours, the checking time interval will set to half day.

Usage

By default Smart Time Ago will keep watching on the time elements with a class of timeago and a ISO8601 timestamp in datatime attribute:

<time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

You can initialize the smart-time-ago in global like:

$('body').timeago();

It will watch all your relative time elements by only one TimeAgo instance.

Or you can use it in a specify scope like.

<div class="timeLables">
 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>
 <time class="timeago" datetime="2012-07-18T06:51:50Z">about 9 hours ago</time>
</div>

$('.timeLables').timeago();

It will create one TimeAgo instance to update the time elements in the div with timeLables class.

However you can also create TimeAgo instance for every time element separately like:

$('.timeago').timeago();

BTW if you need dynamic add the time element to your document without refreshing the page or you want to refresh the timeago manually. You might need call the refresh function to refresh the instance like:

$('.timeago').timeago('refresh');

Configuration

There are some default configuration in Smart Time Ago:

$.fn.timeago.defaults = {
  selector: 'time.timeago',
  attr: 'datetime',
  dir: 'up',
  suffix: 'ago'
};

The 'time.timeago' is the default selector to watch and update.

The 'datetime' is the default attribute to put the ISO8601 absolute time to parse.

The 'up' in dir means the elements in your scope is display by time desc. which means if the dir sets to 'up'. Smart Time Ago will treat the first element's time as the newest time to adjust the time interval. Oppositely if it set to 'down', Smart Time Ago will treat the last element's time as the newewst time.

The 'ago' in 'suffix' means the relative generated by Smart Time Ago will look like '3 hours ago'. If you want the text looks like '3 hours from now', you might need change the 'suffix' to 'from now'.

You can change the default configurations by passing the options to timeago function when initialize timeago like:

$('.timeago').timeago({selector: 'span.timeago', attr: 'title', dir: 'down', suffix: 'from now'})

Gem for Rails

Thanks ashchan for writing the ruby gem: timeago-rails

If you wanna running Smart Time Ago in Rails, please do check it out.

TODO

Thanks very much if you could contribute.

Credits

风车协作

Smart Time Ago is maintained and funded by Fengche.co.

Thanks to all the contributors.

Special thanks to unRob for the i18n support.

Copyright (c) 2012 Terry Tai, Fengche.co ([email protected], https://fengche.co/)

smart-time-ago's People

Contributors

andreoav avatar ashchan avatar darookee avatar globegitter avatar jmosbech avatar limenet avatar mattclements avatar mschmidt avatar poiyzy avatar poshboytl avatar sishen avatar unrob avatar whtsky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

smart-time-ago's Issues

'allowFuture' option or built-in Moment.js formatting

Great library! Structured so much nicer than jquery-timeago for single-page js apps in terms of memory usage, etc.

Feature request: support the formatting of future dates like "in 2 months".

  • Either something like the allowFuture option from jquery-timeago (although I think it should be on by default)
  • Or a built-in way to use Moment.js fromNow for the duration formatting. I'm currently doing it this way:
$.fn.timeago.Constructor.prototype.timeAgoInWords = function(timeString) {
    return moment(timeString).fromNow();
};

timeago.da.coffee

Danish locale file:

  $.fn.timeago.defaults.lang = {
    units: {
      second: "sekund",
      seconds: "sekunder",
      minute: "minut",
      minutes: "minutter",
      hour: "time",
      hours: "timer",
      day: "dag",
      days: "dage",
      month: "måned",
      months: "måneder",
      year: "år",
      years: "år"
    },
    prefixes: {
      lt: "mindre end",
      about: "ca.",
      over: "over",
      almost: "næsten",
      ago: ""
    },
    suffix: " siden"
  };

Automatically update for dynamically added time elements

I like the idea of just having to initialize $('body').timeago(); one time globally and then it keeps track of everything automatically but that only seems to work in a limited manner.
I know there is $('body').timeago('refresh'); for scenarios I am talking about but I seem to having issue with my ember.js app (see http://emberjs.com ), which also doesn't seem to be too easy to solve on the ember-side alone.
Basically I have a full JS frontend app, which dynamically loads data from an API. And that is where the issue starts: We have a user-profile, which dynamically loads timestamps from the server for posts. Ember.js doesn't seem to have an event-hook for when it populates the 'datetime' attribute.

To cut straight to the chase, would it be possible to implement some observer that automatically keeps track of programatically inserted/changed attributes at an unknown time?
I would obviously be willing to help, but I am also not quite sure how much time I will have available to do this all by myself.

The things I have found so far, if you are interested:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
http://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FMutationObserver

http://www.w3.org/TR/DOM-Level-3-Events/

At some of these implementations I am worried about performance (with the setInterval implementation). But in any case, let me know what you think and if I should look a bit more into it.

Settings defaults and changing suffix is wrong

Hi

Ways mentioned in the documentation/website are wrong to set default options. Because if you do this

$.fn.timeago.defaults = {
selector: 'time.timeago',
attr: 'datetime',
dir: 'up',
suffix: 'ago'
};

this will replace whole default options written in the pluggin.js file.
You have to manually change single item like

$.fn.timeago.defaults.selector = 'abbr.timeago';
$.fn.timeago.defaults.attr = 'title';

This will do the trick.

Secondly

If you change the direction to down and suffix to "from now" like mentioned on the website. This doesn't change any suffix at all. Becuase in plugin js file you are getting the suffix information from the "options.lang.suffix"

To fix this either pass the suffix like

element.timeago({
dir: 'down',
lang : {
suffix: 'from now'
}
});

but this will cause another problem because the extend you use in plugin is not recursive. You also have to change this and pass true as first argument.

TimeAgo.prototype.init = function(element, options) {
this.$element = $(element);
this.options = $.extend(true, {}, $.fn.timeago.defaults, options);
this.updateTime();
return this.startTimer();
};

Or you can change the plugin to change the location of suffix. Instead of taking this from lang you can place it outside lang.

Or you can add a separate prefix for future tense

What if not UTC?

I had a time stamp that was from 5 minutes ago, but the script output gave me "2 hours ago". My local time zone is UTC+2, so for me I have had to change the source code of the timeago.js file to output the correct time. Would it not be better to have this as a setting which can be overridden if required?

Plugin destroy

I'm using the plugin in a rather dynamic application with many items being added and removed from the DOM. When I add a time item I initialize it with:

this.children('.timeago').timeago();

I'm wondering however how should I go about destroying the listeners and unbinding the plugin. After a first look there's no destroy method available.

Thanks!

Using server time

Any chance to use server time instead of client time?
If server or user clock is off, results will look weird, i.e. '4 minutes ago' just after entry was created.

How to force update?

I need to show the timeago every time I enter the page, not wait until 1 second later. Is there a function to force update?

Thanks!

Future time

The problem with this TimeAgo technology is that it doesn't support future time ... for example I wanted to add a future time for a coupon code expiration, when I use TimeAgo in this case it says about {X} time (AGO).
Is there anything I can do to fix it?
Thanks

Shouldn't assume `$` is available on `window`. Use `jQuery` instead.

It's considered good practice to use jQuery.noConflict() in case other libraries use $ on window. This library should either define $ as a local variable within its closure and assign it jQuery or it should just use jQuery everywhere.

The easiest solution would be to simply add $ = jQuery at the top of the main file.

Simplified Chinese

(function() {

$.fn.timeago.defaults.lang = {
units: {
second: "秒",
seconds: "秒",
minute: "分钟",
minutes: "分钟",
hour: "小时",
hours: "小时",
day: "天",
days: "天",
month: "月",
months: "月",
year: "年",
years: "年"
},
prefixes: {
lt: "不到 1",
about: "大约",
over: "超过",
almost: "接近",
ago: ""
},
suffix: "之前",
now: '刚刚'
};

}).call(this);

Prefix variables missing

Hello,

What about all the other variables used in the original jquery.timego, like prefixAgo, prefixFromNow ?
How con you implement that ?
You should note that some languages, other than English, use different grammar/semantics when building sentences.

thanks

您好,我该怎么设置中文。

我在$.fn.timeago.defaults 设置了lang: 'zh-cn',但是没有效果。尝试过把timeago.js中的文件中defaults中的英文修改为中文。但还是无效。请问,我应该如何修改

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.