Skip to content

Commit

Permalink
Drop use of href="#|return false;" workarounds
Browse files Browse the repository at this point in the history 
This workaround was used for facilitating clicks on mobiles,
but is now unnecessary as ontouchstart events are used.
  • Loading branch information
@saivann
saivann committed Jul 26, 2015
1 parent 11c484c commit 664ec1a
Show file tree
Hide file tree
Showing 8 changed files with 64 additions and 40 deletions.
2 changes: 1 addition & 1 deletion _includes/fragment_reviews_needed.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ http://opensource.org/licenses/MIT.
<!--Temporary disclaimer BEGIN-->
<div id="develdocdisclaimer" class="develdocdisclaimer"><div>
<b>BETA</b>: This documentation has not been extensively reviewed by Bitcoin experts and so likely contains numerous errors. Please use the <em>Issue</em> and <em>Edit</em> links on the bottom left menu to help us improve. <a href="#" onclick="disclaimerClose(event);">Click here</a> to close this disclaimer.
<a class="develdocdisclaimerclose" href="#" onclick="disclaimerClose(event);">X</a>
<a class="develdocdisclaimerclose" onclick="disclaimerClose(event);">X</a>
</div></div>
<script>disclaimerAutoClose();</script>
<!--Temporary disclaimer END-->
10 changes: 5 additions & 5 deletions _layouts/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
{% endif %}
<div class="head"><div>
<ul class="lang">
<li><a href="#" onclick="return false;">{{ site.langs[page.lang] }}</a>
<li><a>{{ site.langs[page.lang] }}</a>
<ul>
<li><ul>
{% assign i = 0 %}{% assign c = site.langsorder.size | divided_by: 2 | plus: 1 %}
Expand All @@ -41,15 +41,15 @@
</ul>
</li>
</ul>
<a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" ontouchstart="mobileMenuShow(event);" href="#"></a>
<a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" ontouchstart="mobileMenuShow(event);"></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);" ontouchstart="mobileMenuHover(event);">
<li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
<li><a>{% 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>
<li{% if page.id == 'bitcoin-for-businesses' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}">{% translate menu-bitcoin-for-businesses layout %}</a></li>
Expand All @@ -59,7 +59,7 @@
<li{% if page.id == 'you-need-to-know' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate menu-you-need-to-know layout %}</a></li>
</ul>
</li>
<li><a href="#" onclick="return false;">{% translate menu-resources layout %}</a>
<li><a>{% translate menu-resources layout %}</a>
<ul>
<li{% if page.id == 'resources' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate resources url %}">{% translate menu-resources layout %}</a></li>
<li{% if page.id == 'community' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate community url %}">{% translate menu-community layout %}</a></li>
Expand All @@ -69,7 +69,7 @@
</ul>
</li>
<li{% if page.id == 'innovation' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate innovation url %}">{% translate menu-innovation layout %}</a></li>
<li><a href="#" onclick="return false;">{% translate menu-participate layout %}</a>
<li><a>{% translate menu-participate layout %}</a>
<ul>
<li{% if page.id == 'support-bitcoin' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate support-bitcoin url %}">{% translate menu-support-bitcoin layout %}</a>
{% if page.lang == 'en' %}<li{% if page.id == 'full-node' %} class="active"{% endif %}><a href="/en/full-node">Running a full node</a></li>{% endif %}
Expand Down
14 changes: 12 additions & 2 deletions _less/screen.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,16 @@ h3{
}
a:link,
a:visited,
a:active{
a:active,
a.link-js{
color:#2c6fad;
text-decoration:none;
cursor:pointer;
}
a:link:hover,
a:visited:hover,
a:active:hover{
a:active:hover,
a.link-js:hover{
color:#63a4e1;
}
a img,
Expand Down Expand Up @@ -316,6 +319,7 @@ table td,table th{
color:#2c6fad;
}
.menusimple>li a{
cursor:pointer;
font-family:'Ubuntu', sans-serif;
font-weight:300;
font-size:110%;
Expand Down Expand Up @@ -1456,6 +1460,8 @@ div.post {
display:none;
}
.wallets>div>a{
color:#2c6fad;
cursor:pointer;
font-size:94%;
text-align:center;
text-decoration:none;
Expand All @@ -1472,6 +1478,9 @@ div.post {
-webkit-transition:opacity 400ms ease-out;
transition:opacity 400ms ease-out;
}
.wallets>div>a:hover{
color:#63a4e1;
}
.wallets>div>a>span{
display:none;
position:absolute;
Expand Down Expand Up @@ -2227,6 +2236,7 @@ h2 .rssicon{
-moz-appearance:none;
}
.menumobile{
cursor:pointer;
display:inline-block;
float:right;
height:40px;
Expand Down
4 changes: 2 additions & 2 deletions _templates/choose-your-wallet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -972,7 +972,7 @@ <h2>{{ wallet[1].title }}</h2>
<p>{% translate {{platform.text}} %}</p>
<div><img src="/img/screenshots/{{ platform.screenshot }}" alt="screenshot"></div>
</div>
<a href="#" onclick="return false;"><img src="/img/wallet/{{ wallet[0] }}.png" alt="{{ wallet[1].title }}" />{{ wallet[1].titleshort }}<span></span></a>
<a><img src="/img/wallet/{{ wallet[0] }}.png" alt="{{ wallet[1].title }}" />{{ wallet[1].titleshort }}<span></span></a>
</div>
{% endfor %}{% endfor %}
</div>
Expand Down Expand Up @@ -1002,7 +1002,7 @@ <h2>{{ wallet[1].title }}</h2>
<p>{% translate {{platform[1].text}} %}</p>
<div><img src="/img/screenshots/{{ platform[1].screenshot }}" alt="screenshot"></div>
</div>
<a href="#" onclick="return false;"><img src="/img/wallet/{{ wallet[0] }}.png" alt="{{ wallet[1].title }}" />{{ wallet[1].titleshort }}<span></span></a>
<a><img src="/img/wallet/{{ wallet[0] }}.png" alt="{{ wallet[1].title }}" />{{ wallet[1].titleshort }}<span></span></a>
</div>
{% endfor %}{% endfor %}{% endfor %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion _templates/development.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h2 id="more">{% translate more %}</h2>
<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 href="#" onclick="librariesShow(event)">{% translate moremore %}</a></li>
<li class="more"><a onclick="librariesShow(event)" class="link-js">{% translate moremore %}</a></li>
</ul>

<section id="devcommunities">
Expand Down
40 changes: 20 additions & 20 deletions _templates/press.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,26 +55,26 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
<div class="press-faq">

<div>
<a href="#" onclick="faqShow(event);">{% translate whatisbitcoin faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate whatisbitcoin faq %}</a>
<div>
<p>{% translate whatisbitcointxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate howitworks faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate howitworks faq %}</a>
<div>
<p>{% translate howitworkstxt1 faq %}</p>
<p>{% translate howitworkstxt2 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate whatismining faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate whatismining faq %}</a>
<div>
<p>{% translate whatisminingtxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate acquire faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate acquire faq %}</a>
<div>
<ul>
<li>{% translate acquireli1 faq %}</li>
Expand All @@ -86,7 +86,7 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate used faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate used faq %}</a>
<div>
<p>{% translate usedtxt1 faq %}</p>
<p>
Expand All @@ -95,14 +95,14 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate makepayment faq %}</a>
<a onclick="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 href="#" onclick="faqShow(event);">{% translate advantages faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate advantages faq %}</a>
<div>
<ul>
<li>{% translate advantagesli1 faq %}</li>
Expand All @@ -114,7 +114,7 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate disadvantages faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate disadvantages faq %}</a>
<div>
<ul>
<li>{% translate disadvantagesli1 faq %}</li>
Expand All @@ -124,13 +124,13 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate secure faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate secure faq %}</a>
<div>
<p>{% translate securetxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate islegal faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate islegal faq %}</a>
<div>
<p>{% translate islegaltxt1 faq %}</p>
<p>{% translate islegaltxt2 faq %}</p>
Expand All @@ -141,65 +141,65 @@ <h2 id="layout">{% translate menu-faq layout %}</h2>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate taxes faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate taxes faq %}</a>
<div>
<p>{% translate taxestxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate illegalactivities faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate illegalactivities faq %}</a>
<div>
<p>{% translate illegalactivitiestxt1 faq %}</p>
<p>{% translate illegalactivitiestxt2 faq %}</p>
<p>{% translate illegalactivitiestxt3 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate bubble faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate bubble faq %}</a>
<div>
<p>{% translate bubbletxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate whyvalue faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate whyvalue faq %}</a>
<div>
<p>{% translate whyvaluetxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate ponzi faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate ponzi faq %}</a>
<div>
<p>{% translate ponzitxt1 faq %}</p>
<p>{% translate ponzitxt2 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate creator faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate creator faq %}</a>
<div>
<p>{% translate creatortxt1 faq %}</p>
<p>{% translate creatortxt2 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate worthless faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate worthless faq %}</a>
<div>
<p>{% translate worthlesstxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate virtual faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate virtual faq %}</a>
<div>
<p>{% translate virtualtxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate trust faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate trust faq %}</a>
<div>
<p>{% translate trusttxt1 faq %}</p>
</div>
</div>
<div>
<a href="#" onclick="faqShow(event);">{% translate anonymous faq %}</a>
<a onclick="faqShow(event);" class="link-js">{% translate anonymous faq %}</a>
<div>
<p>{% translate anonymoustxt1 faq %}</p>
<p>{% translate anonymoustxt2 faq %}</p>
Expand Down
4 changes: 2 additions & 2 deletions _templates/secure-your-wallet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h2 id="offline">{% translate offline %}</h2>
<p>{% translate offlinetxt %}</p>

<div class="box boxexpand">
<h3 id="offlinetx"><a href="#" onclick="boxShow(event);">{% translate offlinetx %}</a></h3>
<h3 id="offlinetx"><a onclick="boxShow(event);" class="link-js">{% translate offlinetx %}</a></h3>
<p>{% translate offlinetxtxt1 %}</p>
<ol>
<li>{% translate offlinetxtxt2 %}</li>
Expand All @@ -62,7 +62,7 @@ <h3 id="offlinetx"><a href="#" onclick="boxShow(event);">{% translate offlinetx

<br>
<div class="box boxexpand">
<h3 id="hardwarewallet"><a href="#" onclick="boxShow(event);">{% translate hardwarewallet %}</a></h3>
<h3 id="hardwarewallet"><a onclick="boxShow(event);" class="link-js">{% translate hardwarewallet %}</a></h3>
<p>{% translate hardwarewallettxt %}</p>
</div>

Expand Down
28 changes: 21 additions & 7 deletions js/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,16 @@ for (var i = 0, nd = document.getElementsByTagName('*'), n = nd.length; i < n; i
}
}

function onTouchClick(e, callback) {
function onTouchClick(e, callback, callbackClick) {
// Detect and handle clicks using click and touch events while preventing accidental or ghost clicks.
var timeout = 1000,
srcEvent = e,
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);
callback(srcEvent);
},
wrongClickListener = function(e) {
// Cancel click events on different targets within timeframe.
Expand All @@ -115,6 +116,7 @@ var timeout = 1000,
var ti = document.body.getAttribute('data-touchtimeout');
return (ti === null || ti === '' || parseInt(ti, 10) < new Date().getTime());
};
if (callbackClick === undefined) callbackClick = function() {};
// Apply appropriate actions according to each event type.
switch (getEvent(e, 'type')) {
case 'touchstart':
Expand All @@ -131,8 +133,10 @@ switch (getEvent(e, 'type')) {
break;
case 'click':
// Call callback on click in the absence of a recent touchstart event to prevent ghost clicks.
// Always call callbackClick to let it cancel click events on links.
callbackClick(srcEvent);
if (!clickReady()) return;
callback();
callback(srcEvent);
break;
}
}
Expand All @@ -143,6 +147,7 @@ var show = function() {
var mm = document.getElementById('menusimple');
var ml = document.getElementById('langselect');
mm.style.display = ml.style.display = (mm.style.display == 'block') ? '' : 'block';
addClass(mm, 'menutap');
cancelEvent(e);
};
onTouchClick(e, show);
Expand All @@ -154,14 +159,13 @@ var t = getEvent(e, 'target'),
fn = (t.parentNode.className.indexOf('hover') === -1) ? addClass : removeClass,
initHover = function() {
if (t.nodeName != 'A') return;
if (fn == removeClass && t.parentNode.getElementsByTagName('UL').length == 0) return;
if (fn == removeClass && !hasSubItems(t)) 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;
if (hasSubItems(nds[i])) continue;
removeClass(nds[i], 'hover');
}
while (t != p) {
Expand All @@ -171,8 +175,18 @@ var t = getEvent(e, 'target'),
}
t = t.parentNode;
}
},
hasSubItems = function(t) {
while (t.nodeName != 'LI') t = t.parentNode;
return (t.getElementsByTagName('UL').length > 0);
},
// Prevent clicks on parent element links in the menu.
filterClick = function(e) {
var t = getEvent(e, 'target');
if (t.nodeName != 'A') return;
if (hasSubItems(t)) cancelEvent(e);
};
onTouchClick(e, initHover);
onTouchClick(e, initHover, filterClick);
}

function addAnchorLinks() {
Expand Down

0 comments on commit 664ec1a

Please sign in to comment.