Skip to content

Commit

Permalink
enabled editor and updated theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@leafo
leafo committed Oct 20, 2011
1 parent 304cf03 commit 5242e8f
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 63 deletions.
23 changes: 18 additions & 5 deletions client.js
View file
Expand Up @@ -73,6 +73,16 @@
var examples = new ExamplePicker();
var last_action;


// create editor
var editor = CodeMirror.fromTextArea(document.getElementById("input"), {
tabMode: "shift",
theme: "moon",
lineNumbers: true
});

// worker

if (!window.Worker) {
alert("This page requires javascript workers");
return;
Expand Down Expand Up @@ -151,12 +161,13 @@
}

$("clear").onclick = function() {
$("input").value = "";
editor.setValue("");
editor.focus();
}

$("compile").onclick = function() {
var start = new Date,
input = $("input").value;
input = editor.getValue();
set_loading("Compiling...");
compile_moon(input, function(data) {
set_output("compile", data.code);
Expand All @@ -167,7 +178,7 @@

$("run").onclick = function() {
var start = new Date,
input = $("input").value;
input = editor.getValue();
set_loading("Compiling...");
execute_moon(input, function(data) {
set_output("run", data.code);
Expand All @@ -181,7 +192,7 @@
$("example-picker").onchange = function() {
if (this.selectedIndex > 1) {
examples.get(this.value, function(content) {
$("input").value = content;
editor.setValue(content);
});
}
}
Expand Down Expand Up @@ -257,7 +268,8 @@

status_node.innerHTML = "Loaded snippet #" + escape_html(hash);

$("input").value = snippet.input;
editor.setValue(snippet.input);
editor.focus();
set_output(snippet.type, snippet.output);
snippet.id = hash;
last_action = snippet;
Expand All @@ -267,6 +279,7 @@
}

window.onhashchange();
editor.focus();
};

})();
Expand Down
63 changes: 34 additions & 29 deletions index.html
View file
Expand Up @@ -3,10 +3,16 @@
<head>
<meta charset="UTF-8">
<title>MoonScript Online Compiler</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://moonscript.org/highlight.js"></script>
<script type="text/javascript" src="/moon/highlight.js"></script>
<script type="text/javascript" src="client.js?3"></script>

<script type="text/javascript" src="codemirror2/lib/codemirror.js"></script>
<script type="text/javascript" src="codemirror2/mode/moonscript/moonscript.js"></script>

<link rel="stylesheet" href="codemirror2/lib/codemirror.css" />
<link rel="stylesheet" href="codemirror2/theme/moon.css" />
<link rel="stylesheet" href="style.css" />

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-136625-5']);
Expand All @@ -22,24 +28,22 @@
</head>
<body>
<div id="header">
<div class="toolbar">
<span id="toolbar_status"></span>
<input type="text" id="snippet_url" value="http://moonscript.org/compiler/#hello" />
<button id="save_button">Save Snippet</button>
</div>
<div class="toolbar">
<span id="toolbar_status"></span>
<input type="text" id="snippet_url" value="http://moonscript.org/compiler/#hello" />
<button id="save_button">Save Snippet</button>
</div>
<h1>MoonScript Online Compiler (0.2.0-dev)</h1>
</div>

<div id="body">
<div id="left" class="pane">
<textarea spellcheck="false" id="input" placeholder="-- MoonScript goes here"></textarea>
</div>
<div>
<textarea spellcheck="false" id="input" placeholder="-- MoonScript goes here"></textarea>

<div id="right">
<div id="inner">
<div id="status">
</div>
<pre id="out"></pre>
<div id="right-title">Output &#8628;</div>
<div id="status"></div>
<pre id="out"></pre>
</div>
</div>

Expand All @@ -59,22 +63,23 @@ <h1>MoonScript Online Compiler (0.2.0-dev)</h1>
<button disabled="disabled" id="compile">Compile to Lua</button>
<button disabled="disabled" id="run">Execute</button>
</div>
<div id="info">
The MoonScript online compiler runs in your browser through a version
of <a href="http://www.lua.org">Lua</a> with <a
href="http://www.inf.puc-rio.br/~roberto/lpeg/">LPeg</a> that has
been compiled to JavaScript using <a
href="http://emscripten.org">Emscripten</a>. It's very slow on
Chrome, and reasonable on Firefox and Opera. Find the source on <a
href="https://github.com/leafo/moonscript-javascript">github</a>.
</div>

<div id="info">
Find out more about MoonScript at
<a href="http://moonscript.org">moonscript.org</a>.
<br />
Contact and updates on Twitter: <a href="http://twitter.com/moonscript">@moonscript</a>
</div>
<div id="info">
The MoonScript online compiler runs in your browser through a version
of <a href="http://www.lua.org">Lua</a> with <a
href="http://www.inf.puc-rio.br/~roberto/lpeg/">LPeg</a> that has
been compiled to JavaScript using <a
href="http://emscripten.org">Emscripten</a>. It's very slow on
Chrome, and reasonable on Firefox and Opera. Find the source on <a
href="https://github.com/leafo/moonscript-javascript">github</a>.
</div>

<div id="info">
Find out more about MoonScript at
<a href="http://moonscript.org">moonscript.org</a>.
<br />
Contact and updates on Twitter: <a href="http://twitter.com/moonscript">@moonscript</a>
</div>

</div>

Expand Down
76 changes: 47 additions & 29 deletions style.css
View file
Expand Up @@ -8,59 +8,64 @@ body {
}

#header {
background: #2B2B2B;
background: #29344A;
border-bottom: 1px solid #8DB2FF;

background-image: linear-gradient(top, rgb(59,71,97) 24%, rgb(41,52,74) 85%);
background-image: -o-linear-gradient(top, rgb(59,71,97) 24%, rgb(41,52,74) 85%);
background-image: -moz-linear-gradient(top, rgb(59,71,97) 24%, rgb(41,52,74) 85%);
background-image: -webkit-linear-gradient(top, rgb(59,71,97) 24%, rgb(41,52,74) 85%);
background-image: -ms-linear-gradient(top, rgb(59,71,97) 24%, rgb(41,52,74) 85%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.24, rgb(59,71,97)),
color-stop(0.85, rgb(41,52,74))
);


box-shadow: 0px 1px 0px #222,
0px 4px 6px rgba(0,0,0, 0.4);
}

