New layout for the "Choose your wallet" page

Greatly simplify layout
Increase visibility for "you need to know" and "secure your wallet" pages
Providing increased transparency about security and zero-trust model for each wallet
Encourage diversity and decentralization by
  not recommending two single wallets anymore
  rotating wallets daily by "zero-trust levels" (full nodes followed by SPV wallets followed by hybrid & multisig wallets followed by web wallets)
Display screenshots
Increase visibility for Bitcoin Core by
  recommending it in other wallets' disclaimers as a full node and deterministic build app
  making it always the first desktop wallet displayed
  better promoting it as a good secure / zero-trust wallet
Prepare layout for hardware wallets
Prevent confusing duplicate listing
Allow layout to scale with increasing number of wallets
Fix layout issues with translations and hyphenation
Simplify the process of adding new wallets by storing information in a single location using a consistent format

Thanks @harding for reviews and feedback on the first draft

js/main.js

@@ -109,6 +109,29 @@ for(var i=0,n=ocl.length;i<n;i++){if(ocl[i]!=data)ncl.push(ocl[i]);}
 node.className=ncl.join(' ');
 }
 
+function scrollToNode(t){
+//Scroll to any node on the page.
+if(document.body.getAttribute('data-scrollstatus')!=null){clearInterval(document.body.getAttribute('data-scrollstatus'));document.body.removeAttribute('data-scrollstatus');}
+var delay=800;
+var py=getPageYOffset();
+var fy=getTop(t)
+var dy=fy-py;
+var x=getPageXOffset();
+var oti=new Date().getTime();
+document.body.setAttribute('data-scrollstatus',setInterval(function(){
+	var nti=new Date().getTime()-oti;
+	if(nti>=delay){
+		window.scrollTo(x,fy);
+		clearInterval(document.body.getAttribute('data-scrollstatus'));
+		document.body.removeAttribute('data-scrollstatus');
+		return;
+	}
+	var p=nti/delay;
+	p=p*(1+(0.5*(1-p)));
+	window.scrollTo(x,(py+(dy*p)).toFixed(0));
+},10));
+}
+
 function supportsSVG(){
 //Return true if the browser supports SVG.
 //Ex. if(!supportsSVG()){..apply png fallback..}
@@ -133,30 +156,6 @@ for(var i=0,nd=document.getElementsByTagName('*'),n=nd.length;i<n;i++){
 }
 }
 
-function walletShow(e){
-//Replace a wallet disclaimer by the wallet description in the "Choose your wallet" page when the user click the button.
-var t=getEventTarget(e);
-while(t.getAttribute('data-id')===null||t.getAttribute('data-id')=='')t=t.parentNode;
-var d=t.getElementsByTagName('DIV')[0];
-var s=document.getElementById(t.getAttribute('data-id')).getElementsByTagName('DIV')[0];
-cancelEvent(e);
-//Add a delay before replacing wallet bubble for mobiles to prevent accidental clicks
-setTimeout(function(){
-	d.getElementsByTagName('H2')[0].innerHTML=s.getElementsByTagName('H2')[0].innerHTML;
-	d.getElementsByTagName('SPAN')[0].innerHTML=s.getElementsByTagName('SPAN')[0].innerHTML;
-	d.getElementsByTagName('P')[0].innerHTML=s.getElementsByTagName('P')[0].innerHTML;
-	d.getElementsByTagName('P')[1].getElementsByTagName('A')[0].innerHTML=s.getElementsByTagName('P')[1].getElementsByTagName('A')[0].innerHTML;
-	d.getElementsByTagName('P')[1].getElementsByTagName('A')[0].href=s.getElementsByTagName('P')[1].getElementsByTagName('A')[0].href;
-	d.getElementsByTagName('P')[1].getElementsByTagName('A')[0].onclick='';
-	d.className='';
-	//Workaround for browsers that don't handle re-rendering class styles and svg (they have backgroundImage hardcoded in HTML)
-	for(var ii=0,nn=d.childNodes.length;ii<nn;ii++){if(d.childNodes[ii].nodeType==1&&d.childNodes[ii].style.backgroundImage!='')d.childNodes[ii].style.backgroundImage=d.childNodes[ii].style.backgroundImage.replace('bubblewarn','bubble').replace('bubbleinfo','bubble');}
-	for(var ii=0,as=d.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==d.parentNode){var dd=as[ii];break;}}
-	for(var ii=0,as=s.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==s.parentNode){var ss=as[ii];break;}}
-	dd.innerHTML=ss.innerHTML;
-},1);
-}
-
 function mobileMenuShow(e){
 //Show the mobile menu when the visitors touch the menu icon.
 var mm=document.getElementById('menusimple');
@@ -261,34 +260,6 @@ document.getElementById('chatbox').innerHTML='<iframe style=width:98%;min-width:
 cancelEvent(e);
 }
 
