iron-timeago.html

<script src="../date-fns/dist/date_fns.min.js"></script>

<link rel="import" href="../polymer/polymer.html" />

<!--
`iron-timeago`
Polymer 1.0 element that shows a date/time as 'some time ago' using https://date-fns.org

@demo demo/index.html
-->

<dom-module id="iron-timeago">
  <template>
    <time datetime="[[datetime]]">[[timeago]]</time>
  </template>

  <script>
    Polymer({
      is: 'iron-timeago',

      properties: {
        /**
         * Output value: the date converted into a human friendly string, e.g. "10 minutes ago"
         */
        timeago: {
          type: String,
          value: '',
          notify: true
        },
        /**
         * Input value, ISO date string of a date that is to be displayed as a human friendly text
         */
        datetime: {
          type: String,
          value: '0000-00-00T00:00:00.000Z'
        },
        /**
         * In milliseconds, the time between updating the string, defaults to a minute
         */
        timeout: {
          type: Number,
          value: 60000
        },
        /**
         * Options as documented here: https://date-fns.org/docs/distanceInWords
         */
        options: {
          type: Object,
          value: {}
        },
      },

      observers: [
        'ready(datetime)',
        'ready(timeout)'
      ],

      ready: function () {
        if (!window.dateFns) {
          return;
        }

        var date = new Date(this.datetime);
        var options = Object.assign({}, this._defaultOptions, this.options);
        var timeago = window.dateFns.distanceInWordsToNow(date, options);
        this.set('timeago', timeago);

        if (this.timeout <= 0) {
          return;
        }

        window.clearTimeout(this.interval);
        this.interval = window.setTimeout(this.ready.bind(this), this.timeout);
      },

      _defaultOptions: {
        includeSeconds: true,
        addSuffix: true
      }
    });
  </script>
</dom-module>