Skip to content

Commit 9e2a8dc

Browse files
pirannapiranna
committed
Cleaned user interface code
1 parent 37e2b93 commit 9e2a8dc

File tree

3 files changed

+306
-278
lines changed

3 files changed

+306
-278
lines changed

‎.project

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>ShareIt</name>
4+
<comment></comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
</buildSpec>
9+
<natures>
10+
</natures>
11+
</projectDescription>

‎index.html

+25-278
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,45 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
32
<html>
43
<head>
54
<title>DirtyShare</title>
6-
<LINK REL="SHORTCUT ICON" HREF="/public/favicon.ico" />
5+
76
<meta name="keywords" content="node, nodejs, javascript, p2p, filesharing, webp2p, web peer to peer, p2pweb, open source" />
87
<meta name="description" content="DirtyShare is a proof of concept Peer to Peer filesharing system written in pure Javascript with Socket.io and Node.js." />
9-
<link href="/public/style.css" rel="stylesheet" type="text/css" media="screen" />
10-
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'>
8+
9+
<LINK REL="SHORTCUT ICON" HREF="/public/favicon.ico" />
10+
<link href="public/style.css" rel="stylesheet" type="text/css" media="screen" />
1111
<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>
12-
<script type="text/javascript"
13-
src="http://code.jquery.com/jquery-1.5.2.js"></script>
12+
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'>
1413

15-
<script src="/socket.io/socket.io.js"></script>
16-
<script src="/public/socket.io.js"></script>
17-
<script type="text/javascript" src="/public/jquery.url.js"></script>
14+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
15+
<script type="text/javascript" src="socket.io/socket.io.js"></script>
16+
<script type="text/javascript" src="public/jquery.url.js"></script>
17+
<script type="text/javascript" src="public/socket.io.js"></script>
18+
<script type="text/javascript" src="js/dirty.js"></script>
1819
</head>
1920
<body>
20-
2121
<div id="header">
2222
<b>Dirty</b>Share
2323
</div>
2424

25-
<script type="text/javascript">
26-
$(document).ready(function() {
27-
filth =
28-
[
29-
"\"My God, That\'s Filthy!\"",
30-
"\"You Dirty Bastards!\"",
31-
"\"Sheer And Utter Filth!\"",
32-
"\"What a Shame!\"",
33-
];
34-
$('#subheader').html('<i>' + filth[Math.floor(Math.random()*filth.length)] + '</i>');
35-
});
36-
</script>
37-
38-
<div id="subheader">
39-
</div>
25+
<div id="subheader"></div>
4026

4127
<div id="description">
4228
This is WebP2P version 0.1, aka 'DirtyShare', a pure JavaScript "peer to peer" filesharing system written in Node.js and Socket.io. Don't use this for anything. What's wrong with you?
4329
</div>
4430

45-
<div id="drop_zone" onClick="$('#files').click()" >
46-
<div id="clicky"><br /><br /><br /><br />Loading..</div>
47-
<div id="fileslist">
48-
49-
</div>
50-
</div>
51-
<input type="file" id="files" name="files[]" multiple style="height: 20px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -20px;" />
52-
53-
<div id="infoholder">
54-
<div id="host">
55-
</div>
56-
57-
<div id="peer">
58-
Awaiting peer..
59-
</div>
60-
</div>
31+
<div id="drop_zone" onClick="$('#files').click()" >
32+
<div id="clicky"><br /><br /><br /><br />Loading..</div>
33+
<div id="fileslist"></div>
34+
</div>
35+
<input type="file" id="files" name="files[]" multiple style="height: 20px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -20px;" />
36+
<div id="infoholder">
37+
<div id="host"></div>
6138

62-
<script type="text/javascript">
63-
$(document).ready(function() {
64-
$('#shareurl').html('<b>http://${domain}/' + $.url().segment(1) + '</b>');
65-
});
66-
</script>
39+
<div id="peer">
40+
Awaiting peer..
41+
</div>
42+
</div>
6743

6844
<br />
6945
<div id="description">
@@ -81,8 +57,7 @@
8157

8258
Ideally, the WebSockets will only be used to establish the P2P connections which will go over the HTML5 PeerConnection object, however, <i>no modern browsers support this feature yet</i>. Hopefully, it will become available within the next 6 months or so, and <b>we will be ready</b> for it !<br /><br />
8359

84-
Let's make a purely browser based, ad-free, Free and Open Source private filesharing system!
85-
60+
Let's make a purely browser based, ad-free, Free and Open Source private filesharing system!
8661
</div>
8762

