github-issues.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">

<!--
An element providing a solution to no problem in particular.

Example:

    <seed-element></seed-element>

@demo
-->
<dom-module id="github-issues">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }

    .issue-card {
      color: black;
      width: 300px;
      height: 150px;
      overflow: hidden;
      margin: 5px;
    }
  </style>

  <template>
    <iron-ajax auto
               url="{{url}}"
               handle-as="json"
               last-response="{{response}}"></iron-ajax>
    <template is="dom-repeat" items="{{response}}">
        <paper-card
                heading="{{item.title}}"
                class="issue-card"
                elevation="3">
        </paper-card>
    </template>
  </template>


</dom-module>

<script>

  Polymer({

    is: 'github-issues',

    properties: {
      owner: {
        type: String,
        notify: true,
        value: "Polymer",
      },
      repo: {
        type: String,
        notify: true,
        value: "polymer",
      },
      url: {
        type: String,
        computed: 'compute_url(owner, repo)'
      },
    },
    compute_url: function(owner, repo) {
      return ["https://api.github.com/repos", owner, repo, "issues"].join("/");
    },
  });

</script>