Tabs work

Author: StephenTangCook

build/editor.css

@@ -252,11 +252,34 @@ body {
 	position: relative;
 }
 
+#editor-section div.tab-area.active {
+	visibility: visible;
+}
+
+#editor-section div.tab-area.inactive {
+	visibility: hidden;
+}
+
 #editor-holder {
 	width: 100%;
 	height: 90%;
-	display: block;
+	display: inline-block;
+	position: absolute;
+}
+
+#editor-assembly-holder {
+	width: 100%;
+	height: 90%;
+	display: inline-block;
+	position: absolute;
+}
 
+#editor-options {
+	position: absolute;
+	display: inline-block;
+	width: 100%;
+	height: 90%;
+	margin: 0;
 }
 
 #stack-visualizer-section {
@@ -281,6 +304,16 @@ body {
 	right: 0;
 }
 
+#editor-assembly {
+	height: 100%;
+	margin: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	visibility: inherit;
+}
+
 
 .test-box {
 	background-color: #b0c4de;
@@ -355,4 +388,4 @@ button {
 li.active a {
 	/*font-weight: bold;*/
 	text-shadow: 1px 1px #BFBFBF;
-}
+}

build/editor.html

@@ -117,9 +117,15 @@ <h2 id="ide-subtitle">Bitcoin Script for dummies.</h2>
                   </li>
                 </ul> 
 
-                <div id="editor-holder">
+                <div id="editor-holder" class="tab-area active">
                     <div id="editor" class="script" style="position: relative;">1 2 OP_ADD</div>
                 </div>
+                <div id="editor-assembly-holder" class="tab-area inactive">
+                    <div id="editor-assembly" class="script" style="position: relative;">111</div>
+                </div>
+                <div id="editor-options" class="tab-area inactive">
+                    OPTIONS HERE
+                </div>
             </div>
 
             <div id="stack-visualizer-section" class="section">
@@ -183,8 +189,23 @@ <h3 id="assembler-subsection" class="subsection-title"> Assembler </h3>
     <!-- Set up the editor window -->
     <script> 
         ace.require("ace/ext/language_tools");
+
+        var editorAssembly = ace.edit("editor-assembly");
+        editorAssembly.setTheme("ace/theme/merbivore");
+        editorAssembly.getSession().setMode("ace/mode/script");
+        //Set options for auto-completion
+        editorAssembly.setOptions({
+            fontSize: 16,
+            wrap: true,
+            highlightActiveLine: true,
+            fixedWidthGutter : false,
+            dragEnabled : true,
+            // enableBasicAutocompletion: true,
+            // enableSnippets: true,
+            // enableLiveAutocompletion: true //suggests words as you type
+        });
+
         var editor = ace.edit("editor");
-        //editor.setTheme("ace/theme/twilight");
         editor.setTheme("ace/theme/merbivore");
         editor.getSession().setMode("ace/mode/script");
         //Set options for auto-completion

build/editor.js

@@ -50,21 +50,36 @@ $( document ).ready(function() {
 
 	// Attach event listeners to the toggling between assembly and script
 	$( "body" ).delegate( "#editor-tab-assembly", "click", function() {
-		if(!$("#editor").hasClass("assembly")) {
-			var script = editor.getSession().getValue();
-			editor.setValue(assembleToHex(script), -1); //-1 for cursor at start, 1 for end
-			$("#editor").addClass("assembly");
-			$("#editor").removeClass("script");
-		}
+		// if(!$("#editor").hasClass("assembly")) {
+		// 	var script = editor.getSession().getValue();
+		// 	editor.setValue(assembleToHex(script), -1); //-1 for cursor at start, 1 for end
+		// 	$("#editor").addClass("assembly");
+		// 	$("#editor").removeClass("script");
+		// }
+		var script = editor.getSession().getValue();
+		editorAssembly.setValue(assembleToHex(script), -1); //-1 for cursor at start, 1 for end
+
+		$("#editor-section div.tab-area").removeClass("active").addClass("inactive");
+		$("#editor-assembly-holder.tab-area").removeClass("inactive").addClass("active");
 	});
 
 	$( "body" ).delegate( "#editor-tab-script", "click", function() {
-		if(!$("#editor").hasClass("script")) {
-			var hex = editor.getSession().getValue();
-			editor.setValue(disassembleFromHex(hex), -1); //-1 for cursor at start, 1 for end
-			$("#editor").addClass("script");
-			$("#editor").removeClass("assembly");
-		}
+		// if(!$("#editor").hasClass("script")) {
+		// 	var hex = editor.getSession().getValue();
+		// 	editor.setValue(disassembleFromHex(hex), -1); //-1 for cursor at start, 1 for end
+		// 	$("#editor").addClass("script");
+		// 	$("#editor").removeClass("assembly");
+		// }
+		var hex = editorAssembly.getSession().getValue();
+		editor.setValue(disassembleFromHex(hex), -1); //-1 for cursor at start, 1 for end
+
+		$("#editor-section div.tab-area").removeClass("active").addClass("inactive");
+		$("#editor-holder.tab-area").removeClass("inactive").addClass("active");
+	});
+
+	$( "body" ).delegate( "#editor-tab-options", "click", function() {
+		$("#editor-section div.tab-area").removeClass("active").addClass("inactive");
+		$("#editor-options.tab-area").removeClass("inactive").addClass("active");
 	});
 
 	$("#editor-section").on("mouseover", function() {