8863
<div id="credits">
@@ -98,233 +73,5 @@
9873
<div id="warnings">
9974
</div>
10075
</center>
101-
102-
<script>
103-
104-
var fid = 0;
105-
var files = {};
106-
var downfiles = {};
107-
var socket = io.connect('http://${domain}');
108-
//read the requested bytes
109-
var reader;
110-
var canHost = true;
111-
if (typeof FileReader !== "undefined"){
112-
reader = new FileReader();
113-
}
114-
else{
115-
$('#clicky').html('<br /><br />Your browser is not modern enough to serve as a host. :( <br /><br />(Try Chrome or Firefox!)');
116-
canHost = false;
117-
}
118-
var chunksize = 65536;
119-
120-
socket.on('connect', function(data){
121-
socket.emit('joiner', $.url().segment(1));
122-
});
123-
124-
socket.on('fileslist', function(data){
125-
$('#fileslist').show();
126-
$('#clicky').html('');
127-
$('#clicky').hide();
128-
$('#fileslist').html('');
129-
$('#fileslist').html(function(i,v){
130-
return '<table id="filestable" cellspacing="0" summary=""><tr><th scope="col" abbr="Filename" class="nobg" width="60%">Filename</th><th scope="col" abbr="Status" width="20%" >Size</th> <th scope="col" abbr="Size"width="20%" >Action</th></tr>' + v;
131-
});
132-
files = {};
133-
files = JSON.parse(data);
134-
for (var file in files) {
135-
console.log(file);
136-
if (files.hasOwnProperty(file)) {
137-
$('#filestable').append('<tr><th scope="row" class="spec">' + files[file][0] + '</th><td>' + files[file][1] + '</td><td class="end" ><div id="fidspan' + fid + '"></div><a href="" onclick="beginTransfer(\'' + files[file][0] + '\', ' + fid + ', ' + files[file][1] + '); return false;" id="fid' + fid + '">Transfer</a><a href="data:' + files[file][2] + ';base64," target="_blank" id="fidsave' + fid + '" style="display:none">Save to disk!</a></td></tr>');
138-
fid++;
139-
};
140-
}
141-
});
142-
143-
socket.on('warn', function(data){
144-
$('#warnings').html(data);
145-
});
146-
147-
socket.on('host', function(data){
148-
if(canHost){
149-
$('#host').html("You're hosting this party!");
150-
$('#clicky').html("<br /><br /><br /><br />Click here to choose files");
151-
$('#fileslist').hide();
152-
}
153-
});
154-
155-
socket.on('peer', function(data){
156-
$('#peer').html("You're connected as a peer!");
157-
$('#host').html("Host connected.");
158-
$('#drop_zone').attr("onclick", function() {
159-
return;
160-
});
161-
$('#files').remove();
162-
$('#drop_zone').css("cursor", "default");
163-
$('#fileslist').hide();
164-
$('#clicky').html('Awaiting file list..');
165-
166-
});
167-
168-
socket.on('peerconnected', function(data){
169-
$('#peer').html("Peer connected!");
170-
});
171-
172-
socket.on('peerdisconnected', function(data){
173-
$('#peer').html("Peer disconnected.");
174-
});
175-
176-
socket.on('hostdisconnected', function(data){
177-
$('#host').html("Host disconnected.");
178-
$('#peer').html("You're disconnected!");
179-
});
180-
181-
socket.on('info', function(data){
182-
$('#info').append(data);
183-
});
184-
185-
socket.on('begintransfer', function(file, chunk){
186-
if(chunk == 0){
187-
$('#info').append("Begining Transfer..");
188-
}
189-
190-
fileholder= files[file];
191-
fileo= files[file][3]; //ugly
192-
193-
start = chunk * chunksize;
194-
195-
if((parseInt(fileholder[1]) - 1) <= start + chunksize - 1){
196-
stop = parseInt(fileholder[1]) - 1;
197-
}
198-
else{
199-
stop = start + chunksize - 1;
200-
}
201-
202-
// If we use onloadend, we need to check the readyState.
203-
reader.onloadend = function(evt) {
204-
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
205-
var data = evt.target.result;
206-
socket.emit('datatransfer', data, file, chunk);
207-
}
208-
};
209-
210-
if (fileo.webkitSlice) {
211-
var blob = fileo.webkitSlice(start, stop + 1);
212-
} else if (fileo.mozSlice) {
213-
var blob = fileo.mozSlice(start, stop + 1);
214-
}
215-
else{
216-
alert("It won't work in your browser. Please use Chrome or Firefox.");
217-
}
218-
219-
reader.readAsBinaryString(blob);
220-
221-
});
222-
223-
socket.on('datatransfer', function(data, file, chunk){
224-
f = downfiles[file];
225-
f.data = f.data + data;
226-
if(f.chunks == chunk){
227-
var fspan = "#fidspan" + f.fid;
228-
$(fspan).html('');
229-
$(fspan).hide();
230-
231-
var fsave = "#fidsave" + f.fid;
232-
$(fsave).show();
233-
$(fsave).attr('href', $(fsave).attr('href') + encode64(f.data));
234-
$('#info').append("Transfer finished!");
235-
236-
}
237-
else{
238-
var fspan = "#fidspan" + f.fid;
239-
$(fspan).html(Math.floor(((chunk/f.chunks) * 100)) + '%');
240-
var nextchunk = parseInt(chunk);
241-
socket.emit('begintransfer', file, nextchunk+1);
242-
}
243-
});
244-
245-
function beginTransfer(file, fid, size){
246-
var f = "#fidspan" + fid;
247-
$(f).html('0%');
248-
f = "#fid" + fid;
249-
$(f).hide();
250-
251-
var chunks = size/chunksize;
252-
if(chunks% 1 != 0){
253-
chunks = Math.floor(chunks) + 1;
254-
}
255-
256-
downfiles[file] = {data:'', chunk:0, chunks:chunks, fid:fid};
257-
socket.emit('begintransfer', file, 0);
258-
};
259-
260-
function handleFileSelect(evt) {
261-
var viles = evt.target.files; // FileList object
262-
files = {};
263-
264-
// Loop through the FileList and append files to list.
265-
for (var i = 0, f; f = viles[i]; i++) {
266-
if (!files.hasOwnProperty(f)) {
267-
files[f.name] = [f.name, f.size, f.type, f];
268-
};
269-
}
270-
socket.emit('listfiles', JSON.stringify(files));
271-
272-
$('#fileslist').show();
273-
$('#clicky').html('');
274-
$('#clicky').hide();
275-
$('#fileslist').html('');
276-
$('#fileslist').html(function(i,v){
277-
return '<table id="filestable" cellspacing="0" summary=""><tr><th scope="col" abbr="Filename" class="nobg" width="60%">Filename</th><th scope="col" abbr="Status" width="20%" >Size</th> <th scope="col" abbr="Size"width="20%" >Action</th></tr>' + v;
278-
});
279-
for (var file in files) {
280-
if (files.hasOwnProperty(file)) {
281-
$('#filestable').append('<tr><th scope="row" class="spec">' + files[file][0] + '</th><td>' + files[file][1] + '</td><td class="end"><b>Sharing!</b></td></tr>');
282-
};
283-
}
284-
};
285-
286-
document.getElementById('files').addEventListener('change', handleFileSelect, false);
287-
288-
var keyStr = "ABCDEFGHIJKLMNOP" +
289-
"QRSTUVWXYZabcdef" +
290-
"ghijklmnopqrstuv" +
291-
"wxyz0123456789+/" +
292-
"=";
293-
294-
function encode64(input) {
295-
var output = "";
296-
var chr1, chr2, chr3 = "";
297-
var enc1, enc2, enc3, enc4 = "";
298-
var i = 0;
299-
300-
do {
301-
chr1 = input.charCodeAt(i++);
302-
chr2 = input.charCodeAt(i++);
303-
chr3 = input.charCodeAt(i++);
304-
305-
enc1 = chr1 >> 2;
306-
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
307-
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
308-
enc4 = chr3 & 63;
309-
310-
if (isNaN(chr2)) {
311-
enc3 = enc4 = 64;
312-
} else if (isNaN(chr3)) {
313-
enc4 = 64;
314-
}
315-
316-
output = output +
317-
keyStr.charAt(enc1) +
318-
keyStr.charAt(enc2) +
319-
keyStr.charAt(enc3) +
320-
keyStr.charAt(enc4);
321-
chr1 = chr2 = chr3 = "";
322-
enc1 = enc2 = enc3 = enc4 = "";
323-
} while (i < input.length);
324-
325-
return output;
326-
}
327-
</script>
328-
32976
</body>
330-
</html>
77+
</html>

0 commit comments

Comments
 (0)