butter-github-star/butter-github-star.html at master · JCrestel/butter-github-star · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<dom-module id="butter-github-star">
  <template>
    <style>

      :host{
        display: inline-block;
      }

      .wrapper {
        display: flex;
        align-items: center;
        border:  1px solid var(--butter-border-color,rgba(27,31,35,0.35));
        font-family: var(--butter-font-familly, 'Roboto', 'Noto', sans-serif);
        border-radius: 5px;
      }

      .flexItem1, .flexItem2{
        padding: 0 10px;
        background-color: var(--butter-background-color,#e6ebf1);
      }

      .flexItem1{
        border-right:  1px solid var(--butter-border-color,rgba(27,31,35,0.35));
        border-radius: 5px 0 0 5px;
      }

      .flexItem2{
        background-color: initial;
        border-radius: 0 5px 5px 0;
      }

      iron-icon{
        padding-right: 5px;
        color: var(--butter-icon-color, var(--iron-icon-fill-color, black));
      }
    </style>

    <div class="wrapper">
      <span class="flexItem1"><iron-icon icon="star"></iron-icon>Star</span>
      <span class="flexItem2">{{stars}}</span>
    </div>

  </template>

  <script>
    /**
     * `butter-github-star`
     * Number of stars of a repository Github
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     *
     * ### Styling
     *
     *  `<butter-github-star>` provides the following custom properties for styling:
     *
     *  Custom property | Description | Default
     *  ----------------|-------------|----------
     *  `--butter-icon-color` | Color of the star | --iron-icon-fill-color
     *  `--iron-icon-fill-color` | Color of the star if --butter-icon-color not defined | black
     *  `--butter-background-color` | Background color of left part | #e6ebf1
     *  `--butter-border-color` | Border color | rgba(27,31,35,0.35)
     *  `--butter-font-familly` | Font familly | 'Roboto', 'Noto', sans-serif
     */
    class ButterGithubStar extends Polymer.Element {
      static get is() { return 'butter-github-star'; }

      static get properties() {
        return {
          /**
           * Number of stars
           * @type {number}
           */
          stars: {
            type: Number,
            value: 0
          },
          /** User */
          user: String,
          /** Repository */
          repository: String
        };
      }

      /**
       * connectedCallback
       */
      connectedCallback() {
        super.connectedCallback();

        this._fetchRepository();
      }

      /**
       * Calls the Github's api to get the number of stars of a repository
       */
      _fetchRepository() {
        fetch('https://api.github.com/repos/' + this.user + '/' + this.repository)
          .then(this._handleFetchResponse)
          .then(response => this.stars = response.stargazers_count)
          .catch(console.log);
      }

      /**
       * Handle failed HTTP Responses With fetch() & return the json if Ok
       */
      _handleFetchResponse(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
      }
    }

    window.customElements.define(ButterGithubStar.is, ButterGithubStar);
  </script>
</dom-module>