mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 01:36:13 +00:00
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
This commit is contained in:
Saivann
parent
5704ff1ce5
commit
a75b2f1391
106 changed files with 3285 additions and 4758 deletions
175
js/main.js
175
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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue