badges.user.js

gistfile1.js

// ==UserScript==
// @name Badge Popups
// @description YAY BADGES
// @version 1.0
// @include *//meta.stackexchange.com/users/*
// @run-at document-end
// ==/UserScript==

var init = function($){
  if($('.people-helped').length == 0) return;
  shuffle = function(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
  };
  $('head').append('<style>.cover{background:rgba(255,255,255,0.5);position:absolute;}.popout{z-index:99;position:absolute;pointer-events:none;width:140px;height:50px;background:#000;color:#bbb;padding:5px;box-sizing:border-box;font-family:helvetica;border-radius:5px;}.popout:after{content: "";position: absolute;bottom: -15px;left: 50px;border-width: 15px 15px 0;border-style: solid;border-color: #000 rgba(0, 0, 0, 0);display: block;width: 0;}</style>');
  $('#badge-dots-table div').css({'position':'relative','cursor':'pointer'});
  $('#badge-dots-table div').addClass('badge-row');
  $('.badge-row').each(function(){
    if(parseInt($(this).css('height')) === 0){
      $(this).remove();
    }
  });
  $.get([location.protocol, '//', location.host, location.pathname, '?tab=badges&tt=activity'].join(''),function(data){
    var page = $(data);
    window.badges = {'badge1':[],'badge2':[],'badge3':[]};
    page.find('.badge').each(function(){
      var q = 1;
      if($(this).parent().find('.item-multiplier').length){
        q = parseInt($(this).parent().find('.item-multiplier-count').text());
      }
      for(var i=0;i<q;i++){
        badges[$(this).find('span').attr('class')].push({'name':$(this).text().trim(),'slug':$(this).text().trim().replace(' ','-')});
      }
    });
    shuffle(badges['badge1']);
    shuffle(badges['badge2']);
    shuffle(badges['badge3']);
    window.locx = -1;
    window.locy = -1;
  });
  $('.badge-row').on('mouseenter',function(){
    if(window.entered) return;
    window.entered = true;
    $(this).append('<div class="popout">Badge!</div>');
  }).on('mousemove',function(e){
    var size = parseInt($(this).parent().find('.badge-row').last().css('height'));
    var x = e.pageX - $(this).offset().left;
    x -= (x % size) - size / 2;
    var y = e.pageY - $(this).offset().top;
    y -= (y % size) - size / 2;
    if(x != locx || y != locy){
      $(this).parent().find('div').first().find('.cover').remove();
      var cover = $('<div class="cover"></div>');
      cover.css({'top':y - size/2,'left':x - size/2,'width':size,'height':size});
      $(this).append(cover);
      $(this).find('.popout').css({'top':y - 65,'left':x - 67});
      locx = x;
      locy = y;
      if($(this).parent().find('.badge-row').length == 2){
        if($('.badge-row').index(this) % 2 == 0){
          var row = parseInt($(this).parent().find('div').first().css('height')) / size;
        }else{
          var row = Math.floor(y/size);
        }
      }else{
        var row = 0;
      }
      var width = parseInt($(this).css('width')) / size;
      var col = (x + size/2) / size - 1;
      var badge_arr = badges['badge' + ($(this).parent().parent().index() + 1)];
      var name = badge_arr[width*row + col]['name'];
      $('.popout').html(name);
      for(var i=0;i<badge_arr.length;i++){
        //unwind array to highlight other badges
        if(badge_arr[i]['name'] === name){
          var crow = Math.floor(i / width);
          var ccol = i % width;
          if(crow == row && ccol == col) continue;
          var cover = $('<div class="cover"></div>');
          cover.css({'top':crow*size,'left':ccol*size,'width':size,'height':size});
          $(this).parent().find('div').first().append(cover);
        }
      }
    }
  }).on('mouseleave',function(){
    window.entered = false;
    $(this).parent().find('div').first().find('.cover').remove();
    $(this).find('.popout').remove();
  });
}

var script = document.createElement('script');
script.type = 'text/javascript';
script.textContent = '(' + init.toString() + ')(jQuery)';
document.body.appendChild(script);