mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 01:36:13 +00:00
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
This commit is contained in:
Saivann
parent
8c3852e230
commit
5707cea630
7 changed files with 462 additions and 300 deletions
|
|
@ -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>
|
||||
|
|
|
|||
66
_less/ie.css
66
_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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
96
js/base.js
96
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() {
|
||||
|
|
|
|||
204
js/main.js
204
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++) {
|
||||
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;
|
||||
var t = nds[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-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;
|
||||
}
|
||||
for (var i = 0, nds = document.getElementById('walletmenu').getElementsByTagName('A'), n = nds.length; i < n; i++) {
|
||||
}
|
||||
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') {
|
||||
}
|
||||
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() {
|
||||
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;
|
||||
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]);
|
||||
for (var ii = 0, nn = platforms.length; ii < nn; ii++) {
|
||||
var wp = document.getElementById('wallet-' + id + '-' + platforms[ii]);
|
||||
if (wp) var nd = wp;
|
||||
}
|
||||
}
|
||||
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) {
|
||||
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;
|
||||
addClass(nd, 'nohover');
|
||||
p.appendChild(nd);
|
||||
}
|
||||
walletRotate()
|
||||
walletRotate();
|
||||
removeClass(p, 'disabled');
|
||||
document.getElementById('walletsmobile').innerHTML = '';
|
||||
}, ti));
|
||||
}, 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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue