Timeago for MODX Revolution & Evolution

timeagoВы наверное наблюдали на github, twitter и.т.д… как время показываеться в реальном времяни. Т.е. 1 минута назад, 5 минут назад и.т.д… + время меняеться на ваших глазах. Вот в поисках такого решения при разработке расширения modxTalks, я и vanchelo , нашли самое лёгкое на наш взгляд решение такой задачи. Вот решил поделиться с вами плагином для jQuery, который автоматически может показывать время в реальном времяни.

И главное, сам сайт Timeago
Проект на github
+ 40 locale/i18n/language
Документация и использование очень простое и есть на оф. сайте Timeago
Простой пример
для MODX Revolution (для Evolution думаю так-же)
1) Скачали с гитхуба проект
2) Подключили jQuery, файл timeago и файл локализации
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
<script src="locales/jquery.timeago.ru.js" type="text/javascript"></script>

3) Варианты расписанны на сайте Timeago, как пример приведу.
<div id="content">
    Топик опубликован 
    <span class="time" title="[[*createdon:strtotime:date=`%c`]]">
        [[*createdon:strtotime:date=`%A, %e %B, %Y`]]            
    </span>        
</div>

главное формат даты — date=`%c` в title, а саму надпись в формате `%A, %e %B, %Y` js заменит сам
4) Теперь это дело запустим
jQuery(document).ready(function() {
  jQuery(".time").timeago();
});

**************************************
Что нам это дало?

— Если не использовать Timeago, то у нас отоброзиться.
Топик опубликован Вторник, 12 Февраля, 2013
— Если подключим Timeago, то будет выглядеть так
Топик опубликован 10 минут назад
и каждую минуту будет меняться время

P.S. Включить будующее
******************

Пользователь Extremum задал вопрос, есть ли способ, чтобы отображало будующее. Я не знал, поэтому не коректно ответил сразу.
Оказываеться есть, и активируеться она просто
jQuery.timeago.settings.allowFuture = true;

Вот и всё, теперь время у вас будет показывать как прошедшее время так и будующее (через… ).

8 комментариев

avatar
Офигенски, иллюзия аякса =)
avatar
Классно, спасибо. Вопрос, а нет в нем функции «наоборот» — не три дня назад, а через три дня? Удобно для интернет-магазинов было бы: «Доставка через %количество% дней».
avatar
нет, ago — это назад, прошедшее время.
avatar
а вот momentjs.com который привёл viktorminator подойдёт для этих целей думаю.
Как пример
1) Качаем с гитхуба плагин
2) Пример кода в ресурсе
<div id="content">Топик опубликован 
    <span class="time" time="[[*createdon:strtotime:date=`%Y%m%d`]]">
        [[*createdon:strtotime:date=`%A, %B %e, %Y`]]            
    </span>        
</div>
<div id="content2">Топик будет закрыт 
    <span class="time" time="[[*unpub_date:strtotime:date=`%Y%m%d`]]">
        [[*unpub_date:strtotime:date=`%A, %B %e, %Y`]]            
    </span>        
</div>

3) Подключаем js
<script src="/assets/components/modxtalks/js/web/lib/jquery-1.9.min.js" type="text/javascript"></script>
<script src="/assets/moment/min/moment.min.js" type="text/javascript"></script>
<script src="/assets/moment/min/lang/ru.js" type="text/javascript"></script>

4) запускаем это дело
<script>
    $(document).ready(function() {
          $('.time').each(function() {
            	var el = $(this);
            el.text(moment(el.attr('time'), "YYYYMMDD").fromNow());
        });
    });
</script
>
******************
На выходе будет такого плана
Топик опубликован 16 часов назад
Топик будет закрыт через 8 часов
P.S. Код выше, поменяет даты только один раз, после загрузки страницы, для того. чтобы обновлять данные каждую минуту, нужно код оформить в функцию и вызывать её через setInterval с заданным времянем
Комментарий отредактирован 2013-02-12 20:25:38 пользователем artdevue
avatar
Написал P.S…. так-что есть такая возможность.
avatar
Спасибо, действительно очень нужная возможность!
avatar
avatar
Классно, большое спасибо!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.