-function mobileWHover(e){
-//Display wallet bubbles for mobiles
-var div=t=getEventTarget(e);
-while(div.nodeName!='DIV')div=div.parentNode;
-//Hide bubbles when clicking outside of a bubble
-if(div.className.indexOf('previewmobile')!==-1)mobileWHide();
-//Show bubble when clicking on their icon
-if(div.parentNode.className.indexOf('previewmobile')!==-1){
-	mobileWHide();
-	t=div.getElementsByTagName('DIV')[0];
-	t.style.opacity=0;
-	t.style.display='block';
-	//Add a delay before displaying wallet for mobiles to prevent accidental clicks
-	setTimeout(function(){t.style.opacity=100;},1);
-	//Add event listener to hide bubble on scroll
-	addEvent(window,'scroll',mobileWHide);
-}
-}
-  
-function mobileWHide(){
-//Hide all wallet bubbles on mobiles
-for(var i=0,nds=document.getElementsByTagName('DIV'),n=nds.length;i<n;i++){
-	if(nds[i].parentNode&&nds[i].parentNode.parentNode&&nds[i].parentNode.parentNode.className.indexOf('previewmobile')!==-1){
-	nds[i].style.opacity=0;nds[i].style.display='none';}
-}
-removeEvent(window,'scroll',mobileWHide);
-}
-
 function updateToc(){
 //Update table of content active entry and browser url on scroll
 var pageoffset;
@@ -419,6 +390,106 @@ if(typeof(Storage)==='undefined')return;
 if(sessionStorage.getItem('develdocdisclaimerclose')==='1')disclaimerClose();
 }
 
