forked from internetarchive/dweb-transports
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example_block.html
122 lines (111 loc) · 5.89 KB
/
example_block.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<!--Note there are copies of this in dweb-transports repo and dweb-transport repo-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWEB Transports example page</title>
<script type="text/javascript">localStorage.debug = "dweb-transports dweb-transports:*";</script>
<script type="text/javascript" src="./dist/dweb-transports-bundle.js"></script>
<script type="text/javascript" src='https://cloud.tinymce.com/stable/tinymce.min.js'></script><!-- TinyMCE -->
<script type="text/javascript">
tinymce.init({
selector: '#mytextarea',
menubar: "true",
plugins: [ "save",
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code' ],
toolbar: 'save | undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
save_onsavecallback: function() {
let content = tinyMCE.get('mytextarea').getContent();
// alert(content);
let el = document.getElementById("retrievalarea");
let urls = DwebTransports.p_rawstore(content)
.then((urls) => el.value = urls)
.catch((err) => {console.error("saveoncallback", err); alert(err)});
}
});
async function fetchit() {
let el = document.getElementById("retrievalarea");
let urls = await DwebTransports.p_urlsFrom(el.value);
fetchanddisplay(urls); //asynchronous
}
async function fetchanddisplay(urls) {
try {
console.log("Fetching urls=", urls);
let destn = document.getElementById("retrievaldestn");
destn.innerHTML = ""; // Clear it first
let data = await DwebTransports.p_rawfetch(urls);
console.log("Retrieved data length", data.length);
destn.innerHTML = data;
} catch(err) {
console.log("fetchanddisplay: Error",err.message);
alert(err.message);
throw err;
}
}
async function main(url) {
try {
// and if not found will use the defaulttransports specified here.
await DwebTransports.p_connect({
defaulttransports: ["HTTP","IPFS"], // Default transports if not specified
transports: searchparams.getAll("transport") // Allow override default from URL parameters
});
// Any code you want to run after connected to transports goes here.
if (url) fetchanddisplay(url);
} catch(err) {
console.log("App Error:", err);
alert(err.message);
}
}
//TODO add a listener on DwebTransports.statuschanged
</script>
<style type="text/css">
/* Application specific styles */
.button { border: 1px black solid; background-color:#dddddd; padding-bottom:0.1em; padding-top:0.1em;}
.propval {display:table-cell; background-color:#dddddd;border: 1px dotted grey; padding-left: 0.3em; padding-right: 0.3em;}
.displayedblock {border: 1px #e0e0e0 solid; background-color:#f0f0f0; box-shadow: 1px 1px 2px #cccccc; padding-top:0.1em; padding-bottom: 0.1em; margin-top: 10px; margin-bottom: 5px; display:inline-block;}
/* These are required for Dweb statuses */
#statuselement { margin: 0 0 3px 10px; float: right; clear: right; text-align: right; position: relative; } /* "floatright" Grouped in top right corner */
#statuselement li {display: table-row; padding-top: 3px; padding-right: 0; margin: 0 0 3px 3px;}
.transportstatus0 {color: lawngreen} /*STATUS_CONNECTED*/
.transportstatus1 {color: red} /*STATUS_FAILED*/
.transportstatus2 {color: yellow} /*STATUS_STARTING*/
.transportstatus3 {color: black} /*STATUS_LOADED*/
.transportstatus4 {color: purple} /*STATUS_PAUSED*/
</style>
</head>
<body>
<!--Network status box - this is standard for any app -->
<div id="statuselement"></div>
<h1>Dweb - Transports Example - unstructured data store and retrieval</h1>
<h2>This example is not maintained - it might not work any more</h2>
<h4>Create something here, and when its saved its urls will appear below</h4>
<form method="post">
<textarea id="mytextarea" width="60%">Testing</textarea>
</form>
<h4>Enter a link here and it will be retrieved.</h4>
<form style="display:inline" onsubmit="fetchit(); return false;">
<input type="text" class="propval" id="retrievalarea" placeholder="ipfs:/ipfs/12ab34cd" size="70"/>
<input type="submit" class="button" value="Fetch"/>
</form>
<div class="displayedblock" id="retrievaldestn">retrieved data will go here</div>
<hr>
<h2>Explanation</h2>
<ul>
<li>As you open the page it tries to connect to the transports, which by default are HTTP and IPFS.</li>
<li>These should change to Yellow as they try, and then Green when connected.</li>
<li>If it goes Red, it means it failed to connect - e.g. to get an "info" response from HTTP, or to conenct to IPFS.</li>
<li>You can edit text, which is happening entirely locally on your machine.</li>
<li>When you hit Save, its stored on the connected transports</li>
<li>A link to this is put in the Retrieval box</li>
<li>You can click on the Retrieve button and it will be retrieved and displayed for editing.</li>
<li>You can also paste that link into a different browser.</li>
</ul>
<script type="text/javascript">
var searchparams = new URL(window.location.href).searchParams;
main(searchparams.get("url")); //starts a transport, checks its status, and if appropriate to app opens a URL passed
</script>
</body>
</html>