joshua/dash-docs
1
0
Fork 0
mirror of https://github.com/seigler/dash-docs synced 2025-07-27 01:36:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rework menus for mobile compatibility

Browse source 
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
This commit is contained in:
Saivann 2015-07-07 14:15:23 -04:00
parent 8c3852e230
commit 5707cea630
No known key found for this signature in database
GPG key ID: 5780F5D31B5577B0
7 changed files with 462 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

4
_layouts/base.html
View file

@ -41,14 +41,14 @@
</ul> </ul>
</li> </li>
</ul> </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> <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;"> <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 %} {% 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> <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
{% endfor %} {% endfor %}
</select></div> </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> <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
<ul> <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-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>

66
_less/ie.css
View file

@ -34,32 +34,80 @@ body{
display:inline; display:inline;
} }
.menusimple{
margin:0;
position:absolute;
top:8px;
left:245px;
padding:0;
height:35px;
}
.menusimple li{ .menusimple li{
list-style:none;
zoom:1; zoom:1;
display:inline; 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{ .menusimple li a{
font-family:sans-serif; font-family:sans-serif;
} display:block;
.menusimple li:hover a, white-space:nowrap;
.menusimple li.active a{ font-size:110%;
color:#fff; padding:6px 10px 4px 10px;
} }
.menusimple li ul{ .menusimple li ul{
width:190px; width:190px;
display:none;
position:absolute;
background-color:#fff;
border:1px solid #2c6fad;
min-width:auto; min-width:auto;
padding:5px 0;
margin:0;
left:0;
} }
.menusimple li ul li{ .menusimple li ul li{
margin:0;
display:block;
width:100%; width:100%;
} }
.menusimple li ul li a{ .menusimple li ul li a{
width:100%; width:100%;
font-size:100%;
margin:1px 0;
padding:6px 10px 3px 10px;
} }
.menusimple li ul li a:hover, .menusimple li ul li a,
.menusimple li ul li.active a, .menusimple li ul li a:active,
.menusimple li ul li.active a:link, .menusimple li ul li a:visited,
.menusimple li ul li.active a:visited, .menusimple li ul li a:link{
.menusimple li ul li.active a:active{ 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; color:#fff;
} }

37
_less/rtl.less
View file

@ -199,31 +199,32 @@ h2 .rssicon{
text-align:right; text-align:right;
} }
.walletmenu ul{ .walletmenu>ul{
text-align:right; text-align:right;
} }
.walletmenu ul li a{ .walletmenu>ul li{
padding:8px 42px 5px 10px;
}
.walletmenu ul li{
font-family:'DroidNaskh', sans-serif; font-family:'DroidNaskh', sans-serif;
background-position:right 6px; background-position:right 6px;
} }
.walletmenu ul li.active, .walletmenu>ul>li a{
.walletmenu ul li.select{ padding:8px 42px 5px 10px;
background-position:right -62px;
} }
.walletmenu ul li ul{ .walletmenu>ul>li ul{
left:auto; left:auto;
right:0; right:0;
} }
.walletmenu ul li ul li{ .walletmenu>ul>li>ul li{
background-position:right 10px; 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; background-position:right -24px;
} }
.walletmenu ul li ul li.select a{ .walletmenu>ul>li>ul li.active>a{
background-position:left center; background-position:left center;
} }
@ -358,6 +359,18 @@ h2 .rssicon{
padding-right:0; padding-right:0;
margin-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{ .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div{
padding:8px 22px 8px 0; padding:8px 22px 8px 0;
background-position:right 7px; background-position:right 7px;

309
_less/screen.less
View file

@ -299,9 +299,9 @@ table td,table th{
-moz-border-radius:5px; -moz-border-radius:5px;
border-radius:5px; border-radius:5px;
} }
.menusimple li:first-child, .menusimple>li:first-child,
.menusimple li:first-child+li, .menusimple>li:first-child+li,
.menusimple li:first-child+li+li+li{ .menusimple>li:first-child+li+li+li{
-webkit-border-bottom-left-radius:0; -webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0; -webkit-border-bottom-right-radius:0;
-moz-border-radius-bottomleft:0; -moz-border-radius-bottomleft:0;
@ -309,25 +309,22 @@ table td,table th{
border-bottom-left-radius:0; border-bottom-left-radius:0;
border-bottom-right-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-family:'Ubuntu', sans-serif;
font-weight:300; font-weight:300;
font-size:110%; font-size:110%;
display:block; display:block;
text-decoration:none; text-decoration:none;
padding:6px 10px 4px 10px; padding:6px 10px 4px 10px;
color:#2c6fad;
white-space:nowrap; white-space:nowrap;
} }
.menusimple li:hover, .menusimple>li ul{
.menusimple li.active{
background-color:#2c6fad;
}
.menusimple li:hover a,
.menusimple li.active a{
color:#fff;
}
.menusimple li ul{
display:none; display:none;
position:absolute; position:absolute;
background-color:#fff; background-color:#fff;
@ -337,11 +334,7 @@ table td,table th{
margin:0; margin:0;
left:0; left:0;
} }
.menusimple li:hover ul{ .menusimple>li>ul li{
display:block;
}
.menusimple li ul li{
padding:0;
margin:0; margin:0;
display:block; display:block;
width:100%; width:100%;
@ -349,20 +342,22 @@ table td,table th{
-moz-border-radius:0; -moz-border-radius:0;
border-radius:0; border-radius:0;
} }
.menusimple li ul 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{
display:block;
color:#2c6fad;
font-size:100%; font-size:100%;
margin:1px 0; margin:1px 0;
padding:6px 10px 3px 10px; padding:6px 10px 3px 10px;
} }
.menusimple li ul li:hover a, .menusimple li:hover,
.menusimple li ul li.active a{ .menusimple li.active{
background-color:#2c6fad;
}
.menusimple li:hover>a,
.menusimple li.active>a{
color:#fff; color:#fff;
} }
.menusimple li:hover>ul{
display:block;
}
.content{ .content{
position:relative; position:relative;
@ -1295,21 +1290,20 @@ div.post {
position:relative; position:relative;
z-index:90; z-index:90;
} }
.walletmenu ul{ .walletmenu>ul{
display:inline-block; display:inline-block;
text-align:left; text-align:left;
padding:0 0 25px 0; padding:0 0 25px 0;
border-bottom:1px solid #E2E2E2; border-bottom:1px solid #E2E2E2;
background-color:#fff; background-color:#fff;
} }
.walletmenu ul li{ .walletmenu>ul li{
font-family:'Ubuntu', sans-serif; font-family:'Ubuntu', sans-serif;
position:relative; position:relative;
display:inline-block; display:inline-block;
background-repeat:no-repeat; background-repeat:no-repeat;
background-position:left 6px; background-position:left 6px;
color:#383838; padding:0;
cursor:pointer;
margin:15px 10px; margin:15px 10px;
font-size:130%; font-size:130%;
font-weight:bold; font-weight:bold;
@ -1320,36 +1314,28 @@ div.post {
-moz-border-radius:4px; -moz-border-radius:4px;
border-radius:4px; border-radius:4px;
} }
.walletmenu ul:hover li:first-child, .walletmenu>ul>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{
margin-left:0; margin-left:0;
} }
.walletmenu ul li:last-child{ .walletmenu>ul>li:last-child{
margin-right:0; margin-right:0;
} }
.walletmenu ul li a{ .walletmenu>ul>li a,
padding:8px 10px 5px 42px; .walletmenu>ul>li a:link,
display:block; .walletmenu>ul>li a:active,
white-space:nowrap; .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; display:none;
position:absolute; position:absolute;
background-color:#fff;
border:1px solid #0d579b; border:1px solid #0d579b;
padding:4px 0; padding:4px 0;
min-width:110%; min-width:110%;
@ -1358,31 +1344,23 @@ div.post {
-webkit-box-sizing:border-box; -webkit-box-sizing:border-box;
box-sizing:border-box; box-sizing:border-box;
} }
.walletmenu ul li:hover ul{ .walletmenu>ul>li>ul li{
display:block;
}
.walletmenu ul li ul li{
font-size:80%; font-size:80%;
display:block; display:block;
padding:0;
margin:0; margin:0;
background-position:left 10px; background-position:left 10px;
-webkit-border-radius:0px; -webkit-border-radius:0px;
-moz-border-radius:0px; -moz-border-radius:0px;
border-radius:0px; border-radius:0px;
} }
.walletmenu ul li ul li.select, .walletmenu>ul>li>ul>li a{
.walletmenu ul li ul li:hover{
background-position:left -24px;
}
.walletmenu ul li ul li a{
background-image:url(/img/icons/wallet_select.svg); background-image:url(/img/icons/wallet_select.svg);
background-repeat:no-repeat; background-repeat:no-repeat;
background-position:-32px center; background-position:-32px center;
padding:8px 32px 5px 32px; padding:8px 32px 5px 32px;
margin:1px 0; margin:1px 0;
} }
.walletmenu ul li ul li.select a{ .walletmenu>ul>li>ul>li.active>a{
background-position:right center; background-position:right center;
} }
.walletmenu .wallet-mobile{ .walletmenu .wallet-mobile{
@ -1418,6 +1396,40 @@ div.post {
.walletmenu .wallet-linux{ .walletmenu .wallet-linux{
background-image:url(/img/os/wallet_menu_linux.png); 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{ .wallets{
width:605px; width:605px;
@ -1443,10 +1455,7 @@ div.post {
.wallets>div:nth-child(1n+13){ .wallets>div:nth-child(1n+13){
display:none; display:none;
} }
.wallets>div>a, .wallets>div>a{
.wallets>div>a:visited,
.wallets>div>a:link,
.wallets>div>a:active{
font-size:94%; font-size:94%;
text-align:center; text-align:center;
text-decoration:none; text-decoration:none;
@ -1473,12 +1482,6 @@ div.post {
left:0; left:0;
right:0; right:0;
} }
.wallets>div:hover>a>span{
display:block;
}
.wallets>div.nohover:hover>a>span{
display:none;
}
.wallets>div>a>img{ .wallets>div>a>img{
display:block; display:block;
width:72px; width:72px;
@ -1514,21 +1517,6 @@ div.post {
.wallets>div>div{ .wallets>div>div{
z-index:102; 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)>div,
.wallets>div:nth-child(1n+7)>span{ .wallets>div:nth-child(1n+7)>span{
top:-222px; top:-222px;
@ -1558,12 +1546,8 @@ div.post {
-moz-border-radius:4px; -moz-border-radius:4px;
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{
.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{
font-weight:bold; font-weight:bold;
color:#fff;
background-color:#2c6fad; background-color:#2c6fad;
background-image:-o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%); background-image:-o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
background-image:-moz-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; border:1px solid #255f96;
margin-right:10px; margin-right:10px;
} }
.wallets>div>div>h2:first-child+div+div>a:first-child:hover{ .wallets>div>div>h2:first-child+div+div>a:first-child,
background-image:none; .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,
.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: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:link,
.wallets>div>div>h2:first-child+div+div>a:first-child+a:active{ .wallets>div>div>h2:first-child+div+div>a:first-child+a:active{
font-weight:normal;
color:#255f96; color:#255f96;
border:1px solid #255f96;
} }
.wallets>div>div>h2:first-child+div+div+div{ .wallets>div>div>h2:first-child+div+div+div{
margin:5px 0; margin:5px 0;
@ -1615,9 +1605,6 @@ div.post {
background-repeat:no-repeat; background-repeat:no-repeat;
background-position:right 30px; 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>p,
.wallets>div>div>h2:first-child+div+div+div>div>div>div{ .wallets>div>div>h2:first-child+div+div+div>div>div>div{
opacity:0; 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{ .wallets>div>div>h2:first-child+div+div+div>div>div>div>div>p:first-child+p{
font-size:85%; 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{ .wallets>div>div>h2:first-child+div+div+div+p{
font-size:95%; font-size:95%;
margin:0; margin:0;
@ -1754,6 +1734,46 @@ div.post {
.wallets .checkprivacy.checkfail{ .wallets .checkprivacy.checkfail{
background-image:url(/img/icons/check_privacy_fail.svg); 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{ .walletsswitch{
display:none; display:none;
@ -2226,11 +2246,8 @@ h2 .rssicon{
height:auto; height:auto;
overflow:auto; overflow:auto;
} }
.menusimple li a, .menusimple>li a,
.menusimple li ul 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{
padding:10px 6px 8px 6px; padding:10px 6px 8px 6px;
display:block; display:block;
} }
@ -2239,11 +2256,26 @@ h2 .rssicon{
margin:4px; margin:4px;
position:static; position:static;
} }
.menusimple li ul{ .menusimple>li ul{
min-width:0; min-width:0;
position:relative; 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; display:block;
} }
.logo{ .logo{
@ -2460,20 +2492,53 @@ h2 .rssicon{
padding:0; padding:0;
border:0; border:0;
} }
.walletmenu ul{ .walletmenu>ul{
display:block; display:block;
} }
.walletmenu ul.hover{ .walletmenu>ul li{
display:block;
}
.walletmenu ul li{
display:block; display:block;
margin:15px 0; margin:15px 0;
} }
.walletmenu ul li ul{ .walletmenu>ul>li ul{
position:relative; position:relative;
min-width:0; 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{ .wallets{
width:auto; width:auto;
height:auto; height:auto;

6
_templates/choose-your-wallet.html
View file

@ -923,8 +923,8 @@ wallets:
<h1>{% translate pagetitle %}</h1> <h1>{% translate pagetitle %}</h1>
<p class="summary">{% translate pagedesc %}</p> <p class="summary">{% translate pagedesc %}</p>
<div class="walletmenu" id="walletmenu" onmouseover="walletListener(event);" onmouseout="walletListener(event);" onclick="walletListener(event);"> <div class="walletmenu" id="walletmenu" onclick="walletMenuListener(event);" ontouchstart="walletMenuListener(event);">
<ul onclick="mobileMenuHover(event);"> <ul onclick="mobileMenuHover(event);" ontouchstart="mobileMenuHover(event);">
<li class="wallet-mobile"> <li class="wallet-mobile">
<a id="mobile" data-walletcompat="mobile">{% translate walletcatmobile %}</a> <a id="mobile" data-walletcompat="mobile">{% translate walletcatmobile %}</a>
<ul> <ul>
@ -947,7 +947,7 @@ wallets:
</ul> </ul>
</div> </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 %} {% 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 }}"> <div id="wallet-{{ wallet[0] }}" data-walletcompat="{{ wallet[1].compat }}" data-walletlevel="{{ wallet[1].level }}">
<span></span> <span></span>

96
js/base.js
View file

@ -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) { function mobileMenuShow(e) {
// Show the mobile menu when the visitors touch the menu icon. // Show the mobile menu when the visitors touch the menu icon.
var mm = document.getElementById('menusimple'); var show = function() {
var ml = document.getElementById('langselect'); var mm = document.getElementById('menusimple');
var t = document.getElementById('menumobile'); var ml = document.getElementById('langselect');
mm.style.display = ml.style.display = (mm.style.display == 'block') ? '' : 'block'; mm.style.display = ml.style.display = (mm.style.display == 'block') ? '' : 'block';
cancelEvent(e); cancelEvent(e);
};
onTouchClick(e, show);
} }
function mobileMenuHover(e) { function mobileMenuHover(e) {
// Add a delay before hiding menu for mobiles to prevent accidental clicks. // Prevent mobile menu to shrink on hover to prevent accidental clicks on other entries.
var p = t = getEventTarget(e); var t = getEventTarget(e),
if (t.nodeName != 'A') return; fn = (t.parentNode.className.indexOf('hover') === -1) ? addClass : removeClass,
while (p.parentNode.nodeName != 'DIV') p = p.parentNode; initHover = function() {
while (t.nodeName != 'LI' || t.parentNode != p) t = t.parentNode; if (t.nodeName != 'A') return;
var ul = null; var p = t;
if (t.getElementsByTagName('UL').length > 0) { while (p.parentNode.nodeName == 'UL' || p.parentNode.nodeName == 'LI') p = p.parentNode;
var ul = t.getElementsByTagName('UL')[0]; addClass(p, 'menutap');
addClass(ul, 'hover'); for (var i = 0, nds = p.getElementsByTagName('LI'), n = nds.length; i < n; i++) {
} if (nds[i] == t.parentNode) continue;
setTimeout(function() { removeClass(nds[i], 'active');
for (var i = 0, nd = p.getElementsByTagName('UL'), n = nd.length; i < n; i++) { if (nds[i].getElementsByTagName('UL').length > 0) continue;
if (nd[i] == ul) continue; removeClass(nds[i], 'hover');
removeClass(nd[i], 'hover');
} }
}, 1); while (t != p) {
if (t.nodeName == 'LI') {
fn(t, 'hover');
fn(t, 'active');
}
t = t.parentNode;
}
};
onTouchClick(e, initHover);
} }
function addAnchorLinks() { function addAnchorLinks() {

244
js/main.js
View file

@ -104,7 +104,7 @@ document.body.setAttribute('data-scrollstatus', setInterval(function() {
function supportCSS(id) { function supportCSS(id) {
// Return true if the browser supports given CSS feature. // 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'); var nd = document.createElement('DIV');
id = id.toLowerCase(); id = id.toLowerCase();
if (nd.style[id] !== undefined) return true; if (nd.style[id] !== undefined) return true;
@ -162,7 +162,8 @@ cancelEvent(e);
function materialShow(e) { function materialShow(e) {
// Display more materials on the "Press center" page at user request. // 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; while (p.nodeType != 1 || p.nodeName != 'DIV') p = p.parentNode;
expandBox(p); expandBox(p);
cancelEvent(e); cancelEvent(e);
@ -170,7 +171,8 @@ cancelEvent(e);
function librariesShow(e) { function librariesShow(e) {
// Display more open source projects on the "Development" page at user request. // 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; while (p.nodeType != 1 || p.nodeName != 'UL') p = p.parentNode;
expandBox(p); expandBox(p);
cancelEvent(e); cancelEvent(e);
@ -333,106 +335,119 @@ if (typeof(Storage) === 'undefined') return;
if (sessionStorage.getItem('develdocdisclaimerclose') === '1') disclaimerClose(); 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) { function walletListener(e) {
// Listen events on the wallets categories menu and hide / show / select wallets accordingly. // Listen for events on wallets.
var t = getEventTarget(e); var t = getEventTarget(e),
switch (e.type) { walletShow = function() {
case 'click': // Show wallet on click on mobile or desktop.
if (t.nodeName == 'A') walletSelectPlatform(t); if (t.id == 'wallets') return;
break; while (t.parentNode && t.parentNode.id != 'wallets') t = t.parentNode;
case 'mouseover': if (!t.parentNode) return;
if (t.nodeName == 'A') walletShowPlatform(t.getAttribute('data-walletcompat')); if (isMobile()) {
if (t.nodeName == 'A') clearTimeout(document.getElementById('walletmenu').getAttribute('data-wallettimeout')); var p = document.getElementById('walletsmobile');
break; t = t.cloneNode(true);
case 'mouseout': p.innerHTML = '';
clearTimeout(document.getElementById('walletmenu').getAttribute('data-wallettimeout')); p.appendChild(t);
document.getElementById('walletmenu').setAttribute('data-wallettimeout', setTimeout(walletFallbackPlatform, 100)); scrollToNode(p);
break; } else {
} addClass(t, 'active');
} addEvent(document.body, 'click', walletListener);
}
function walletSelectPlatform(t) { },
// Select wallets platform when the mouse clicks on the menu. walletHide = function() {
var p = t; // Disable wallet when the mouse clicks elsewhere.
while (p.nodeName != 'DIV') p = p.parentNode; for (var i = 0, wallets = document.getElementById('wallets').childNodes, n = wallets.length; i < n; i++) {
for (var i = 0, nds = p.getElementsByTagName('A'), n = nds.length; i < n; i++) { if (wallets[i].nodeType != 1) continue;
nds[i].removeAttribute('data-select'); removeClass(wallets[i], 'active');
removeClass(nds[i].parentNode, 'select'); }
} removeEvent(document.body, 'click', walletListener);
t.setAttribute('data-select', '1'); };
addClass(t.parentNode, 'select'); // Call appropriate function on click.
if (isMobile() && t.parentNode.getElementsByTagName('UL').length == 0) { onTouchClick(e, function() {
setTimeout(function() { walletHide();
scrollToNode(document.getElementById('wallets')); walletShow();
}, 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'));
} }
function walletShowPlatform(platform) { function walletShowPlatform(platform) {
// Show wallets for given platform in the menu. // Show wallets for given platform in the menu.
var fallback = ''; var t = null,
// Update menu and set fallback category if hovering in a submenu. fallback = '',
for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) { walletMenu = document.getElementById('walletmenu'),
if (nds[i].getAttribute('data-walletcompat') != platform) continue; getMenuState = function() {
if (nds[i].getAttribute('data-active') == 1) return; // Find active node in the menu for given platform and fallback category if in a submenu.
var t = nds[i]; for (var i = 0, nds = walletMenu.getElementsByTagName('A'), n = nds.length; i < n; i++) {
if (nds[i].parentNode.parentNode.parentNode.nodeName == 'LI') fallback = nds[i].parentNode.parentNode.parentNode.getElementsByTagName('A')[0].getAttribute('data-walletcompat'); if (nds[i].getAttribute('data-walletcompat') != platform) continue;
break; if (nds[i].getAttribute('data-active') == 1) return false;
} t = nds[i];
for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) { var p = nds[i].parentNode.parentNode.parentNode;
nds[i].removeAttribute('data-active'); if (p.nodeName == 'LI') fallback = p.getElementsByTagName('A')[0].getAttribute('data-walletcompat');
removeClass(nds[i].parentNode, 'active'); break;
}
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);
} }
walletRotate() return true;
removeClass(p, 'disabled'); },
document.getElementById('walletsmobile').innerHTML = ''; updateMenu = function() {
}, ti)); // 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() { 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) { 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. // 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. // This trick allows translators and writers to preview their work.