[missions] use android panes. show missions in pane to allow switching between mission view and map

mission lists are still displayed in dialogs

images/missions.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96" height="96">
+	<defs>
+		<mask id="mask">
+			<path style="stroke:#000000;stroke-width:9;stroke-linejoin:miter" d="m 28,50 8,0 6,-14 8,0" />
+			<circle cx="48" cy="48" r="40" style="fill:#ffffff" />
+		</mask>
+	</defs>
+	<g style="opacity:0.8;fill:#ffffff;stroke:#ffffff;stroke-linecap:butt;stroke-linejoin:miter">
+		<g mask="url(#mask)">
+			<path style="opacity:0.5;fill:none;stroke-width:4" transform="rotate(45,48,48)" d="m 24,8 0,80 M 48,8 48,88 M 72,8 72,88 M 8,72 88,72 M 8,48 88,48 M 8,24 88,24" />
+		</g>
+		<circle cx="50" cy="36" r="4" style="stroke:none" />
+		<circle cx="28" cy="50" r="4" style="stroke:none" />
+		<path style="fill:none;stroke-width:3" d="m 28,50 8,0 6,-14 8,0" />
+	</g>
+</svg>

plugins/missions.css

@@ -1,3 +1,14 @@
+.plugin-mission-pane {
+	background: transparent;
+	border: 0 none !important;
+	height: 100% !important;
+	width: 100% !important;
+	left: 0 !important;
+	top: 0 !important;
+	position: absolute;
+	overflow: auto;
+}
+
 .plugin-mission-summary {
 	padding: 5px;
 	border-top: black solid 1px;

plugins/missions.user.js

@@ -138,11 +138,45 @@ window.plugin.missions = {
 	showMissionDialog: function(mission) {
 		var me = this;
 		var markers = this.highlightMissionPortals(mission);
+		var content = this.renderMission(mission);
+		var id = mission.guid.replace(/\./g, '_'); // dots irritate the dialog framework and are not allowed in HTML IDs
+		
+		if(useAndroidPanes()) {
+			if(this.tabHeaders[id]) {
+				this.tabHeaders[id].parentNode.querySelector('.ui-icon-close').click();
+			}
+			
+			var li = this.tabBar.appendChild(document.createElement('li'));
+			var a = li.appendChild(document.createElement('a'));
+			a.textContent = mission.title;
+			a.href = '#mission_pane_'+id;
+			this.tabHeaders[id] = a;
+			var span = li.appendChild(document.createElement('span'));
+			span.className = 'ui-icon ui-icon-close';
+			span.textContent = 'Close mission';
+			span.addEventListener('click', function() {
+				li.parentNode.removeChild(li);
+				content.parentNode.removeChild(content);
+				delete this.tabHeaders[id];
+				$(this.tabs)
+					.tabs('refresh')
+					.find('.ui-tabs-nav')
+						.sortable('refresh');
+			}.bind(this), false);
+			
+			this.tabs.appendChild(content);
+			content.id = 'mission_pane_'+id;
+			var tabs = $(this.tabs);
+			tabs.tabs('refresh');
+			tabs.find('.ui-tabs-nav').sortable('refresh');
+			tabs.tabs('option','active', -1);
+			show('plugin-missions');
+		} else {
 			dialog({
-			id: 'plugin-mission-details-' + mission.guid.replace(/\./g, '_') /* dots irritate the dialog framework */,
+				id: 'plugin-mission-details-' + id,
 				title: mission.title,
 				height: 'auto',
-			html: this.renderMission(mission),
+				html: content,
 				width: '450px',
 				closeCallback: function() {
 					me.unhighlightMissionPortals(markers);
@@ -155,6 +189,7 @@ window.plugin.missions = {
 				},
 				'OK': function() { $(this).dialog('close'); },
 			});
+		}
 	},
 
 	showMissionListDialog: function(missions) {
@@ -272,7 +307,7 @@ window.plugin.missions = {
 
 			callback(mission);
 		}, function() {
-			console.error('Error loading mission data: ' + guid + ", " + Array.prototype.slice.call(arguments));
+			console.error('Error loading mission data: ' + guid + ', ' + Array.prototype.slice.call(arguments));
 			
 			if (errorcallback) {
 				errorcallback(error);
@@ -335,9 +370,9 @@ window.plugin.missions = {
 			
 			if(len > 0) {
 				if(len > 1000)
-					len = Math.round(len / 100) / 10 + "km";
+					len = Math.round(len / 100) / 10 + 'km';
 				else
-					len = Math.round(len * 10) / 10 + "m";
+					len = Math.round(len * 10) / 10 + 'm';
 				
 				var infoLength = container.appendChild(document.createElement('span'));
 				infoLength.className = 'plugin-mission-info length help';
@@ -466,11 +501,13 @@ window.plugin.missions = {
 			
 			title.href = perma;
 			title.addEventListener('click', function(ev) {
+				show('map');
 				selectPortalByLatLng(lat, lng);
 				ev.preventDefault();
 				return false;
 			}, false);
 			title.addEventListener('dblclick', function(ev) {
+				show('map');
 				zoomToAndShowPortal(waypoint.portal.guid, [lat, lng]);
 				ev.preventDefault();
 				return false;
@@ -630,7 +667,7 @@ window.plugin.missions = {
 		this.cacheByPortalGuid = JSON.parse(localStorage['plugins-missions-portalcache'] || '{}');
 		this.cacheByMissionGuid = JSON.parse(localStorage['plugins-missions-missioncache'] || '{}');
 		
-		if("plugins-missions-settings" in localStorage) {
+		if('plugins-missions-settings' in localStorage) {
 			var settings = JSON.parse(localStorage['plugins-missions-settings'] || '{}');
 			localStorage['plugins-missions-checkedMissions'] = JSON.stringify(settings.checkedMissions);
 			localStorage['plugins-missions-checkedWaypoints'] = JSON.stringify(settings.checkedWaypoints);
@@ -834,6 +871,14 @@ window.plugin.missions = {
 		}
 	},
 
+	onPaneChanged: function(pane) {
+		if(pane == 'plugin-missions') {
+			document.body.appendChild(this.mobilePane);
+		} else if(this.mobilePane.parentNode) {
+			this.mobilePane.parentNode.removeChild(this.mobilePane);
+		}
+	},
+
 	setup: function() {
 		this.cacheByPortalGuid = {};
 		this.cacheByMissionGuid = {};
@@ -846,6 +891,31 @@ window.plugin.missions = {
 		$('<style>').prop('type', 'text/css').html('@@INCLUDESTRING:plugins/missions.css@@').appendTo('head');
 		$('#toolbox').append('<a tabindex="0" onclick="plugin.missions.openTopMissions();">Missions in view</a>');
 
+		if(window.useAndroidPanes()) {
+			this.mobilePane = document.createElement('div');
+			this.mobilePane.className = 'plugin-mission-pane';
+			
+			var button = this.mobilePane.appendChild(document.createElement('button'));
+			button.textContent = 'Missions in view';
+			button.addEventListener('click', function(){ this.openTopMissions(); }.bind(this), false);
+			
+			this.tabs = this.mobilePane.appendChild(document.createElement('div'));
+			this.tabBar = this.tabs.appendChild(document.createElement('ul'));
+			this.tabHeaders = {};
+			
+			$(this.tabs)
+				.tabs()
+				.find('.ui-tabs-nav').sortable({
+					axis: 'x',
+					stop: function() {
+						$(this.tabs).tabs('refresh');
+					},
+				});
+			
+			android.addPane('plugin-missions', 'Missions', 'ic_missions');
+			addHook('paneChanged', this.onPaneChanged.bind(this));
+		}
+
 		// window.addPortalHighlighter('Mission start point', this.highlight.bind(this));
 		window.addHook('portalSelected', this.onPortalSelected.bind(this));
 

style.css

@@ -1229,3 +1229,57 @@ g.checkpoint:hover circle {
 	width: 100%;
 }
 
+/* tabs */
+.ui-tabs-nav {
+	display: block;
+	border-bottom: 1px solid #20a8b1;
+	border-top: 1px solid transparent;
+	margin: 3px 0 0;
+	padding: 0;
+}
+.ui-tabs-nav::after {
+	content: '';
+	clear: left;
+	display: block;
+	height: 0;
+	width: 0;
+}
+.ui-tabs-nav li {
+	list-style: none;
+	display: block;
+	float:left;
+	margin: 0 0 -1px;
+	border: 1px solid #20a8b1;
+}
+.ui-tabs-nav li.ui-tabs-active {
+	border-bottom-color: #0F2C3F;
+	background: #0F2C3F;
+	border-width: 2px 2px 1px;
+	font-weight: bold;
+	margin: -1px 1px;
+}
+.ui-tabs-nav a {
+	display: inline-block;
+	padding: 0.2em 0.7em;
+}
+.ui-tabs-nav .ui-icon {
+	display: inline-block;
+	font-size: 0;
+	height: 22px;
+	overflow: hidden;
+	position: relative;
+	vertical-align: top;
+	width: 16px;
+}
+.ui-tabs-nav .ui-icon-close::before {
+	content: "×";
+	font-size: 16px;
+	height: 16px;
+	position: absolute;
+	text-align: center;
+	top: 2px;
+	vertical-align: baseline;
+	width: 16px;
+	cursor: pointer;
+}
+