vladimirmyshkovski · December 31, 2019 02:36
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>IPFS Tree builder Example</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.12/jqtree.css" integrity="sha256-HXkFXoUJm+hZNZftCzYGMRpnrDf9JVQK6Zzsm5czcRo=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.12/tree.jquery.js" integrity="sha256-MVNe3e6Cast71iAc+Jy+z9+BhDfh7y5iz8GBz8mBZ9M=" crossorigin="anonymous"></script>
 </head>

 <body>
    <div id="tree"></div>
    <div id="result" style="margin-top: 50px"></div>
    <div id="hash" style="margin-top: 50px"></div>
    <a id="link" href="" style="margin-top: 50px"></a>
    <script type="text/javascript">
        const hashElement = document.getElementById("hash");
        const linkElement = document.getElementById("link");
        let href = ''
        let data = [{
            name: 'node1',
            children: [{
                name: 'child1'
            }, {
                name: 'child2'
            }]
        }, {
            name: 'node2',
            children: [{
                name: 'child3'
            }]
        }];
        const $tree = $('#tree');

        $('#tree').tree({
            data: data,
            buttonLeft: false,
            autoOpen: 0,
            dragAndDrop: true,
            saveState: true,
        });

        function sendDataToIPFS(data) {
            const formData = new FormData()
            var file = new Blob([data], {
                type: "application/json"
            });
            formData.append('tree', file, 'tree.json')
            fetch('https://ipfs.infura.io:5001/api/v0/add', {
                    method: 'POST',
                    body: formData
                })
                .then(r => r.json())
                .then(data => {
                    hashElement.innerHTML = data.Hash
                    href = 'https://ipfs.infura.io/ipfs/' + data.Hash
                    linkElement.innerHTML = href
                    linkElement.href = href
                })
        }

        $('#tree').on(
            'tree.move',
            function(event) {
                const data = $(this).tree('toJson')
                document.getElementById('result').innerHTML = data
                sendDataToIPFS(data)
            }
        );
        $('#tree').on(
            'tree.click',
            function(event) {
                const data = $(this).tree('toJson')
                document.getElementById('result').innerHTML = data
                sendDataToIPFS(data)
            }
        );
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>IPFS Tree builder Example</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.12/jqtree.css" integrity="sha256-HXkFXoUJm+hZNZftCzYGMRpnrDf9JVQK6Zzsm5czcRo=" crossorigin="anonymous" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.12/tree.jquery.js" integrity="sha256-MVNe3e6Cast71iAc+Jy+z9+BhDfh7y5iz8GBz8mBZ9M=" crossorigin="anonymous"></script>
	</head>

	<body>
	<div id="tree"></div>
	<div id="result" style="margin-top: 50px"></div>
	<div id="hash" style="margin-top: 50px"></div>
	<a id="link" href="" style="margin-top: 50px"></a>
	<script type="text/javascript">
	const hashElement = document.getElementById("hash");
	const linkElement = document.getElementById("link");
	let href = ''
	let data = [{
	name: 'node1',
	children: [{
	name: 'child1'
	}, {
	name: 'child2'
	}]
	}, {
	name: 'node2',
	children: [{
	name: 'child3'
	}]
	}];
	const $tree = $('#tree');

	$('#tree').tree({
	data: data,
	buttonLeft: false,
	autoOpen: 0,
	dragAndDrop: true,
	saveState: true,
	});

	function sendDataToIPFS(data) {
	const formData = new FormData()
	var file = new Blob([data], {
	type: "application/json"
	});
	formData.append('tree', file, 'tree.json')
	fetch('https://ipfs.infura.io:5001/api/v0/add', {
	method: 'POST',
	body: formData
	})
	.then(r => r.json())
	.then(data => {
	hashElement.innerHTML = data.Hash
	href = 'https://ipfs.infura.io/ipfs/' + data.Hash
	linkElement.innerHTML = href
	linkElement.href = href
	})
	}

	$('#tree').on(
	'tree.move',
	function(event) {
	const data = $(this).tree('toJson')
	document.getElementById('result').innerHTML = data
	sendDataToIPFS(data)
	}
	);
	$('#tree').on(
	'tree.click',
	function(event) {
	const data = $(this).tree('toJson')
	document.getElementById('result').innerHTML = data
	sendDataToIPFS(data)
	}
	);
	</script>
	</body>

	</html>