Skip to content

@iwillwen /gist:3985761
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<!DOCTYPE html>
<html>
<head>
<title>Copyclip alpha 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/nanodb.js"></script>
</head>
<body>
<div id="wrapper">
<div id="dragbox">
<div id="files">
</div>
</div>
<div id="progress">
<div id="fin"></div>
</div>
<h1 id="title">Drag file or text here.</h1>
<div class="modal" id="login">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>用户登陆</h3>
</div>
<div class="modal-body">
<h6 for="email">电子邮箱: </h6>
<input type="email" name="email" id="email" />
</div>
<div class="modal-footer">
<a class="btn btn-primary" id="submit">登陆</a>
</div>
</div>
</div>
<script type="text/javascript">
var qiniu = require('qiniu');
var ejs = require('ejs');
var request = require('request');
var qs = require('querystring');
// 模板
var tmlp = [
'<div id="<%=key%>" class="file" data-downloadurl="application/octet-stream:<%-name%>:http://copyclip.dn.qbox.me/<%=key%>" draggable="true">',
' <div class="icon" style="background:url(\'<%-icon%>\');">',
' <div class="remove">X</div>',
' </div>',
' <span class="name"><%=name%></span>',
'</div>'
].join('\r\n');
var tmlp1 = [
'<% files.forEach(function(file) { %>',
'<div id="<%=file.key%>" class="file" data-downloadurl="application/octet-stream:<%-file.name%>:http://copyclip.dn.qbox.me/<%=file.key%>" draggable="true">',
' <div class="icon" style="background:url(\'<%-file.icon%>\');">',
' <div class="remove">X</div>',
' </div>',
' <span class="name"><%=file.name%></span>',
'</div>',
'<% }) %>'
].join('\r\n');
var key = Math.random().toString(32).substr(2);
// NanoDB 数据库
var db = nano.db('copyclip');
var files = db.collection('files');
// 通讯接口
var socket = io.connect('http://127.0.0.1:8888');
// 登陆接口
socket.emit('key', key);
// 监听用户事件
$('.file')
.live('click', function(evt) {
window.open('http://copyclip.dn.qbox.me/' + $(this).attr('id'));
})
.live("dragstart", function(evt) {
evt.originalEvent.dataTransfer.setData("DownloadURL", $(this).data('downloadurl'));
});
$('.file img').each(function(i, img) {
img.addEventListener("dragstart",function(evt){
evt.stopPropagation();
evt.preventDefault();
},false);
});
$('.remove')
.live('click', function(evt) {
var self = this;
request.del('http://127.0.0.1:8888/remove/' + $(this).parent().parent().attr('id') + qs.stringify({ user_key: localStorage._key }), function(err, resp) {
if (resp.statusCode == 200) {
$('#' + $(self).parent().parent().attr('id'))
.animate(
{
opacity: 0
},
1300,
function() {
$(this).remove();
}
);
}
});
return false;
});
$('#dragbox')
.bind('dragenter', function(evt) {
evt.stopPropagation();
evt.preventDefault();
})
.bind('dragexit', function(evt) {
evt.stopPropagation();
evt.preventDefault();
})
.bind('dragover', function(evt) {
evt.stopPropagation();
evt.preventDefault();
})
.bind('drop', function(evt) {
evt.stopPropagation();
evt.preventDefault();
$.each(evt.originalEvent.dataTransfer.files, function(index, file){
handleFile(file);
});
});
$('#login #submit').click(function(evt) {
var email = $(this).parent().parent().find('#email').val();
socket.emit('login', key, email);
});
$('#login').modal({
backdrop: false,
keyboard: false,
show: true
});
if (undefined != localStorage._key && undefined != localStorage.email) {
socket.emit('key', localStorage._key);
$.get('http://127.0.0.1:8888/files?key=' + localStorage._key, function(files) {
var html = ejs.render(tmlp1, {
files: files
});
$('#files').html(html);
$('#login').modal('hide');
});
}
if ('undefined' == typeof localStorage._key) {
localStorage._key = key;
$('#login').modal('hide');
}
socket
.on('authed', function(key, email) {
localStorage._key = key;
localStorage.email = email;
socket.emit('key', key);
$('#login').modal('hide');
$.get('http://127.0.0.1:8888/files?key=' + localStorage._key, function(files) {
var html = ejs.render(tmlp1, {
files: files
});
$('#files').html(html);
});
})
.on('complete', function(key, name, icon) {
var _key = key;
files.insert({
key: _key,
name: name,
icon: icon
}, function(err) {
var html = ejs.render(tmlp, {
key: _key,
name: name,
icon: icon
});
var doc = $(html);
doc.css('opacity', 0);
$('#files').append(doc);
doc.animate({ opacity: 1 }, 1300);
});
})
.on('remove', function(key) {
$('#' + key)
.animate(
{
opacity: 0
},
1300,
function() {
$(this).remove();
}
);
});
function handleFile(file) {
var id = Math.random().toString(32).substr(2);
var reader = new FileReader();
reader.onloadend = handleReaderLoadEnd;
reader.readAsBinaryString(file);
reader.size = file.size;
reader.type = file.type;
reader.name = file.name;
reader.key = id;
}
function handleReaderLoadEnd(evt) {
var size = JSON.stringify({
file: evt.target.result,
size: evt.target.size,
type: evt.target.type,
key: evt.target.key,
name: evt.target.name
}).length;
$('#progress')
.css('opacity', 0)
.show()
.animate({ opacity: 1 }, 700);
var req = request.post(
'http://127.0.0.1:8888/upload',
{
form: {
file: evt.target.result,
size: evt.target.size,
type: evt.target.type,
key: evt.target.key,
name: evt.target.name,
user_key: localStorage._key
}
},
function() {
$('#progress')
.animate({ opacity: 0 }, 700, function() {
$(this).hide();
});
});
}
function upload_progress() {
var xhr = jQuery.ajaxSettings.xhr();
xhr.upload.onprogress = function (evt) {
var ratio = evt.loaded / evt.total + '%';
$('#progress #fin').css('width', ratio);
};
return xhr;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.