Make wallet scores and all onclick events compatible with iOS

_includes/index.html

@@ -4,7 +4,7 @@ http://opensource.org/licenses/MIT.
 {% endcomment %}
 
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" ontouchstart="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
   <img src="/img/video/video_wuc.jpg" alt="Youtube video">
   <div class="mainvideoicon"></div>
   <div class="mainvideoiconhover"></div>

_less/screen.less

@@ -2621,7 +2621,7 @@ h2 .rssicon{
 		margin-top:10px;
 		padding:0;
 	}
-	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div:hover>div{
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div{
 		display:block;
 		background:none;
 		width:auto;
@@ -2630,16 +2630,25 @@ h2 .rssicon{
 		margin-top:10px;
 	}
 	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>p,
-	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>div{
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>div,
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>span{
+		display:none;
 		position:relative;
 		width:auto;
+		height:auto;
+		visibility:visible;
+		opacity:1;
 		border:0;
 		background:none;
 		padding:0;
 		top:0;
 		left:-20px;
 	}
-	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div:hover>div>span{
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>p,
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>div{
+		display:block;
+	}
+	.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>span{
 		display:none;
 	}
 	.download{

_templates/choose-your-wallet.html

@@ -955,7 +955,7 @@ wallets:
     <h2>{{ wallet[1].title }}</h2>
     <div>{% for os in platform.os %}<img src="/img/os/{{ os }}.png" alt="{% translate platform{{os}} %}" title="{% translate platform{{os}} %}" />{% endfor %}</div>
     <div>{% if platform.link == 'bitcoincore' %}<a href="/{{ page.lang }}/{% translate download url %}">{% translate walletdownload %}</a>{% elsif platform.link contains 'play.google.com' or platform.link contains 'itunes.apple.com' or platform.link contains 'chrome.google.com' %}<a href="{{ platform.link }}">{% translate walletdownload %}</a>{% else %}<a href="{{ platform.link }}">{% translate walletvisit %}</a>{% endif %}{% if platform.source %}<a href="{{ platform.source }}">{% translate walletsourcecode %}</a>{% endif %}</div>
-    <div>
+    <div ontouchstart="walletScoreListener(event);" onclick="walletScoreListener(event);">
       {% for check in platform.check %}{% if check[0] == 'privacy' and platform.privacycheck %}
       <div class="check{{ check[0] }} {% if check[1] contains "checkgood" %}checkgood{% elsif check[1] contains "checkpass" %}checkpass{% elsif check[1] contains "checkneutral" %}checkneutral{% else %}checkfail{% endif %}">{% translate {{check[1]}} %}<div><div>
         {% for privacycheck in platform.privacycheck %}
@@ -985,7 +985,7 @@ wallets:
     <h2>{{ wallet[1].title }}</h2>
     <div>{% for os in platform[1].os %}<img src="/img/os/{{ os }}.png" alt="{% translate platform{{os}} %}" title="{% translate platform{{os}} %}" />{% endfor %}</div>
     <div>{% if platform[1].link == 'bitcoincore' %}<a href="/{{ page.lang }}/{% translate download url %}">{% translate walletdownload %}</a>{% elsif platform[1].link contains 'play.google.com' or platform[1].link contains 'itunes.apple.com' or platform[1].link contains 'chrome.google.com' %}<a href="{{ platform[1].link }}">{% translate walletdownload %}</a>{% else %}<a href="{{ platform[1].link }}">{% translate walletvisit %}</a>{% endif %}{% if platform[1].source %}<a href="{{ platform[1].source }}">{% translate walletsourcecode %}</a>{% endif %}</div>
-    <div>
+    <div ontouchstart="walletScoreListener(event);" onclick="walletScoreListener(event);">
       {% for check in platform[1].check %}{% if check[0] == 'privacy' and platform[1].privacycheck %}
       <div class="check{{ check[0] }} {% if check[1] contains "checkgood" %}checkgood{% elsif check[1] contains "checkpass" %}checkpass{% elsif check[1] contains "checkneutral" %}checkneutral{% else %}checkfail{% endif %}">{% translate {{check[1]}} %}<div><div>
         {% for privacycheck in platform[1].privacycheck %}

_templates/development.html

@@ -56,7 +56,7 @@ id: development
   <li><a href="https://github.com/jgarzik/picocoin">picocoin</a> - A tiny library with lightweight client and utilities, written in C.</li>
   <li><a href="https://github.com/petertodd/python-bitcoinlib">python-bitcoinlib</a> - A library for structures and protocols, written in Python.</li>
   <li><a href="https://gitlab.com/bitcoin/python-blkmaker">Python Blkmaker</a> - A client library for the getblocktemplate mining protocol, written in Python.</li>
-  <li class="more"><a onclick="librariesShow(event)" class="link-js">{% translate moremore %}</a></li>
+  <li class="more"><a onclick="librariesShow(event)" ontouchstart="librariesShow(event);" class="link-js">{% translate moremore %}</a></li>
 </ul>
 
 <section id="devcommunities">

_templates/press.html

@@ -55,26 +55,26 @@ dialogs:
 <div class="press-faq">
 
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate whatisbitcoin faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate whatisbitcoin faq %}</a>
   <div>
   <p>{% translate whatisbitcointxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate howitworks faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate howitworks faq %}</a>
   <div>
   <p>{% translate howitworkstxt1 faq %}</p>
   <p>{% translate howitworkstxt2 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate whatismining faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate whatismining faq %}</a>
   <div>
   <p>{% translate whatisminingtxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate acquire faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate acquire faq %}</a>
   <div>
   <ul>
     <li>{% translate acquireli1 faq %}</li>
@@ -86,7 +86,7 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate used faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate used faq %}</a>
   <div>
   <p>{% translate usedtxt1 faq %}</p>
   <p>
@@ -95,14 +95,14 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate makepayment faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate makepayment faq %}</a>
   <div>
   <p>{% translate makepaymenttxt1 faq %}</p>
   <p><img src="/img/faq/mobile_send.png" style="height:325px;width:190px;" alt="Screenshot"><img src="/img/faq/mobile_receive.png" style="height:325px;width:190px;" alt="Screenshot"></p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate advantages faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate advantages faq %}</a>
   <div>
   <ul>
     <li>{% translate advantagesli1 faq %}</li>
@@ -114,7 +114,7 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate disadvantages faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate disadvantages faq %}</a>
   <div>
   <ul>
     <li>{% translate disadvantagesli1 faq %}</li>
