Compiler choice dropdown

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_3" assert-keyword="false" jdk-15="false" />
+</project>

bower.json

@@ -21,6 +21,7 @@
     "underscore": "^1.8.3",
     "golden-layout": "^1.5.1",
     "jquery": "^3.1.0",
-    "bootstrap": "^3.3.7"
+    "bootstrap": "^3.3.7",
+    "selectize": "^0.12.2"
   }
 }

static/compiler.js

@@ -2,7 +2,9 @@ define(function (require) {
     "use strict";
     var CodeMirror = require('codemirror');
     var $ = require('jquery');
+    var _ = require('underscore');
     require('asm-mode');
+    require('selectize');
 
     var options = require('options');
     var compilers = options.compilers;
@@ -11,6 +13,16 @@ define(function (require) {
         var self = this;
         var domRoot = container.getElement();
         domRoot.html($('#compiler').html());
+        domRoot.find(".compiler").selectize({
+            sortField: 'name',
+            valueField: 'id',
+            labelField: 'name',
+            options: compilers,
+            items: [compilers[0].id],  // TODO persist and depersist from state
+            openOnFocus: true
+        }).on('change', function () {
+            self.onCompilerChange($(this).val());
+        });
 
         var outputEditor = CodeMirror.fromTextArea(domRoot.find("textarea")[0], {
             lineNumbers: true,
@@ -34,19 +46,20 @@ define(function (require) {
 
         this.source = state.source || 1;
         this.sourceEditor = null;
+        this.compiler = null;
     }
 
     var debouncedAjax = _.debounce($.ajax, 500);
 
     Compiler.prototype.compile = function (fromEditor) {
         var self = this;
-        if (!this.sourceEditor) return;
+        if (!this.sourceEditor || !this.compiler) return;  // TODO blank out the output?
         var request = {
             fromEditor: fromEditor,
             source: this.sourceEditor.getSource(),
-            compiler: compilers[0].id, // TODO
+            compiler: this.compiler,
             options: "-O1", // TODO
-            filters: {}
+            filters: {}  // TODO
         };
         debouncedAjax({
             type: 'POST',
@@ -58,7 +71,7 @@ define(function (require) {
                 self.onCompileResponse(request, result);
             },
             error: function (xhr, e_status, error) {
-                console.log("AJAX request failed, reason : " + error);
+                console.log("AJAX request failed, reason : " + error);  // TODO better error handling
             },
             cache: false
         });
@@ -73,11 +86,17 @@ define(function (require) {
         // TODO: Update dropdown of source
     };
     Compiler.prototype.onEditorChange = function (editor) {
+        // TODO: persist and depersist
         if (editor.getId() == this.source) {
             this.sourceEditor = editor;
             this.compile();
         }
     };
+    Compiler.prototype.onCompilerChange = function (value) {
+        this.compiler = value;  // TODO check validity?
+        // TODO: persist
+        this.compile();
+    };
 
     return Compiler;
 });

static/index.html

@@ -9,15 +9,11 @@
     <link href="ext/codemirror/lib/codemirror.css" rel="stylesheet">
     <link href="ext/golden-layout/src/css/goldenlayout-base.css" rel="stylesheet">
     <link href="ext/golden-layout/src/css/goldenlayout-light-theme.css" rel="stylesheet">
+    <link href="ext/selectize/dist/css/selectize.bootstrap2.css" rel="stylesheet">
     <link href="explorer.css" rel="stylesheet">
     <script data-main="main" src="ext/requirejs/require.js"></script>
-    <!--<script src="asm-mode.js"></script>-->
-    <!--<script src="ext/jquery-ui-1.11.4/jquery-ui.min.js"></script>-->
     <!--<script src="ext/rison.js"></script>-->
     <!--<script src="ext/clipboard.min.js"></script>x-->
-    <!--<script src="compiler.js"></script>-->
-    <!--<script src="gcc.js"></script>-->
-    <!--<script src="ext/bootstrap/js/bootstrap.min.js"></script>-->
     <!--<script src="ext/lz-string/lz-string-1.3.3-min.js"></script>-->
     <script type="text/javascript"></script>
 </head>
@@ -69,32 +65,34 @@
 </div>
 
 <div id="compiler" class="template">
+    <div>
+        <select class="compiler" placeholder="Select a compiler..."></select>
+    </div>
     <textarea>    mov eax, $20</textarea>
 </div>
 
 <div class="container-fluid" id="#root"></div>
 
 <div class="template lang c">// Type your code here, or load an example.
-    int square(int num) {
-    return num * num;
-    }
-</div>
+int square(int num) {
+  return num * num;
+}</div>
 <pre class="template lang rust">// Type your code here, or load an example.
 pub fn square(num: i32) -&gt; i32 {
   num * num
 }</pre>
 <pre class="template lang go">// Type your code here, or load an example.
-    // Your function name should start with a capital letter.
-    package main
+// Your function name should start with a capital letter.
+package main
 
-    func Square(x int) int {
-    return x * x
-    }
+func Square(x int) int {
+  return x * x
+}
 
-    func main() {}</pre>
+func main() {}</pre>
 <pre class="template lang d">// Type your code here, or load an example.
-    int square(int num) {
-    return num * num;
-    }</pre>
+int square(int num) {
+  return num * num;
+}</pre>
 </body>
 </html>

static/main.js

@@ -3,7 +3,10 @@ require.config({
         bootstrap: 'ext/bootstrap/dist/js/bootstrap.min',
         jquery: 'ext/jquery/dist/jquery.min',
         underscore: 'ext/underscore/underscore-min',
-        goldenlayout: 'ext/golden-layout/dist/goldenlayout.min'
+        goldenlayout: 'ext/golden-layout/dist/goldenlayout.min',
+        selectize: 'ext/selectize/dist/js/selectize.min',
+        sifter: 'ext/sifter/sifter.min',
+        microplugin: 'ext/microplugin/src/microplugin'
     },
     packages: [{
         name: "codemirror",