Only display wallets for selected platform

_less/screen.less

@@ -1266,17 +1266,46 @@ table td,table th{
 
 .wallets{
 	width:605px;
+	height:250px;
 	text-align:left;
 	position:relative;
 	margin:auto;
 	padding:40px 0 20px 0;
 	font-size:0;
+	opacity:1;
+	-moz-transition:opacity 400ms ease-out;
+	-webkit-transition:opacity 400ms ease-out;
+	transition:opacity 400ms ease-out;
+}
+.wallets.disabled{
+	opacity:0;
 }
 .wallets>div{
-	display:inline-block;
+	display:none;
 	vertical-align:top;
 	font-size:16px;
 }
+.wallets>div:nth-child(1n){
+	display:inline-block;
+}
+.wallets>div:nth-child(1n+13){
+	display:none;
+}
+.wallets>div:first-child,
+.wallets>div:first-child+div,
+.wallets>div:first-child+div+div,
+.wallets>div:first-child+div+div+div,
+.wallets>div:first-child+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div+div+div+div+div,
+.wallets>div:first-child+div+div+div+div+div+div+div+div+div+div+div{
+	/*IE8 Support*/
+	display:inline-block;
+}
 .wallets>div>a,
 .wallets>div>a:visited,
 .wallets>div>a:link,
@@ -1296,18 +1325,6 @@ table td,table th{
 	-webkit-transition:opacity 400ms ease-out;
 	transition:opacity 400ms ease-out;
 }
-.wallets>div.disabled>a{
-	cursor:default;
-	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-	opacity:0.2;
-	-webkit-filter:grayscale(100%);
-	-moz-filter:grayscale(100%);
-	-ms-filter:grayscale(100%);
-	-o-filter:grayscale(100%);
-	filter:grayscale(100%);
-	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-	filter:alpha(opacity=20), gray;
-}
 .wallets>div>a>span{
 	display:none;
 	position:absolute;
@@ -2345,9 +2362,7 @@ h2 .rssicon{
 	}
 	.wallets{
 		width:auto;
-	}
+		height:auto;
-	.wallets>div.disabled{
-		display:none;
 	}
 	.wallets>div:hover>span{
 		display:none;

_templates/choose-your-wallet.html

@@ -701,7 +701,7 @@ wallets:
   </ul>
 </div>
 
-<div class="wallets" id="wallets" onclick="walletMobileShow(event);walletDisabledShow(event);">
+<div class="wallets" id="wallets" onclick="walletShow(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>
@@ -764,7 +764,6 @@ wallets:
 <div class="wallets walletsmobile" id="walletsmobile"></div>
 
 <script>if(isMobile())walletShowPlatform('mobile');else walletShowPlatform('desktop');</script>
-<script>walletRotate();</script>
 
 <div class="walletsdisclaimer">
 <h2><img src="/img/warning.svg" class="warningicon" alt="warning">{% translate educate %}</h2>

js/main.js

@@ -138,6 +138,19 @@ document.body.setAttribute('data-scrollstatus',setInterval(function(){
 },10));
 }
 
+function supportCSS(id){
+//Return true if the browser supports given CSS feature.
+var x=domPrefixes='Webkit Moz ms O'.split(' ');
+var nd=document.createElement('DIV');
+id=id.toLowerCase();
+if(nd.style[id]!==undefined)return true;
+idc=id.charAt(0).toUpperCase()+id.substr(1);
+for(var i=0,n=domPrefixes.length;i<n;i++){
+	if(nd.style[domPrefixes[i]+idc]!==undefined)return true;
+}
+return false;
+}
+
 function supportsSVG(){
 //Return true if the browser supports SVG.
 //Ex. if(!supportsSVG()){..apply png fallback..}
@@ -443,24 +456,46 @@ walletShowPlatform(select.getAttribute('data-walletcompat'));
 
 function walletShowPlatform(platform){
 //Show wallets for given platform in the menu.
+var fallback='';
+//Update menu and set fallback category if hovering in a submenu.
+for(var i=0,nds=document.getElementById('walletmenu').getElementsByTagName('A'),n=nds.length;i<n;i++){
+	if(nds[i].getAttribute('data-walletcompat')!=platform)continue;
+	if(nds[i].getAttribute('data-active')==1)return;
+	var t=nds[i];
+	if(nds[i].parentNode.parentNode.parentNode.nodeName=='LI')fallback=nds[i].parentNode.parentNode.parentNode.getElementsByTagName('A')[0].getAttribute('data-walletcompat');
+	break;
+}
 for(var i=0,nds=document.getElementById('walletmenu').getElementsByTagName('A'),n=nds.length;i<n;i++){
 	nds[i].removeAttribute('data-active');
 	removeClass(nds[i].parentNode,'active');
-	if(nds[i].getAttribute('data-walletcompat')!=platform)continue;
-	var t=nds[i];
 }
 t.setAttribute('data-active','1');
 addClass(t.parentNode,'active');
 if(t.parentNode.parentNode.parentNode.nodeName=='LI')addClass(t.parentNode.parentNode.parentNode,'active');
-for(var i=0,nds=document.getElementById('wallets').childNodes,n=nds.length;i<n;i++){
+//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;
-	if(nds[i].getAttribute('data-walletcompat').indexOf(platform)!==-1)removeClass(nds[i],'disabled');
+		var id=nds[i].id.split('-')[1];
-	else addClass(nds[i],'disabled');
+		if(document.getElementById('wallet-'+id))continue;
-	addClass(nds[i],'nohover');
+		if(document.getElementById('wallet-'+id+'-'+platform))var nd=document.getElementById('wallet-'+id+'-'+platform);
-	var id=nds[i].id.replace('wallet-','');
+		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(!document.getElementById('wallet-'+id+'-'+platform))continue;
+		else continue;
-	nds[i].replaceChild(document.getElementById('wallet-'+id+'-'+platform).getElementsByTagName('DIV')[0].cloneNode(true),nds[i].getElementsByTagName('DIV')[0]);
+		nd=nd.cloneNode(true);
-}
+		nd.id='wallet-'+id;
+		addClass(nd,'nohover');
+		p.appendChild(nd);
+	}
+	walletRotate()
+	removeClass(p,'disabled');
+	document.getElementById('walletsmobile').innerHTML='';
+},ti));
 }
 
 function walletRotate(){
@@ -472,52 +507,45 @@ for(var i=0,nds=document.getElementById('wallets').childNodes,n=nds.length;i<n;i
 }
 var sum=Math.floor(new Date()/86400000);
 for(var k in ar){
+	if(ar[k].length==0)continue;
 	var pre=ar[k][ar[k].length-1].nextSibling;
 	for(i=0,n=sum%ar[k].length;i<n;i++)ar[k][i].parentNode.insertBefore(ar[k][i],pre);
 }
 }
 
