Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// ==UserScript==
// @name Stack Overflow Badge Info for Moderator Election Candidates
// @namespace https://github.com/edcottrell/
// @version 0.2.0
// @description Shows a prettier breakdown of the candidate's badges that contribute to candidate score
// @author Ed Cottrell
// @license MIT
// @match *://*.askubuntu.com/election*
// @match *://*.mathoverflow.net/election*
// @match *://*.serverfault.com/election*
// @match *://*.stackapps.com/election*
// @match *://*.stackexchange.com/election*
// @match *://*.stackoverflow.com/election*
// @match *://*.superuser.com/election*
// @grant none
// ==/UserScript==
var badgeLists = {
"editing": ['Copy Editor', 'Explainer', 'Organizer', 'Refiner', 'Strunk & White', 'Tag Editor'],
"moderation": ['Civic Duty', 'Cleanup', 'Deputy', 'Electorate', 'Marshal', 'Reviewer', 'Sportsmanship', 'Steward'],
"participation": ['Constituent', 'Convention', 'Enthusiast', 'Investor', 'Quorum', 'Yearling']
},
$badgeInfoBox;
function htmlForInfoBox(badgeType, badgesCandidateHas) {
var badge,
has,
html = "<h4>" + badgeType.charAt(0).toUpperCase() + badgeType.slice(1) + " Badges</h4>";
html += "<ul>";
for (badgeIndex in badgeLists[badgeType]) {
badge = badgeLists[badgeType][badgeIndex];
has = (-1 !== badgesCandidateHas.indexOf(badge));
html += '<li class="' + (has ? "has" : "lacks") + '">' +
badge +
'</li>';
}
html += "</ul>";
return html;
}
jQuery('body').append('<style>' +
'#badgeInfoBox {' +
' display: none;' +
' border: 1px solid #dddddd;' +
' position: absolute;' +
' background-color: #ffffff;' +
' padding: 20px;' +
' border-radius: 5px;' +
'}' +
'#badgeInfoBox h4 {' +
' font-weight: bold;' +
' text-align: center;' +
' margin-top: 0;' +
'}' +
'#badgeInfoBox:before {' +
' border-right-color:#dddddd;' +
'}' +
'#badgeInfoBox div, #badgeInfoBox ul {' +
' margin: 0;' +
'}' +
'#badgeInfoBox li {' +
' list-style-type: none;' +
'}' +
'#badgeInfoBox li.has {' +
' color: rgb(128, 188, 16);' +
'}' +
'#badgeInfoBox li.has:before {' +
' content: "✔";' +
' margin-right: 0.5em;' +
'}' +
'#badgeInfoBox li.lacks {' +
' color: rgb(204, 0, 3);' +
'}' +
'#badgeInfoBox li.lacks:before {' +
' content: "✖";' +
' margin-right: 0.5em;' +
'}' +
'</style>');
jQuery('body').append('<div id="badgeInfoBox"></div>');
$badgeInfoBox = jQuery('#badgeInfoBox');
jQuery('.candidate-score-breakdown ul li:contains("badges")')
.hover(
function () {
var badgeType = jQuery(this).text().replace(/\s+(\S+)[\s\S]+/, "$1"),
badgesCandidateHas = jQuery(this).prop('title'),
html = htmlForInfoBox(badgeType, badgesCandidateHas),
offset = jQuery(this).offset();
$badgeInfoBox
.html(html)
.css({
'display': 'inline',
'top':(parseInt(offset.top) + 5) + 'px',
'left':(parseInt(offset.left) + 80) + 'px'
});
$(this).data('title', badgesCandidateHas)
.prop('title', '');
},
function () {
$badgeInfoBox
.css('display', 'none');
$(this).prop('title', $(this).data('title'));
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment