Initial state of the file manager app
yflory
8 years ago
parent
5f6ebb5cc1
commit
ce9eb47351
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="icon" type="image/png"
|
||||
href="/customize/main-favicon.png"
|
||||
data-main-favicon="/customize/main-favicon.png"
|
||||
data-alt-favicon="/customize/alt-favicon.png"
|
||||
id="favicon" />
|
||||
<link rel="stylesheet" href="/customize/main.css" />
|
||||
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||
<script>
|
||||
require.config({
|
||||
waitSeconds: 60,
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#pad-iframe {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="pad-iframe" src="inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
|
||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
#tree {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 70%;
|
||||
border: 2px solid blue;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
}
|
||||
#tree li {
|
||||
cursor: pointer;
|
||||
}
|
||||
#tree li span:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 2px solid green;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
}
|
||||
.folder, .file {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tree">
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
require.config({ paths: { 'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify' } });
|
||||
define([
|
||||
'/customize/messages.js?app=pad',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
||||
'/bower_components/hyperjson/hyperjson.js',
|
||||
'/common/toolbar.js',
|
||||
'/common/cursor.js',
|
||||
'/bower_components/chainpad-json-validator/json-ot.js',
|
||||
'/common/TypingTests.js',
|
||||
'json.sortify',
|
||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/common/visible.js',
|
||||
'/common/notify.js',
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
'/bower_components/diff-dom/diffDOM.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
'/customize/pad.js'
|
||||
], function (Messages, Crypto, realtimeInput, Hyperjson,
|
||||
Toolbar, Cursor, JsonOT, TypingTest, JSONSortify, TextPatcher, Cryptpad,
|
||||
Visible, Notify) {
|
||||
var $ = window.jQuery;
|
||||
var saveAs = window.saveAs;
|
||||
var $iframe = $('#pad-iframe').contents();
|
||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||
var files = {
|
||||
root: {
|
||||
"Directory 1": {
|
||||
"Dir A": {
|
||||
"File a": "#hash_a",
|
||||
"File b": "#hash_b"
|
||||
},
|
||||
"Dir B": {},
|
||||
"File A": "#hash_A"
|
||||
},
|
||||
"Directory 2": {
|
||||
"File B": "#hash_B",
|
||||
"File C": "#hash_C"
|
||||
}
|
||||
},
|
||||
trash: {
|
||||
"File Z": "#hash_Z"
|
||||
}
|
||||
};
|
||||
|
||||
var $tree = $iframe.find("#tree");
|
||||
var $content = $iframe.find("#content");
|
||||
var $folderIcon = $('<span>', {
|
||||
"class": "fa fa-folder folder",
|
||||
style: "font-family: FontAwesome"
|
||||
});
|
||||
var $fileIcon = $('<span>', {
|
||||
"class": "fa fa-file file",
|
||||
style: "font-family: FontAwesome"
|
||||
});
|
||||
|
||||
var displayDirectory = function (name, root) {
|
||||
$content.html("");
|
||||
var $title = $('<h1>').text(name);
|
||||
var $dirContent = $('<div>', {id: "folderContent"});
|
||||
var $list = $('<ul>').appendTo($dirContent);
|
||||
// display sub directories
|
||||
Object.keys(root).forEach(function (key) {
|
||||
if (typeof(root[key]) === "string") { return; }
|
||||
var $name = $('<span>').text(key).prepend($folderIcon.clone());
|
||||
var $element = $('<li>').append($name).click(function () {
|
||||
displayDirectory(key, root[key]);
|
||||
});
|
||||
$element.appendTo($list);
|
||||
});
|
||||
// display files
|
||||
Object.keys(root).forEach(function (key) {
|
||||
if (typeof(root[key]) !== "string") { return; }
|
||||
var $name = $('<span>').text(key).prepend($fileIcon.clone());
|
||||
var $element = $('<li>').append($name).click(function () {
|
||||
window.location.hash = root[key];
|
||||
});
|
||||
$element.appendTo($list);
|
||||
});
|
||||
$content.append($title).append($dirContent);
|
||||
};
|
||||
|
||||
var createTree = function (root, $container) {
|
||||
if (Object.keys(root).length === 0) { return; }
|
||||
var $list = $('<ul>').appendTo($container);
|
||||
Object.keys(root).forEach(function (key) {
|
||||
// Do not display files in the menu
|
||||
if (typeof(root[key]) === "string") { return; }
|
||||
var $name = $('<span>').text(key).click(function () {
|
||||
displayDirectory(key, root[key]);
|
||||
});
|
||||
var $element = $('<li>').append($name);
|
||||
$element.appendTo($list);
|
||||
createTree(root[key], $element[0]);
|
||||
});
|
||||
};
|
||||
createTree(files.root, $tree);
|
||||
});
|
||||
Loading…
Reference in New Issue