index.html

<meta charset="utf-8">
<title>IPFS tool</title>
<script type="text/javascript" src="ipfs-tester.js"></script>
<style>
	.funcBlock{
		border:2px solid #000;
		margin: 1em;
		padding: 1em;
	}
	.testResultBlock{
	    border: 1px solid #ccc;
	    border-radius: 3px;
	    display: block;
	    cursor: pointer;
	    position: relative;
	}
	.testResultBlock span{
	    margin-left: 1em; 
	}
	.testResultBlock:hover{
		background-color: #cccccc99;
	}
	.testResultBlock #accessible{
		display: inline;
		margin: 0 auto;
		width:1em;
		height: 1em;
	}
	.testResultBlock #accessible::after{
		position: absolute;
		content: '...';
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	}
	.limitWidth{max-width: 100%;}
	.red{color:red;}
	.green{color:green;}
	#sourceURL::before{
		content: 	'link: ';
	}
	#sourceContentType::before{
		content: 	'Type: ';
	}
	#gatewayTestSwitch::after{
		content: attr(data-following);
		color: red;
		font-size: .5em;
	}
</style>
<span style="
	display: block;
	width: 100%;
	text-align: center;
	color: #CCC;
">Copyright luojia@luojia.me <a target="_blank" href="https://github.com/JiaJiaJiang/IPFS_tool">Git repo</a></span>
<div class="funcBlock" id="gatewayTestBlock">
	<h2 id="gatewayTestSwitch" data-following="" onclick="gatewayTestArea.style.display=gatewayTestArea.style.display=='flex'?'none':'flex'" style="cursor: pointer;">Gateway</h2>
	<b>Current gateway:</b><input id="currentGatewayInput" style="width:20em"></input><br>
	<div style="display:flex;margin-top: 1em;" id="gatewayTestArea">
		<div style="flex-grow: 0;margin-right: 1em;">
			<textarea cols="30" rows="30" id="gatewayListArea" style="width: 100%;display: block;word-break: keep-all;overflow-wrap: unset;"></textarea>
			<button id="testButton" style="font-weight: 900;">Test</button><button id="stopButton">Stop</button><button id="saveButton">Save</button> <label><input type="checkbox" id="disableAutoTest"><span>Disable auto test</span></label>
		</div>
		<div id="testResultArea" style="flex-grow: 1;display: inline-block;" title="click to select current gateway"></div>
	</div>
</div>
<div class="funcBlock" id="sourceViewBlock">
	<h2>Source view</h2>
	<div style="display: flex;">
		source path : &nbsp;<input type="search" id="sourcePathInput" placeholder="/ipfs/... | Qm... | /ipns/..." style="flex-grow: 1;"> <button id="viewButton">View</button><button id="testThenViewButton" style="font-weight: 900;">Test then view</button>
	</div>
	<a id="sourceURL" style="color:#blue;margin: .6em;display: block;word-break: break-all;"  target="_blank"></a>
	<div id="sourceContentType" style="color:#ccc;margin: .6em;"></div>
	<div id="viewArea"></div>
</div>
<div class="funcBlock">
	<h2  style="cursor: pointer;" onclick="helpArea.style.display=helpArea.style.display?'':'none'">Help</h2>
	<div id="helpArea" style="display: none;">
		hash parameters
		<ul>
			<li>path : the path to view when loaded</li>
			<li>gateway : specify a gateway and will not start auto gateway test</li>
		</ul>
		<b>non-local gateways without https support can't be reached in https protocol pages</b>
	</div>
</div>
<script>





function rmEmptyDup(arr){
	return  [...new Set(arr)].filter(e=>e&&e.trim());
}




//default gateways from https://ipfs.github.io/public-gateway-checker/
var defaultGatewayList=[
"https://gateway.pinata.cloud/",
"https://ipfs.runfission.com/",
"https://ipfs.eth.aragon.network/",
"https://jorropo.net/",
"https://ipfs.best-practice.se/",
"https://dweb.link/",
"https://ipfs.eternum.io/",
"https://cloudflare-ipfs.com/",
"https://ipfs.io/",
"https://ipfs-gateway.cloud/",
"https://w3s.link/",
"https://gateway.ipfs.io/",
"https://hardbin.com/",
"https://nftstorage.link/",
"https://astyanax.io/",
"https://crustwebsites.net/",
];

