|
|
|
||
| 1 | |||
| 0 | 0 | 0 | |
<html>
<head>
<link rel="stylesheet" href="flair.css">
<script src="flair.js"></script>
</head>
<body onload="makeAPIRequest('meta', '//SITEURL.com', 'USERID')">
<div id="flair-meta-in-here" class="flair-div flair-meta-div-hidden w3-padding-ver-16 w3-theme-l4 flair-meta-div">
<a id="flair-meta-user-profile-link" class="flair" href="">
<table class="flair-table">
<tr>
<td rowspan="3" class="w3-left-align">
<img id="flair-meta-user-display-image" src="" width="70px">
</td>
<td class="w3-right-align" colspan="3">
<img id="flair-meta-site-display-image" src="" width="16px">
<span id="flair-meta-user-display-name">
User
</span>
</td>
</tr>
<tr class="w3-right-align">
<td id="flair-meta-user-reputation" colspan="3">
1
</td>
</tr>
<tr class="w3-right-align">
<td id="flair-meta-user-badge-gold">
<svg height="6" width="6">
<circle cx="3" cy="3" r="3" fill="#ffcc00"/>
</svg>
<span class="flair" id="flair-meta-user-badge-count-gold">
0
</span>
</td>
<td id="flair-meta-user-badge-silver">
<svg height="6" width="6">
<circle cx="3" cy="3" r="3" fill="#c5c5c5"/>
</svg>
<span id="flair-meta-user-badge-count-silver">
0
</span>
</td>
<td id="flair-meta-user-badge-bronze">
<svg height="6" width="6">
<circle cx="3" cy="3" r="3" fill="#cc9966"/>
</svg>
<span id="flair-meta-user-badge-count-bronze">
0
</span>
</td>
</tr>
</table>
</a>
</div>
</body>
</html>
Syntax Highlighting by PrismJS
#flair-meta-user-profile-link {
text-decoration: none;
}
#flair-meta-in-here {
display: block;
/* Change this - default flair is 250px*/
/* 270 minimum for Jon Skeet */
width: 250px;
/* Centre in middle of container */
margin: 0 auto;
/* Pad the box */
padding: 16px;
/* Nice blue-grey background colur */
background-color:#dfe5e8;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
/* Include padding / margin in width */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Don't display untill flair has loaded (and never if API fails)*/
.flair-meta-div-hidden {
display: none !important;
}
/* Position the favicon */
#flair-meta-site-display-image {
margin-bottom: -3px;
}
/* Fill the width of the div */
.flair-table {
width: 100%;
}
.w3-center {
text-align: center;
}
.w3-right-align {
text-align: right;
}
function createCORSRequest(method, url) {
var request = new XMLHttpRequest();
if ('withCredentials' in request) {
request.open(method, url, true);
} else if (typeof XDomainRequest != 'undefined') {
request = new XDomainRequest();
request.open(method, url);
} else {
request = null;
}
return request;
}
function makeflair(data,site) {
document.getElementById('flair-'+site+'-user-badge-count-bronze').innerHTML = data[0];
document.getElementById('flair-'+site+'-user-badge-count-silver').innerHTML = data[1];
document.getElementById('flair-'+site+'-user-badge-count-gold').innerHTML = data[2];
// If a user is a moderator, add the diamond ♦ symbol
var symbol = '';
if (data[8] == 'moderator') {
symbol = '♦';
}
document.getElementById('flair-'+site+'-user-display-name').innerHTML = data[3] + ' ' + symbol;
document.getElementById('flair-'+site+'-user-display-image').src = data[4];
document.getElementById('flair-'+site+'-user-reputation').innerHTML = data[5];
document.getElementById('flair-'+site+'-user-profile-link').href = data[7] + '/users/' + data[6];
document.getElementById('flair-'+site+'-in-here').className = 'w3-padding-ver-16 w3-theme-l4 flair-'+site+'-div';
// Currently SE has a weird system for naming favicons: //meta.stackexchange.com//280163
if (site == 'meta') {
document.getElementById('flair-'+site+'-site-display-image').src = '//cdn.sstatic.net/Sites/stackexchange'+site+'/img/favicon.ico';
} else {
document.getElementById('flair-'+site+'-site-display-image').src = '//cdn.sstatic.net/Sites/'+site+'/img/favicon.ico';
}
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('(.*)? ')[1];
}
function makeAPIRequest(site, siteUrl, userId) {
var key = 'APIKEYHERE';
var filter = '!LnO)*RBcGb8ff5h3LzJPmw';
// If no key provided, don't send key perameter
if (key == '') {
var url = '//api.stackexchange.com/2.2/users/' + userId + '?order=desc&sort=reputation&site='+site+'&filter='+filter;
} else {
var url = '//api.stackexchange.com/2.2/users/' + userId + '?order=desc&sort=reputation&site='+site+'&key='+key+'&filter='+filter;
}
document.getElementById('flair-'+site+'-site-display-image').src = '//cdn.sstatic.net/Sites/'+site+'/img/favicon.ico';
var response = createCORSRequest('GET', url);
response.onload = function() {
var text = response.responseText;
parsedJSON = JSON.parse(text);
try {
var items0 = parsedJSON.items[0]
var data = [items0.badge_counts.bronze, items0.badge_counts.silver, items0.badge_counts.gold, items0.display_name, items0.profile_image, items0.reputation, items0.user_id, siteUrl, items0.user_type]
makeflair(data,site);
}
catch(err) {
console.log(parsedJSON)
}
};
response.send();
}