Merge pull request #142 from saithis/tooltip

Added jQuery UI tooltips; fixes #42; patch by saithis

code/boot.js

@@ -153,11 +153,11 @@ window.setupPlayerStat = function() {
   var cls = PLAYER.team === 'ALIENS' ? 'enl' : 'res';
 
 
-  var t = 'Level:\t\t' + level + '\n'
-        + 'XM:\t\t\t' + PLAYER.energy + ' / ' + xmMax + '\n'
-        + 'AP:\t\t\t' + digits(ap) + '\n'
+  var t = 'Level:\t' + level + '\n'
+        + 'XM:\t' + PLAYER.energy + ' / ' + xmMax + '\n'
+        + 'AP:\t' + digits(ap) + '\n'
         + (level < 8 ? 'level up in:\t' + lvlUpAp + ' AP' : 'Congrats! (neeeeerd)')
-        + '\n\Invites:\t\t'+PLAYER.available_invites;
+        + '\n\Invites:\t'+PLAYER.available_invites;
         + '\n\nNote: your player stats can only be updated by a full reload (F5)';
 
   $('#playerstat').html(''
@@ -189,6 +189,50 @@ window.setupSidebarToggle = function() {
   });
 }
 
+window.setupTooltips = function() {
+  $(document).tooltip({
+    // enable mouse tracking
+    track: true,
+    // disable show/hide animation
+    show: false,
+    hide: false,
+    content: function() {
+      var title = $(this).attr('title');
+
+      // check if it should be converted to a table
+      if(!title.match(/\t/)) {
+        return title.replace(/\n/g, '<br />');
+      }
+
+      var data = [];
+      var columnCount = 0;
+
+      // parse data
+      var rows = title.split('\n');
+      $.each(rows, function(i, row) {
+        data[i] = row.split('\t');
+        if(data[i].length > columnCount) columnCount = data[i].length;
+      });
+
+      // build the table
+      var tooltip = '<table>';
+      $.each(data, function(i, row) {
+        tooltip += '<tr>';
+        $.each(data[i], function(k, cell) {
+          var attributes = '';
+          if(k === 0 && data[i].length < columnCount) {
+            attributes = ' colspan="'+(columnCount - data[i].length + 1)+'"';
+          }
+          tooltip += '<td'+attributes+'>'+cell+'</td>';
+        });
+        tooltip += '</tr>';
+      });
+      tooltip += '</table>';
+      return tooltip;
+    }
+  });
+}
+
 
 // BOOTING ///////////////////////////////////////////////////////////
 
