webeditor.html

 <!doctype html>
<html>
<head>
 <!-- 
PUBLIC DOMAIN, NO COPYRIGHTS, NO PATENTS.

CC0
-->

<!--Stop Google:-->
<META NAME="robots" CONTENT="noindex,nofollow">
        
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA4A8AAO/vAADqrwAA6q8AAOqvAADqrwAA6q8AAOqvAADqrwAA7+8AAMAHAADf9wAAwAcAAPu/AAD4PwAA" rel="icon" type="image/x-icon" />
    
<!--
ace.js project home:
https://ace.c9.io/

list of languages:
https://cloud9-sdk.readme.io/docs/language-mode


-->    

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>

<title>TRASHNET CODE EDITOR</title>

</head>
<body>
<a href=  "index.html" style = "position:absolute;right:5px;top:1.5em;font-size:2em">HOME</a>
<a  href = "webdestroyer.html" style = "display:none;position:absolute;right:5px;top:3em;font-size:2em">DESTROYER</a>
<a  href = "editor.php" style = "position:absolute;right:5px;top:3em;font-size:2em">EDITOR.PHP</a>

<table id = "inputtable">
    <tr>
        <td>Current File Name:</td>
        <td id = "currentfilename"></td>
    </tr>
    <tr>
        <td>New File Name(end with .html, .txt, .md, .json, .py, .ino, .js, .css):</td>
        <td><input id = "newscrollinput"/></td>
    </tr>
</table>

<div id="maineditor" contenteditable="true" spellcheck="false"></div>


<div id = "filescroll">

</div>

<script>

prototypescroll = "name";
arduinoprototype = "//name\nvoid setup(){\n\n}\nvoid loop() {\n\n}\n";
htmlprototype = "<!doctype html>\n<html>\n<head>\n<title>name</title>\n<meta charset=\"utf-8\">\n</head>\n<body>\n</body>\n</html>\n";
pythonprototype = "# name\n# new python program";


editor = ace.edit("maineditor");
editor.setTheme("ace/theme/github");
//editor.setTheme("ace/theme/vibrant_ink");
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWrapMode(true);
editor.$blockScrolling = Infinity;
editor.setTheme("ace/theme/vibrant_ink");

currentFile = "index.html";
var httpc = new XMLHttpRequest();
httpc.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        filedata = this.responseText;
        setmode();
        editor.setValue(filedata);
        document.getElementById("currentfilename").innerHTML = currentFile;
    }
};
httpc.open("GET", "fileloader.php?filename=" + currentFile, true);
httpc.send();


var httpcprototype = new XMLHttpRequest();
httpcprototype.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        htmlprototype = this.responseText;
    }
};
httpcprototype.open("GET", "fileloader.php?filename=index.html", true);
httpcprototype.send();


scrolls = [];
var httpc8 = new XMLHttpRequest();
httpc8.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        scrolls = JSON.parse(this.responseText);
        for(var index = 0;index < scrolls.length;index++) {    
            if(scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".html" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".css" || scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".js"  || scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".py" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".txt" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".ino" || scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".json" || scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".tex" || scrolls[index].substring(scrolls[index].length - 3,scrolls[index].length) == ".md"){
             
                if(scrolls[index].substring(scrolls[index].length-5,scrolls[index].length) == ".html"){
                    var newa = document.createElement("A");
                    newa.innerHTML = scrolls[index];
                    newa.href = scrolls[index];
                    document.getElementById("filescroll").appendChild(newa);
                 }             
                var newscrollbutton = document.createElement("div");
                newscrollbutton.classList.add("file");
                newscrollbutton.classList.add("html");
                if(scrolls[index].substring(scrolls[index].length-3,scrolls[index].length) == ".js"){
                    newscrollbutton.style.borderColor = "red";
                }
                if(scrolls[index].substring(scrolls[index].length-4,scrolls[index].length) == ".css"){
                    newscrollbutton.style.borderColor = "yellow";
                }

                newscrollbutton.innerHTML =  scrolls[index];
                document.getElementById("filescroll").appendChild(newscrollbutton);
                newscrollbutton.onclick = function(){
                    currentFile = this.innerHTML;
                    //use php script to load current file;
                    var httpc = new XMLHttpRequest();
                    httpc.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            filedata = this.responseText;
                            setmode();
                            editor.setValue(filedata);
                            var fileType = currentFile.split("/")[0]; 
                            var fileName = currentFile.split("/")[1];
                            //document.getElementById("newscrollinput").value = fileName;
                        }
                    };
                    httpc.open("GET", "fileloader.php?filename=" + currentFile, true);
                    httpc.send();
                    
                    document.getElementById("currentfilename").innerHTML = currentFile;
                    
                }
                
            }
        }
    }
};

httpc8.open("GET", "dir.php", true);
httpc8.send();


document.getElementById("currentfilename").innerHTML = currentFile;

document.getElementById("maineditor").onkeyup = function(){
    data = encodeURIComponent(editor.getSession().getValue());
    var httpc = new XMLHttpRequest();
    var url = "filesaver.php";        
    httpc.open("POST", url, true);
    httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    httpc.send("data="+data+"&filename="+currentFile);//send text to filesaver.php
    var fileType = currentFile.split("/")[0]; 
    var fileName = currentFile.split("/")[1];
}

