Browse Source

Compiler choice dropdown

dev/git-series/gccdum
Matt Godbolt 7 years ago
parent
commit
f42bbf8f39
  1. 6
      .idea/jsLibraryMappings.xml
  2. 4
      .idea/misc.xml
  3. 3
      bower.json
  4. 27
      static/compiler.js
  5. 34
      static/index.html
  6. 5
      static/main.js

6
.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>

4
.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>

3
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"
}
}

27
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;
});

34
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>

5
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",

Loading…
Cancel
Save