Permalink
fac1d93 Sep 3, 2017
1 contributor

Users who have contributed to this file

157 lines (156 sloc) 4.92 KB
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example of jQuery Browse</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="../js/jquery.filebrowser-src.js"></script>
<link href="../css/jquery.filebrowser-src.css" rel="stylesheet"/>
<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"/>
<style>
body {
margin: 0;
}
.browser {
float: left;
border: 1px solid gray;
width: 640px;
height: 480px;
margin: 20px;
}
</style>
<script>
$(function() {
var env = {
'C:\\': {
'foo': {
'foo.txt': 'foo.txt content',
'bar.txt': 'bar.txt content'
},
'bar': {
'page.html': '<html></html>',
'style.css': 'body { overflow: scroll; }'
}
},
'D:\\': {
'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) {
if (file.match(/[A-Z]:/)) {
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,
contextmenu: true,
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);
}
},
create: function(path, type) {
var m = path.match(/(.*)\/(.*)/);
var parent = get(m[1]);
if (type == 'directory') {
parent[m[2]] = {};
} else {
parent[m[2]] = 'Content of new File';
}
},
item_class: function(path, name) {
return name.match(/[A-Z]:/) ? 'drive' : '';
},
remove: function(path) {
var m = path.match(/(.*)\/(.*)/);
var parent = get(m[1]);
delete parent[m[2]];
}
});
var browser = $('.browser').eq(0).browse();
});
</script>
</head>
<div class="browser"></div>
<body>
</body>
</html>