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