From 59659a944d213788848292bc6397f1514a68cac6 Mon Sep 17 00:00:00 2001
From: fkloft <felix.kloft+github@gmail.com>
Date: Mon, 20 Apr 2015 20:59:04 +0200
Subject: [PATCH] [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                        |  16 +++
 mobile/res/drawable-hdpi/ic_missions.png   | Bin 0 -> 1015 bytes
 mobile/res/drawable-mdpi/ic_missions.png   | Bin 0 -> 790 bytes
 mobile/res/drawable-xhdpi/ic_missions.png  | Bin 0 -> 1418 bytes
 mobile/res/drawable-xxhdpi/ic_missions.png | Bin 0 -> 1992 bytes
 plugins/missions.css                       |  11 ++
 plugins/missions.user.js                   | 112 +++++++++++++++++----
 style.css                                  |  54 ++++++++++
 8 files changed, 172 insertions(+), 21 deletions(-)
 create mode 100644 images/missions.svg
 create mode 100644 mobile/res/drawable-hdpi/ic_missions.png
 create mode 100644 mobile/res/drawable-mdpi/ic_missions.png
 create mode 100644 mobile/res/drawable-xhdpi/ic_missions.png
 create mode 100644 mobile/res/drawable-xxhdpi/ic_missions.png

diff --git a/images/missions.svg b/images/missions.svg
new file mode 100644
index 00000000..f9cf8429
--- /dev/null
+++ b/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>
diff --git a/mobile/res/drawable-hdpi/ic_missions.png b/mobile/res/drawable-hdpi/ic_missions.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ce992165b5a19da92b47f5515f9a1544a540fd5
GIT binary patch
literal 1015
zcmV<T0|@+yP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00004b3#c}2nYxW
zd<bNS00009a7bBm000K;000K;0UmWYH2?qr8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H119VA5K~!jg?U}!86hRcnKe?Fbc@RiA1O=6Vf<%yjA_&0*60nE?
zu@Wq_5G*Bsi6B_mX=RZ{Ia3HmlFG(H1jRxWZ3H<I2!s<Q#$w*MbCa3fna!+6Bwsk#
z+nags`@MNTW_J6wwzk;KsP&q_PO&GT*VvcX-T-h8XaYZh6}dkN3<7Q7HSjBy!@dfV
zxB<)oL%^!s8v)jV7O;`hSrr1HTLe@@9;(ZM-@vBveN*lwM->9<z$`F~`sdf>dRBf*
ziWmW70R%L8Gv-@zJwlj>y7&r0sDLqGqJV&l{Dyo&MQ9rn1d0e1@EKK6d<1;tH9|y~
zHde)FG65Z6(IcXWe255}{G#|QL~I$g9W4RV0pv~CeZsU6MZSyx=oX<7Tj%XQ0VT*o
zxiZ>8{c9#(5Z9zOWR8g?BFRHJ0d>@po0!5~S;m1!@)@^mOj%>6JvMT&lN?w_{fkrb
z{Uh)axCNY-@uz@;a{Ugt!S*~_24=`|A}WkxR=`zl+GN$~tB|+}915_Z$+n4ac7Neo
zfdRH}cZ*8p0o3;SI&cTLhFXzvU|z=D2ae&dHg<J#t;9BNE&&&Sw+6w`I$r~x0N;Sy
zmb1`0pC_ULoB>|hPHi;BNF#zgz(wE)@E8^Mb22}sN%@+c7S^;UxK`j2a9oURlI<#s
z>ih%XFmMHxyc2XEXkrr7T!}THU#`CZ&&`3Z6<85xLmu+3(s%+m3oM}a{h!FT9c4PK
zxe~)<A+=%;EOREF2TsfNJ>UbX>ihtn%Kg3)c1yvv0+VDhzlKt;bHa!3z(bj{pYE8?
z+r|1|hmg*RNqe9x2Q=9hDje)2K1o&@?*ea(xi#P_-C+Z9J55(5s>wYaTDbzsmeE1f
zcHpRkXk}$IRU-=_STrVCBlE#0BBsv!#)go0BIRZ-)N#_yT&e?2tm70mfOH3%<w(aJ
znPZ}-2bvl3`-F{#%rQ~wKocv#j^72cZAVeF)36g(+lW33K=}iWj@LD^15JnsSG6&1
zM2iR&kXI_rXGVD<@=9gibEhN%Mm^*;ibRCed0WJ22(g$lI)-}OmscrV%?{$4R2@bB
zeF&*4UU1kVpk$K@K~-;P>cC~xVFXm7J|i)CsO}9-4Rs9E=&#CG6-MoZjqMXrNF74|
l#cS4oie3MveosKJ@du13g#R;p+MWOa002ovPDHLkV1iP^x61$k

literal 0
HcmV?d00001

diff --git a/mobile/res/drawable-mdpi/ic_missions.png b/mobile/res/drawable-mdpi/ic_missions.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cf7a4684d55785b711f1e30ecddb52d4d789ca1
GIT binary patch
literal 790
zcmV+x1L^#UP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm000D?000D?0em!Tp#T5?8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10+UHZK~z|U#h1@(Q$Y~NKhH|q3JC$D5wr&{L4q#_D`Lchw`v0w
z@#0BuUi}yRC;S&Y8Kj3&d-Il4FBWp>P4prLDHZ%t4AaBRl6BqpUh-PZz{0-G?0&!R
zJF_z{iHI;yJ2O}G6A-8XH6XE3v$dJ+Y)Jw&pa*=l=L^6VFq-wC<ODg;1RmOa6Zlf*
zkg_3I09JwDHdbxzR0&jpb_Vzw6WO<HzLr6vZD-9)U<J4fq&eUt8(Ab$J7Xmaq$mec
zpbHFuVFcW_29w0xLEqf%-78DLCvgBQXMl$!eggF(aF{L$hX!5;_5<()=m6*Jd1O9y
z+cPXWyr>Sim@lJmk^&!r^QbBv;I;uhwck_oZQ0%(V4MYzr$Cr+0~<ep7r>>!-_Mr;
z#kWIEMBJ!|NW<m}BC;+b&%8A^u8GLD`6nXM5s{lB@?1pHz_(#%tlODxt>S!q1(whR
zYLcJrPk=Y5#Mc1<ZV*qn@QOAKW63%Aw;%x?09VlJ=D=?OcYxQxAK)$U2+jC=wznwT
z-R)QeJ_FlEe5z*j61WI#0Kb6uz&GIX6nhKJCs0MD+C*!64^`ov&0hf@P*tunNjPi{
zaTWXmwF}%gtV8%a1g^)Ah?iVvEmV46cK-(WB*N-AwzWgxC?pVCj6@btj6@9lA1f-w
zK8bw;$xAp#!WE)i@M#D*5|7dHy2m8$S=Kco2S7g$9H#39Z6>w7g-V-c4fAomBlbNp
z69GT2eN@t31_?jrecR*IC`BOb=VLUUF%q$abK&ZeqeNZ~RM9V)u%(8#g9v!|BA<Zo
zvl7TNp9DGJg;w^fc#KxHMH{<iz@fYXe#~JGe@rT9OLcLrqK)e4e-St}oBO}xV`(!g
Un)aGBoB#j-07*qoM6N<$f;#a}%K!iX

literal 0
HcmV?d00001

diff --git a/mobile/res/drawable-xhdpi/ic_missions.png b/mobile/res/drawable-xhdpi/ic_missions.png
new file mode 100644
index 0000000000000000000000000000000000000000..b314730eede942f6634a5e03d505e5fcd6b34e91
GIT binary patch
literal 1418
zcmV;51$Fv~P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm000R(000R(0q|s!N&o-=8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11qVq)K~#90?VC+&RYw@de^-)Na!Uv<6pAlhgxCg(AjO4Igsy7e
z=%SQL!9_oSegi*33w{6>;-an6E_};YY(ps`bkR_)8(p|4EnGsAY7<Ns^GxrYIWy<X
znHlB;;vX*eoH=jL^S?9C^PgwV9c*oFv6Hc@Zv*<qO9J{fpl|GW0wxMRYYLbJrh!S|
z3GiHw?FJ448^Ag+0{$&wR7nC}0LOsWWPc5~F54dhL)m@`ER`~9P&f@v0Pj*I0qV|g
zmNKX`0Z=DFqqy_XPY~P$mL2WO6m}l^Az%hL?PxzO$BLpf0W;JC-c#8g%CVv(#1b$G
z%yqoR<@}O-Qc0K-n>r(gfJxvC@D8vLc#Y5bP5GpdupqXaA%cV$0uBMM$o2`^NoaCj
zBbI~(u>rB^P|Nu>#1QZZ_`%q3A|b?ijjkk^&LcKGYO%eB*ch-vI|*H!*9axS<@`#Z
z?G>bCfhH1SoY!b0A)E7%M+w>n-3JbnE^l43`2ld$I48+@$R~wu5;Riftxq;X2InE4
z5L!X~@+L;4YkNH$MppZMGB^+U2$(^2dlR$3e8BTh0q5`wt9iMXiNj=4j5&sY9q>j}
z4Q}eHUjZkL{R_Y?W8WTH=Dl@2VKvHXK`H^hXg|-`@MpjkU<>#j*xzu!72vFFyQ2L=
z>VYwdgp?uBl<LeB`5USlv`Dk_CVZ(bRW{cUOF&4T*ChNZ`=818m%!Wdxoh3`YufXC
zRuX(eU<&oCxgvOs$ax*O3j71S2mCGVyHGLU2x{z45iW9EI>9#_CgfSQLaVO_%*xH}
zqG_zc`xF=eH&D(`OZyAp4self&O>-l&_vmp1n?6ujbhd$A=ddJ@Bu0aej{y*ROb${
z^0tixvzJWQuEtM*o>yxU_7Jb_Kaz+41Uv>_MGXl(cSzOtJ`(m&9U{(JfiDK^20mfz
zunCv*1K=&xbadTn{|-0+oCkgc_5vS!oJo<lO|p3nxW;%P=70Elz;jeUS+m+*&cA_j
z@{%0;+&H#~a{dY9O7I_4XOSAI+TQL78ag=EoQFIsLuXM=g6it$P*HsocvITHMa6(^
zha5xTCa|yJ8SAL7sfUJd<_J9u0bdU|NHyRsqw4lU#(`0ja1;2#xb`oU*wM`XiQjoW
z6i!&*T}g0hg4@7xX&Z`9zq>AUVMD&nU;8@aOkk35Mb3R6_yxF(lD{?%&>Zb!NoW#8
zOUAJc*TudeuotzGYX`hoEwCTeg9fti>gqA+FhmXNbACnz;0j7e;VzDKIX8<Gj-3vN
zk`VK&hFsId`9{Rf23M)-1Y0&kyuxcMxo2}8$`nK(F1-~gi1b|&Ys0oLiD}p*Xyhne
zyM$8~=OJHJcons1VPb^pvZ;7Ty)6EK49-J70v4#Q*nq#N(gnU^#!<qT<{OcN0N2u3
zQ+5c2E83fjFCk0wtw<%n6{+vho+8`eOLg}MUz!g>3IR=dK13(@(3a;zmga*IOF)Ro
zi6J3W<YXfuhJZQ3MNStIx+**u30+^@iXz}KYPk!-@_YyhvGUd=;hEUh39&+G67@n-
zmv?e}vKi9l?HtN^=bXO@rQa2HkpLOBeOL7Hvb0Y&7k3`|c~^K9Rj;#go5IdRKLkvm
zij_8wQ}z!WKzRaO(LRT4jz&oWe5o!~HYcHE5Zso3n(8A9Y%A>e{|&w*pl<{E#*Qc8
YKj9zqAmxnh<NyEw07*qoM6N<$f{j9Y)c^nh

literal 0
HcmV?d00001

diff --git a/mobile/res/drawable-xxhdpi/ic_missions.png b/mobile/res/drawable-xxhdpi/ic_missions.png
new file mode 100644
index 0000000000000000000000000000000000000000..e45cb36765519fcc673979ec8254125339296415
GIT binary patch
literal 1992
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
a1M5FBArM~MY2obv0000<MNUMnLSTYiB%X}`

literal 0
HcmV?d00001

diff --git a/plugins/missions.css b/plugins/missions.css
index 8df699b3..6ca45056 100644
--- a/plugins/missions.css
+++ b/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;
diff --git a/plugins/missions.user.js b/plugins/missions.user.js
index 88cf0a17..78712ac9 100644
--- a/plugins/missions.user.js
+++ b/plugins/missions.user.js
@@ -138,23 +138,58 @@ window.plugin.missions = {
 	showMissionDialog: function(mission) {
 		var me = this;
 		var markers = this.highlightMissionPortals(mission);
-		dialog({
-			id: 'plugin-mission-details-' + mission.guid.replace(/\./g, '_') /* dots irritate the dialog framework */,
-			title: mission.title,
-			height: 'auto',
-			html: this.renderMission(mission),
-			width: '450px',
-			closeCallback: function() {
-				me.unhighlightMissionPortals(markers);
-			},
-			collapseCallback: this.collapseFix,
-			expandCallback: this.collapseFix,
-		}).dialog('option', 'buttons', {
-			'Zoom to mission': function() {
-				me.zoomToMission(mission);
-			},
-			'OK': function() { $(this).dialog('close'); },
-		});
+		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-' + id,
+				title: mission.title,
+				height: 'auto',
+				html: content,
+				width: '450px',
+				closeCallback: function() {
+					me.unhighlightMissionPortals(markers);
+				},
+				collapseCallback: this.collapseFix,
+				expandCallback: this.collapseFix,
+			}).dialog('option', 'buttons', {
+				'Zoom to mission': function() {
+					me.zoomToMission(mission);
+				},
+				'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));
 
diff --git a/style.css b/style.css
index f90d375b..9578d1dc 100644
--- a/style.css
+++ b/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;
+}
+