Add cover photo submitter, cover photo votes, and portal details to large portal display dialog.

code/boot.js

@@ -10,15 +10,23 @@ window.showLayerChooser = true;
 window.setupLargeImagePreview = function() {
   $('#portaldetails').on('click', '.imgpreview', function() {
     var img = $(this).find('img')[0];
+    var details = $(this).find('div.portalDetails')[0];
     //dialogs have 12px padding around the content
-    var dlgWidth = Math.max(img.naturalWidth+24,400);
-    dialog({
-      html: '<div style="text-align: center">' + img.outerHTML + '</div>',
-      title: $(this).parent().find('h3.title').text(),
-      width: dlgWidth,
-    });
-
-   });
+    var dlgWidth = Math.max(img.naturalWidth+24,500);
+    if (details) {
+      dialog({
+        html: '<div style="text-align: center">' + img.outerHTML + '</div>' + details.outerHTML,
+        title: $(this).parent().find('h3.title').text(),
+        width: dlgWidth,
+      });
+    } else {
+      dialog({
+        html: '<div style="text-align: center">' + img.outerHTML + '</div>',
+        title: $(this).parent().find('h3.title').text(),
+        width: dlgWidth,
+      });
+    }
+  });
 }
 
 // adds listeners to the layer chooser such that a long press hides

code/portal_detail_display.js

@@ -50,6 +50,39 @@ window.renderPortalDetails = function(guid) {
   var perma = '/intel?ll='+lat+','+lng+'&z=17&pll='+lat+','+lng;
   var imgTitle = 'title="'+getPortalDescriptionFromDetails(d)+'\n\nClick to show full image."';
   var poslinks = 'window.showPortalPosLinks('+lat+','+lng+',\''+escapeJavascriptString(d.portalV2.descriptiveText.TITLE)+'\')';
+  var portalDetailObj = window.getPortalDescriptionFromDetailsExtended(d);
+
+
+  var portalDetailedDescription = '';
+
+  if(portalDetailObj) {
+    portalDetailedDescription = '<table description="Portal Photo Details" class="portal_details">';
+    if(portalDetailObj.submitter.name.length > 0) {
+      if(portalDetailObj.submitter.team) {
+        submitterSpan = '<span class="' + (portalDetailObj.submitter.team === 'RESISTANCE' ? 'res' : 'enl') + ' nickname">';
+      } else {
+        submitterSpan = '<span class="none">';
+      }
+      portalDetailedDescription += '<tr style="padding-bottom: 1em;"><td><b>Photo submitted by:</b></td><td>' + submitterSpan
+                                + portalDetailObj.submitter.name + '</span> (' + portalDetailObj.submitter.voteCount + ' votes)</td></tr>';
+    }
+
+    if(d.portalV2.descriptiveText.ADDRESS) {
+      portalDetailedDescription += '<tr style="padding-bottom: 1em;"><td><b>Address:</b></td><td>' + d.portalV2.descriptiveText.ADDRESS + '</td></tr>';
+    }
+
+    if(portalDetailObj.description) {
+      portalDetailedDescription += '<tr><td><b>Description:</b></td><td>' + portalDetailObj.description + '</td></tr>';
+    }
+
+    if(portalDetailObj.submitter.link.length > 0) {
+      portalDetailedDescription += '<tr><td><b>Link to original:</b></td><td><a href="'
+                                + portalDetailObj.submitter.link + '">' + portalDetailObj.submitter.link + '</a></td></tr>';
+    }
+
+    portalDetailedDescription += '</table>';
+  }
+
 
   $('#portaldetails')
     .attr('class', TEAM_TO_CSS[getTeam(d)])
@@ -58,7 +91,8 @@ window.renderPortalDetails = function(guid) {
       + '<span class="close" onclick="unselectOldPortal();" title="Close">X</span>'
       // help cursor via ".imgpreview img"
       + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
-      + '<img class="hide" src="'+img+'"/>'
+      + '<div class="portalDetails">'+ portalDetailedDescription + '</div>'
+      + '<img class="hide" src="'+img+'"/></div>'
       + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
       + '</div>'
       + '<div class="mods">'+getModDetails(d)+'</div>'

code/portal_detail_display_tools.js

@@ -23,6 +23,43 @@ window.getPortalDescriptionFromDetails = function(details) {
   return desc;
 }
 
+// Grabs more info, including the submitter name for the current main
+// portal image
+window.getPortalDescriptionFromDetailsExtended = function(details) {
+  var descObj = details.portalV2.descriptiveText;
+  var photoStreamObj = details.photoStreamInfo;
+
+  var submitterObj = new Object();
+  submitterObj.type = "";
+  submitterObj.name = "Unknown";
+  submitterObj.team = "";
+  submitterObj.link = "";
+  submitterObj.voteCount = 0;
+
+  if(photoStreamObj && photoStreamObj.hasOwnProperty("coverPhoto") && photoStreamObj.coverPhoto.hasOwnProperty("attributionMarkup")) {
+    var attribution = photoStreamObj.coverPhoto.attributionMarkup;
+    submitterObj.type = attribution[0];
+    if(attribution[1].hasOwnProperty("plain"))
+      submitterObj.name = attribution[1].plain;
+    if(attribution[1].hasOwnProperty("team"))
+      submitterObj.team = attribution[1].team;
+    if(attribution[1].hasOwnProperty("attributionLink"))
+      submitterObj.link = attribution[1].attributionLink;
+    if(photoStreamObj.coverPhoto.hasOwnProperty("voteCount"))
+      submitterObj.voteCount = photoStreamObj.coverPhoto.voteCount;
+  }
+
+
+  var portalDetails = {
+    title: descObj.TITLE,
+    description: descObj.DESCRIPTION,
+    address: descObj.ADDRESS,
+    submitter: submitterObj
+  };
+
+  return portalDetails;
+}
+
 
 // given portal details, returns html code to display mod details.
 window.getModDetails = function(d) {

style.css

@@ -514,6 +514,10 @@ h3 {
   display: none;
 }
 
+.imgpreview .portalDetails {
+  display: none;
+}
+
 #level {
   font-size: 40px;
   text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 5px #fff;
@@ -939,3 +943,14 @@ td + td {
 }
 
 
+.portal_details tr {
+  padding-bottom: 1em;
+}
+
+
+.portal_details td:first-of-type {
+  min-width: 10em;
+  vertical-align: top;
+}
+
+