[missions] show distance to mission (using distance-to-portal)

plugins/distance-to-portal.css

@@ -1,14 +1,14 @@
 #portal-distance {
 	text-align: center;
 }
-#portal-distance-bearing {
+.portal-distance-bearing {
 	display: inline-block;
 	vertical-align: top;
 	position: relative;
 	height: 1em;
 	width: 1em;
 }
-#portal-distance-bearing:before, #portal-distance-bearing:after {
+.portal-distance-bearing:before, .portal-distance-bearing:after {
 	border-color: transparent currentcolor transparent transparent;
 	border-style: solid;
 	border-width: 0.75em 0.4em 0 0;
@@ -22,7 +22,7 @@
 	-moz-transform: skewY(-30deg);
 	-webkit-transform: skewY(-30deg);
 }
-#portal-distance-bearing:after {
+.portal-distance-bearing:after {
 	left: auto;
 	right: 0.15em;
 	transform: scaleX(-1) skewY(-30deg);

plugins/distance-to-portal.user.js

@@ -67,7 +67,7 @@ window.plugin.distanceToPortal.updateDistance = function() {
     $('#portal-distance')
       .text('Distance: ' + dist + ' ')
       .append($('<span>')
-        .attr('id', 'portal-distance-bearing')
+        .addClass('portal-distance-bearing')
         .css({
           'transform': 'rotate('+bearing+'deg)',
           '-moz-transform': 'rotate('+bearing+'deg)',
@@ -115,7 +115,6 @@ window.plugin.distanceToPortal.setupPortalsList = function() {
       $(cell).addClass('alignR').text(dist?window.plugin.distanceToPortal.formatDistance(dist):'-');
     }
   });
-
 }
 
 

plugins/missions.css

@@ -45,6 +45,17 @@
 	margin-bottom: 2px;
 }
 
+.plugin-mission-summary > .nickname {
+	display: inline-block;
+	min-width: 8em; /* to align with time */
+}
+
+.plugin-mission-info .portal-distance-bearing {
+	font-size: 14px;
+	margin-right: 8px;
+	color: #b2fbff;
+}
+
 .plugin-mission-info {
 	display: inline-block;
 }

plugins/missions.user.js

@@ -293,6 +293,16 @@ window.plugin.missions = {
 			var span = container.appendChild(document.createElement('span'));
 			span.className = 'nickname ' + (cachedMission.authorTeam === 'R' ? 'res' : 'enl')
 			span.textContent = cachedMission.authorNickname;
+			
+			if(window.plugin.distanceToPortal && window.plugin.distanceToPortal.currentLoc) {
+				var infoDistance = container.appendChild(document.createElement('span'));
+				infoDistance.className = 'plugin-mission-info distance help';
+				infoDistance.title = 'Distance to this mission. Click to update.';
+				infoDistance.addEventListener('click', function() {
+					plugin.missions.renderMissionDistance(cachedMission, infoDistance);
+				}, false);
+				this.renderMissionDistance(cachedMission, infoDistance);
+			}
 		}
 		
 		container.appendChild(document.createElement('br'));
@@ -328,6 +338,45 @@ window.plugin.missions = {
 		return container;
 	},
 
+	renderMissionDistance: function(mission /* cached mission, full details*/, container) {
+		if(!(plugin.distanceToPortal && plugin.distanceToPortal.currentLoc)) return;
+		
+		var distances = mission.waypoints
+			.filter(function(waypoint) {
+				return !!waypoint.portal;
+			})
+			.map(function(waypoint) {
+				var position = L.latLng(waypoint.portal.latE6/1E6, waypoint.portal.lngE6/1E6);
+				var distance = position.distanceTo(plugin.distanceToPortal.currentLoc);
+				return {
+					waypoint: waypoint,
+					distance: distance,
+					position: position,
+				};
+			});
+		
+		if(!distances.length) return;
+		
+		if(mission.typeNum == 2) { // non-sequential
+			distances.sort(function(a, b) { return a.distance - b.distance; });
+		}
+		
+		var position = distances[0].position;
+		var distance = distances[0].distance;
+		
+		var bearing = window.plugin.distanceToPortal.currentLoc.bearingTo(position);
+		
+		$(container)
+			.text(window.plugin.distanceToPortal.formatDistance(distance))
+			.prepend($('<span>')
+				.addClass('portal-distance-bearing')
+				.css({
+					'transform': 'rotate('+bearing+'deg)',
+					'-moz-transform': 'rotate('+bearing+'deg)',
+					'-webkit-transform': 'rotate('+bearing+'deg)',
+				}));
+	},
+
 	renderMission: function(mission) {
 		var container = document.createElement('div');
 		container.className = 'plugin-mission-details';