-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (121 loc) · 4.24 KB
/
index.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
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>CSV Editor | Open Innovations</title>
<link rel="icon" href="resources/oi-square-black.svg" />
<link rel="StyleSheet" href="resources/style.css" type="text/css" />
<style>
pre {
background: #efefef;
padding: 0.5rem;
overflow: auto;
}
.result {
border: 1px solid black;
}
ul,ol { margin-left: 2rem; }
ul { list-style: disc; }
.table-holder {
overflow: auto;
max-width: 100%;
max-height: 80vh;
}
</style>
<script src="dist/oi.csv.js"></script>
</head>
<body class="b1-bg">
<header>
<div class="b1-bg">
<div class="holder padded" style="text-align:center;">
<a href="https://open-innovations.org/"><svg width="80" height="80" overflow="auto" viewBox="-32 -32 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="oi-person"><path d="m-32-32h64v64h-12v-24a4 4 0 0 0 -4 -4h-8a4 4 0 0 0 -4 4v24h-36zm44 27m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0" fill="#fff"></path></mask><g id="oi-logo" fill="#1DD3A7"><circle r="32" mask="url(#oi-person)"></circle></g></svg></a>
<h1>CSV Editor<span class="v"></span></h1>
</div>
</div>
</header>
<div class="b6-bg">
<div class="holder doublepadded">
<p>This is a prototype for a lightweight CSV Editor. At the moment it just loads the CSV content inline as a very basic demo.</p>
<h2>Features</h2>
<ul>
<li>Basic CSV viewer/editor</li>
<li>Lightweight - <span class="size-total">??</span>kB required to view a CSV compared to 7.5MB (1.88MB gzipped) for <a href="https://www.getgrist.com/csv-viewer/">Grist CSV Viewer</a></li>
<li>Progressive enhancement</li>
<li>Open source</li>
<li>Easy to install</li>
<li>Self-hostable</li>
<li>No tracking analytics</li>
</ul>
<h2>Add it to your site</h2>
<div class="b5-bg padded padded-bottom">
<p>With just two lines of code, users will be able to open CSVs in a basic viewer/editor.</p>
<ol>
<li>Add anywhere
<pre><script src="<a href="oi.csv.js">oi.csv.js</a>"></script></pre>
</li>
<li>Add anywhere
<pre><a href="<a href="test-data.csv">test-data.csv</a>" data-oi-csv>View CSV</a></pre>
</li>
<li>Done!</li>
</ol>
</div>
<p>The initial load (<a href="dist/oi.csv.js">oi.csv.js</a>) is <span class="size-initial">??</span>kB. We only load the rest of the code - a further <span class="size-editor">??</span>kB - if someone starts viewing a CSV. By using standard anchor tags, if Javascript is disabled - or fails due to network issues - people will still get the CSV.</p>
<p>Try it by clicking <a href="test-data.csv" data-oi-csv>View CSV</a>.</p>
<h2>Self-hosting</h2>
<p>To host it yourself, you need <a href="dist/oi.csv.js">oi.csv.js</a> and <a href="dist/oi.csv.editor.js">oi.csv.editor.js</a> stored in the same directory.</p>
</div>
</div>
<!--
<script>
a = document.createElement('a');
a.href="test-data.csv" ;
a.innerHTML = "Test";
a.setAttribute('data-oi-csv','');
document.body.appendChild(a);
OI.CSVs.get();
</script>
-->
<footer class="b1-bg">
<div class="holder doublepadded">
<h2>Credits</h2>
<p>© 2024 Stuart Lowe / Open Innovations (MIT licence).</p>
</div>
</footer>
<script>
document.querySelectorAll('.v').forEach(function(el){ el.innerHTML = ' v'+OI.CSVs.version; });
function getSize(file,fn){
var size = 0,headers;
fetch(file,{}).then(response => {
if(!response.ok) throw new Error('Network response was not OK');
headers = response.headers;
return response.text();
}).then(txt => {
size = headers['content-length']||txt.length;
if(typeof fn==="function") fn.call(this,size);
}).catch(e => {
console.error('There has been a problem loading '+file);
});
return this;
}
var total = 0;
getSize('dist/oi.csv.js',function(size){
total += size;
document.querySelectorAll('.size-initial').forEach(function(el){
el.innerHTML = (size/1000).toFixed(1);
});
updateTotal(total);
});
getSize('dist/oi.csv.editor.js',function(size){
total += size;
document.querySelectorAll('.size-editor').forEach(function(el){
el.innerHTML = (size/1000).toFixed(1);
});
updateTotal(total);
});
function updateTotal(size){
document.querySelectorAll('.size-total').forEach(function(el){
el.innerHTML = (size/1000).toFixed(1);
});
}
</script>
</body>
</html>