Stargazers demo app with style binding

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
  <script data-require="slim.js@*" data-semver="2.8.5" src="https://unpkg.com/slim-js@2.8.12/Slim.min.js"></script>
  <script>
    Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <span>Supported: chrome, firefox, safari! Made with <a href="http://slim.js">slim.js</a>
    </span>
  <stargazers-app></stargazers-app>
</body>

</html>

Slim.tag('stargazer-item',

`
<h2 bind click="handleClick">[[data.login]]</h2>

<style bind>
    :host {
        background-image: url('[[data.avatar_url]]');
        background-size: cover;
        position: relative;
        display: inline-flex;
        flex-direction: column;
        width: [[size]]px;
        height: [[size]]px;
        border: 1px solid black;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border-radius: 1em;
    }

    h2 {
        position: absolute;
        margin: 0;
        padding: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: rgba(0,0,0,0.8);
        color: white;
        font-size: 14px;
        font-family: monospace;
        cursor: pointer;
    }

</style>
`,

class extends Slim {
    get useShadow() { return true; }

    handleClick() {
        this.callAttribute('handle-select', this.data);
    }
});




Slim.tag('stargazers-app',

`<h1 bind>[[repoName]] Stargazers!</h1>
<div>
    <input slim-id="myInput" type="text" placeholder="user/repo" />
    <button click="search">Search...</button>
    <input slim-id="sizeInput" value="[[size]]"/>
    <button click="changeSize">Resize</button>
</div>
<div id="results">
    <span slim-if="isLoading">Loading, please wait...</span>
    <stargazer-item handle-select="handleSelect" size="[[size]]" slim-repeat="stargazers"></stargazer-item>
</div>

<style>
    #results {
        display: flex;
        flex-direction: row;
    }
</style>

`,

class extends Slim {
    get useShadow() { return true; }

    onBeforeCreated() {
        this.repoName = 'eavichay/slim.js';
        this.stargazers = [];
        this.isLoading = true;
        this.size = 128;
    }
    
    changeSize() {
      this.size = this.sizeInput.value;
    }

    onCreated() {
        this.runQuery();
    }

    handleSelect(data) {
        alert(data.html_url);
    }

    search() {
        this.repoName = this.myInput.value;
        this.stargazers = [];
        this.runQuery();
    }

    runQuery() {
        this.isLoading = true;
        fetch(`https://api.github.com/repos/${this.repoName}/stargazers?page=1&per_page=100`)
            .then(response => response.json() )
            .then(stargazers => {
                this.stargazers = stargazers;
                this.isLoading = false;
            })
            .catch( () => {
              this.repoName = "Invalid repo name";
              this.isLoading = false;
            })
    }
});

/* Styles go here */