1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129 |
- <!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>
|