more work for #179.

Due to changed display of the portal image it now doesn’t flicker anymore,
which simplifies code a lot.

code/boot.js

@@ -274,7 +274,7 @@ function boot() {
   // sidebar is now at final height. Adjust scrollwrapper so scrolling
   // is possible for small screens and it doesn’t block the area below
   // it.
-  $('#scrollwrapper').css('max-height', $('#sidebar').get(0).scrollHeight + 'px');
+  $('#scrollwrapper').css('max-height', ($('#sidebar').get(0).scrollHeight+3) + 'px');
 
   // workaround for #129. Not sure why this is required.
   setTimeout('window.map.invalidateSize(false);', 500);

code/portal_detail_display.js

@@ -33,50 +33,39 @@ window.renderPortalDetails = function(guid) {
   var linkedFields = ['fields', d.portalV2.linkedFields.length];
 
   // collect and html-ify random data
-  var randDetails = [playerText, sinceText, getRangeText(d), getEnergyText(d), linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)];
-  randDetails = randDetails.map(function(detail) {
-    if(!detail) return '';
-    detail = '<aside>'+detail[0]+'<span>'+detail[1]+'</span></aside>';
-    return detail;
-  }).join('\n');
+  var randDetails = [
+    playerText, sinceText, getRangeText(d), getEnergyText(d),
+    linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)
+  ];
+  randDetails = '<table id="randdetails">' + genFourColumnTable(randDetails) + '</table>';
 
-  // replacing causes flicker, so if the selected portal does not
-  // change, only update the data points that are likely to change.
-  if(update) {
-    console.log('Updating portal details');
-    $('#level').text(Math.floor(getPortalLevel(d)));
-    $('.mods').html(getModDetails(d));
-    $('#randdetails').html(randDetails);
-    $('#resodetails').html(getResonatorDetails(d));
-    $('#portaldetails').attr('class', TEAM_TO_CSS[getTeam(d)]);
-  } else {
-    console.log('exchanging portal details');
-    setPortalIndicators(d);
-    var img = d.imageByUrl && d.imageByUrl.imageUrl ? d.imageByUrl.imageUrl : DEFAULT_PORTAL_IMG;
+  var resoDetails = '<table id="resodetails">' + getResonatorDetails(d) + '</table>';
 
-    var lat = d.locationE6.latE6;
-    var lng = d.locationE6.lngE6;
-    var perma = 'http://ingress.com/intel?latE6='+lat+'&lngE6='+lng+'&z=17&pguid='+guid;
-    var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."';
+  setPortalIndicators(d);
+  var img = d.imageByUrl && d.imageByUrl.imageUrl ? d.imageByUrl.imageUrl : DEFAULT_PORTAL_IMG;
 
-    $('#portaldetails')
-      .attr('class', TEAM_TO_CSS[getTeam(d)])
-      .html(''
-        + '<h3>'+d.portalV2.descriptiveText.TITLE+'</h3>'
-        // help cursor via “.imgpreview img”
-        + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
-        + '<img class="hide" src="'+img+'"/>'
-        + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
-        + '</div>'
-        + '<div class="mods">'+getModDetails(d)+'</div>'
-        + '<div id="randdetails">'+randDetails+'</div>'
-        + '<div id="resodetails">'+getResonatorDetails(d)+'</div>'
-        + '<div class="linkdetails">'
-        + '<aside><a href="'+perma+'">portal link</a></aside>'
-        + '<aside><a onclick="window.reportPortalIssue()">report issue</a></aside>'
-        + '</div>'
-      );
-  }
+  var lat = d.locationE6.latE6;
+  var lng = d.locationE6.lngE6;
+  var perma = 'http://ingress.com/intel?latE6='+lat+'&lngE6='+lng+'&z=17&pguid='+guid;
+  var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."';
+
+  $('#portaldetails')
+    .attr('class', TEAM_TO_CSS[getTeam(d)])
+    .html(''
+      + '<h3>'+d.portalV2.descriptiveText.TITLE+'</h3>'
+      // help cursor via “.imgpreview img”
+      + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
+      + '<img class="hide" src="'+img+'"/>'
+      + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
+      + '</div>'
+      + '<div class="mods">'+getModDetails(d)+'</div>'
+      + randDetails
+      + resoDetails
+      + '<div class="linkdetails">'
+      + '<aside><a href="'+perma+'">portal link</a></aside>'
+      + '<aside><a onclick="window.reportPortalIssue()">report issue</a></aside>'
+      + '</div>'
+    );
 
   // try to resolve names that were required for above functions, but
   // weren’t available yet.

code/portal_detail_display_tools.js

@@ -77,18 +77,18 @@ window.getAvgResoDistText = function(d) {
 }
 
 window.getResonatorDetails = function(d) {
-  var resoDetails = '';
+  var resoDetails = [];
   // octant=slot: 0=E, 1=NE, 2=N, 3=NW, 4=W, 5=SW, 6=S, SE=7
   // resos in the display should be ordered like this:
   //   N    NE         Since the view is displayed in columns, they
   //  NW    E          need to be ordered like this: N, NW, W, SW, NE,
   //   W    SE         E, SE, S, i.e. 2 3 4 5 1 0 7 6
   //  SW    S
-  $.each([2, 3, 4, 5, 1, 0, 7, 6], function(ind, slot) {
-    var isLeft = slot >= 2 && slot <= 5;
+
+  $.each([2, 1, 3, 0, 4, 7, 5, 6], function(ind, slot) {
     var reso = d.resonatorArray.resonators[slot];
     if(!reso) {
-      resoDetails += renderResonatorDetails(slot, 0, 0, null, null, isLeft);
+      resoDetails.push(renderResonatorDetails(slot, 0, 0, null, null));
       return true;
     }
 
@@ -100,16 +100,16 @@ window.getResonatorDetails = function(d) {
     // naming will still be correct.
     slot = parseInt(reso.slot);
 
-    resoDetails += renderResonatorDetails(slot, l, v, dist, nick, isLeft);
+    resoDetails.push(renderResonatorDetails(slot, l, v, dist, nick));
   });
-  return resoDetails;
+  return genFourColumnTable(resoDetails);
 }
 
 // helper function that renders the HTML for a given resonator. Does
 // not work with raw details-hash. Needs digested infos instead:
 // slot: which slot this resonator occupies. Starts with 0 (east) and
 // rotates clockwise. So, last one is 7 (southeast).
-window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
+window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
   if(level === 0) {
     var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '"></span>';
   } else {
@@ -130,11 +130,9 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter meter-rel" title="'+inf+'">' + fill + lbar + '</span>';
+    var meter = '<span class="meter" title="'+inf+'">' + fill + lbar + '</span>';
   }
-  var cls = isLeft ? 'left' : 'right';
-  var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
-  return (isLeft ? text+meter : meter+text) + '<br/>';
+  return [meter, nick || ''];
 }
 
 // calculate AP gain from destroying portal

code/utils_misc.js

@@ -216,3 +216,15 @@ window.uniqueArray = function(arr) {
     return $.inArray(v, arr) === i;
   });
 }
+
+window.genFourColumnTable = function(blocks) {
+  var t = $.map(blocks, function(detail, index) {
+    if(!detail) return '';
+    if(index % 2 === 0)
+      return '<tr><td>'+detail[1]+'</td><th>'+detail[0]+'</th>';
+    else
+      return '    <th>'+detail[0]+'</th><td>'+detail[1]+'</td></tr>';
+  }).join('');
+  if(t.length % 2 === 1) t + '<td></td><td></td></tr>';
+  return t;
+}