-function walletMobileShow(e){
+function walletShow(e){
-//Show selected wallet on mobiles and scroll to it.
+//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;
-t=t.cloneNode(true);
+if(isMobile()){
-var p=document.getElementById('walletsmobile');
+	var p=document.getElementById('walletsmobile');
-if(getStyle(p,'display')=='none')return;
+	t=t.cloneNode(true);
-p.innerHTML='';
+	p.innerHTML='';
-p.appendChild(t);
+	p.appendChild(t);
-scrollToNode(p);
+	scrollToNode(p);
+}
+else{
+	t.setAttribute('data-previousclass',t.className);
+	removeClass(t,'nohover');
+	removeClass(t,'disabled');
+	addEvent(t,'mouseover',walletHide);
+	addEvent(t,'mouseout',walletHide);
+}
 }
 
-function walletDisabledShow(e){
+function walletHide(e){
-//Show disabled wallet on click and disable wallet when mouse leaves the wallet.
-var t=getEventTarget(e);
-while(t.nodeName!='DIV'&&t.parentNode.id!='wallets'){
-	if(t.id=='wallets')return;
-	t=t.parentNode;
-}
-t.setAttribute('data-previousclass',t.className);
-removeClass(t,'nohover');
-removeClass(t,'disabled');
-addEvent(t,'mouseover',walletDisabledHide);
-addEvent(t,'mouseout',walletDisabledHide);
-}
-
-function walletDisabledHide(e){
 //Disable wallet when the mouse leaves the wallet bubble.
 var t=getEventTarget(e);
-while(t.nodeName!='DIV'||t.parentNode.id!='wallets'){
+if(t.id=='wallets')return;
-	if(t.id=='wallets')return;
+while(t.parentNode.id!='wallets')t=t.parentNode;
-	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',walletDisabledHide);
+	removeEvent(t,'mouseout',walletHide);
-	removeEvent(t,'mouseover',walletDisabledHide);
+	removeEvent(t,'mouseover',walletHide);
 },1));
 }