StackOverflowElectionBadgeViewer.user.js

// ==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'));
        }
);