new class L.PortalMarker to incapsulate all portal visual interactions

code/portal_detail_display.js

@@ -262,28 +262,25 @@ window.setPortalIndicators = function(p) {
 // 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;
+window.selectPortal = function (newPortalGuid) {
+ var update = selectedPortal === newPortalGuid;
  var oldPortalGuid = selectedPortal;
- selectedPortal = guid;
+ selectedPortal = newPortalGuid;
 
  var oldPortal = portals[oldPortalGuid];
- var newPortal = portals[guid];
+ var newPortal = portals[newPortalGuid];
 
  // Restore style of unselected portal
- if(!update && oldPortal) setMarkerStyle(oldPortal,false);
+ if (oldPortal) { oldPortal.setSelected(false); }
 
  // Change style of selected portal
- if(newPortal) {
- setMarkerStyle(newPortal, true);
-
- if (map.hasLayer(newPortal)) {
- newPortal.bringToFront();
- }
- }
+ if (newPortal) { newPortal.setSelected(true); }
 
  setPortalIndicators(newPortal);
 
- runHooks('portalSelected', {selectedPortalGuid: guid, unselectedPortalGuid: oldPortalGuid});
+ runHooks('portalSelected', {
+ selectedPortalGuid: newPortalGuid,
+ unselectedPortalGuid: oldPortalGuid
+ });
  return update;
-}
+};

code/portal_marker.js

@@ -1,46 +1,58 @@
 // PORTAL MARKER //////////////////////////////////////////////
 // code to create and update a portal marker
 
+L.PortalMarker = L.CircleMarker.extend({
+
+ options: {
+ interactive: true
+ },
+
+ initialize: function (latlng, data) {
+ var options = getMarkerStyleOptions(data);
+ // 'data' contain the IITC-specific entity data to be stored in the object options
+ options = L.extend(options,data);
+ // this.data = data;
+ L.CircleMarker.initialize.call(this,latlng,options);
+ highlightPortal(this);
+ },
+
+ setStyle: function (style) { // stub for highlighters
+ L.Util.setOptions(this, style);
+ return this;
+ },
+
+ setMarkerStyle: function (style) {
+ style = L.extend(getMarkerStyleOptions(this.options), style);
+ L.Util.setOptions(this,style);
+ highlightPortal(this);
+ var selected = this._selected && { color: COLOR_SELECTED_PORTAL };
+ return L.Path.prototype.setStyle.call(this,selected);
+ },
+
+ setSelected: function (action) {
+ var same = this._selected === action;
+ this._selected = action;
+ if (!same || this._selected) { this.setMarkerStyle(); }
+ if (this._selected) {
+ if (map.hasLayer(this)) { this.bringToFront(); }
+ }
+ }
+
+});
 
-window.portalMarkerScale = function() {
+L.portalMarker = function (latlng, data) {
+ return new L.PortalMarker(latlng,data);
+};
+
+window.portalMarkerScale = function () {
  var zoom = map.getZoom();
  if (L.Browser.mobile)
  return zoom >= 16 ? 1.5 : zoom >= 14 ? 1.2 : zoom >= 11 ? 1.0 : zoom >= 8 ? 0.65 : 0.5;
  else
  return zoom >= 14 ? 1 : zoom >= 11 ? 0.8 : zoom >= 8 ? 0.65 : 0.5;
-}
-
-// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
-window.createMarker = function(latlng, data) {
- var styleOptions = window.getMarkerStyleOptions(data);
-
- var options = L.extend({}, data, styleOptions, { interactive: true });
-
- var marker = L.circleMarker(latlng, options);
-
- highlightPortal(marker);
-
- return marker;
-}
-
-
-window.setMarkerStyle = function(marker, selected) {
-
- var styleOptions = window.getMarkerStyleOptions(marker.options);
-
- marker.setStyle(styleOptions);
-
- // FIXME? it's inefficient to set the marker style (above), then do it again inside the highlighter
- // the highlighter API would need to be changed for this to be improved though. will it be too slow?
- highlightPortal(marker);
+};
 
- if (selected) {
- marker.setStyle ({color: COLOR_SELECTED_PORTAL});
- }
-}
-
-
-window.getMarkerStyleOptions = function(details) {
+window.getMarkerStyleOptions = function (details) {
  var scale = window.portalMarkerScale();
 
  // portal level 0 1 2 3 4 5 6 7 8
@@ -54,23 +66,33 @@ window.getMarkerStyleOptions = function(details) {
 
  var dashArray = null;
  // thinner and dashed outline for placeholder portals
- if (details.team != TEAM_NONE && level==0) {
+ if (details.team !== TEAM_NONE && level===0) {
  lvlWeight = 1;
  dashArray = '1,2';
  }
 
  var options = {
- radius: lvlRadius,
  stroke: true,
- color: COLORS[details.team],
- weight: lvlWeight,
  opacity: 1,
  fill: true,
- fillColor: COLORS[details.team],
+ fillColor: null, // same as color by default
  fillOpacity: 0.5,
+
+ radius: lvlRadius,
+ color: COLORS[details.team],
+ weight: lvlWeight,
  dashArray: dashArray
  };
 
  return options;
-}
+};
+
+// deprecated functions (subject to remove):
+
+// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
+window.createMarker = L.portalMarker;
 
+// eslint-disable-next-line no-unused-vars
+window.setMarkerStyle = function (marker, selected) {
+ marker.setMarkerStyle()
+};