uptodate.js — библиотека для автообновления элементов времени

    Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
    Именно для того чтобы исправить это досадное недоразумение служит uptodate.js

    image



    Использование



    1. Подготовьте таймстемпы в контенте.
      По-умолчанию uptodate берет значение из аттрибута data-time который должен содержать timestamp (number of milliseconds since epoch (00:00:00 UTC on 1970 January 1970))
      Например
       Posted:
       <span class="uptodate" data-time="1367180233904">
           4 minutes ago
       <span>
      

    2. Внедрите библиотеку.
      Всего навсего нужно вызвать единственный метод uptodate()
      Вы можете передать опциональные параметры в вызов, список которых доступен на офсайте
      Например:
       <script src="js/uptodate.js">
       <script type="text/javascript">
           window.onload = function() {
               uptodate();
           };
       </script>
      




    Офсайт | Github

    P.S. Для того чтобы либa работала с русский языком необходимо в параметрах передавать кастомный метод time_ago_in_words: https://github.com/prezjordan/uptodate/blob/master/uptodate.js#L69
    P.S.S. datacompboy подсказал аналог — либу timeago, в состав которой уже входит русская локализация. Офсайт | Github
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 42

      +3
      Ну и чем от timeago.yarp.com/ отличается?
        0
        Похоже что ничем, но в timeago уже есть перевод на русский, добавлю в топик, спасибо.
          +7
          uptodate.js не зависит от jQuery.
            –11
            О, а это сейчас уже минус ))
              +6
              Почему? Зачем использовать jQuery если в данном случае отлично работает getElementsByClassName?
                –2
                Хотя бы ради кроссбраузерности
                  +1
                  Ради IE<9?
                  +2
                  Кстати, если будете использовать el.querySelectorAll('.className') вместо el.getElementsByClassName('className'), то заработает даже в таком старье, как IE8
            +5
            Тогда еще надо упомянуть momentjs.com/ умеющую очень богатый функционал и переводы на кучу языков.
              +3
              Про momentjs я уже писал и это две разные либы. В топике — для автообновления даты в HTML элементе, в то же время как моментжс — для форматирования и работы с датами.
                0
                Посмотрите на Timeago в моментжс, он делает тоже самое. Или в чем тогда большое различие между ними?
                  +2
                  Еще раз поясняю — timeago в momentjs это конвертация Date в строку, например «5 минут назад»

                  Либа в топике — автоматически обновляет дату в контейнере. Например в момент открытия было «оставил комментарий 2 минуты назад». Минутой позже либа заменит контент на «оставил комментарий 3 минуты назад» и так далее.
                    0
                    Спасибо, понял.
                      +1
                      Moment.js делает тоже самое, и точно так же реалтайм апдейтит значение. К тому же с пол пинка работает с AngularJs и имеет очень крутое Api.
                        0
                        Ткните в доку, я ее сегодня 2 раза пропустил.
                        С полпинка работает с AngularJS.

                        Это либа форматирования даты. Она с чем угодно с полпинка работает.
                        И про крутое АПИ, это вообще к чему? Давайте еще с API бекбона сравним.
                          +1
                          Кажется я повременил с выводами, и в действительности обновлялось оно у меня благодаря коду angular, а не самого momentJs.
                          Под крутым апи я имел ввиду, что MomentJs имеет очень богатые возможности интернализации, которые так же дают возможность изменения поведения форматирования даты.
                          К примеру momentJs, имеет 2 метода, вывода даты от текущего числа это fromNow() и calendar(). Но мне хотелось использовать оба метода одновременно. Что бы в пределах того же дня работал метод fromNow(), а в пределах недели уже calendar(), и я это легко реализовал:

                              calendar : {
                                  sameDay: function(){
                                     return  "["+this.fromNow()+"]";
                                  }, //[Сегодня в] LT
                                  nextDay: '[Завтра в] LT',
                                  lastDay: '[Вчера в] LT',
                                  nextWeek: function () {
                                      return this.day() === 2 ? '[Во] dddd [в] LT' : '[В] dddd [в] LT';
                                  },
                                  lastWeek: function () {
                                      return  "["+this.fromNow()+"]";
                                  },
                                  sameElse: 'L'
                              }
                          
                            0
                            Ну так засунуть использование можно и в эту либу.
                            И тут ключевой момент не в форматировании, а в обновлении.
                +5
                по сути, в этой библиотеке более-менее полезный функционал — это только поиск элементов без использования jQuery и установка setInterval, т.е то, что и так можно реализовать за 10 минут и избавиться от зависимости от внешней библиотеки.

                Имеющиеся минусы:
                — чтобы русифицировать нужно переписать основную функцию
                — не решена задача со склонением слов: 1 минута, 2 минуты, 5 минут и т.д.
                т.е. минусы — это именно то, что весьма нужно, но этого нет.

                В чем плюсы?
                  0
                  Тем что вместо того чтобы писать все — нужно написать только функцию которая генерит текст. Я планирую этим заняться на досуге, сделав отдельный бранч.
                  А вообще плюса в том что «это свое а не либа» я не вижу.

                  — чтобы русифицировать нужно переписать основную функцию

                  В случае со своей либой все равно ее придется писать

                  — не решена задача со склонением слов: 1 минута, 2 минуты, 5 минут и т.д.

                  Учитывая то что там вообще поддержки русского из коробки нет — какие могут быть склонения?
                    +1
                    Тем что вместо того чтобы писать все — нужно написать только функцию которая генерит текст.

                    для данной библиотеки эта функция является основной и занимает больше всего места. Т.е получается, что нужно переписывать ядро библиотеки, при этом сама библиотека будет загружена целиком.

                    А вообще плюса в том что «это свое а не либа» я не вижу.

                    конкретно в данном случае: свое = надежность, тем более, что к минусам библиотеки добавлено отсутствие кроссбраузерности.
                      +1
                      Отправьте патч с локализацией и кросс-браузерностью в конце-концов. Все-таки сообщество подразумевает то что если наработки будут выкладываться в опенсорс и использоваться в других проектах это
                      а) сэкономит время других разработчиков
                      б) другие разработчики смогут вносить улучшения.

                      Вы же предлагаете каждому сидеть по своей норе и писать свои велосипеды.
                        0
                        Проще сделать свое, а локализацию и правильность дат обеспечит moment.js
                  –11
                  Прошу вас, не используйте гифки возле текста. Его же читать не возможно, когда сбоку/сверху/снизу что-то мельтешит.
                    0
                    В прошлом моем посте гифки одобрили.
                      +8
                      Не соглашусь. Иногда гифки очень помогают понять идею.
                        –4
                        Как это противоречит тому, что я написал? Гифки можно и под споилер спрятать.
                      +1
                      Можно было бы написать, что всё это добро, будет работать везде, кроме IE < 9.
                        0
                        А разве то старьё ещё кто-то поддерживает?
                          +3
                          Вот честно, хочу оказаться в вашей вселенной, где нет IE < 9 или Opera < 11, ээээххх :[
                            +4
                            Я как раз в такой вселенной)))
                        +14
                        Ко всем, кто любит использовать эту штуку в своих проектах. Пожалуйста, не лишайте пользователей возможности узнать точное время события, показывайте его при наведении хотя бы
                          +6
                          Неистово плюсую. Сильно матерился когда толи на гитхабе толи где-то в подобном месте видел комит «3 days ago», когда мне нужно было точное время.
                          +3
                          я думал вместо span будет тэг time
                            –2
                            С учетом поддержки его — нахрен он там не нужен
                            image
                            developer.mozilla.org/en-US/docs/HTML/HTML_Elements/time#Compatibility
                              0
                              Очень странное и ошибочные утверждение от Вас (как от веб-разработчика).

                              Во-первых, то что по указанной Вами ссылке указано что браузеры не „поддерживают” элемент <time/>, это означает лишь то, что в данном случае они не поддерживают спецификацию HTML5 (однако, это не означает что должно быть проблемы с отображением или с обработкой этого HTML элемента).

                              Например, попробуйте выполнить следующий код в старых версиях браузеров, и увидите что работает без проблем (например в Firefox 3 или IE6):

                              <!DOCTYPE html>
                              <html>
                              <head>
                                <meta charset="utf-8" />
                                <title>time.test</title>
                                <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                              </head>
                              <body>
                                <time datetime="2013-04-29 00:00">???</time><br/>
                                <time datetime="2013-04-30 00:00">???</time>
                                <script>
                                  var times = document.getElementsByTagName('time');
                                  for (var t = 0; t < times.length; t++) {
                                      times[t].innerHTML = times[t].getAttribute('datetime');
                                  }
                                </script>
                              </body>
                              </html>
                              


                              И во-вторых — в своей библиотеке Вы используете функцию document.getElementsByClassName(), которая действительно не будет работать в старых версиях MSIE.
                                +2
                                Во-первых ничто не мешает Вам использовать либу с элементом time, так как вы верно заметили что для выбора элемента используется getElementsByClassName, который не ограничивает теги. Я лишь ограничил для себя использование данного тега, поскольку не вижу в этом смысла, раз он не поддерживается всеми браузерами. Если нужен функционал добавления элемента пользователю в календарь то я использую форма iCalendar
                                Во-вторых либа не моя, и вы запросто можете предложить автору патч.

                                Ну и вообще семантика тега time подразумевает использование его только для добавления какого-то события в календарь пользователя, другого использования я не вижу. А поскольку либа предназначена в основном для подсчета сколько времени прошло с события (хотя ничего не мешает дописать для будущих событий) то тег тут бесполезен, поскольку добавлять в календарь прошедшие события не имеет смысла в 99% случаев.
                                  0
                                  Я написал комментарий только из-за Вашего резкого ответа насчёт элемента <time/>, а не потому что собираюсь использовать эту библиотеку (конечно, я не говорю что такая библиотека бесполезна).

                                  Насчёт семантики элемента <time/>Вы снова заблуждаетесь — в первую очередь этот элемент был создан для того чтобы „программы” (поисковые системы, браузеры и др.) поняли что речь идёт о дате, и во-вторых, единственное ограничение — то что нужно указать реальную дату. Поэтому, если хотите показать дату/время, смело используйте этот элемент (и при необходимости добавьте атрибут pubdate).
                                    0
                                    Ну пардон если было резко — не хотел никого задеть.
                                    А по поводу time я в целом считаю что тег бесполезен :) Недаром его выпиливали из спецификации HTML5
                                      0
                                      > А по поводу time я в целом считаю что тег бесполезен :)
                                      Тогда я уверен, что <time/> далеко не единственный тег которого Вы считаете бесполезным ;)

                                      Не обижайтесь пожалуйста, но Вы напоминаете мне тех людей которые считают, что в HTML должен быть только один тег и все его стили должны задаться через CSS, и при необходимости использовать нужные атрибуты.

                                      > Недаром его выпиливали из спецификации HTML5
                                      Вы хотели сказать: „недаром один разработчик подумал его выпилить, но в итоге, у него ничего не получилось”?
                                        0
                                        Нет, просто я считаю этот тег лишним :)
                                        Ладно, закроем дискуссию — каждый при своем мнении.
                            0
                            Накатал быстрый примерчик, как то странно тики идут jsfiddle.net/j6ggU/1/
                              0
                              period у Вас равен 600. Чтобы обновление секунд было более точным, нужно обновлять не реже, чем раз в полсекунды (а лучше чаще), иначе будет смещение, которое так проявляется.

                              Смотрите, что получается: jsfiddle.net/sompylasar/uhMqL/

                            Only users with full accounts can post comments. Log in, please.