Refactor code of select/unselect portal. Add hook 'portalSelected' with guid of selected and unselected portal.

code/hooks.js

@@ -15,6 +15,8 @@
 //            required to successfully boot the plugin.
 //
 // Here’s more specific information about each event:
+// portalSelected: called when portal on map is selected/unselected.
+//              Provide guid of selected and unselected portal.
 // mapDataRefreshStart: called when we start refreshing map data
 // mapDataRefreshEnd: called when we complete the map data load
 // portalAdded: called when a portal has been received and is about to
@@ -45,6 +47,7 @@
 
 window._hooks = {}
 window.VALID_HOOKS = [
+  'portalSelected',
   'mapDataRefreshStart', 'mapDataRefreshEnd',
   'portalAdded', 'portalDetailsUpdated',
   'publicChatDataAvailable', 'factionChatDataAvailable',

code/portal_detail_display.js

@@ -3,16 +3,20 @@
 // methods that highlight the portal in the map view.
 
 window.renderPortalDetails = function(guid) {
+  selectPortal(window.portals[guid] ? guid : null);
+
   if(!window.portals[guid]) {
-    unselectOldPortal();
     urlPortal = guid;
+    $('#portaldetails').html('');
+    if(isSmartphone()) {
+      $('.fullimg').remove();
+      $('#mobileinfo').html('');
+    }
     return;
   }
 
   var d = window.portals[guid].options.details;
 
-  selectPortal(guid);
-
   // collect some random data that’s not worth to put in an own method
   var links = {incoming: 0, outgoing: 0};
   if(d.portalV2.linkedEdges) $.each(d.portalV2.linkedEdges, function(ind, link) {
@@ -43,7 +47,6 @@ window.renderPortalDetails = function(guid) {
 
   var resoDetails = '<table id="resodetails">' + getResonatorDetails(d) + '</table>';
 
-  setPortalIndicators(d);
   var img = getPortalImageUrl(d);
   var lat = d.locationE6.latE6/1E6;
   var lng = d.locationE6.lngE6/1E6;
@@ -89,7 +92,7 @@ window.renderPortalDetails = function(guid) {
     .attr('class', TEAM_TO_CSS[getTeam(d)])
     .html(''
       + '<h3 class="title">'+escapeHtmlSpecialChars(d.portalV2.descriptiveText.TITLE)+'</h3>'
-      + '<span class="close" onclick="unselectOldPortal();" title="Close">X</span>'
+      + '<span class="close" onclick="renderPortalDetails(null);" title="Close">X</span>'
       // help cursor via ".imgpreview img"
       + '<div class="imgpreview" '+imgTitle+' style="background-image: url('+img+')">'
       + '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
@@ -117,64 +120,53 @@ window.renderPortalDetails = function(guid) {
 }
 
 // draws link-range and hack-range circles around the portal with the
-// given details.
+// given details. Clear them if parameter 'd' is null
 window.setPortalIndicators = function(d) {
   if(portalRangeIndicator) map.removeLayer(portalRangeIndicator);
+  portalRangeIndicator = null;
+  if(portalAccessIndicator) map.removeLayer(portalAccessIndicator);
+  portalAccessIndicator = null;
+
+  if(d === null) return;
+
   var range = getPortalRange(d);
   var coord = [d.locationE6.latE6/1E6, d.locationE6.lngE6/1E6];
   portalRangeIndicator = (range > 0
       ? L.geodesicCircle(coord, range, { fill: false, color: RANGE_INDICATOR_COLOR, weight: 3, clickable: false })
       : L.circle(coord, range, { fill: false, stroke: false, clickable: false })
     ).addTo(map);
-  if(!portalAccessIndicator)
-    portalAccessIndicator = L.circle(coord, HACK_RANGE,
-      { fill: false, color: ACCESS_INDICATOR_COLOR, weight: 2, clickable: false }
-    ).addTo(map);
-  else
-    portalAccessIndicator.setLatLng(coord);
-}
 
-window.clearPortalIndicators = function() {
+  portalAccessIndicator = L.circle(coord, HACK_RANGE,
-  if(portalRangeIndicator) map.removeLayer(portalRangeIndicator);
+    { fill: false, color: ACCESS_INDICATOR_COLOR, weight: 2, clickable: false }
-  portalRangeIndicator = null;
+  ).addTo(map);
-  if(portalAccessIndicator) map.removeLayer(portalAccessIndicator);
-  portalAccessIndicator = null;
 }
 
-
 // highlights portal with given GUID. Automatically clears highlights
 // on old selection. Returns false if the selected portal changed.
 // Returns true if it's still the same portal that just needs an
 // update.
 window.selectPortal = function(guid) {
   var update = selectedPortal === guid;
-  var oldPortal = portals[selectedPortal];
+  var oldPortalGuid = selectedPortal;
-  if(!update && oldPortal) setMarkerStyle(oldPortal,false);
-
   selectedPortal = guid;
 
-  if(portals[guid]) {
+  var oldPortal = portals[oldPortalGuid];
-//    resonatorsSetSelectStyle(guid);
+  var newPortal = portals[guid];
 
-   setMarkerStyle(portals[guid], true);
+  // Restore style of unselected portal
+  if(!update && oldPortal) setMarkerStyle(oldPortal,false);
 
-    if (map.hasLayer(portals[guid])) {
+  // Change style of unselected portal
-      portals[guid].bringToFront();
+  if(newPortal) {
+    setMarkerStyle(newPortal, true);
+
+    if (map.hasLayer(newPortal)) {
+      newPortal.bringToFront();
     }
   }
 
+  setPortalIndicators(newPortal ? newPortal.options.details : null);
+
+  runHooks('portalSelected', {selectedPortalGuid: guid, unselectedPortalGuid: oldPortalGuid});
   return update;
 }
-
-
-window.unselectOldPortal = function() {
-  var oldPortal = portals[selectedPortal];
-  if(oldPortal) setMarkerStyle(oldPortal,false);
-  selectedPortal = null;
-  $('#portaldetails').html('');
-  if(isSmartphone()) {
-    $('.fullimg').remove();
-    $('#mobileinfo').html('');
-  }
-  clearPortalIndicators();
-}