eventbrite-events.html

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

<dom-module id="eventbrite-events">
  <style>
    .calendar-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAmVBMVEUAAAAKCgoKCwsfICAfICEtLi9KGRQ9P0A9P0FLGhRsbm9sb3BqSkZtIxtzJh51d3h2eHiPlJaQlJeQlZevp6mvqKrJztHKz9LlSzu9lpS9l5W9l5a9w8fCrq7Crq/Eys3Eys7L0NPMPzDU2dvU2dzVlI3aRzfc4OLc4ePeRzje4+Xf4+XlSzvmSzvm6uzm6+znTDzr7/Ds8PGR4h2DAAAAGXRSTlMADg8rLD5UVVVVfn5/f39/f8PExenq+/z+1VNJgAAAAJtJREFUeNp9zckSgjAQRdEGRVEhgEYFldEBEgaF//84i6SNZKF38arrbBrGDAMw04RPQQDYdgfYgu4JRukKLYyT9iVq4ySUStjpzCSyKGJEYlMUjcTxkug+tFyBzl3LEegPWj5intcZx5kgTzmOwpo/qw5HYZZWlxJHIedd2eH8e+TpjzyBm36Y1K8FWofbt+vRAtHMXqrsOfzoDb1GJDLId2UJAAAAAElFTkSuQmCC) no-repeat;
    }
    .event:not(:first-child) {
      margin-top: 20px;
    }
  </style>
  <template>
    <iron-ajax
      auto
      url="{{dataUrl}}"
      handle-as="json"
      last-response="{{eventbrite}}">
    </iron-ajax>
    <template is="dom-repeat" items="[[eventbrite.events]]">
      <article class="event">
        <span class="event-date"><i class="calendar-icon"></i>[[_formatDate(item.start.local)]]</span>
        <h3 class="event-title">[[_getEventTitle(item.description.text)]]</h3>
        <template is="dom-if" if="[[showDescription]]">
          <p class="event-description">[[_getEventDescription(item.description.text)]]</p>
        </template>
      </article>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'eventbrite-events',
    properties: {
      dataUrl: String,
      showDescription: {
        type: Boolean,
        value: false
      }
    },
    _formatDate: function(eventDate) {
      var date = new Date(eventDate),
          day = date.getDate(),
          monthIndex = date.getMonth(),
          year = date.getFullYear();

      return day + '/' + (monthIndex+1) + '/' + year;
    },
    _getEventTitle: function(content) {
      var title = content.split('---')[1];

      if(typeof title !== 'undefined') {
        return title;
      }
    },
    _getEventDescription: function(content) {
      var description = content.split('---')[2];

      if(typeof description !== 'undefined') {
        return description;
      }
    }
  });
</script>