class storage{
	static get(name,defaultValue){
		return localStorage.getItem(name)||defaultValue;
	}
	static set(name,value){
		return localStorage.setItem(name,value);
	}
}
function element(tag){return document.createElement(tag)}
function getList(){
	return rmEmptyDup(gatewayListArea.value.split('\n'));
}
function getSavedList(){
	try{
		return rmEmptyDup(storage.get('gatewayList','').split('\n'));
	}catch(e){
		console.error(e);
		return [];
	}
}
function saveList(arr){
	//save to storage
	storage.set('gatewayList',rmEmptyDup(arr).join('\n'));
	gatewayListArea.value=getSavedList().join('\n');
}
function enabledGateway(g){
	if(g){
		g=g.trim();
		currentGatewayInput.value=g;
		storage.set('enabledGateway',g);
		return g;
	}else{
		return storage.get('enabledGateway','').trim()||'https://ipfs.io';
	}
}
function autoTestDisabled(tog){//1 || ''
	if(tog != undefined){
		storage.set('disableAutoTest',tog?1:'');
	}else{
		return !!storage.get('disableAutoTest',false);
	}
}
function log(t){
	console.log(t)
	return t;
}

function previewMode(mode,url,res){
	viewArea.innerHTML='';
	switch(mode){
		case 'video':
			var V=element('video');
			V.src=url;
			V.controls=true;
			V.className='limitWidth';
			viewArea.appendChild(V);
			break;
		case 'image':
			var I=element('img');
			I.className='limitWidth';
			I.src=url;
			viewArea.appendChild(I);
			break;
		case 'text':
			var T=element('div');
			T.style='width:100%;min-height:50%;max-height:100%;overflow: auto;border: 1px solid #ccc;white-space: pre;';
			T.setAttribute('contenteditable','true');
			res.text().then(t=>T.innerText=t);
			viewArea.appendChild(T);
			break;
		case 'iframe':
			var I=element('iframe');
			I.src=url;
			I.setAttribute('allowfullscreen','true');
			I.style='width:100%;height:90%;'
			viewArea.appendChild(I);
			break;
		default:
			viewArea.innerHTML='Unable to view it, please download or click buttons bellow to open in a specific way.<br>';
			var B=element('button');
			B.innerHTML='video/audio';
			B.onclick=e=>previewMode('video',url);
			viewArea.appendChild(B);

			B=element('button');
			B.innerHTML='image';
			B.onclick=e=>previewMode('image',url);
			viewArea.appendChild(B);

			B=element('button');
			B.innerHTML='text';
			B.onclick=e=>previewMode('text',url);
			viewArea.appendChild(B);
	}
}
function setPageArg(name,value){
	if(value == undefined){
		delete pageArgs[name];
		return;
	}
	pageArgs[name]=encodeURIComponent(value);
	var l=[];
	for(a in pageArgs){
		l.push(`${a}=${pageArgs[a]}`);
	}
	location.hash=l.join('&');
}
class ResultBlock{
	constructor(gateway){
		this.path=removeEtxSlash(`${gateway}${toIPFSPath('Qmf5grXACgqhvYSPnEmLRMjtxSCStpe3WLPY4n9uX8pUX5/yes.png')}`).trim();
		this.block=element('div');
		this.block.className='testResultBlock';
		this.block.onclick=e=>enabledGateway(gateway);
		this.block.innerHTML=`<img id='accessible' src="${this.path}"><span id='gateway'>${gateway}</span>`;
	}
	addText(text){
		var d=element('span');
		d.innerHTML=text;
		this.block.appendChild(d);
	}
}
//for testing
var listTester=new GatewayTester();
function stopTest(){listTester.stop();}
function startTest(){
	//stop test
	listTester.stop();
	
	// test
	var availableGateways=[];
	testResultArea.innerHTML='';
	gatewayTestSwitch.setAttribute('data-following','testing');
	for(let g of getList()){
		let R=new ResultBlock(g);
		testResultArea.appendChild(R.block);
		let f=listTester.test(g,sourcePathInput.value.trim()||undefined)
		.then(res=>{
			if(res.ok){
				availableGateways.push(g);
				if(availableGateways.length===1 && autoTesting){
					autoTesting=false;
					enabledGateway(g);
					listTester.stop();
					viewButton.click();
				}
				R.addText(`	<span class="green">${availableGateways.length}</span>`);
			}else{
				throw(new Error(res.status));
			}
		}).catch(e=>{
			R.addText(`	<span class="red">Error:${e.message}</span>`);
		}).finally(()=>{
			if(listTester.testingFetch_c.size==0){
				gatewayTestSwitch.setAttribute('data-following','');
			}else{
				gatewayTestSwitch.setAttribute('data-following',`${listTester.testingFetch_c.size} testing`);
			}
		});
	}
}