@@ -124,13 +124,13 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate secure faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate secure faq %}</a>
   <div>
   <p>{% translate securetxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate islegal faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate islegal faq %}</a>
   <div>
   <p>{% translate islegaltxt1 faq %}</p>
   <p>{% translate islegaltxt2 faq %}</p>
@@ -141,13 +141,13 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate taxes faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate taxes faq %}</a>
   <div>
   <p>{% translate taxestxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate illegalactivities faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate illegalactivities faq %}</a>
   <div>
   <p>{% translate illegalactivitiestxt1 faq %}</p>
   <p>{% translate illegalactivitiestxt2 faq %}</p>
@@ -155,51 +155,51 @@ dialogs:
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate bubble faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate bubble faq %}</a>
   <div>
   <p>{% translate bubbletxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate whyvalue faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate whyvalue faq %}</a>
   <div>
   <p>{% translate whyvaluetxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate ponzi faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate ponzi faq %}</a>
   <div>
   <p>{% translate ponzitxt1 faq %}</p>
   <p>{% translate ponzitxt2 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate creator faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate creator faq %}</a>
   <div>
   <p>{% translate creatortxt1 faq %}</p>
   <p>{% translate creatortxt2 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate worthless faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate worthless faq %}</a>
   <div>
   <p>{% translate worthlesstxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate virtual faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate virtual faq %}</a>
   <div>
   <p>{% translate virtualtxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate trust faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate trust faq %}</a>
   <div>
   <p>{% translate trusttxt1 faq %}</p>
   </div>
 </div>
 <div>
-  <a onclick="faqShow(event);" class="link-js">{% translate anonymous faq %}</a>
+  <a onclick="faqShow(event);" ontouchstart="faqShow(event);" class="link-js">{% translate anonymous faq %}</a>
   <div>
   <p>{% translate anonymoustxt1 faq %}</p>
   <p>{% translate anonymoustxt2 faq %}</p>
@@ -252,7 +252,7 @@ What is Bitcoin - Weusecoins<br>
 <p><span>{{ page.dialogs.quotenavalravikant }}</span><span>Naval Ravikant, Founder of Angellist</span></p>
 <p><span>{{ page.dialogs.quotemaxkeiser }}</span><span>Max Keiser, Journalist &amp; TV Host</span></p>
 </div>
-<a href="#" onclick="materialShow(event);">{{ page.dialogs.materialquotemore }}</a>
+<a href="#" onclick="materialShow(event);" ontouchstart="materialShow(event);">{{ page.dialogs.materialquotemore }}</a>
 
 </div>
 

_templates/secure-your-wallet.html

@@ -50,7 +50,7 @@ id: secure-your-wallet
 <p>{% translate offlinetxt %}</p>
 
 <div class="box boxexpand">
-<h3 id="offlinetx"><a onclick="boxShow(event);" class="link-js">{% translate offlinetx %}</a></h3>
+<h3 id="offlinetx"><a onclick="boxShow(event);" ontouchstart="boxShow(event);" class="link-js">{% translate offlinetx %}</a></h3>
 <p>{% translate offlinetxtxt1 %}</p>
 <ol>
   <li>{% translate offlinetxtxt2 %}</li>
@@ -62,7 +62,7 @@ id: secure-your-wallet
 
 <br>
 <div class="box boxexpand">
-<h3 id="hardwarewallet"><a onclick="boxShow(event);" class="link-js">{% translate hardwarewallet %}</a></h3>
+<h3 id="hardwarewallet"><a onclick="boxShow(event);" ontouchstart="boxShow(event);" class="link-js">{% translate hardwarewallet %}</a></h3>
 <p>{% translate hardwarewallettxt %}</p>
 </div>
 

js/main.js

@@ -119,15 +119,18 @@ return false;
 
 function loadYoutubeVideo(e) {
 // Load Youtube video on target node on click.
-var t = getEvent(e, 'target'),
+function init(e) {
-    nd = document.createElement('IFRAME');
+	var t = getEvent(e, 'target'),
-while (t.getAttribute('data-youtubeurl') === null || t.getAttribute('data-youtubeurl') === '') t = t.parentNode;
+	    nd = document.createElement('IFRAME');
-nd.src = t.getAttribute('data-youtubeurl');
+	while (t.getAttribute('data-youtubeurl') === null || t.getAttribute('data-youtubeurl') === '') t = t.parentNode;
-nd.setAttribute('frameborder', 0);
+	nd.src = t.getAttribute('data-youtubeurl');
-nd.setAttribute('allowfullscreen', true);
+	nd.setAttribute('frameborder', 0);
-t.innerHTML = '';
+	nd.setAttribute('allowfullscreen', true);
-t.appendChild(nd);
+	t.innerHTML = '';
-t.onclick = '';
+	t.appendChild(nd);
+	t.onclick = '';
+}
+onTouchClick(e, init);
 }
 
 function expandBox(t) {
@@ -148,36 +151,48 @@ setTimeout(function() {
 
 function boxShow(e) {
 // Display the box content when the user click a box on the "Secure your wallet" page.
-var t = getEvent(e, 'target');
+function init(e) {
-while (t.nodeName != 'DIV') t = t.parentNode;
+	var t = getEvent(e, 'target');
-expandBox(t);
+	while (t.nodeName != 'DIV') t = t.parentNode;
-cancelEvent(e);
+	expandBox(t);
+	cancelEvent(e);
+}
+onTouchClick(e, init);
 }
 
 function faqShow(e) {
 // Display the content of a question in the FAQ at user request.
-var t = getEvent(e, 'target');
+function init(e) {
-while (t.nodeType != 1 || t.nodeName != 'DIV') t = t.nextSibling;
+	var t = getEvent(e, 'target');
-expandBox(t);
+	while (t.nodeType != 1 || t.nodeName != 'DIV') t = t.nextSibling;
-cancelEvent(e);
+	expandBox(t);
+	cancelEvent(e);
+}
+onTouchClick(e, init);
 }
 
 function materialShow(e) {
 // Display more materials on the "Press center" page at user request.
-var t = getEvent(e, 'target'),
+function init(e) {
-    p = t;
+	var t = getEvent(e, 'target'),
-while (p.nodeType != 1 || p.nodeName != 'DIV') p = p.parentNode;
+	    p = t;
-expandBox(p);
+	while (p.nodeType != 1 || p.nodeName != 'DIV') p = p.parentNode;
-cancelEvent(e);
+	expandBox(p);
+	cancelEvent(e);
+}
+onTouchClick(e, init);
 }
 
 function librariesShow(e) {
 // Display more open source projects on the "Development" page at user request.
-var t = getEvent(e, 'target'),
+function init(e) {
-    p = t;
+	var t = getEvent(e, 'target'),
-while (p.nodeType != 1 || p.nodeName != 'UL') p = p.parentNode;
+	    p = t;
-expandBox(p);
+	while (p.nodeType != 1 || p.nodeName != 'UL') p = p.parentNode;
-cancelEvent(e);
+	expandBox(p);
+	cancelEvent(e);
+}
+onTouchClick(e, init);
 }
 
 function freenodeShow(e) {
@@ -384,6 +399,16 @@ onTouchClick(e, function() {
 });
 }
 
+function walletScoreListener(e) {
+// Listen for events on wallet scores and display them on tap.
+var init = function(e) {
+	var t = getEvent(e, 'target');
+	while (!t.parentNode.parentNode.parentNode.id) t = t.parentNode;
+	(t.className.indexOf('hover') === -1) ? addClass(t, 'hover') : removeClass(t, 'hover');
+};
+onTouchClick(e, init);
+}
+
 function walletShowPlatform(platform) {
 // Show wallets for given platform in the menu.
 var t = null,