<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Important:
If you use the gzipped or `INCLUDE_FALLBACK_INDEX_HTM` options, please remember
to rerun the `reduce_index.sh` script located in the `extras` subfolder and recompile
the sketch after each change to this file.
-->
<html lang="en">
<head>
<title>File manager</title>
<style type="text/css" media="screen">
body {
font-size: 12px;
font-family: Verdana, Arial, Sans-serif;
}
.contextMenu {
z-index: 300;
position: absolute;
left: 5px;
border: 1px solid #444;
background-color: #F5F5F5;
display: none;
box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
font-size: 11px;
font-weight: bold;
}
.contextMenu ul {
list-style: none;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.contextMenu li {
position: relative;
min-width: 60px;
cursor: pointer;
}
.contextMenu span {
color: #444;
display: inline-block;
padding: 6px;
}
.contextMenu li:hover { background: #444; }
.contextMenu li:hover span { color: #EEE; }
.css-treeview ul, .css-treeview li {
padding: 0;
margin: 0;
list-style: none;
}
.css-treeview input {
position: absolute;
opacity: 0;
}
.css-treeview {
font-size: 11px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.css-treeview span {
color: #00f;
cursor: pointer;
}
.css-treeview span:hover {
text-decoration: underline;
}
.css-treeview input + label + ul {
margin: 0 0 0 22px;
}
.css-treeview input ~ ul {
display: none;
}
.css-treeview label, .css-treeview label::before {
cursor: pointer;
}
.css-treeview input:disabled + label {
cursor: default;
opacity: .6;
}
.css-treeview input:checked:not(:disabled) ~ ul {
display: block;
}
.css-treeview label, .css-treeview span, .css-treeview label::before {
background: url(" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAACgCAMAAAAy5xwmAAAAb1BMVEVHcEyWm55WW2E6QUdAQEBiaG1jaG7///8vNj3KzM7CxMbm5ufMzc/Y2dqxtLaGio58gYWJjZFRVFZJTE/Lzc+vsbNdXV74+PhvdHlsbW2kp6q7vLzy8vMuNTzf39+ho6UyOUCFhYWUl5nv7+/p6ekQi/GRAAAAAXRSTlMAQObYZgAAASRJREFUSMftk9tywiAQhoUAhVAwJpqDRqfavv8zluNKkurEjrY3+e74JizLn2W1miAKxphOBMeUYq6uH/A3A66YpRBRqJZaMI8iwsV/CdM6A2xj5nIUsK0/iTUPrGNm0MUDIkeG/J54uOiksb9hXh55PhIIjfKgdJTHSEy2/FD06Xmod8NOwrrwFUsQmXZHZhhekHBiByYIoaIJAjP8USWiCA8KhEW8UGT7KPaZExsObHyrUgTkjTz8liPXwzwEB+OPFVxHE8X2ckRByLaVyhVKxP27KN+nAtH7Rvur2Dr621tekMes+WiG86Hr6jKYj+7Q1Kd0PpxI58NsQdN/25zlQDQdKb9AnM6fHSGkPsQaJamIpQzCrywhD1iT2XksLCws/IZv8Zof7t25YlkAAAAASUVORK5CYII=") no-repeat;
}
.css-treeview label, .css-treeview span, .css-treeview label::before, .css-treeview span::before {
display: inline-block;
height: 16px;
line-height: 16px;
vertical-align: middle;
}
.css-treeview label {
background-position: 18px 0; /* folder icon */
}
.css-treeview span {
background-position: 18px -48px; /* generic file icon */
}
.css-treeview span.txt {
background-position: 18px -64px; /* text file icon */
}
.css-treeview span.img {
background-position: 18px -80px; /* image file icon */
}
.css-treeview label::before {
content: "";
width: 16px;
margin: 0 22px 0 0;
vertical-align: middle;
background-position: 0 -32px; /* expand icon */
}
.css-treeview span::before {
content: "";
width: 16px;
margin: 0 22px 0 0;
}
.css-treeview input:checked + label::before {
background-position: 0 -16px; /* collapse icon */
}
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.css-treeview{
-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
}
@-webkit-keyframes webkit-adjacent-element-selector-bugfix
{
from {
padding: 0;
}
to {
padding: 0;
}
}
}
#header {
position: absolute;
top: 0;
right: 0;
left: 0;
height:24px;
padding: 1px 1px 0px 10px;
background-color: #444;
color:#EEE;
}
#tree {
position: absolute;
top: 25px;
bottom: 0;
left: 0;
width: 20%;
padding: 8px;
}
#editor, #preview {
position: absolute;
top: 25px;
right: 0;
bottom: 0;
left: 20%;
}
#preview {
background-color: #EEE;
padding:5px;
}
#status {
position: absolute;
top: 3px;
right: 10px;
font-size: 15px;
}
#fsMeter {
width:100px;
padding-bottom:2px;
}
#warning {
height:100%;
background-color:orange;
color:black;
}
.tooltip {
position: absolute;
z-index: 2; /* must be above editor which is at 1 */
right:0px;
top:20px;
visibility: hidden;
background-color: white;
color: black;
text-align: center;
border: 1px solid #000;
padding: 3px;
font-size: 10px;
}
#warning:hover .tooltip {
visibility: visible;
}
#loading {
position:absolute;
// note: changing between block and none cancels the opacity anim, so we move it in and out of screen instead by changing the top value
// maybe see https://www.impressivewebs.com/animate-display-block-none/ for another approach
display:block;
top: -100vh;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 500ms ease-in-out;
}
#loading.shown {
top: 0;
opacity: 1;
}
#loading-msg {
display: inline-block;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
color:white;
font-size: 32px;
}
@keyframes spinner-anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* :not(:required) hides this rule from IE9 and below */
.spinner-anim:not(:required) {
display: inline-block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spinner-anim 1s infinite linear;
border: 16px solid #eee;
border-right-color: transparent;
border-radius: 32px;
box-sizing: border-box;
overflow: hidden;
text-indent: -9999px;
width: 64px;
height: 64px;
}
</style>
<script>
var tree; // needed by editor to refresh file size on save
var fsInfo; // needed to change refreshPath behaviour on SPIFFS
/////////////////////////
// UTILS
function setLoading(show, message) {
if (message) console.log(message);
document.getElementById("loading-msg").innerHTML = message?message:"";
if (show) document.getElementById("loading").classList.add("shown");
else document.getElementById("loading").classList.remove("shown");
document.body.style.cursor = show?"wait":"default";
}
function readableSize(bytes) {
if (bytes < 1024) return bytes + " B";
var units = [' KiB', ' MiB', ' GiB', ' TiB', 'PiB'];
var i = -1;
do {
bytes = bytes / 1024;
i++;
} while (bytes > 1024);
return bytes.toFixed(2) + units[i];
}
function refreshStatus(){
document.getElementById("status").innerHTML = "(refreshing...)";
var xmlHttp = new XMLHttpRequest();
xmlHttp.onload = function() {
if (xmlHttp.status != 200) showHttpError(xmlHttp);
else {
fsInfo = JSON.parse(xmlHttp.responseText);
var status = fsInfo.type + " - ";
if (fsInfo.isOk) {
var percent = (1+Math.round(99*fsInfo.usedBytes/fsInfo.totalBytes)); // fake to see the "used" bar in any case
var text = readableSize(fsInfo.totalBytes - fsInfo.usedBytes) + " free of " + readableSize(fsInfo.totalBytes);
status += "<meter id='fsMeter' min='0' optimum='0'low='90' high='95' max='100' value='" + percent + "' title='" + text + "'>" + text + "</meter>"
if (fsInfo.unsupportedFiles) {
status += " <span id='warning'>WARNING<span class='tooltip'>"
+ "Filesystem contains unsupported filenames:<br/>"
+ fsInfo.unsupportedFiles
+ "</span></span>";
}
}
else {
status += "<span style='background-color:red;color:white;font-weight:bold'>INIT ERROR !</span>";
}
document.getElementById("status").innerHTML = status;
if (fsInfo.type != "SPIFFS") {
document.getElementById("mkdir").style.display = "inline";
}
}
};
xmlHttp.open("GET", "/status", true);
xmlHttp.send(null);
}
function showHttpError(request) {
alert("ERROR: [" + request.status+"] " + request.responseText);
}
function canLoadNewContents() {
// The fact the save button is enabled indicates the editor has unsaved changes
if (document.getElementById("saveBtn").disabled) return true;
if (confirm("Changes to your document will be lost if you continue")) {
enableSaveDiscardBtns(false);
return true;
}
return false;
}
function enableSaveDiscardBtns(enabled) {
document.getElementById("saveBtn").disabled = !enabled;
document.getElementById("discardBtn").disabled = !enabled;
}
/*
* Returns the parent folder of a given path
* "" > ""
* "/" > ""
* "a" > ""
* "/a" > ""
* "a/" > ""
* "/a/" > ""
* "a/b" > "/a"
* "/a/b" > "/a"
* "a/b/" > "/a"
* "/a/b/" > "/a"
*/
function getParentFolder(path) {
if (!path.startsWith("/")) path = "/" + path;
if (path.endsWith("/")) path = path.slice(0, -1);
return path.substring(0, path.lastIndexOf("/"));
}
/////////////////////////
// HEADER with uploader, buttons ans status
function createHeader(element, tree, editor){
var header = document.getElementById(element);
var xmlHttp;
var fileSelector = document.createElement("input");
fileSelector.type = "file";
fileSelector.multiple = false;
fileSelector.name = "data";
header.appendChild(fileSelector);
var pathInput = document.createElement("input");
pathInput.id = "pathInput";
pathInput.type = "text";
pathInput.name = "path";
pathInput.defaultValue = "/";
header.appendChild(pathInput);
var upload = document.createElement("button");
upload.innerHTML = "Upload";
header.appendChild(upload);
var mkdir = document.createElement("button");
mkdir.id = "mkdir";
mkdir.style.display = "none";
mkdir.innerHTML = "MkDir";
header.appendChild(mkdir);
var mkfile = document.createElement("button");
mkfile.innerHTML = "MkFile";
header.appendChild(mkfile);
var editorButtons = document.createElement("span");
editorButtons.id = "editorButtons";
editorButtons.style.display = "none";
header.appendChild(editorButtons);
var save = document.createElement("button");
save.id = "saveBtn";
save.innerHTML = "Save";
save.style.marginLeft = "30px";
save.disabled = true;
editorButtons.appendChild(save);
var discard = document.createElement("button");
discard.id = "discardBtn";
discard.innerHTML = "Discard";
discard.disabled = true;
editorButtons.appendChild(discard);
var help = document.createElement("button");
help.id = "helpBtn";
help.innerHTML = "?";
editorButtons.appendChild(help);
var status = document.createElement("span");
status.id = "status";
status.innerHTML = "(loading)";
header.appendChild(status);
fileSelector.onchange = function(e){ // A file has been selected
if (fileSelector.files.length === 0) return;
var filename = fileSelector.files[0].name;
if (mustFormat83()) {
filename = to83(filename);
}
if (!pathInput.value.startsWith("/")) pathInput.value = "/" + pathInput.value;
pathInput.value = getParentFolder(pathInput.value) + "/" + filename;
}
upload.onclick = function(e) {
if (fileSelector.files.length === 0) return;
tree.httpUpload(fileSelector.files[0], pathInput.value);
}
function mustFormat83() {
return false; // TODO: if needed, test fsInfo.type (and fatType ?)
}
function to83(filename) {
var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
var name = /(.*)\.[^.]+$/.exec(filename)[1];
if (name !== undefined){
if (name.length > 8) name = name.substring(0, 8);
filename = name;
}
if (ext !== undefined){
if (ext === "html") ext = "htm";
else if (ext === "jpeg") ext = "jpg";
filename = filename + "." + ext;
}
return filename;
}
mkfile.onclick = function(e){
var path = pathInput.value.trim();
if (path === "") alert("A filename must be given");
else if (path.endsWith("/")) alert("Filenames must not end with a '/' character");
else tree.httpCreate(path);
};
mkdir.onclick = function(e){
var path = pathInput.value.trim();
if (path === "") alert("A folder name must be given");
else {
if (!path.endsWith("/")) path = path + "/";
tree.httpCreate(path);
}
};
save.onclick = function(e){
editor.save();
}
discard.onclick = function(e){
editor.discard();
}
help.onclick = function(e){
editor.showShortcuts();
}
}
/////////////////////////
// FILE TREE
function createTree(element, editor){
var preview = document.getElementById("preview");
var treeRoot = document.createElement("div");
treeRoot.className = "css-treeview";
treeRoot.id = "/";
document.getElementById(element).appendChild(treeRoot);
function loadDownload(path){
document.getElementById("download-frame").src = path+"?download=true";
}
function loadImgPreview(path){
document.getElementById("pathInput").value = path;
document.getElementById("editor").style.display = "none";
document.getElementById("editorButtons").style.display = "none";
preview.style.display = "block";
preview.innerHTML = "<img src='"+path+"' style='max-width:100%; max-height:100%; margin:auto; display:block;' />";
}
// Fall back code used when ace.js is not available (neither online or local)
function loadTxtPreview(path){
document.getElementById("pathInput").value = path;
document.getElementById("editor").style.display = "none";
document.getElementById("editorButtons").style.display = "none";
preview.style.display = "block";
preview.innerHTML = "<span style='color:red;'>Ace editor could not be loaded from the internet nor from /edit/ace.js . Defaulting to text viewer...</span><pre id='txtContents' style='overflow: auto;'></pre>";
var xhr = new XMLHttpRequest();
xhr.onload = function () {
document.getElementById('txtContents').textContent = this.responseText;
};
xhr.open('GET', path);
xhr.send();
}
this.clearMainPanel = function() {
document.getElementById("editor").style.display = "none";
document.getElementById("editorButtons").style.display = "none";
preview.style.display = "block";
preview.innerHTML = "<div style='text-align:center'>(file not found or format not supported)</div>";
}
function isTextFile(path){
var ext = /(?:\.([^.]+))?$/.exec(path)[1];
if (ext !== undefined){
switch(ext.toLowerCase()){
case "txt":
case "htm":
case "html":
case "js":
case "json":
case "c":
case "h":
case "cpp":
case "css":
case "xml":
return true;
}
}
return false;
}
function isImageFile(path){
var ext = /(?:\.([^.]+))?$/.exec(path)[1];
if (ext !== undefined){
switch(ext.toLowerCase()){
case "png":
case "jpg":
case "jpeg":
case "gif":
case "ico":
return true;
}
}
return false;
}
function fillFolderMenu(el, path){
var list = document.createElement("ul");
el.appendChild(list);
var action = document.createElement("li");
list.appendChild(action);
var isChecked = document.getElementById(path).childNodes[0].checked;
var expnd = document.createElement("li");
list.appendChild(expnd);
if (isChecked){
expnd.innerHTML = "<span>Collapse</span>";
expnd.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
document.getElementById(path).childNodes[0].checked = false;
};
var refrsh = document.createElement("li");
list.appendChild(refrsh);
refrsh.innerHTML = "<span>Refresh</span>";
refrsh.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
httpList(path);
};
}
else {
expnd.innerHTML = "<span>Expand</span>";
expnd.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
document.getElementById(path).childNodes[0].checked = true;
httpList(path);
};
}
var renFolder = document.createElement("li");
list.appendChild(renFolder);
renFolder.innerHTML = "<span>Rename/Move</span>";
renFolder.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
var newPath = prompt("Rename " + path + " to", path);
if (newPath != null && newPath != path) {
httpRename(path, newPath);
}
};
var delFolder = document.createElement("li");
list.appendChild(delFolder);
delFolder.innerHTML = "<span>Delete</span>";
delFolder.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
httpDelete(path);
};
}
function fillFileMenu(el, path){
var list = document.createElement("ul");
el.appendChild(list);
var action = document.createElement("li");
list.appendChild(action);
if (isTextFile(path)){
if (typeof ace == "undefined") {
// Could not load editor
action.innerHTML = "<span>View</span>";
action.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
if (canLoadNewContents()) loadTxtPreview(path);
};
}
else {
action.innerHTML = "<span>Edit</span>";
action.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
if (canLoadNewContents()) editor.loadUrl(path);
};
}
}
else if (isImageFile(path)){
action.innerHTML = "<span>Preview</span>";
action.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
if (canLoadNewContents()) loadImgPreview(path);
};
}
var download = document.createElement("li");
list.appendChild(download);
download.innerHTML = "<span>Download</span>";
download.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
loadDownload(path);
};
var renFile = document.createElement("li");
list.appendChild(renFile);
renFile.innerHTML = "<span>Rename/Move</span>";
renFile.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
var newPath = prompt("Rename " + path + " to", path);
if (newPath != null && newPath != path) {
httpRename(path, newPath);
}
};
var delFile = document.createElement("li");
list.appendChild(delFile);
delFile.innerHTML = "<span>Delete</span>";
delFile.onclick = function(e){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
httpDelete(path);
};
}
function showContextMenu(e, path, isfile){
var divContext = document.createElement("div");
var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
var left = e.clientX + scrollLeft;
var top = e.clientY + scrollTop;
divContext.className = 'contextMenu';
divContext.style.display = 'block';
divContext.style.left = left + 'px';
divContext.style.top = top + 'px';
if (isfile) fillFileMenu(divContext, path);
else fillFolderMenu(divContext, path);
document.body.appendChild(divContext);
var width = divContext.offsetWidth;
var height = divContext.offsetHeight;
divContext.onmouseout = function(e){
if (e.clientX < left || e.clientX > (left + width) || e.clientY < top || e.clientY > (top + height)){
if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(divContext);
}
};
}
function createTreeLeaf(parentPath, name, size){
var leaf = document.createElement("li");
leaf.id = ((parentPath == "/")?"":parentPath)+"/"+name;
var span = document.createElement("span");
if (isTextFile(name)) span.classList.add("txt");
else if (isImageFile(name)) span.classList.add("img");
span.innerHTML = name + " <i>(" + readableSize(size) + ")</i>";
leaf.appendChild(span);
leaf.onclick = function(e){
attemptLoad(leaf.id);
};
leaf.oncontextmenu = function(e){
e.preventDefault();
e.stopPropagation();
showContextMenu(e, leaf.id, true);
};
return leaf;
}
function createTreeBranch(parentPath, name, disabled){
var leaf = document.createElement("li");
leaf.id = ((parentPath == "/")?"":parentPath)+"/"+name;
var check = document.createElement("input");
check.type = "checkbox";
if (typeof disabled !== "undefined" && disabled) check.disabled = "disabled";
leaf.appendChild(check);
var label = document.createElement("label");
label.textContent = name;
leaf.appendChild(label);
check.onchange = function(e){
if (check.checked){
httpList(leaf.id);
}
};
label.onclick = function(e){
if (!check.checked){
check.checked = true;
httpList(leaf.id);
}
else {
check.checked = false;
}
};
leaf.oncontextmenu = function(e){
e.preventDefault();
e.stopPropagation();
showContextMenu(e, leaf.id, false);
}
return leaf;
}
function addFileNodes(parentPath, items){
items.sort(function(a, b) {
if (a.type == b.type) {
return a.name.localeCompare(b.name); // a before z
}
else {
return a.type.localeCompare(b.type); // dir before file
}
});
var list = document.createElement("ul");
document.getElementById(parentPath).appendChild(list);
var ll = items.length;
for(var i = 0; i < ll; i++){
var item = items[i];
var itemEl;
if (item.type === "file") itemEl = createTreeLeaf(parentPath, item.name, item.size);
else itemEl = createTreeBranch(parentPath, item.name);
list.appendChild(itemEl);
}
}
this.attemptLoad = function(path) {
console.log("Attempting load of '" + path + "'...");
document.getElementById("pathInput").value = path;
if (canLoadNewContents()) {
if (isTextFile(path)) {
if (typeof ace == "undefined") {
loadTxtPreview(path);
}
else {
editor.loadUrl(path);
}
}
else if (isImageFile(path)) loadImgPreview(path);
else clearMainPanel();
}
}
/*
* Refresh the given path, e.g. "/a/b/c/d"
* It means we have to make sure d is already displayed
* If not, we get to its parent first (c), if open, and so on (b, a).
* Once we have found an ancestor, we refresh it, then we must come back to where we started, refreshing nodes on our way down.
* This is done by pushing all paths to be refreshed in an array that will be pop'd in the callback function
*/
this.refreshPath = function(path){
if (fsInfo.type == "SPIFFS") {
// on SPIFFS : No parent node => refresh full tree
console.log("Refreshing '/'...");
httpList("/");
}
else {
console.log("Refreshing '" + path + "'...");
if (path.lastIndexOf("/") == -1){
// No "/" => reset the root
httpList("/");
}
else {
var paths = [];
// Climb the tree until we get to an open node, adding paths to the array
var parentPath = path;
while ((parentPath.lastIndexOf("/") != -1) && !document.getElementById(parentPath)) {
paths.push(parentPath);
parentPath = getParentFolder(parentPath);
}
// If we've reached the top
if (parentPath == "") paths.push("/"); // list the root
else paths.push(parentPath); // otherwise list the last folder
// And list it back down by iterating on collected paths
listPaths(paths);
}
}
}
//////////////////////////////
// HTTP OPERATIONS
// Callbacks
function onListReceived(req, parentPath, remainingPaths) {
return function(){
setLoading(false);
if (req.status != 200) showHttpError(req);
else {
// Remove previous child list, if any
var parentEl = document.getElementById(parentPath);
if (parentEl) {
var lastChild = parentEl.lastElementChild;
if (lastChild && lastChild.tagName == "UL") parentEl.removeChild(lastChild);
}
// And reinsert the received ones instead
addFileNodes(parentPath, JSON.parse(req.responseText));
if (document.getElementById(parentPath).childNodes[0].checked !== undefined) {
document.getElementById(parentPath).childNodes[0].checked = true;
}
// If there are more folders to refresh, go ahead
if (remainingPaths && remainingPaths.length) {
listPaths(remainingPaths);
}
}
}
}
/*
* Callback after a FS operation was performed.
* The "req" param is the http request
* The "path" param is the "affected" (created, moved, renamed, delteted) path, of which the parent must be refreshed
* In case of move/delete, the "target" path is returned in the response, so that it can be refreshed too
* Operation | path (file to be loaded) | req.responseText (between brackets if same as parent of path)
* ---------------+--------------------------+--------------------------------------------------------------
* Create file | created file | (parent of created file)
* Create folder | created folder | (parent of created folder)
* Rename file | target file | (parent of source file)
* Move file | target file | parent of source file, or remaining ancestor
? Rename folder | target folder | (parent of source folder)
? Move folder | target folder | parent of source folder, or remaining ancestor
* Delete file | | parent of deleted file, or remaining ancestor
* Delete folder | | parent of deleted folder, or remaining ancestor
*/
function onOperationComplete(req, path){
return function(){
setLoading(false);
if (req.status != 200) showHttpError(req);
else {
if (path) {
var parentPath = getParentFolder(path);
// Refresh returned path, if requested and different from path
if (req.responseText && req.responseText != parentPath) {
refreshPath(req.responseText);
}
// Refresh original path
refreshPath(parentPath);
// Try to load given path
attemptLoad(path);
}
else {
// Delete, only refresh returned path
refreshPath(req.responseText);
}
}
refreshStatus();
}
}
// Requests
function httpList(parentPath, remainingPaths){
setLoading(true, "Listing '" + parentPath + "'...");
// Fetch an updated list
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = onListReceived(xmlHttp, parentPath, remainingPaths);
xmlHttp.open("GET", "/list?dir="+parentPath, true);
xmlHttp.send(null);
}
function listPaths(paths) {
var path = paths.pop();
if (path) {
httpList(path, paths);
}
}
this.httpUpload = function(file, path) {
setLoading(true, "Uploading '" + path + "'...");
if (!path.startsWith("/")) path = "/" + path;
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = onOperationComplete(xmlHttp, path);
var formData = new FormData();
formData.append("data", file, path);
xmlHttp.open("POST", "/edit");
xmlHttp.send(formData);
};
this.httpCreate = function(path){
setLoading(true, "Creating '" + path + "'...");
if (!path.startsWith("/")) path = "/" + path;
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = onOperationComplete(xmlHttp, path);
var formData = new FormData();
formData.append("path", path);
xmlHttp.open("PUT", "/edit");
xmlHttp.send(formData);
}
function httpRename(srcPath, dstPath){
setLoading(true, "Renaming '" + srcPath + "' to '" + dstPath + "'...");
if (!dstPath.startsWith("/")) dstPath = "/" + dstPath;
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = onOperationComplete(xmlHttp, dstPath);
var formData = new FormData();
formData.append("path", dstPath);
formData.append("src", srcPath);
xmlHttp.open("PUT", "/edit");
xmlHttp.send(formData);
}
function httpDelete(path) {
setLoading(true, "Deleting '" + path + "'...");
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = onOperationComplete(xmlHttp);
var formData = new FormData();
formData.append("path", path);
xmlHttp.open("DELETE", "/edit");
xmlHttp.send(formData);
}
httpList("/");
return this;
}
/////////////////////////
// ACE EDITOR MANAGEMENT
function createEditor(element, file, lang, theme, type){
function getLangFromFilename(filename){
var lang = "plain";
var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
if (ext !== undefined){
switch(ext){
case "txt": lang = "plain"; break;
case "htm": lang = "html"; break;
case "js": lang = "javascript"; break;
case "c": lang = "c_cpp"; break;
case "cpp": lang = "c_cpp"; break;
case "css":
case "scss":
case "php":
case "html":
case "json":
case "xml":
lang = ext;
}
}
return lang;
}
if (typeof file === "undefined") file = "/index.htm";
if (typeof lang === "undefined"){
lang = getLangFromFilename(file);
}
if (typeof theme === "undefined") theme = "textmate";
if (typeof type === "undefined"){
type = "text/"+lang;
if (lang === "c_cpp") type = "text/plain";
}
var xmlHttp = null;
var editor = ace.edit(element);
function filePosted(){
setLoading(false);
if (xmlHttp.status != 200) showHttpError(xmlHttp);
tree.refreshPath(getParentFolder(file)); // to update size in tree
refreshStatus();
}
function postFile(path, data, type){
setLoading(true, "Saving '" + path + "'...");
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = filePosted;
var formData = new FormData();
formData.append("data", new Blob([data], { type: type }), path);
xmlHttp.open("POST", "/edit");
xmlHttp.send(formData);
}
function fileLoaded(){
setLoading(false);
document.getElementById("preview").style.display = "none";
document.getElementById("editor").style.display = "block";
document.getElementById("editorButtons").style.display = "inline";
if (xmlHttp.status == 200) {
editor.setValue(xmlHttp.responseText);
editor.clearSelection();
enableSaveDiscardBtns(false);
}
else tree.clearMainPanel();
}
function loadFile(path){
setLoading(true, "Loading '" + path + "'...");
xmlHttp = new XMLHttpRequest();
xmlHttp.onload = fileLoaded;
xmlHttp.open("GET", path, true);
xmlHttp.send(null);
}
if (lang !== "plain") editor.getSession().setMode("ace/mode/"+lang);
editor.setTheme("ace/theme/"+theme);
editor.$blockScrolling = Infinity;
editor.getSession().setUseSoftTabs(true);
editor.getSession().setTabSize(2);
editor.setHighlightActiveLine(true);
editor.setShowPrintMargin(false);
editor.commands.addCommand({
name: 'save',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
editor.save();
},
readOnly: false
});
editor.commands.addCommand({
name: "showKeyboardShortcuts",
bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
exec: function(editor) {
editor.showShortcuts();
}
})
editor.session.on('change', function(delta) {
enableSaveDiscardBtns(true);
});
editor.loadUrl = function(path){
document.getElementById("pathInput").value = path;
enableSaveDiscardBtns(false);
file = path;
lang = getLangFromFilename(file);
type = "text/"+lang;
if (lang !== "plain") editor.getSession().setMode("ace/mode/"+lang);
loadFile(file);
}
editor.save = function() {
enableSaveDiscardBtns(false);
postFile(file, editor.getValue()+"", type);
}
editor.discard = function() {
editor.loadUrl(file);
enableSaveDiscardBtns(false);
}
editor.showShortcuts = function() {
ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
module.init(editor);
editor.showKeyboardShortcuts()
});
}
loadFile(file);
return editor;
}
/////////////////////////
// MAIN ENTRY POINT
function onBodyLoad(){
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
if (typeof ace != "undefined") {
var editor = createEditor("editor", vars.file, vars.lang, vars.theme);
}
tree = createTree("tree", editor);
createHeader("header", tree, editor);
refreshStatus();
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
if (typeof ace == "undefined") {
console.log("Cannot load ace.js from the web, trying local copy");
var script = document.createElement('script');
script.src = "/edit/ace.js";
script.async = false;
document.head.appendChild(script);
}
</script>
</head>
<body onload="onBodyLoad();">
<div id="header"></div>
<div id="tree"></div>
<div id="editor"></div>
<div id="preview" style="display:none;"></div>
<div id="loading"><span id="loading-msg"></span><br/><div class="spinner-anim">Loading...</div></div>
<iframe id=download-frame style='display:none;'></iframe>
</body>
</html>