216 lines
4.3 KiB
JavaScript
216 lines
4.3 KiB
JavaScript
|
|
|
|
class editor{
|
|
|
|
create( applicationThree, selector ) {
|
|
|
|
//var selector =
|
|
|
|
|
|
//var id = app.selector.replace("#", "");
|
|
|
|
var playground = document.createElement("div");
|
|
playground.className = "playground";
|
|
|
|
|
|
var fileTree = document.createElement("div");
|
|
fileTree.className = "_fileTree fileTree";
|
|
|
|
var textarea = document.createElement("textarea");
|
|
|
|
|
|
playground.appendChild( textarea );
|
|
|
|
selector.appendChild( playground );
|
|
|
|
textarea.value = applicationThree.files[0].source;
|
|
/*
|
|
editor
|
|
*/
|
|
var filetree = this.createFileTreeMenu( applicationThree, editor );
|
|
|
|
//filetree = document.createElement("div");
|
|
|
|
//filetree.className = "";
|
|
|
|
fileTree.appendChild( filetree );
|
|
|
|
var outputDiv = document.createElement("div");
|
|
|
|
outputDiv.className = "outputDiv";
|
|
//outputDiv.id = id;
|
|
|
|
console.log( "applicationThree", applicationThree );
|
|
console.log("textarea", textarea);
|
|
|
|
|
|
playground.prepend( fileTree );
|
|
|
|
//playground.appendChild( outputDiv );
|
|
|
|
|
|
//this.createTreeJS( applicationThree, editor, app.selector );
|
|
|
|
document.querySelector(".CodeMirror").style.height = "900px";//document.body.clientHeight - 46 + "px";
|
|
document.querySelector(".fileTree").style.height = "569px";//document.body.clientHeight - 46 + "px";
|
|
//document.querySelector(".outputDiv").style.height = "569px";//document.body.clientHeight - 46 + "px";
|
|
|
|
|
|
var documentWidth = document.body.clientWidth;
|
|
var editorWidth = document.querySelector(".CodeMirror").clientWidth;
|
|
var fileTreeWidth = document.querySelector(".fileTree").clientWidth;
|
|
|
|
//document.querySelector(".outputDiv").style.width = documentWidth - ( fileTreeWidth + editorWidth ) - 12 + "px";
|
|
|
|
var outputDiv = document.createElement("div");
|
|
|
|
outputDiv.className = "outputDiv";
|
|
//outputDiv.id = id;
|
|
|
|
|
|
selector.appendChild( outputDiv );
|
|
|
|
/*
|
|
const ps = new PerfectScrollbar(selector, {
|
|
|
|
wheelSpeed: 2,
|
|
wheelPropagation: true,
|
|
minScrollbarLength: 20
|
|
|
|
});
|
|
*/
|
|
|
|
|
|
return editor;
|
|
|
|
}
|
|
|
|
|
|
createFileTreeMenu( applicationThree, editor ) {
|
|
|
|
var fileList = this.createFileTreeMenuItem( applicationThree, true, editor );
|
|
|
|
return fileList;
|
|
|
|
}
|
|
|
|
createFileTreeMenuItem( file, first, editor ) {
|
|
|
|
var files = file.files;
|
|
|
|
var fileList = document.createElement("li");
|
|
|
|
var row = document.createElement("div");
|
|
|
|
var label = document.createElement("div");
|
|
|
|
if( file.type == "directory" ) {
|
|
|
|
row.className = "caret";
|
|
|
|
row.state = "closed";
|
|
|
|
row.onclick = function() {
|
|
|
|
this.parentElement.querySelector(".nested").classList.toggle("active");
|
|
|
|
this.querySelector(".directory_icon").classList.toggle("open_directory");
|
|
|
|
|
|
if( this.state == "closed" ) {
|
|
|
|
this.state = "open";
|
|
|
|
} else {
|
|
|
|
this.state = "closed";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var icon = document.createElement("div");
|
|
|
|
icon.className = "directory_icon";
|
|
|
|
row.prepend( icon );
|
|
|
|
} else {
|
|
|
|
var icon = document.createElement("div");
|
|
|
|
icon.className = "file_icon";
|
|
|
|
row.prepend( icon );
|
|
|
|
|
|
}
|
|
|
|
row.className = "file_row";
|
|
|
|
label.innerText = file.name;
|
|
|
|
row.appendChild( label );
|
|
|
|
|
|
if( file.type == "file" ) {
|
|
|
|
|
|
|
|
row.onclick = function() {
|
|
|
|
if(document.querySelectorAll(".file_row.highlighted").length > 0) {
|
|
|
|
document.querySelector(".file_row.highlighted").classList.toggle("highlighted");
|
|
|
|
}
|
|
|
|
this.classList.toggle("highlighted");
|
|
|
|
var mode = {name: "javascript"};
|
|
|
|
var codeMirrorDocument = CodeMirror.Doc( file.source, mode );
|
|
|
|
//editor.swapDoc( codeMirrorDocument );
|
|
// alternative
|
|
|
|
}
|
|
|
|
}
|
|
|
|
fileList.appendChild( row );
|
|
|
|
var treeMenu = document.createElement("ul");
|
|
|
|
|
|
if( !first ) {
|
|
|
|
treeMenu.className = "nested"
|
|
|
|
}
|
|
|
|
for( var c = 0; c<files.length;c++ ) {
|
|
|
|
var childFile = files[c];
|
|
|
|
var childList = this.createFileTreeMenuItem( childFile, false, editor );
|
|
|
|
treeMenu.appendChild( childList );
|
|
|
|
}
|
|
|
|
fileList.appendChild( treeMenu );
|
|
|
|
if(first) {
|
|
|
|
return treeMenu;
|
|
|
|
}
|
|
|
|
return fileList;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
export default new editor(); |