+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;
+if(t.parentNode.parentNode.parentNode.nodeName!='DIV'){
+	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(getStyle(document.getElementById('walletsmobile'),'display')!='none'){
+	if(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;
+var selectp=select;
+var activep=active;
+while(selectp.parentNode.parentNode.nodeName!='DIV')selectp=selectp.parentNode;
+while(activep.parentNode.parentNode.nodeName!='DIV')activep=activep.parentNode;
+if(selectp!=activep)return;
+walletShowPlatform(select.getAttribute('data-walletcompat'));
+}
+
+function walletShowPlatform(platform){
+//Show wallets for given platform in the menu.
+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++){
+	if(nds[i].nodeType!=1)continue;
+	if(nds[i].getAttribute('data-walletcompat').indexOf(platform)!==-1)removeClass(nds[i],'disabled');
+	else addClass(nds[i],'disabled');
+	var id=nds[i].id.replace('wallet-','');
+	if(!document.getElementById('wallet-'+id+'-'+platform))continue;
+	nds[i].replaceChild(document.getElementById('wallet-'+id+'-'+platform).getElementsByTagName('DIV')[0].cloneNode(true),nds[i].getElementsByTagName('DIV')[0]);
+}
+}
+
+function walletRotate(){
+//Rotate wallets once a day.
+var ar={1:[],2:[],3:[],4:[]}
+for(var i=0,nds=document.getElementById('wallets').childNodes,n=nds.length;i<n;i++){
+	if(nds[i].nodeType!=1)continue;
+	ar[parseInt(nds[i].getAttribute('data-walletlevel'))].push(nds[i]);
+}
+var sum=Math.floor(new Date()/86400000);
+for(var k in ar){
+	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){
+//Show selected wallet on mobiles and scroll to it.
+var t=getEventTarget(e);
+if(t.id=='wallets')return;
+while(t.parentNode.id!='wallets')t=t.parentNode;
+t=t.cloneNode(true);
+var p=document.getElementById('walletsmobile');
+if(getStyle(p,'display')=='none')return;
+p.innerHTML='';
+p.appendChild(t);
+scrollToNode(p);
+}
+
 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.

js/patterns/it.js

@@ -1,18 +0,0 @@
-Hyphenator.languages['it'] = {
-	leftmin : 2,
-	rightmin : 2,
-	specialChars : "àéèìòù’'",
-	// The italian hyphenation patterns are retrieved from 
-	// http://www.ctan.org/tex-archive/language/hyphenation/ithyph.tex
-	patterns : {
-		2 : "1b1c1d1f1g1h1j1k1l1m1n1p1q1r1t1v1w1x1z",
-		3 : "2’2e2w2bb2bc2bd2bf2bm2bn2bp2bs2bt2bvb2lb2r2b_2b’2cb2cc2cd2cf2ck2cm2cn2cq2cs2ct2czc2hc2lc2r2c_2c’_c22db2dd2dg2dl2dm2dn2dpd2r2ds2dt2dv2dw2d_2d’_d22fb2fg2ff2fnf2lf2r2fs2ft2f_2f’2gb2gd2gf2ggg2hg2l2gmg2n2gpg2r2gs2gt2gv2gw2gz2g_2g’2hb2hd2hhh2l2hm2hn2hr2hv2h_2h’2j_2j’2kg2kfk2h2kkk2l2kmk2r2ks2kt2k_2k’2lb2lc2ld2lgl2h2lk2ll2lm2ln2lp2lq2lr2ls2lt2lv2lw2lz2l_2mb2mc2mf2ml2mm2mn2mp2mq2mr2ms2mt2mv2mw2m_2m’2nb2nc2nd2nf2ng2nk2nl2nm2nn2np2nq2nr2ns2nt2nv2nz2n_2n’2pdp2hp2l2pn2ppp2r2ps2pt2pz2p_2p’2qq2q_2q’2rb2rc2rd2rfr2h2rg2rk2rl2rm2rn2rp2rq2rr2rs2rt2rv2rx2rw2rz2r_2r’1s22sz4s_2tb2tc2td2tf2tgt2ht2l2tm2tn2tpt2rt2s2tt2tv2twt2z2t_2vcv2lv2r2vv2v_w2h2w_2w’2xb2xc2xf2xh2xm2xp2xt2xw2x_2x’y1i2zb2zd2zl2zn2zp2zt2zs2zv2zz2z_",
-		4 : "_p2sa1iaa1iea1ioa1iua1uoa1ya2at_e1iuo1iao1ieo1ioo1iu2chh2chbch2r2chn2l’_2l’’2shm2sh_2sh’2s3s2stb2stc2std2stf2stg2stm2stn2stp2sts2stt2stv4s’_4s’’2tzktz2s2t’_2t’’2v’_2v’’wa2r2w1yy1ou2z’_2z’’_z2",
-		5 : "_bio1_pre12gh2t2l3f2n2g3n3p2nes4s3mt2t3s",
-		6 : "_a3p2n_anti1_free3_opto1_para1hi3p2n2nheit3p2sicr2t2s32s3p2n3t2sch",
-		7 : "_ca4p3s_e2x1eu_narco1_su2b3r_wa2g3n_wel2t1n2s3fer",
-		8 : "_contro1_fran2k3_li3p2sa_orto3p2_poli3p2_sha2re3_su2b3lu",
-		9 : "_anti3m2n_circu2m1_re1i2scr_tran2s3c_tran2s3d_tran2s3l_tran2s3n_tran2s3p_tran2s3r_tran2s3t",
-		10 : "_di2s3cine"
-	}
-};

js/patterns/tr.js

@@ -1,13 +0,0 @@
-// For questions about the turkish hyphenation patterns ask
-// Andreas Lappe nd at off-pist dot de
-Hyphenator.languages['tr'] = {
-	leftmin : 2,
-	rightmin : 2,
-	specialChars : "âıîöüûçğş",
-	patterns : {
-		3 : "2a12â12e12ı12i12î12o12ö12u12ü12û11b11c11ç11d11f11g11ğ11h11j11k11l11m11n11p11r11s11ş11t11v11y11z12bb2bc2bç2bd2bf2bg2bğ2bh2bj2bk2bl2bm2bn2bp2br2bs2bş2bt2bv2by2bz2cb2cc2cç2cd2cf2cg2cğ2ch2cj2ck2cl2cm2cn2cp2cr2cs2cş2ct2cv2cy2cz2çb2çc2çç2çd2çf2çg2çğ2çh2çj2çk2çl2çm2çn2çp2çr2çs2çş2çt2çv2çy2çz2db2dc2dç2dd2df2dg2dğ2dh2dj2dk2dl2dm2dn2dp2dr2ds2dş2dt2dv2dy2dz2fb2fc2fç2fd2ff2fg2fğ2fh2fj2fk2fl2fm2fn2fp2fr2fs2fş2ft2fv2fy2fz2gb2gc2gç2gd2gf2gg2gğ2gh2gj2gk2gl2gm2gn2gp2gr2gs2gş2gt2gv2gy2gz2ğb2ğc2ğç2ğd2ğf2ğg2ğğ2ğh2ğj2ğk2ğl2ğm2ğn2ğp2ğr2ğs2ğş2ğt2ğv2ğy2ğz2hb2hc2hç2hd2hf2hg2hğ2hh2hj2hk2hl2hm2hn2hp2hr2hs2hş2ht2hv2hy2hz2jb2jc2jç2jd2jf2jg2jğ2jh2jj2jk2jl2jm2jn2jp2jr2js2jş2jt2jv2jy2jz2kb2kc2kç2kd2kf2kg2kğ2kh2kj2kk2kl2km2kn2kp2kr2ks2kş2kt2kv2ky2kz2lb2lc2lç2ld2lf2lg2lğ2lh2lj2lk2ll2lm2ln2lp2lr2ls2lş2lt2lv2ly2lz2mb2mc2mç2md2mf2mg2mğ2mh2mj2mk2ml2mm2mn2mp2mr2ms2mş2mt2mv2my2mz2nb2nc2nç2nd2nf2ng2nğ2nh2nj2nk2nl2nm2nn2np2nr2ns2nş2nt2nv2ny2nz2pb2pc2pç2pd2pf2pg2pğ2ph2pj2pk2pl2pm2pn2pp2pr2ps2pş2pt2pv2py2pz2rb2rc2rç2rd2rf2rg2rğ2rh2rj2rk2rl2rm2rn2rp2rr2rs2rş2rt2rv2ry2rz2sb2sc2sç2sd2sf2sg2sğ2sh2sj2sk2sl2sm2sn2sp2sr2ss2sş2st2sv2sy2sz2şb2şc2şç2şd2şf2şg2şğ2şh2şj2şk2şl2şm2şn2şp2şr2şs2şş2şt2şv2şy2şz2tb2tc2tç2td2tf2tg2tğ2th2tj2tk2tl2tm2tn2tp2tr2ts2tş2tt2tv2ty2tz2vb2vc2vç2vd2vf2vg2vğ2vh2vj2vk2vl2vm2vn2vp2vr2vs2vş2vt2vv2vy2vz2yb2yc2yç2yd2yf2yg2yğ2yh2yj2yk2yl2ym2yn2yp2yr2ys2yş2yt2yv2yy2yz2zb2zc2zç2zd2zf2zg2zğ2zh2zj2zk2zl2zm2zn2zp2zr2zs2zş2zt2zv2zy2zz",
-		4 : "a3a2a3â2a3e2a3ı2a3i2a3î2a3o2a3ö2a3u2a3ü2a3û2â3a2â3â2â3e2â3ı2â3i2â3î2â3o2â3ö2â3u2â3ü2â3û2e3a2e3â2e3e2e3ı2e3i2e3î2e3o2e3ö2e3u2e3ü2e3û2ı3a2ı3â2ı3e2ı3ı2ı3i2ı3î2ı3o2ı3ö2ı3u2ı3ü2ı3û2i3a2i3â2i3e2i3ı2i3i2i3î2i3o2i3ö2i3u2i3ü2i3û2î3a2î3â2î3e2î3ı2î3i2î3î2î3o2î3ö2î3u2î3ü2î3û2o3a2o3â2o3e2o3ı2o3i2o3î2o3o2o3ö2o3u2o3ü2o3û2ö3a2ö3â2ö3e2ö3ı2ö3i2ö3î2ö3o2ö3ö2ö3u2ö3ü2ö3û2u3a2u3â2u3e2u3ı2u3i2u3î2u3o2u3ö2u3u2u3ü2u3û2ü3a2ü3â2ü3e2ü3ı2ü3i2ü3î2ü3o2ü3ö2ü3u2ü3ü2ü3û2û3a2û3â2û3e2û3ı2û3i2û3î2û3o2û3ö2û3u2û3ü2û3û2",
-		6 : "tu4r4k",
-		7 : "2e2cek_m1t4rak"
-	}
-};