Permalink
Browse files

Drag & Drop upload + defer based processing

  • Loading branch information...
jcubic committed Apr 16, 2017
1 parent b46fd1a commit a0f7112990b6497ebf9a70b9f625512d5a213180
View
@@ -1,4 +1,4 @@
VERSION=0.6.6
VERSION=0.7.0
COMPRESS=uglifyjs
SED=sed
CP=cp
View
@@ -1,4 +1,4 @@
# jQuery File Browser version 0.6.6
# jQuery File Browser version 0.7.0
jQuery File Browser is a plugin for creating OS like file browsers.
View
@@ -1,6 +1,6 @@
{
"name": "jquery.filebrowser",
"version": "0.6.6",
"version": "0.7.0",
"main": [
"js/jquery.filebrowser.js",
"css/jquery.filebrowser.css"
@@ -1,11 +1,11 @@
/*!
*
* jQuery File Browser - directory browser jQuery plugin version 0.6.6
* jQuery File Browser - directory browser jQuery plugin version 0.7.0
*
* Copyright (c) 2016 Jakub Jankiewicz <http://jcubic.pl>
* Released under the MIT license
*
* Date: Mon, 26 Dec 2016 18:31:31 +0000
* Date: Sun, 16 Apr 2017 18:11:27 +0000
*/
.browser-widget.hidden, .browser-widget .hidden {
visibility: hidden;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1,11 +1,11 @@
/*!
*
* jQuery File Browser - directory browser jQuery plugin version 0.6.6
* jQuery File Browser - directory browser jQuery plugin version 0.7.0
*
* Copyright (c) 2016 Jakub Jankiewicz <http://jcubic.pl>
* Released under the MIT license
*
* Date: Mon, 26 Dec 2016 18:31:31 +0000
* Date: Sun, 16 Apr 2017 18:11:27 +0000
*/
.browser-widget.hidden, .browser-widget .hidden {
visibility: hidden;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -3,112 +3,131 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example of jQuery Browse</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="../js/jquery.filebrowser-src.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css" rel="stylesheet"/>
<link href="../css/jquery.filebrowser-src.css" rel="stylesheet"/>
<style>
body {
margin: 0;
margin: 0;
}
.browser {
float: left;
border: 1px solid gray;
width: 300px;
height: 200px;
margin: 20px;
float: left;
border: 1px solid gray;
width: 300px;
height: 200px;
margin: 20px;
}
.browser.selected {
border-color: blue;
border-color: blue;
}
</style>
<script>
$(function() {
var env = {
'foo': {
'foo.txt': 'foo.txt content',
'bar.txt': 'bar.txt content'
},
'bar': {
'page.html': '<html></html>',
'style.css': 'body { overflow: scroll; }'
},
'baz.txt': 'baz.txt content',
'quux.txt': 'quux.txt content',
'lorem.svg': 'lorem.svg content',
'ipsum.doc': 'ipsum.doc content',
'dolor.txt': 'dolor.txt content',
'sit.jpg': 'sit.jpg content',
'amet.gif': 'amet.gif content'
};
function get(path) {
var current = env;
browser.walk(path, function(file) {
current = current[file];
});
return current;
}
function process(src, dest, remove) {
console.log('process ' + src + ' => ' + dest);
var file = env;
var name;
browser.walk(src, function(part, last) {
var src = file[part];
if (last) {
if (remove) {
delete file[part];
}
}
file = src;
});
var current = env;
browser.walk(dest, function(part, last) {
if (!last) {
current = current[part];
} else {
name = part;
}
});
current[name] = file;
}
$('.browser').browse({
root: '/',
separator: '/',
name: 'filestystem',
rename: function(src, dest) {
process(src, dest, true);
},
refresh_timer: 0,
copy: process,
dir: function(path, callback) {
dir = get(path);
if ($.isPlainObject(dir)) {
var result = {files:[], dirs: []};
Object.keys(dir).forEach(function(key) {
if (typeof dir[key] == 'string') {
result.files.push(key);
} else if ($.isPlainObject(dir[key])) {
result.dirs.push(key);
}
});
callback(result);
}
},
open: function(filename) {
var file = get(filename);
if (typeof file == 'string') {
alert(file);
}
}
});
var browser = $('.browser').eq(0).browse();
});
$(function() {
var env = {
'foo': {
'foo.txt': 'foo.txt content',
'bar.txt': 'bar.txt content'
},
'bar': {
'page.html': '<html></html>',
'style.css': 'body { overflow: scroll; }'
},
'baz.txt': 'baz.txt content',
'quux.txt': 'quux.txt content',
'lorem.svg': 'lorem.svg content',
'ipsum.doc': 'ipsum.doc content',
'dolor.txt': 'dolor.txt content',
'sit.jpg': 'sit.jpg content',
'amet.gif': 'amet.gif content'
};
function get(path) {
var current = env;
browser.walk(path, function(file) {
current = current[file];
});
return current;
}
function process(src, dest, remove) {
console.log('process ' + src + ' => ' + dest);
var file = env;
var name;
browser.walk(src, function(part, last) {
var src = file[part];
if (last) {
if (remove) {
delete file[part];
}
}
file = src;
});
var current = env;
browser.walk(dest, function(part, last) {
if (!last) {
current = current[part];
} else {
name = part;
}
});
current[name] = file;
var defer = $.Deferred();
// one second delay promise that simulate ajax upload
setTimeout(function() {
defer.resolve();
}, 1000);
return defer.promise();
}
function upload(file, path) {
var current = env;
browser.walk(path, function(part) {
if (!current[part]) {
current[part] = {}; // upload new directory
}
current = current[part];
});
current[file.name] = 'new file ' + file.name;
console.log('upload ' + file.name + ' to ' + path + ' directory');
return $.when(true); // resolved promise
}
$('.browser').browse({
root: '/',
separator: '/',
name: 'filestystem',
rename: function(src, dest) {
return process(src, dest, true);
},
refresh_timer: 0,
copy: process,
dir: function(path) {
dir = get(path);
var result;
if ($.isPlainObject(dir)) {
result = {files:[], dirs: []};
Object.keys(dir).forEach(function(key) {
if (typeof dir[key] == 'string') {
result.files.push(key);
} else if ($.isPlainObject(dir[key])) {
result.dirs.push(key);
}
});
}
return $.when(result); // resolved promise
},
upload: function(file, path) {
return upload(file, path);
},
open: function(filename) {
var file = get(filename);
if (typeof file == 'string') {
alert(file);
}
}
});
var browser = $('.browser').eq(0).browse();
});
</script>
</head>
<div class="browser"></div>
<div class="browser"></div>
<div class="browser"></div>
<div class="browser"></div>
<body>
</body>
</html>
</html>
Oops, something went wrong.

0 comments on commit a0f7112

Please sign in to comment.