cw-moment.html

<link rel="import" href="../polymer/polymer.html">
<script src="../momentjs/min/moment-with-langs.min.js"></script>

<!--
A Polymer wrapper for moment.js.

##### Example

    <cw-moment datetime="2014-06-05T20:40:26" fromNow></cw-moment>

@element cw-moment
@homepage http://cletusw.github.io/cw-moment
-->
<polymer-element name="cw-moment">

  <template>

    <link rel="stylesheet" href="cw-moment.css" />

    <content></content>

  </template>

  <script>

    Polymer('cw-moment', {

      publish: {
        /**
         * When greater than 0, specifies the time (in seconds) between
         * automatic calls to the `refresh` method.
         *
         * When used as a boolean attribute, the defaultAutoRefreshRate is
         * used.
         *
         * @attribute autoRefresh
         * @type int or bool
         */
        autoRefresh: 0,
        datetime: '',
        format: '',
        formats: {
          reflect: true,
          value: []
        },
        fromNow: false,
        lang: '',
        noSuffix: false,
        strict: false,
        unixOffset: 0,
        unixTimestamp: 0,
        utc: false
      },

      observe: {
        datetime: 'createMoment',
        format: 'createMoment',
        formats: 'createMoment',
        fromNow: 'createMoment',
        lang: 'createMoment',
        noSuffix: 'createMoment',
        strict: 'createMoment',
        unixOffset: 'createMoment',
        unixTimestamp: 'createMoment',
        utc: 'createMoment'
      },

      /**
       * Value that the autoRefresh property should be set to when its
       * corresponding attribute is used as a boolean (no period specified).
       *
       * @property defaultAutoRefreshRate
       * @type int
       */
      defaultAutoRefreshRate: 60,

      intervalId: 0,

      moment: {},

      autoRefreshChanged: function() {
        if (this.intervalId) {
          clearInterval(this.intervalId);
        }

        if (this.autoRefresh === '') {
          this.autoRefresh = this.defaultAutoRefreshRate;
        }
        else if (this.autoRefresh > 0) {
          this.intervalId = setInterval(this.refresh.bind(this), this.autoRefresh * 1000);
        }
      },

      created: function() {
        this.formats = [];
      },

      createMoment: function() {
        if (this.unixOffset) {
          this.moment = moment(this.unixOffset);
        }
        else if (this.unixTimestamp) {
          this.moment = moment.unix(this.unixTimestamp);
        }
        else {
          var fn = this.utc ? moment.utc : moment;
          this.moment = fn(this.datetime || undefined, this.format || ((this.formats && this.formats.length) ? this.formats : undefined), this.lang || undefined, this.strict || undefined);
        }
      },

      momentChanged: function() {
        this.refresh();
      },

      ready: function() {
        this.createMoment();
      },

      /**
       * Updates the text content of this cw-moment.
       *
       * @method refresh
       */
      refresh: function() {
        this.innerText = (this.fromNow) ? this.moment.fromNow(this.noSuffix) : this.moment.format();
      }

    });

  </script>

</polymer-element>