First commit

framework/client/editor.js

@@ -0,0 +1,216 @@
+
+
+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();