@@ -204,6 +248,7 @@ function boot() {
   window.setupSidebarToggle();
   window.updateGameScore();
   window.setupPlayerStat();
+  window.setupTooltips();
   window.chat.setup();
   // read here ONCE, so the URL is only evaluated one time after the
   // necessary data has been loaded.
@@ -232,10 +277,11 @@ function asyncLoadScript(a){return function(b,c){var d=document.createElement("s
 // contains the default Ingress map style.
 var LLGMAPS = 'http://breunigs.github.com/ingress-intel-total-conversion/dist/leaflet_google.js';
 var JQUERY = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
+var JQUERYUI = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js';
 var LEAFLET = 'http://cdn.leafletjs.com/leaflet-0.5/leaflet.js';
 var AUTOLINK = 'http://breunigs.github.com/ingress-intel-total-conversion/dist/autolink.js';
 
 // after all scripts have loaded, boot the actual app
-load(JQUERY, LEAFLET, AUTOLINK).then(LLGMAPS).onError(function (err) {
+load(JQUERY, LEAFLET, AUTOLINK).then(LLGMAPS, JQUERYUI).onError(function (err) {
   alert('Could not all resources, the script likely won’t work.\n\nIf this happend the first time for you, it’s probably a temporary issue. Just wait a bit and try again.\n\nIf you installed the script for the first time and this happens:\n– try disabling NoScript if you have it installed\n– press CTRL+SHIFT+K in Firefox or CTRL+SHIFT+I in Chrome/Opera and reload the page. Additional info may be available in the console.\n– Open an issue at https://github.com/breunigs/ingress-intel-total-conversion/issues');
 }).thenRun(boot);

code/game_status.js

@@ -15,7 +15,7 @@ window.updateGameScore = function(data) {
   var es = '<span class="enl" style="width:'+ep+'%;">&nbsp;'+Math.round(ep)+'%</span>';
   $('#gamestat').html(rs+es).one('click', function() { window.updateGameScore() });
   // help cursor via “#gamestat span”
-  $('#gamestat').attr('title', 'Resistance:\t\t'+r+' MindUnits\nEnlightenment:\t'+e+' MindUnits');
+  $('#gamestat').attr('title', 'Resistance:\t'+r+' MindUnits\nEnlightenment:\t'+e+' MindUnits');
 
   window.setTimeout('window.updateGameScore', REFRESH_GAME_SCORE*1000);
 }

code/portal_detail_display_tools.js

@@ -56,10 +56,10 @@ window.getModDetails = function(d) {
     }
   });
 
-  var t = '<span title="'+modsTitle[0]+'" style="color:'+modsColor[0]+'">'+mods[0]+'</span>'
-        + '<span title="'+modsTitle[1]+'" style="color:'+modsColor[1]+'">'+mods[1]+'</span>'
-        + '<span title="'+modsTitle[2]+'" style="color:'+modsColor[2]+'">'+mods[2]+'</span>'
-        + '<span title="'+modsTitle[3]+'" style="color:'+modsColor[3]+'">'+mods[3]+'</span>'
+  var t = '<span'+(modsTitle[0].length ? ' title="'+modsTitle[0]+'"' : '')+' style="color:'+modsColor[0]+'">'+mods[0]+'</span>'
+        + '<span'+(modsTitle[1].length ? ' title="'+modsTitle[1]+'"' : '')+' style="color:'+modsColor[1]+'">'+mods[1]+'</span>'
+        + '<span'+(modsTitle[2].length ? ' title="'+modsTitle[2]+'"' : '')+' style="color:'+modsColor[2]+'">'+mods[2]+'</span>'
+        + '<span'+(modsTitle[3].length ? ' title="'+modsTitle[3]+'"' : '')+' style="color:'+modsColor[3]+'">'+mods[3]+'</span>'
 
   return t;
 }
@@ -117,10 +117,10 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
     var max = RESO_NRG[level];
     var fillGrade = nrg/max*100;
 
-    var inf = 'energy:\t\t' + nrg   + ' / ' + max + ' (' + Math.round(fillGrade) + '%)\n'
-            + 'level:\t\t'  + level + '\n'
+    var inf = 'energy:\t' + nrg   + ' / ' + max + ' (' + Math.round(fillGrade) + '%)\n'
+            + 'level:\t'  + level + '\n'
             + 'distance:\t' + dist  + 'm\n'
-            + 'owner:\t\t'  + nick  + '\n'
+            + 'owner:\t'  + nick  + '\n'
             + 'octant:\t' + OCTANTS[slot];
 
     var style = 'width:'+fillGrade+'%; background:'+COLORS_LVL[level]+';';
@@ -159,8 +159,8 @@ window.getDestroyAP = function(d) {
   function tt(text) {
     var t = 'Destroy:\n';
     t += resoCount  + '×\tResonators\t= ' + digits(resoAp) + '\n';
-    t += linkCount  + '×\tLinks\t\t= ' + digits(linkAp) + '\n';
-    t += fieldCount + '×\tFields\t\t= ' + digits(fieldAp) + '\n';
+    t += linkCount  + '×\tLinks\t= ' + digits(linkAp) + '\n';
+    t += fieldCount + '×\tFields\t= ' + digits(fieldAp) + '\n';
     t += 'Sum: ' + digits(sum) + ' AP';
     return '<tt title="'+t+'">' + digits(text) + '</tt>';
   }

main.js

@@ -57,7 +57,8 @@ document.getElementsByTagName('head')[0].innerHTML = ''
   + '<title>Ingress Intel Map</title>'
   + '<link rel="stylesheet" type="text/css" href="http://breunigs.github.com/ingress-intel-total-conversion/style.css?@@BUILDDATE@@"/>'
   + '<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"/>'
-  + '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda"/>';
+  + '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda"/>'
+  + '<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.css"/>';
 
 document.getElementsByTagName('body')[0].innerHTML = ''
   + '<div id="map">Loading, please wait</div>'