document.body.style.backgroundColor = "#202020";
document.body.style.color = "white";
document.getElementById("newscrollinput").style.backgroundColor = "#202020";
document.getElementById("newscrollinput").style.color = "white";        

editor.setTheme("ace/theme/vibrant_ink");

        
document.getElementById("newscrollinput").value = "";

name = "";
document.getElementById("newscrollinput").onchange = function(){
    name = this.value;
    currentFile = name;
    var httpc = new XMLHttpRequest();
    httpc.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            filedata = this.responseText;
            if(filedata.length == 0){
                scroll = editor.getSession().getValue();
        
                setmode();
                editor.setValue(scroll);  
                data = encodeURIComponent(scroll);
                var httpc = new XMLHttpRequest();
                var url = "filesaver.php";        
                httpc.open("POST", url, true);
                httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
                httpc.send("data="+data+"&filename=" + currentFile);//send text to filesaver.php
                addcodelink(name);
                
            }
            else{
                setmode();
                editor.setValue(filedata);                
            }

            document.getElementById("currentfilename").innerHTML = currentFile;
        }
    };
    httpc.open("GET", "fileloader.php?filename=" + currentFile, true);
    httpc.send();
    
}


function addcodelink(codename){
    var newscrollbutton = document.createElement("div");
    newscrollbutton.classList.add("file");
    newscrollbutton.classList.add("html");
    newscrollbutton.innerHTML = codename;
    document.getElementById("filescroll").appendChild(newscrollbutton);
    newscrollbutton.onclick = function(){
        currentFile = this.innerHTML;
        //use php script to load current file;
        var httpc = new XMLHttpRequest();
        httpc.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                filedata = this.responseText;
                setmode();
                editor.setValue(filedata);
                var fileType = currentFile.split("/")[0]; 
                var fileName = currentFile.split("/")[1];
                document.getElementById("newscrollinput").value = fileName;
            }
        };
        httpc.open("GET", "fileloader.php?filename=" + currentFile, true);
        httpc.send();
                
        document.getElementById("currentfilename").innerHTML = currentFile;
                
    }
}


function setmode(){
    if(currentFile.substring(currentFile.length-3,currentFile.length) == ".py"){
        editor.getSession().setMode("ace/mode/python");
    }
    if(currentFile.substring(currentFile.length-3,currentFile.length) == ".txt"){
        editor.getSession().setMode("ace/mode/text");
    }    
    if(currentFile.substring(currentFile.length-3,currentFile.length) == ".md"){
        editor.getSession().setMode("ace/mode/markdown");
    }
    if(currentFile.substring(currentFile.length-4,currentFile.length) == ".tex"){
        editor.getSession().setMode("ace/mode/latex");
    }
    if(currentFile.substring(currentFile.length-3,currentFile.length) == ".js"){
        editor.getSession().setMode("ace/mode/javascript");
    }    
    if(currentFile.substring(currentFile.length-4,currentFile.length) == ".ino"){
        editor.getSession().setMode("ace/mode/java");
    }   
    if(currentFile.substring(currentFile.length-4,currentFile.length) == ".css"){
        editor.getSession().setMode("ace/mode/css");
    }       
    if(currentFile.substring(currentFile.length-4,currentFile.length) == ".php"){
        editor.getSession().setMode("ace/mode/php");
    }       
    if(currentFile.substring(currentFile.length-5,currentFile.length) == ".html"){
        editor.getSession().setMode("ace/mode/html");
    }   
    if(currentFile.substring(currentFile.length-5,currentFile.length) == ".json"){
        editor.getSession().setMode("ace/mode/json");
    }       
    
}

codesquaresize = 120;

</script>
<style>
a{
    color:#ff2cb4;
}
#inputtable{
    position:absolute;
    left:10px;
    top:10px;
    font-family:courier;
}
#newscrollinput{
    font-family:courier;
    
}
#linktable{
    position:absolute;
    right:10px;
    top:10px;
    background-color:#808080;
}
body{
    overflow:hidden;
}
input{
    font-family:courier;
    color:white;
}

.file{
    cursor:pointer;
    border-radius:0.25em;
    border:solid;
    padding:0.25em 0.25em 0.25em 0.25em;
}
.files:hover{
    background-color:green;
}
.files:active{
    background-color:yellow;
}
#filescroll{
    position:absolute;
    overflow:scroll;
    top:250px;
    bottom:0%;
    right:0%;
    left:75%;
    border:solid;
    border-radius:5px;
    border-width:3px;
    font-family:courier;
    font-size:22px;
    z-index:99999999;
}
#maineditor{
    position:absolute;  
    left:0%;
    top:150px;
    bottom:1em;
    right:30%;
    font-size:22px;
    border:solid;
    border-color:black;
}
.button{
    cursor:pointer;
}
.button:hover{
    background-color:green;
}
.button:active{
    background-color:yellow;
}

</style>

</body>
</html>