From 5707cea6303acd91dd6d29685bdbcaded558ecb5 Mon Sep 17 00:00:00 2001
From: Saivann <saivann@gmail.com>
Date: Tue, 7 Jul 2015 14:15:23 -0400
Subject: [PATCH] Rework menus for mobile compatibility Start supporting touch
 events for non-buggy iOS support and faster menus Display and hide wallets on
 click instead of on mouseout to prevent accidental clicks or mouseout events
 Add a wrapper function to detect ghost and accidental clicks Reorganize
 wallet javascript functions for better readability Fix bug in which a wallet
 would display on mouse over after user clicked inside it's bubble Fix
 accidental use of global variables

---
 _layouts/base.html                 |   4 +-
 _less/ie.css                       |  66 +++++-
 _less/rtl.less                     |  37 ++--
 _less/screen.less                  | 309 +++++++++++++++++------------
 _templates/choose-your-wallet.html |   6 +-
 js/base.js                         |  96 +++++++--
 js/main.js                         | 244 +++++++++++------------
 7 files changed, 462 insertions(+), 300 deletions(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index 2a1acbc5..14183d3d 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -41,14 +41,14 @@
       </ul>
       </li>
     </ul>
-    <a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" href="#"></a>
+    <a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" ontouchstart="mobileMenuShow(event);" href="#"></a>
     <a class="logo" href="/{{ page.lang }}/"><img src="/img/icons/logotop.svg" alt="Bitcoin"></a>
     <div id="langselect" class="langselect"><select onchange="window.location=this.value;">
     {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
           <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
     {% endfor %}
     </select></div>
-    <ul id="menusimple" class="menusimple" onclick="mobileMenuHover(event);">
+    <ul id="menusimple" class="menusimple" onclick="mobileMenuHover(event);" ontouchstart="mobileMenuHover(event);">
       <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
         <ul>
           <li{% if page.id == 'bitcoin-for-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>
diff --git a/_less/ie.css b/_less/ie.css
index 4a9af2aa..3190604e 100644
--- a/_less/ie.css
+++ b/_less/ie.css
@@ -34,32 +34,80 @@ body{
 	display:inline;
 }
 
+.menusimple{
+	margin:0;
+	position:absolute;
+	top:8px;
+	left:245px;
+	padding:0;
+	height:35px;
+}
 .menusimple li{
+	list-style:none;
 	zoom:1;
 	display:inline;
+	position:relative;
+	padding:0;
+	margin:0 3px;
+}
+.menusimple li a,
+.menusimple li a:active,
+.menusimple li a:visited,
+.menusimple li a:link{
+	text-decoration:none;
+	color:#2c6fad;
 }
 .menusimple li a{
 	font-family:sans-serif;
-}
-.menusimple li:hover a,
-.menusimple li.active a{
-	color:#fff;
+	display:block;
+	white-space:nowrap;
+	font-size:110%;
+	padding:6px 10px 4px 10px;
 }
 .menusimple li ul{
 	width:190px;
+	display:none;
+	position:absolute;
+	background-color:#fff;
+	border:1px solid #2c6fad;
 	min-width:auto;
+	padding:5px 0;
+	margin:0;
+	left:0;
 }
 .menusimple li ul li{
+	margin:0;
+	display:block;
 	width:100%;
 }
 .menusimple li ul li a{
 	width:100%;
+	font-size:100%;
+	margin:1px 0;
+	padding:6px 10px 3px 10px;
 }
-.menusimple li ul li a:hover,
-.menusimple li ul li.active a,
-.menusimple li ul li.active a:link,
-.menusimple li ul li.active a:visited,
-.menusimple li ul li.active a:active{
+.menusimple li ul li a,
+.menusimple li ul li a:active,
+.menusimple li ul li a:visited,
+.menusimple li ul li a:link{
+	text-decoration:none;
+	color:#2c6fad;
+}
+.menusimple li:hover{
+	background-color:#2c6fad;
+}
+.menusimple li a:hover,
+.menusimple li:hover a,
+.menusimple li.active a,
+.menusimple li.active a:active,
+.menusimple li.active a:visited,
+.menusimple li.active a:link{
+	color:#fff;
+}
+.menusimple li:hover ul{
+	display:block;
+}
+.menusimple li ul li a:hover{
 	color:#fff;
 }
 
diff --git a/_less/rtl.less b/_less/rtl.less
index 4266b6b0..281799c9 100644
--- a/_less/rtl.less
+++ b/_less/rtl.less
@@ -199,31 +199,32 @@ h2 .rssicon{
 	text-align:right;
 }
 
-.walletmenu ul{
+.walletmenu>ul{
 	text-align:right;
 }
-.walletmenu ul li a{
-	padding:8px 42px 5px 10px;
-}
-.walletmenu ul li{
+.walletmenu>ul li{
 	font-family:'DroidNaskh', sans-serif;
 	background-position:right 6px;
 }
-.walletmenu ul li.active,
-.walletmenu ul li.select{
-	background-position:right -62px;
+.walletmenu>ul>li a{
+	padding:8px 42px 5px 10px;
 }
-.walletmenu ul li ul{
+.walletmenu>ul>li ul{
 	left:auto;
 	right:0;
 }
-.walletmenu ul li ul li{
+.walletmenu>ul>li>ul li{
 	background-position:right 10px;
 }
-.walletmenu ul li ul li:hover{
+.walletmenu>ul>li.active,
+.walletmenu>ul>li:hover{
+	background-position:right -62px;
+}
+.walletmenu>ul>li>ul>li.active,
+.walletmenu>ul>li>ul>li:hover{
 	background-position:right -24px;
 }
-.walletmenu ul li ul li.select a{
+.walletmenu>ul>li>ul li.active>a{
 	background-position:left center;
 }
 
@@ -358,6 +359,18 @@ h2 .rssicon{
 		padding-right:0;
 		margin-right:0;
 	}
+	.walletmenu>ul.menutap>li:hover{
+		background-position:right 6px;
+	}
+	.walletmenu>ul.menutap>li>ul>li:hover{
+		background-position:right 10px;
+	}
+	.walletmenu>ul.menutap>li.hover{
+		background-position:right -62px;
+	}
+	.walletmenu>ul.menutap>li>ul>li.hover{
+		background-position:right -24px;
+	}
 	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div{
 		padding:8px 22px 8px 0;
 		background-position:right 7px;
diff --git a/_less/screen.less b/_less/screen.less
index 4df87c4e..0148bd11 100644
--- a/_less/screen.less
+++ b/_less/screen.less
@@ -299,9 +299,9 @@ table td,table th{
 	-moz-border-radius:5px;
 	border-radius:5px;
 }
-.menusimple li:first-child,
-.menusimple li:first-child+li,
-.menusimple li:first-child+li+li+li{
+.menusimple>li:first-child,
+.menusimple>li:first-child+li,
+.menusimple>li:first-child+li+li+li{
 	-webkit-border-bottom-left-radius:0;
 	-webkit-border-bottom-right-radius:0;
 	-moz-border-radius-bottomleft:0;
@@ -309,25 +309,22 @@ table td,table th{
 	border-bottom-left-radius:0;
 	border-bottom-right-radius:0;
 }
-.menusimple li a{
+.menusimple>li a,
+.menusimple>li a:active,
+.menusimple>li a:visited,
+.menusimple>li a:link{
+	color:#2c6fad;
+}
+.menusimple>li a{
 	font-family:'Ubuntu', sans-serif;
 	font-weight:300;
 	font-size:110%;
 	display:block;
 	text-decoration:none;
 	padding:6px 10px 4px 10px;
-	color:#2c6fad;
 	white-space:nowrap;
 }
-.menusimple li:hover,
-.menusimple li.active{
-	background-color:#2c6fad;
-}
-.menusimple li:hover a,
-.menusimple li.active a{
-	color:#fff;
-}
-.menusimple li ul{
+.menusimple>li ul{
 	display:none;
 	position:absolute;
 	background-color:#fff;
@@ -337,11 +334,7 @@ table td,table th{
 	margin:0;
 	left:0;
 }
-.menusimple li:hover ul{
-	display:block;
-}
-.menusimple li ul li{
-	padding:0;
+.menusimple>li>ul li{
 	margin:0;
 	display:block;
 	width:100%;
@@ -349,20 +342,22 @@ table td,table th{
 	-moz-border-radius:0;
 	border-radius:0;
 }
-.menusimple li ul li a,
-.menusimple li ul li a:active,
-.menusimple li ul li a:visited,
-.menusimple li ul li a:link{
-	display:block;
-	color:#2c6fad;
+.menusimple>li>ul>li a{
 	font-size:100%;
 	margin:1px 0;
 	padding:6px 10px 3px 10px;
 }
-.menusimple li ul li:hover a,
-.menusimple li ul li.active a{
+.menusimple li:hover,
+.menusimple li.active{
+	background-color:#2c6fad;
+}
+.menusimple li:hover>a,
+.menusimple li.active>a{
 	color:#fff;
 }
+.menusimple li:hover>ul{
+	display:block;
+}
 
 .content{
 	position:relative;
@@ -1295,21 +1290,20 @@ div.post {
 	position:relative;
 	z-index:90;
 }
-.walletmenu ul{
+.walletmenu>ul{
 	display:inline-block;
 	text-align:left;
 	padding:0 0 25px 0;
 	border-bottom:1px solid #E2E2E2;
 	background-color:#fff;
 }
-.walletmenu ul li{
+.walletmenu>ul li{
 	font-family:'Ubuntu', sans-serif;
 	position:relative;
 	display:inline-block;
 	background-repeat:no-repeat;
 	background-position:left 6px;
-	color:#383838;
-	cursor:pointer;
+	padding:0;
 	margin:15px 10px;
 	font-size:130%;
 	font-weight:bold;
@@ -1320,36 +1314,28 @@ div.post {
 	-moz-border-radius:4px;
 	border-radius:4px;
 }
-.walletmenu ul:hover li:first-child,
-.walletmenu ul:hover li:first-child+li{
-	-webkit-border-bottom-left-radius:0;
-	-webkit-border-bottom-right-radius:0;
-	-moz-border-radius-bottomleft:0;
-	-moz-border-radius-bottomright:0;
-	border-bottom-left-radius:0;
-	border-bottom-right-radius:0;
-}
-.walletmenu ul li.active,
-.walletmenu ul li.select,
-.walletmenu ul li:hover{
-	background-position:left -62px;
-	background-color:#0d579b;
-	color:#fff;
-}
-.walletmenu ul li:first-child{
+.walletmenu>ul>li:first-child{
 	margin-left:0;
 }
-.walletmenu ul li:last-child{
+.walletmenu>ul>li:last-child{
 	margin-right:0;
 }
-.walletmenu ul li a{
-	padding:8px 10px 5px 42px;
-	display:block;
-	white-space:nowrap;
+.walletmenu>ul>li a,
+.walletmenu>ul>li a:link,
+.walletmenu>ul>li a:active,
+.walletmenu>ul>li a:visited{
+	color:#383838;
 }
-.walletmenu ul li ul{
+.walletmenu>ul>li a{
+	white-space:nowrap;
+	cursor:pointer;
+	display:block;
+	padding:8px 10px 5px 42px;
+}
+.walletmenu>ul>li ul{
 	display:none;
 	position:absolute;
+	background-color:#fff;
 	border:1px solid #0d579b;
 	padding:4px 0;
 	min-width:110%;
@@ -1358,31 +1344,23 @@ div.post {
 	-webkit-box-sizing:border-box;
 	box-sizing:border-box;
 }
-.walletmenu ul li:hover ul{
-	display:block;
-}
-.walletmenu ul li ul li{
+.walletmenu>ul>li>ul li{
 	font-size:80%;
 	display:block;
-	padding:0;
 	margin:0;
 	background-position:left 10px;
 	-webkit-border-radius:0px;
 	-moz-border-radius:0px;
 	border-radius:0px;
 }
-.walletmenu ul li ul li.select,
-.walletmenu ul li ul li:hover{
-	background-position:left -24px;
-}
-.walletmenu ul li ul li a{
+.walletmenu>ul>li>ul>li a{
 	background-image:url(/img/icons/wallet_select.svg);
 	background-repeat:no-repeat;
 	background-position:-32px center;
 	padding:8px 32px 5px 32px;
 	margin:1px 0;
 }
-.walletmenu ul li ul li.select a{
+.walletmenu>ul>li>ul>li.active>a{
 	background-position:right center;
 }
 .walletmenu .wallet-mobile{
@@ -1418,6 +1396,40 @@ div.post {
 .walletmenu .wallet-linux{
 	background-image:url(/img/os/wallet_menu_linux.png);
 }
+.walletmenu>ul li.active,
+.walletmenu>ul li:hover{
+	background-color:#0d579b;
+}
+.walletmenu>ul li:hover>a,
+.walletmenu>ul li:hover>a:link,
+.walletmenu>ul li:hover>a:active,
+.walletmenu>ul li:hover>a:visited,
+.walletmenu>ul li.active>a,
+.walletmenu>ul li.active>a:link,
+.walletmenu>ul li.active>a:active,
+.walletmenu>ul li.active>a:visited{
+	color:#fff;
+}
+.walletmenu>ul:hover>li:first-child,
+.walletmenu>ul:hover>li:first-child+li{
+	-webkit-border-bottom-left-radius:0;
+	-webkit-border-bottom-right-radius:0;
+	-moz-border-radius-bottomleft:0;
+	-moz-border-radius-bottomright:0;
+	border-bottom-left-radius:0;
+	border-bottom-right-radius:0;
+}
+.walletmenu>ul>li.active,
+.walletmenu>ul>li:hover{
+	background-position:left -62px;
+}
+.walletmenu>ul>li:hover>ul{
+	display:block;
+}
+.walletmenu>ul>li>ul>li.active,
+.walletmenu>ul>li>ul>li:hover{
+	background-position:left -24px;
+}
 
 .wallets{
 	width:605px;
@@ -1443,10 +1455,7 @@ div.post {
 .wallets>div:nth-child(1n+13){
 	display:none;
 }
-.wallets>div>a,
-.wallets>div>a:visited,
-.wallets>div>a:link,
-.wallets>div>a:active{
+.wallets>div>a{
 	font-size:94%;
 	text-align:center;
 	text-decoration:none;
@@ -1473,12 +1482,6 @@ div.post {
 	left:0;
 	right:0;
 }
-.wallets>div:hover>a>span{
-	display:block;
-}
-.wallets>div.nohover:hover>a>span{
-	display:none;
-}
 .wallets>div>a>img{
 	display:block;
 	width:72px;
@@ -1514,21 +1517,6 @@ div.post {
 .wallets>div>div{
 	z-index:102;
 }
-.wallets>div:hover>div,
-.wallets>div:hover>span{
-	opacity:1;
-	width:auto;
-	height:350px;
-	visibility:visible;
-	overflow:visible;
-}
-.wallets>div.nohover:hover>div,
-.wallets>div.nohover:hover>span{
-	opacity:0;
-	width:0;
-	height:0;
-	visibility:hidden;
-}
 .wallets>div:nth-child(1n+7)>div,
 .wallets>div:nth-child(1n+7)>span{
 	top:-222px;
@@ -1558,12 +1546,8 @@ div.post {
 	-moz-border-radius:4px;
 	border-radius:4px;
 }
-.wallets>div>div>h2:first-child+div+div>a:first-child,
-.wallets>div>div>h2:first-child+div+div>a:first-child:visited,
-.wallets>div>div>h2:first-child+div+div>a:first-child:link,
-.wallets>div>div>h2:first-child+div+div>a:first-child:active{
+.wallets>div>div>h2:first-child+div+div>a:first-child{
 	font-weight:bold;
-	color:#fff;
 	background-color:#2c6fad;
 	background-image:-o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
 	background-image:-moz-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
@@ -1573,16 +1557,22 @@ div.post {
 	border:1px solid #255f96;
 	margin-right:10px;
 }
-.wallets>div>div>h2:first-child+div+div>a:first-child:hover{
-	background-image:none;
+.wallets>div>div>h2:first-child+div+div>a:first-child,
+.wallets>div>div>h2:first-child+div+div>a:first-child:visited,
+.wallets>div>div>h2:first-child+div+div>a:first-child:link,
+.wallets>div>div>h2:first-child+div+div>a:first-child:active{
+	color:#fff;
+}
+.wallets>div>div>h2:first-child+div+div>a:first-child+a{
+	font-weight:normal;
+	color:#255f96;
+	border:1px solid #255f96;
 }
 .wallets>div>div>h2:first-child+div+div>a:first-child+a,
 .wallets>div>div>h2:first-child+div+div>a:first-child+a:visited,
 .wallets>div>div>h2:first-child+div+div>a:first-child+a:link,
 .wallets>div>div>h2:first-child+div+div>a:first-child+a:active{
-	font-weight:normal;
 	color:#255f96;
-	border:1px solid #255f96;
 }
 .wallets>div>div>h2:first-child+div+div+div{
 	margin:5px 0;
@@ -1615,9 +1605,6 @@ div.post {
 	background-repeat:no-repeat;
 	background-position:right 30px;
 }
-.wallets>div>div>h2:first-child+div+div+div>div:hover>div>span{
-	display:block;
-}
 .wallets>div>div>h2:first-child+div+div+div>div>div>p,
 .wallets>div>div>h2:first-child+div+div+div>div>div>div{
 	opacity:0;
@@ -1650,13 +1637,6 @@ div.post {
 .wallets>div>div>h2:first-child+div+div+div>div>div>div>div>p:first-child+p{
 	font-size:85%;
 }
-.wallets>div>div>h2:first-child+div+div+div>div:hover>div>p,
-.wallets>div>div>h2:first-child+div+div+div>div:hover>div>div{
-	opacity:1;
-	width:400px;
-	height:auto;
-	visibility:visible;
-}
 .wallets>div>div>h2:first-child+div+div+div+p{
 	font-size:95%;
 	margin:0;
@@ -1754,6 +1734,46 @@ div.post {
 .wallets .checkprivacy.checkfail{
 	background-image:url(/img/icons/check_privacy_fail.svg);
 }
+.wallets>div:hover>a>span,
+.wallets>div.active>a>span,
+.wallets.nohover>div.active:hover>a>span{
+	display:block;
+}
+.wallets.nohover>div:hover>a>span{
+	display:none;
+}
+.wallets>div:hover>div,
+.wallets>div:hover>span,
+.wallets>div.active>div,
+.wallets>div.active>span,
+.wallets.nohover>div.active:hover>div,
+.wallets.nohover>div.active:hover>span{
+	opacity:1;
+	width:auto;
+	height:350px;
+	visibility:visible;
+	overflow:visible;
+}
+.wallets.nohover>div:hover>div,
+.wallets.nohover>div:hover>span{
+	opacity:0;
+	width:0;
+	height:0;
+	visibility:hidden;
+}
+.wallets>div>div>h2:first-child+div+div>a:first-child:hover{
+	background-image:none;
+}
+.wallets>div>div>h2:first-child+div+div+div>div:hover>div>span{
+	display:block;
+}
+.wallets>div>div>h2:first-child+div+div+div>div:hover>div>p,
+.wallets>div>div>h2:first-child+div+div+div>div:hover>div>div{
+	opacity:1;
+	width:400px;
+	height:auto;
+	visibility:visible;
+}
 
 .walletsswitch{
 	display:none;
@@ -2226,11 +2246,8 @@ h2 .rssicon{
 		height:auto;
 		overflow:auto;
 	}
-	.menusimple li a,
-	.menusimple li ul li a,
-	.menusimple li ul li a:active,
-	.menusimple li ul li a:visited,
-	.menusimple li ul li a:link{
+	.menusimple>li a,
+	.menusimple>li>ul>li a{
 		padding:10px 6px 8px 6px;
 		display:block;
 	}
@@ -2239,11 +2256,26 @@ h2 .rssicon{
 		margin:4px;
 		position:static;
 	}
-	.menusimple li ul{
+	.menusimple>li ul{
 		min-width:0;
 		position:relative;
 	}
-	.menusimple ul.hover{
+	.menusimple.menutap li:hover{
+		background-color:#fff;
+	}
+	.menusimple.menutap li:hover>a{
+		color:#2c6fad;
+	}
+	.menusimple.menutap li:hover>ul{
+		display:none;
+	}
+	.menusimple.menutap li.hover{
+		background-color:#2c6fad;
+	}
+	.menusimple.menutap li.hover>a{
+		color:#fff;
+	}
+	.menusimple.menutap li.hover>ul{
 		display:block;
 	}
 	.logo{
@@ -2460,20 +2492,53 @@ h2 .rssicon{
 		padding:0;
 		border:0;
 	}
-	.walletmenu ul{
+	.walletmenu>ul{
 		display:block;
 	}
-	.walletmenu ul.hover{
-		display:block;
-	}
-	.walletmenu ul li{
+	.walletmenu>ul li{
 		display:block;
 		margin:15px 0;
 	}
-	.walletmenu ul li ul{
+	.walletmenu>ul>li ul{
 		position:relative;
 		min-width:0;
 	}
+	.walletmenu>ul.menutap li:hover{
+		background-color:#fff;
+	}
+	.walletmenu>ul.menutap li:hover>a,
+	.walletmenu>ul.menutap li:hover>a:link,
+	.walletmenu>ul.menutap li:hover>a:active,
+	.walletmenu>ul.menutap li:hover>a:visited{
+		color:#383838;
+	}
+	.walletmenu>ul.menutap>li:hover{
+		background-position:left 6px;
+	}
+	.walletmenu>ul.menutap>li:hover>ul{
+		display:none;
+	}
+	.walletmenu>ul.menutap>li>ul>li:hover{
+		background-position:left 10px;
+	}
+	.walletmenu>ul.menutap li.hover{
+		background-color:#0d579b;
+	}
+	.walletmenu>ul.menutap li.hover>a,
+	.walletmenu>ul.menutap li.hover>a:link,
+	.walletmenu>ul.menutap li.hover>a:active,
+	.walletmenu>ul.menutap li.hover>a:visited{
+		color:#fff;
+	}
+	.walletmenu>ul.menutap>li.hover{
+		background-position:left -62px;
+	}
+	.walletmenu>ul.menutap>li.hover>ul{
+		display:block;
+	}
+	.walletmenu>ul.menutap>li>ul>li.hover{
+		background-position:left -24px;
+	}
 	.wallets{
 		width:auto;
 		height:auto;
diff --git a/_templates/choose-your-wallet.html b/_templates/choose-your-wallet.html
index 08633732..127105d3 100755
--- a/_templates/choose-your-wallet.html
+++ b/_templates/choose-your-wallet.html
@@ -923,8 +923,8 @@ wallets:
 <h1>{% translate pagetitle %}</h1>
 <p class="summary">{% translate pagedesc %}</p>
 
-<div class="walletmenu" id="walletmenu" onmouseover="walletListener(event);" onmouseout="walletListener(event);" onclick="walletListener(event);">
-  <ul onclick="mobileMenuHover(event);">
+<div class="walletmenu" id="walletmenu" onclick="walletMenuListener(event);" ontouchstart="walletMenuListener(event);">
+  <ul onclick="mobileMenuHover(event);" ontouchstart="mobileMenuHover(event);">
     <li class="wallet-mobile">
     <a id="mobile" data-walletcompat="mobile">{% translate walletcatmobile %}</a>
     <ul>
@@ -947,7 +947,7 @@ wallets:
   </ul>
 </div>
 
-<div class="wallets" id="wallets" onclick="walletShow(event);">
+<div class="wallets" id="wallets" onclick="walletListener(event);" ontouchstart="walletListener(event);">
 {% for wallet in page.wallets %}{% for wallet in wallet %}{% if wallet[1].platform.mobile %}{% assign platform = wallet[1].platform.mobile %}{% elsif wallet[1].platform.desktop %}{% assign platform = wallet[1].platform.desktop %}{% elsif wallet[1].platform.hardware %}{% assign platform = wallet[1].platform.hardware %}{% else %}{% assign platform = wallet[1].platform.web %}{% endif %}
 <div id="wallet-{{ wallet[0] }}" data-walletcompat="{{ wallet[1].compat }}" data-walletlevel="{{ wallet[1].level }}">
   <span></span>
diff --git a/js/base.js b/js/base.js
index 9e5e2cb8..5472035c 100644
--- a/js/base.js
+++ b/js/base.js
@@ -83,32 +83,88 @@ for (var i = 0, nd = document.getElementsByTagName('*'), n = nd.length; i < n; i
 }
 }
 
+function onTouchClick(e, callback) {
+// Detect and handle clicks using click and touch events while preventing accidental or ghost clicks.
+var timeout = 1000,
+    touchEndListener = function(e) {
+	// Call callback if touch events match the patterns of a click.
+	removeEvent(t, 'touchend', touchEndListener);
+	setClickTimeout();
+	if (Math.abs(e.changedTouches[0].pageX - x) > 20 || Math.abs(e.changedTouches[0].pageY - y) > 20) return;
+	callback(e);
+    },
+    wrongClickListener = function(e) {
+	// Cancel click events on different targets within timeframe.
+	// This avoids accidental clicks when the page is scrolled or updated due to the 300ms click event delay on mobiles.
+	removeEvent(document.body, 'click', wrongClickListener);
+	if (!clickReady() && getEventTarget(e) != t) cancelEvent(e);
+    }
+    setClickTimeout = function() {
+	// Update timeout during which click events will be blocked.
+	document.body.setAttribute('data-touchtimeout', new Date().getTime() + timeout);
+    },
+    clickReady = function() {
+	// Check if timeout during click events are blocked has expired.
+	var ti = document.body.getAttribute('data-touchtimeout');
+	return (ti === null || ti === '' || parseInt(ti, 10) < new Date().getTime());
+    };
+// Apply appropriate actions according to each event type.
+switch (e.type) {
+	case 'touchstart':
+	// Save initial touchstart coordinates and listen for touchend events and accidental click events.
+		var x = e.changedTouches[0].pageX,
+		    y = e.changedTouches[0].pageY,
+		    t = e.changedTouches[0].target;
+		setClickTimeout();
+		addEvent(t, 'touchend', touchEndListener);
+		addEvent(document.body, 'click', wrongClickListener);
+		setTimeout(function() {
+			removeEvent(document.body, 'click', wrongClickListener);
+		}, timeout);
+		break;
+	case 'click':
+	// Call callback on click in the absence of a recent touchstart event to prevent ghost clicks.
+		if (!clickReady()) return;
+		callback();
+		break;
+}
+}
+
 function mobileMenuShow(e) {
 // Show the mobile menu when the visitors touch the menu icon.
-var mm = document.getElementById('menusimple');
-var ml = document.getElementById('langselect');
-var t = document.getElementById('menumobile');
-mm.style.display = ml.style.display = (mm.style.display == 'block') ? '' : 'block';
-cancelEvent(e);
+var show = function() {
+	var mm = document.getElementById('menusimple');
+	var ml = document.getElementById('langselect');
+	mm.style.display = ml.style.display = (mm.style.display == 'block') ? '' : 'block';
+	cancelEvent(e);
+    };
+onTouchClick(e, show);
 }
 
 function mobileMenuHover(e) {
-// Add a delay before hiding menu for mobiles to prevent accidental clicks.
-var p = t = getEventTarget(e);
-if (t.nodeName != 'A') return;
-while (p.parentNode.nodeName != 'DIV') p = p.parentNode;
-while (t.nodeName != 'LI' || t.parentNode != p) t = t.parentNode;
-var ul = null;
-if (t.getElementsByTagName('UL').length > 0) {
-	var ul = t.getElementsByTagName('UL')[0];
-	addClass(ul, 'hover');
-}
-setTimeout(function() {
-	for (var i = 0, nd = p.getElementsByTagName('UL'), n = nd.length; i < n; i++) {
-		if (nd[i] == ul) continue;
-		removeClass(nd[i], 'hover');
+// Prevent mobile menu to shrink on hover to prevent accidental clicks on other entries.
+var t = getEventTarget(e),
+    fn = (t.parentNode.className.indexOf('hover') === -1) ? addClass : removeClass,
+    initHover = function() {
+	if (t.nodeName != 'A') return;
+	var p = t;
+	while (p.parentNode.nodeName == 'UL' || p.parentNode.nodeName == 'LI') p = p.parentNode;
+	addClass(p, 'menutap');
+	for (var i = 0, nds = p.getElementsByTagName('LI'), n = nds.length; i < n; i++) {
+		if (nds[i] == t.parentNode) continue;
+		removeClass(nds[i], 'active');
+		if (nds[i].getElementsByTagName('UL').length > 0) continue;
+		removeClass(nds[i], 'hover');
 	}
-}, 1);
+	while (t != p) {
+		if (t.nodeName == 'LI') {
+			fn(t, 'hover');
+			fn(t, 'active');
+		}
+		t = t.parentNode;
+	}
+    };
+onTouchClick(e, initHover);
 }
 
 function addAnchorLinks() {
diff --git a/js/main.js b/js/main.js
index 01279987..cb5dca25 100644
--- a/js/main.js
+++ b/js/main.js
@@ -104,7 +104,7 @@ document.body.setAttribute('data-scrollstatus', setInterval(function() {
 
 function supportCSS(id) {
 // Return true if the browser supports given CSS feature.
-var x = domPrefixes = 'Webkit Moz ms O'.split(' ');
+var domPrefixes = 'Webkit Moz ms O'.split(' ');
 var nd = document.createElement('DIV');
 id = id.toLowerCase();
 if (nd.style[id] !== undefined) return true;
@@ -162,7 +162,8 @@ cancelEvent(e);
 
 function materialShow(e) {
 // Display more materials on the "Press center" page at user request.
-var p = t = getEventTarget(e);
+var t = getEventTarget(e),
+    p = t;
 while (p.nodeType != 1 || p.nodeName != 'DIV') p = p.parentNode;
 expandBox(p);
 cancelEvent(e);
@@ -170,7 +171,8 @@ cancelEvent(e);
 
 function librariesShow(e) {
 // Display more open source projects on the "Development" page at user request.
-var p = t = getEventTarget(e);
+var t = getEventTarget(e),
+    p = t;
 while (p.nodeType != 1 || p.nodeName != 'UL') p = p.parentNode;
 expandBox(p);
 cancelEvent(e);
@@ -333,106 +335,119 @@ if (typeof(Storage) === 'undefined') return;
 if (sessionStorage.getItem('develdocdisclaimerclose') === '1') disclaimerClose();
 }
 
+function walletMenuListener(e) {
+// Listen for events on the wallet menu.
+var t = getEventTarget(e),
+    walletSelectPlatform = function() {
+	if (t.nodeName != 'A') return;
+	walletShowPlatform(t.getAttribute('data-walletcompat'));
+	if (isMobile() && t.parentNode.getElementsByTagName('UL').length == 0) scrollToNode(document.getElementById('wallets'));
+    };
+// Pre-process events and call appropriate function.
+onTouchClick(e, walletSelectPlatform);
+}
+
 function walletListener(e) {
-// Listen events on the wallets categories menu and hide / show / select wallets accordingly.
-var t = getEventTarget(e);
-switch (e.type) {
-	case 'click':
-		if (t.nodeName == 'A') walletSelectPlatform(t);
-		break;
-	case 'mouseover':
-		if (t.nodeName == 'A') walletShowPlatform(t.getAttribute('data-walletcompat'));
-		if (t.nodeName == 'A') clearTimeout(document.getElementById('walletmenu').getAttribute('data-wallettimeout'));
-		break;
-	case 'mouseout':
-		clearTimeout(document.getElementById('walletmenu').getAttribute('data-wallettimeout'));
-		document.getElementById('walletmenu').setAttribute('data-wallettimeout', setTimeout(walletFallbackPlatform, 100));
-		break;
-}
-}
-
-function walletSelectPlatform(t) {
-// Select wallets platform when the mouse clicks on the menu.
-var p = t;
-while (p.nodeName != 'DIV') p = p.parentNode;
-for (var i = 0, nds = p.getElementsByTagName('A'), n = nds.length; i < n; i++) {
-	nds[i].removeAttribute('data-select');
-	removeClass(nds[i].parentNode, 'select');
-}
-t.setAttribute('data-select', '1');
-addClass(t.parentNode, 'select');
-if (isMobile() && t.parentNode.getElementsByTagName('UL').length == 0) {
-	setTimeout(function() {
-		scrollToNode(document.getElementById('wallets'));
-	}, 10);
-}
-}
-
-function walletFallbackPlatform() {
-// Show back wallets for selected platform when the mouse leaves the menu without selecting another platform.
-var select = null;
-var active = null;
-for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) {
-	if (nds[i].getAttribute('data-select') == '1') select = nds[i];
-	if (nds[i].getAttribute('data-active') == '1') active = nds[i];
-}
-if (select === null || active === null) return;
-walletShowPlatform(select.getAttribute('data-walletcompat'));
+// Listen for events on wallets.
+var t = getEventTarget(e),
+    walletShow = function() {
+	// Show wallet on click on mobile or desktop.
+	if (t.id == 'wallets') return;
+	while (t.parentNode && t.parentNode.id != 'wallets') t = t.parentNode;
+	if (!t.parentNode) return;
+	if (isMobile()) {
+		var p = document.getElementById('walletsmobile');
+		t = t.cloneNode(true);
+		p.innerHTML = '';
+		p.appendChild(t);
+		scrollToNode(p);
+	} else {
+		addClass(t, 'active');
+		addEvent(document.body, 'click', walletListener);
+	}
+    },
+    walletHide = function() {
+	// Disable wallet when the mouse clicks elsewhere.
+	for (var i = 0, wallets = document.getElementById('wallets').childNodes, n = wallets.length; i < n; i++) {
+		if (wallets[i].nodeType != 1) continue;
+		removeClass(wallets[i], 'active');
+	}
+	removeEvent(document.body, 'click', walletListener);
+};
+// Call appropriate function on click.
+onTouchClick(e, function() {
+	walletHide();
+	walletShow();
+});
 }
 
 function walletShowPlatform(platform) {
 // Show wallets for given platform in the menu.
-var fallback = '';
-// Update menu and set fallback category if hovering in a submenu.
-for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) {
-	if (nds[i].getAttribute('data-walletcompat') != platform) continue;
-	if (nds[i].getAttribute('data-active') == 1) return;
-	var t = nds[i];
-	if (nds[i].parentNode.parentNode.parentNode.nodeName == 'LI') fallback = nds[i].parentNode.parentNode.parentNode.getElementsByTagName('A')[0].getAttribute('data-walletcompat');
-	break;
-}
-for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) {
-	nds[i].removeAttribute('data-active');
-	removeClass(nds[i].parentNode, 'active');
-}
-if (platform != 'default') {
-	t.setAttribute('data-active', '1');
-	addClass(t.parentNode, 'active');
-	if (t.parentNode.parentNode.parentNode.nodeName == 'LI') addClass(t.parentNode.parentNode.parentNode, 'active');
-}
-// Replace wallets by those for given platform and rotate.
-var p = document.getElementById('wallets');
-var ti = 200;
-if (p.getAttribute('timeout') === null || p.getAttribute('timeout') === '' || !supportCSS('transition')) ti = 1;
-addClass(p, 'disabled');
-clearTimeout(p.getAttribute('timeout'));
-p.setAttribute('timeout', setTimeout(function() {
-	p.innerHTML = '';
-	for (var i = 0, nds = document.getElementById('walletsswitch').childNodes, n = nds.length; i < n; i++) {
-		if (nds[i].nodeType != 1) continue;
-		var id = nds[i].id.split('-')[1];
-		if (document.getElementById('wallet-' + id)) continue;
-		var nd = null;
-		if (platform == 'default') {
-			var defpl = ['desktop', 'mobile'];
-			for (var ii = 0, nn = defpl.length; ii < nn; ii++) {
-				if (document.getElementById('wallet-' + id + '-' + defpl[ii])) var nd = document.getElementById('wallet-' + id + '-' + defpl[ii]);
-			}
-		}
-		else {
-			if (document.getElementById('wallet-' + id + '-' + platform)) var nd = document.getElementById('wallet-' + id + '-' + platform);
-			else if (document.getElementById('wallet-' + id + '-' + fallback) && document.getElementById('wallet-' + id + '-' + fallback).getAttribute('data-walletcompat').indexOf(platform) !== -1) var nd = document.getElementById('wallet-' + id + '-' + fallback);
-		}
-		if (nd === null) continue;
-		nd = nd.cloneNode(true);
-		nd.id = 'wallet-' + id;
-		addClass(nd, 'nohover');
-		p.appendChild(nd);
+var t = null,
+    fallback = '',
+    walletMenu = document.getElementById('walletmenu'),
+    getMenuState = function() {
+	// Find active node in the menu for given platform and fallback category if in a submenu.
+	for (var i = 0, nds = walletMenu.getElementsByTagName('A'), n = nds.length; i < n; i++) {
+		if (nds[i].getAttribute('data-walletcompat') != platform) continue;
+		if (nds[i].getAttribute('data-active') == 1) return false;
+		t = nds[i];
+		var p = nds[i].parentNode.parentNode.parentNode;
+		if (p.nodeName == 'LI') fallback = p.getElementsByTagName('A')[0].getAttribute('data-walletcompat');
+		break;
 	}
-	walletRotate()
-	removeClass(p, 'disabled');
-	document.getElementById('walletsmobile').innerHTML = '';
-}, ti));
+	return true;
+    },
+    updateMenu = function() {
+	// Set active nodes in the menu for the new platform.
+	for (var i = 0, nds = walletMenu.getElementsByTagName('A'), n = nds.length; i < n; i++) {
+		nds[i].removeAttribute('data-active');
+		removeClass(nds[i].parentNode, 'active');
+	}
+	if (platform != 'default') {
+		t.setAttribute('data-active', '1');
+		addClass(t.parentNode, 'active');
+		var p = t.parentNode.parentNode.parentNode;
+		if (p.nodeName == 'LI') addClass(p, 'active');
+	}
+    },
+    updateWallets = function() {
+	// Replace wallets by those for given platform and rotate them.
+	var p = document.getElementById('wallets');
+	var lasttimeout = p.getAttribute('data-timeout');
+	var timeout = (lasttimeout !== null && lasttimeout !== '' && supportCSS('transition')) ? 200 : 1;
+	addClass(p, 'disabled');
+	addClass(p, 'nohover');
+	clearTimeout(lasttimeout);
+	p.setAttribute('data-timeout', setTimeout(function() {
+		p.innerHTML = '';
+		var platforms = (platform == 'default') ? ['desktop', 'mobile'] : [platform];
+		for (var i = 0, nds = document.getElementById('walletsswitch').childNodes, n = nds.length; i < n; i++) {
+			if (nds[i].nodeType != 1) continue;
+			var id = nds[i].id.split('-')[1];
+			if (document.getElementById('wallet-' + id)) continue;
+			var nd = null;
+			for (var ii = 0, nn = platforms.length; ii < nn; ii++) {
+				var wp = document.getElementById('wallet-' + id + '-' + platforms[ii]);
+				if (wp) var nd = wp;
+			}
+			if (nd === null) {
+				var wf = document.getElementById('wallet-' + id + '-' + fallback);
+				if (wf && wf.getAttribute('data-walletcompat').indexOf(platform) !== -1) var nd = wf;
+			}
+			if (nd === null) continue;
+			nd = nd.cloneNode(true);
+			nd.id = 'wallet-' + id;
+			p.appendChild(nd);
+		}
+		walletRotate();
+		removeClass(p, 'disabled');
+		document.getElementById('walletsmobile').innerHTML = '';
+	}, timeout));
+    };
+if(!getMenuState()) return;
+updateMenu();
+updateWallets();
 }
 
 function walletRotate() {
@@ -455,41 +470,6 @@ for (var k in ar) {
 }
 }
 
-function walletShow(e) {
-// Show wallet on click on mobile or desktop.
-var t = getEventTarget(e);
-if (t.id == 'wallets') return;
-while (t.parentNode.id != 'wallets') t = t.parentNode;
-if (isMobile()) {
-	var p = document.getElementById('walletsmobile');
-	t = t.cloneNode(true);
-	p.innerHTML = '';
-	p.appendChild(t);
-	scrollToNode(p);
-} else {
-	t.setAttribute('data-previousclass', t.className);
-	removeClass(t, 'nohover');
-	removeClass(t, 'disabled');
-	addEvent(t, 'mouseover', walletHide);
-	addEvent(t, 'mouseout', walletHide);
-}
-}
-
-function walletHide(e) {
-// Disable wallet when the mouse leaves the wallet bubble.
-var t = getEventTarget(e);
-if (t.id == 'wallets') return;
-while (t.parentNode.id != 'wallets') t = t.parentNode;
-clearTimeout(t.getAttribute('data-disabletimeout'));
-if (e.type == 'mouseover') return;
-t.setAttribute('data-disabletimeout', setTimeout(function() {
-	for (var i = 0, nds = t.getAttribute('data-previousclass').split(' '), n = nds.length; i < n; i++) addClass(t, nds[i]);
-	t.removeAttribute('data-disabletimeout');
-	removeEvent(t, 'mouseout', walletHide);
-	removeEvent(t, 'mouseover', walletHide);
-}, 1));
-}
-
 function makeEditable(e) {
 // An easter egg that makes the page editable when user click on the page and hold their mouse button for one second.
 // This trick allows translators and writers to preview their work.