//init
var pageArgs={};
rmEmptyDup(location.hash.replace(/^\#/,'').split('&')).map(a=>{
	var p=a.split('=');
	if(p.length){
		pageArgs[p.shift()]=p.join('=');
	}
});
disableAutoTest.checked=autoTestDisabled();

//set default gateway
if(getSavedList().length===0){
	saveList(defaultGatewayList);
}

//set current gateway
enabledGateway(enabledGateway());

//fill list
gatewayListArea.value=getSavedList().join('\n');

//events
testButton.addEventListener('click',e=>{
	startTest();
});
stopButton.addEventListener('click',()=>{
	stopTest();
});
saveButton.addEventListener('click',e=>{
	saveList(getList());//save
});
testThenViewButton.addEventListener('click',e=>{
	autoTesting=true;
	testButton.click();
});

//for source view
var sourceViewFetching = null;
function abortFetchRequest(){sourceViewFetching&&sourceViewFetching.abort();sourceViewFetching=null;}
viewButton.addEventListener('click',e=>{
	sourceViewFetching&&abortFetchRequest();

	try{
		var url=removeEtxSlash(`${enabledGateway(currentGatewayInput.value)}${toIPFSPath(sourcePathInput.value)}`);
	}catch(e){
		alert(e);
		return;
	}
	setPageArg('path',sourcePathInput.value);
	sourceContentType.innerText='';
	sourceURL.innerText=sourceURL.href='';
	// sourceURL.setAttribute('download',decodeURIComponent(url.split('/').pop()));
	viewArea.innerHTML='loading...<br>';//clear
	sourceViewFetching=fetch_c(url)
	.then(res=>{
		let type=res.headers.get('content-type');
		sourceContentType.innerText=type;
		sourceURL.innerText=sourceURL.href=decodeURIComponent(url);
		if(type.match(/audio/)){
			abortFetchRequest();
			previewMode('video',url);
		}else if(type.match(/html|json|xml|pdf|audio|video|image/)){
			abortFetchRequest();
			previewMode('iframe',url);
		}else if(type.match(/text/)){
			previewMode('text',null,res);
		}else{
			abortFetchRequest();
			previewMode(null,url);
		}
	}).catch(e=>{
		console.log(e)
		if(e.message.match(/abort/)){return;}
		viewArea.innerHTML=`failed to load<br>${e.message}`;//clear
		sourceContentType.innerText='';
	}).finally(()=>sourceViewFetching=null);
});
disableAutoTest.addEventListener('change',e=>{
	autoTestDisabled(disableAutoTest.checked);
});


//auto
var autoTesting=false;
if(pageArgs.gateway){
	currentGatewayInput.value=pageArgs.gateway;
	gatewayTestArea.style.display='none';
}
if('path' in pageArgs){
	gatewayTestArea.style.display='none';
	document.body.insertBefore(sourceViewBlock,gatewayTestBlock);
	sourcePathInput.value=decodeURIComponent(pageArgs.path);
	if(!autoTestDisabled() && !pageArgs.gateway){
		autoTesting=true;
		testButton.click();
	}else{
		viewButton.click()
	}
}
</script>