github-pinboard/example.html at master · copypastel/github-pinboard · 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
<!html>
<html>
<head>
<style>
.gc-circle {
border-radius: 999px;
width: 50px;
height: 50px;
-webkit-box-shadow: 0px 0px 5px #111;
margin: 10px;
float: left;
}

#gc-pinboard {
width: 200px;
margin: 0 auto;
}
</style>
<script>

var GithubPinboard = function(user, repo, containerId) {
  GithubPinboard.containerId = containerId || "githubPinboard";
  var script = document.createElement("script");
  script.setAttribute("src", "https://api.github.com/repos/" + user + "/" + repo + "/contributors?callback=GithubPinboard.parse");

  var stylesheet = document.createElement("link");
  stylesheet.setAttribute("rel", "stylesheet");
  stylesheet.setAttribute("href", "githubpinboard.css");
  stylesheet.setAttribute("type", "text/css");
  stylesheet.setAttribute("media", "screen");

  var head = document.getElementsByTagName("head")[0];
  head.appendChild(script);
  head.appendChild(stylesheet);
}

GithubPinboard.parse = function(response) {
  var meta = response["meta"];
  if (meta["status"] != 200) {
    var error = meta["status"] + " " + response["data"]["message"];
    throw "<GithubPinboard> Error fetching repository: " + error;
  }

  var contributors = response["data"];
  var pinboard = document.createElement("div");
  contributors.forEach( function(contributor) {
    var login = contributor["login"];
    var avatar = contributor["avatar_url"];
    var imagemapName = "#githubpinboard-imagemap-" + login;

    var imagemap = document.createElement("map");
    imagemap.setAttribute("name", imagemapName);
    pinboard.appendChild(imagemap);

    var area = document.createElement("area");
    area.setAttribute("shape", "circle");
    area.setAttribute("coords", "25 25 25");
    area.setAttribute("href", "http://github.com/" + login);
    imagemap.appendChild(area);

    var img = document.createElement("img");
    img.setAttribute("usemap", imagemapName);
    img.setAttribute("class", "githubpinboard-circle");
    img.setAttribute("alt", login);
    img.setAttribute("src", avatar);
    pinboard.appendChild(img);
  });

  document.getElementById(GithubPinboard.containerId).appendChild(pinboard);
}

</script>
</head>
<body id="githubPinboard">
</body>
</html>