Common.js

CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Clear the cache in Tools → Preferences
/* Any JavaScript here will be loaded for all users on every page load. */

( function() {

  /*============Tooltips============*/

  var $ability_tt = $([
    '<div class="tooltip hidden">',
      '<div class="ability-tt">',
        '<div class="ability-tt--header">',
          '<div class="ability-tt--icon">',
            '<span class="inline-icon">',
              '<span class="inline-icon--overlay">',
                '<img src="blah" />',
              '</span>',
              '<span class="inline-icon--image">',
                '<img src="blah" />',
              '</span>',
            '</span>',
          '</div>',
          '<div class="ability-tt--title"></div>',
          '<div class="ability-tt--spacer"></div>',
          '<div class="ability-tt--shiftkey nodisplay">Shift</div>',
          '<div class="ability-tt--keybind"></div>',
        '</div>',
        '<div class="ability-tt--properties">',  
          '<span class="ability-tt--cooldown"></span>',
          '<div class="ability-tt--spacer"></div>',
          '<span class="ability-tt--type"></span>',
        '</div>',
        '<div class="ability-tt--properties">',  
          '<span class="ability-tt--casttime"></span>',
          '<div class="ability-tt--spacer"></div>',
          '<span class="ability-tt--energy"></span>',
        '</div>',
        '<div class="ability-tt--divider"></div>',
        '<div class="ability-tt--description"></div>',
        '<div class="ability-tt--sub">',
        '</div>',
      '</div>',
    '</div>'
  ].join("\n"));

  $('body').append($ability_tt);

  $('.has_ability-tt')
    .mouseenter(function() {
      renderAbilityTooltip(this, $ability_tt);
      showTooltip($ability_tt);
    })
    .mousemove(function(e) {
      moveTooltip(e, $ability_tt);
    })
    .mouseleave(function() {
      hideTooltip($ability_tt);
    });

  function showTooltip($tt) {
    $tt.removeClass('hidden');
  }

  function moveTooltip(e, $tt) {
    var top = e.clientY + ((e.clientY - $tt.innerHeight() - 20) < 0 ? 20 : -($tt.innerHeight() + 20));
    var left = e.clientX + ((e.clientX + $tt.innerWidth() + 25) > $(window).width() ? -($tt.innerWidth() + 20) : 20);
    $tt.css({
      'position': 'fixed',
      'top': top + 'px',
      'left': left + 'px'
    });
  }

  function hideTooltip($tt) {
    $tt.addClass('hidden');
  }

  function renderAbilityTooltip(container, $tt) {
    $abilityData = $(container).find('.ability-tt--data');
    $tt.find('.ability-tt--title').text($abilityData.data('name'));
    $tt.find('.ability-tt--description').text($abilityData.data('description'));
    $tt.find('.ability-tt--cooldown').text($abilityData.data('cooldown') + ' Cooldown');
    $tt.find('.ability-tt--type').text($abilityData.data('type'));
    $tt.find('.ability-tt--casttime').text($abilityData.data('casttime') + ' Cast Time');
    $tt.find('.ability-tt--energy').text($abilityData.data('energy') + ' Energy');
    
    var key = $abilityData.data('key');
    if (key.substr(0, 5) == 'shift') {
      $tt.find('.ability-tt--shiftkey').removeClass('nodisplay');
      $tt.find('.ability-tt--keybind').text(key.substr(key.indexOf('+') + 1));
    }
    else {
      $tt.find('.ability-tt--shiftkey').addClass('nodisplay');
      $tt.find('.ability-tt--keybind').text(key);
    }  
    
    var $propertyBox = $tt.find('.ability-tt--sub');
    $propertyBox.empty();
    for (var i = 1; i <= 6; i++) {
      var property = $abilityData.data('property' + i);
      if (property !== '') {
        $propertyBox.append([
          '<span>',
            '<span class="ability-tt--sub_title">' + property + '</span>: ' + $abilityData.data('value' + i),
          '</span>'
        ].join("\n"));
      }
    }
    
    var borderSrc = $abilityData.find('.tooltip-border').attr('src');
    var iconSrc = $abilityData.find('.tooltip-image').attr('src');
    $tt.find('.inline-icon--overlay img').attr('src', borderSrc);
    $tt.find('.inline-icon--image img').attr('src', iconSrc);
  }

  /*============Twitch Streams============*/
  RLQ.push(function() {
    $.ajax({
     type: 'GET',
     url: 'https://api.twitch.tv/kraken/search/streams?query=battlerite',
     headers: {
       'Client-ID': 'isk4ekewuwm3l0ctjx648wexavajng'
     },
     success: function(data) {
      $("#mf-streams").html("");
      $.each(data.streams, function(i, stream) {
       $("#mf-streams").append( $("<div>", {id: "stream_" + stream.channel._id, "class": "stream"}).append($("<a>", {href: stream.channel.url, text: stream.channel.display_name}).append($("<p>", {text: stream.channel.status}) ) ) 
       console.log(stream);
      });
     }
    });
  });


}() );