h1 {
font-size: 16px;
color: #dadada;
text-shadow: -1px -1px 0px #1C2433;
margin: 0px;
padding: 0px;
line-height: 40px;
padding-left: 10px;
}

#body {
padding: 1em;
}

.pane {
box-shadow: inset 0px 2px 2px #aaa;
/* 0px 0px 8px rgba(100,100,100, 0.5);*/
border: 1px solid #666;
background: white;
padding: 4px;
}


#left {
#left, .CodeMirror {
position: absolute;
top: 50px;
left: 10px;
bottom: 200px;
width: 40%;
bottom: 180px;
width: 45%;
font-size: 18px;
/*
border: 1px solid #222;
*/
}

#left textarea {
width: 100%;
.CodeMirror-scroll {
height: 100%;
background: none;
border: 0;
resize: none;
outline: none;
font-size: 14px;
}

#right {
position: absolute;
top: 50px;
right: 10px;
bottom: 10px;
width: 60%;
width: 55%;
}

#right #inner {
margin-left: 38px;
margin-left: 32px;
height: 100%;
background: black;
color: white;
Expand All @@ -72,9 +77,9 @@ h1 {
/* background: rgba(255,0,0, 0.4); */
position: absolute;
left: 10px;
height: 180px;
height: 160px;
bottom: 10px;
width: 40%;
width: 45%;
padding: 4px;
}

Expand All @@ -86,7 +91,19 @@ h1 {
float: right;
line-height: 40px;
padding-right: 10px;
color: #999;
color: white;
}


#right-title {
line-height: 35px;
padding: 0px 10px;
float: right;
border-bottom: 1px dashed #444;

background: #111;
background: #2E2E2E;
color: #eee;
}

#status {
Expand All @@ -97,6 +114,7 @@ h1 {

#out {
padding: 10px;
margin: 0px;
}

#info {
Expand Down

0 comments on commit 5242e8f

Please sign in to comment.