JS-API-Wrapper/sample.html at master · WaniKani/JS-API-Wrapper · 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
122
123
124
125
126
<html>
<head>
    <title>WaniKani API Wrapper</title>
    <script type="text/javascript" charset="utf-8" src="wanikani.js"></script>
    <style>
    .gravatar {
        display: block;
        width: 150px;
        height: 150px;
        float: left;
    }
    .username {
        margin-bottom: 0;
    }
    .level {

    }
    .level:before {
        content: "Level : ";
    }
    .title {
        margin-top: 0;
        margin-bottom: 0;
    }
    .title:before {
        content: "of Sect ";
    }
    .about {

    }
    .website {
        display: block;
    }
    .topics_count {

    }
    .topics_count::before {
        content: "Scribed ";
    }
    .topics_count::after {
        content: " topics and ";
    }
    .posts_count {

    }
    .posts_count:after {
        content: " posts";
    }
    .creation_date {

    }
    .creation_date:before {
        content: "Effectively born on ";
    }

    </style>
</head>
<body>
    <div id="wanikani-user">

    </div>
    <script>
    var user = (function() {
        var container = document.getElementById('wanikani-user');
        var api_key = window.location.hash.slice(1);  // Remove leading hash;
        if (api_key[0] == '/') {
            api_key = api_key.slice(1);  // Remove optional '/'
        }
        if (api_key.length != 32) {
            container.innerText = 'invalid API key (wrong length) - set as location.hash';
            return;
        }

        var query_error = function() {
            console.log(arguments);
            container.innerText = 'Query Error Occured';
        };

        var build_user_info = function(user) {
            container.appendChild(user.info.image(150, 'gravatar'));
            var e = document.createElement('h1');
            e.innerText = user.info.username();
            e.setAttribute('class', 'username');
            container.appendChild(e);

            e = document.createElement('h2');
            e.innerText = user.info.title();
            e.setAttribute('class', 'title');
            container.appendChild(e);

            e = document.createElement('div');
            e.innerText = user.info.level();
            e.setAttribute('class', 'level');
            container.appendChild(e);

            container.appendChild(user.info.weblink('Website', 'website'));

            e = document.createElement('span');
            e.innerText = user.info.topics_count();
            e.setAttribute('class', 'topics_count');
            container.appendChild(e);

            e = document.createElement('span');
            e.innerText = user.info.posts_count();
            e.setAttribute('class', 'posts_count');
            container.appendChild(e);

            e = document.createElement('div');
            e.innerText = user.info.creation_date();
            e.setAttribute('class', 'creation_date');
            container.appendChild(e);

            e = document.createElement('div');
            e.innerText = user.info.about() || "Hi, I am " + user.info.username() + '!';
            e.setAttribute('class', 'about');
            container.appendChild(e);
        };

        var user = wanikani.getUser(api_key);
        user.getInfo().onSuccess(build_user_info).onError(query_error);
        return user;
    })();

    </script>
</body>
</html>