Commit b608a6a2 authored by Kim Nguyễn's avatar Kim Nguyễn
Browse files

Code cleanup in the editor.

parent fcdbd679
......@@ -64,17 +64,8 @@ let coord_index str pos =
in
loop 0 0 0
(* Architecture of the page:
1) Main editor window (ace.io)
2) A compile & run button, with id "compile_button"
3) A div emulating the console for standard output, with id "output_area"
4) A iframe pointing to a static "sandbox page" that the user can break if (s)he wants, with
id "sandbox_iframe". The inner doccument is set at the begining of the program.
TODO: resolve names earlier.
*)
let setup_editor outfmt errfmt button_id =
let button =
get_opt (Dom_html.document ## getElementById (Js.string button_id))
......@@ -84,14 +75,19 @@ let setup_editor outfmt errfmt button_id =
let global = Js.Unsafe.global in
let editor = Js.Unsafe.get global (Js.string "editor") in
let code = Js.to_string (Js.Unsafe.meth_call editor "getValue" [| |]) in
let verbose = Js.to_bool (Js.Unsafe.get global (Js.string "verbose")) in
try
Format.printf "Compiling program ...%!";
Librarian.compile_run ~unload:true false (Ident.U.mk "Main") (`String code);
Format.printf " ok@\n%!";
Librarian.compile_run ~unload:true
~post_compile:(fun () ->
Format.pp_print_flush errfmt ();
Format.pp_print_flush outfmt ();)
verbose (Ident.U.mk "Main") (`String code);
Format.pp_print_flush errfmt ();
Format.pp_print_flush outfmt ();
flush stdout;
flush stderr;
ignore (Js.Unsafe.meth_call editor "focus" [| |]);
Js._false
with
(Cduce_loc.Location ((_,i,j), _, _) |
......@@ -100,9 +96,9 @@ let setup_editor outfmt errfmt button_id =
let xj, yj = coord_index code j in
ignore (Js.Unsafe.meth_call global "highlightError"
(Array.map Js.Unsafe.inject [| xi; yi; xj; yj |]));
Format.printf " failed@\n%!";
Cduce.print_exn errfmt e;
Format.pp_print_flush errfmt ();
ignore (Js.Unsafe.meth_call editor "focus" [| |]);
Js._false
| Failure s -> log(s); Js._false
)
......@@ -114,19 +110,11 @@ let setup_editor outfmt errfmt button_id =
let () =
Cduce_config.init_all ();
Cduce_js.use ();
let outputdiv = get_opt (Dom_html.document ## getElementById (Js.string "output_area")) in
let outputdiv = get_opt (Dom_html.document ## getElementById (Js.string "console")) in
let fmt = make_ppf outputdiv "stdout" in
let fmt_err = make_ppf outputdiv "stderr" in
make_out_channel stdout outputdiv "stdout";
make_out_channel stderr outputdiv "stderr";
Cduce.toplevel := false;
Librarian.run_loaded := true;
(*Cduce_js.main_document := begin
match Dom_html.tagged (get_opt
(Dom_html.document ## getElementById (Js.string "sandbox_iframe")))
with
Dom_html.Iframe iframe -> Some (get_opt (iframe ## contentDocument))
| _ -> None
end;*)
setup_editor fmt fmt_err "compile_button"
setup_editor fmt fmt_err "compile-and-run"
......@@ -231,9 +231,10 @@ let rec run c =
("Librarian.run. Already running:" ^ (U.to_string c.name))
| `Evaluated -> ()
let compile_run ?(unload=false) verbose name src =
let compile_run ?(unload=false) ?(post_compile=ignore) verbose name src =
let c,_ = compile verbose name src in
register c;
post_compile ();
run c;
if unload then CTbl.remove ctbl c.descr
......
......@@ -10,7 +10,7 @@ val run_loaded: bool ref
val depends: bool ref
val compile_save: bool -> U.t -> string -> string -> unit
val compile_run: ?unload:bool -> bool -> U.t -> [ `File of string | `String of string ] -> unit
val compile_run: ?unload:bool -> ?post_compile:(unit -> unit) -> bool -> U.t -> [ `File of string | `String of string ] -> unit
val load_run: U.t -> unit
val run: Compunit.t -> unit
......
......@@ -39,24 +39,23 @@ editor.on("focus", moveToError);
function clearConsole ()
{
document.getElementById("output_area").innerHTML = "";
document.getElementById("console").innerHTML = "";
editor.focus();
}
document.getElementById("clear_console_button").addEventListener("click", clearConsole, false);
function openFile ()
{
document.getElementById("file_selector").click();
document.getElementById("file-selector").click();
editor.focus();
}
document.getElementById("open_button").addEventListener("click", openFile, false);
var loadedBuffer = "";
var loadedFilename = "";
var currentFilename = "";
var fileSelector = document.getElementById("file_selector");
var fileSelector = document.getElementById("file-selector");
function realReplaceBuffer()
{
......@@ -66,30 +65,35 @@ function realReplaceBuffer()
loadedFilename = "";
loadedBuffer = "";
}
function confirmReplace ()
{
realReplaceBuffer();
document.getElementById("background_shadow").style.display = "none";
document.getElementById("background-shadow").style.display = "none";
document.getElementById("confirm-dialog").style.display = "none";
editor.focus();
}
document.getElementById("confirm_button").addEventListener("click", confirmReplace, false);
function cancelReplace ()
{
loadedBuffer = "";
loadedFilename = "";
document.getElementById("background_shadow").style.display = "none";
document.getElementById("background-shadow").style.display = "none";
document.getElementById("confirm-dialog").style.display = "none";
editor.focus();
}
document.getElementById("cancel_button").addEventListener("click", cancelReplace, false);
function replaceWithLoaded()
{
if (/\S/.test(editor.getValue())) {
document.getElementById("background_shadow").style.display = "block";
document.getElementById("background-shadow").style.display = "block";
document.getElementById("confirm-dialog").style.display = "block";
}
else {
realReplaceBuffer();
}
editor.focus();
}
function clearBuffer ()
......@@ -99,7 +103,6 @@ function clearBuffer ()
replaceWithLoaded();
}
document.getElementById("clear_buffer_button").addEventListener("click", clearBuffer, false);
function realOpenFile (ev)
{
......@@ -114,12 +117,13 @@ function realOpenFile (ev)
r.readAsText(f);
};
this.value = null;
editor.focus();
}
fileSelector.addEventListener("change", realOpenFile, false);
var saveAs = (function ()
var saveFile = (function ()
{
var a = document.createElement ("a");
document.body.appendChild(a);
......@@ -133,20 +137,41 @@ var saveAs = (function ()
a.href = "data:application/octet-stream;base64," + btoa(editor.getValue()+"\n");
a.download = /\S/.test(currentFilename) ? currentFilename : "Test.cd";
a.click();
editor.focus();
};
}) ();
var but = document.getElementById("save_button");
console.log(but);
but.addEventListener("click", saveAs, false);
function undo () {
editor.undo();
function standardView()
{
var e = document.getElementById("editor");
var c = document.getElementById("console");
e.style.width = "100%";
e.style.height = "60vh";
c.style.width = "100%";
c.style.height = "37vh";
editor.focus();
}
function redo () {
editor.redo();
function widescreenView()
{
var e = document.getElementById("editor");
var c = document.getElementById("console");
e.style.width = "50%";
e.style.height = "100%";
c.style.width = "50%";
c.style.height = "100%";
editor.focus();
}
document.getElementById("undo_button").addEventListener("click", undo, false);
document.getElementById("redo_button").addEventListener("click", redo, false);
console.log("HERE");
var verbose = false;
function toggleVerbose()
{
verbose = document.getElementById("toggle-verbose").checked;
editor.focus();
}
editor.focus();
body {
padding:0;
margin:0;
font-family: sans-serif;
}
/* CSS MENU BAR */
.menu-bar {
margin:0;
z-index:10;
font-size:2vh;
padding:0;
}
.menu-bar:after {
content:"";
display:table;
clear:both;
}
.menu-bar ul {
padding:0;
margin:0;
list-style: none;
position: relative;
background-image: linear-gradient(to bottom, #eee, #ccc);
height:3vh;
z-index:10;
box-sizing:border-box;
}
/* Positioning the navigation items inline */
.menu-bar ul li {
margin: 0;
padding:0;
display:inline-block;
float: left;
height:100%;
box-sizing:border-box;
}
/* Styling the links */
.menu-bar > ul > li > a {
display:block;
padding:0pt 1em;
color:#444;
text-decoration:none;
border-radius: 5pt 5pt 0pt 0pt;
border-style:solid;
border-width:1pt;
border-color:transparent;
height:100%;
box-sizing:border-box;
margin:0;
}
/* Background color change on Hover */
.menu-bar > ul > li > a:hover {
background-image: linear-gradient(to bottom, #eee, #bbb);
border-color: #aaa;
box-sizing:border-box;
}
.menu-bar > ul > li > ul {
/* display:none;*/
height:0;
overflow:hidden;
box-sizing:border-box;
}
.menu-bar > ul > li:hover > ul {
height:auto;
background-color:#ddd;
box-shadow:0pt 0pt 5pt #444;
}
.menu-bar > ul > li > ul > li {
float:none;
display:list-item;
position: relative;
}
.menu-bar > ul > li > ul > li > a {
display:block;
padding:1pt 2pt 1pt 2pt;
color:#444;
text-decoration:none;
border-radius: 1pt;
border-style:solid;
border-width:1pt;
border-color:transparent;
box-sizing:border-box;
}
.menu-bar > ul > li > ul > li > a:hover {
border-color:#cce;
background-image: linear-gradient(to bottom, #abe, #68b);
}
/* Hidden file selector */
#file-selector {
position:absolute;
left:0;
top:0;
width:0;
heigth:0;
z-index:-1;
}
#editor-panel {
position:relative;
display:block;
box-sizing: border-box;
padding:0;
margin:0;
height:97vh;
}
#console {
position:relative;
display:inline-block;
box-sizing: border-box;
font-size: large;
font-family: monospace;
white-space: pre-wrap;
width:100%;
height:40%;
background: #444;
margin:0 0 0 0;
padding:0 0 0 0;
vertical-align:top;
}
#editor {
position:relative;
font-size: large;
box-sizing: border-box;
display:inline-block;
width:100%;
height:60%;
margin:0 0 0 0;
padding:0 0 0 0;
z-index:0;
vertical-align:top;
}
/* Confirmation dialog */
.btn {
width:100%;
z-index:1;
margin:0 0 4pt 0;
box-sizing:border-box;
}
#confirm-dialog {
z-index:20;
display:none;
position:absolute;
margin: 0 auto;
padding: 2pt 0;
width:50%;
left:25%;
right:25%;
top:20%;
border-radius:5pt;
background: #eee;
text-align:center;
}
#background-shadow {
display:none;
background-color: rgba(0,0,0,0.8);
position:absolute;
width:100%;
height:100%;
top: 0;
left:0;
z-index:15;
}
#confirm-dialog .btn {
width:40%;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CDuce online editor</title>
<!-- the gui of the editor -->
<link rel="stylesheet" type="text/css" href="editor.css" />
<!-- color customisation -->
<style>
.stdout { color : #bbccff; }
.stderr { color : #ffcccc ; }
body {
padding:0;
margin:0;
}
#main_area {
box-sizing: border-box;
width:100vw;
height:100vh;
padding:0;
margin:0;
background: #eee;
}
#button_panel {
display:block;
position:absolute;
margin:0;
left:0;
top:0;
width:10em;
height:100vh;
box-sizing:border-box;
padding:1vh 3pt 0 3pt;
z-index:1;
}
#editor_panel {
z-index:0;
position:absolute;
box-sizing: border-box;
display:block;
top:0;
left:0;
margin:0;
padding: 1vh 1em 1vh 10em;
width: 100vw;
height: 100vh;
}
#editor {
font-size: large;
box-sizing: border-box;
display:block;
width:100%;
height:50vh;
margin:0;
padding:0;
border:none;
}
#info_panel {
padding:0;
margin:0;
border:none;
height:2vh;
width:100%;
vertical-align:middle;
}
#output_area {
font-size: large;
box-sizing: border-box;
white-space: pre-wrap;
background: #444;
font-family: monospace;
height: 46vh;
width:100%;
margin:0;
padding:0.5em;
}
.error {
position:absolute;
......@@ -82,101 +15,65 @@
z-index:40;
}
.btn {
border:1px solid #15aeec; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
background-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -ms-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);
}
.btn:hover{
border:1px solid #1090c3;
background-color: #1ab0ec; background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));
background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -ms-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1ab0ec, endColorstr=#1a92c2);
}
.btn {
width:100%;
z-index:1;
margin:0 0 4pt 0;
box-sizing:border-box;
}
#file_selector {
position:absolute;
left:0;
top:0;
width:0;
heigth:0;
z-index:-1;
}
#confirm_dialog {
z-index:20;
display:block;
position:absolute;
margin: 0 auto;
padding: 2pt 0;
width:50%;
left:25%;
right:25%;
top:20%;
border-radius:5pt;
background: #eee;
text-align:center;
}
#background_shadow {
display:none;
background-color: rgba(0,0,0,0.8);
position:absolute;
width:100%;
height:100%;
top: 0;
left:0;
z-index:15;
}
#confirm_dialog .btn {
width:40%;
}
</style>
</head>
<body >
<div id="main_area">
<div id="background_shadow">
<div id="confirm_dialog" >
The content of the current buffer will be lost.<br/>
<div style="width:70%; display:inline-block;">
<button class="btn"
id="confirm_button">Confirm</button> <button class="btn"
id="cancel_button">Cancel</button>
</div>
<input type="file" id="file-selector" />
<div id="background-shadow">
<div id="confirm-dialog" >
The content of the current buffer will be lost.<br/>
<div style="width:70%; display:inline-block;">
<button class="btn"
onclick="confirmReplace();">Confirm</button>
<button class="btn"
onclick="cancelReplace();">Cancel</button>
</div>
</div>
<div id="button_panel">
<input type="file" id="file_selector" />
<button class="btn" id="open_button">Open file</button>
<button class="btn" id="save_button">Save file</button>
<button class="btn" id="compile_button">Compile &amp; run</button>
<button class="btn" id="clear_buffer_button">Clear buffer</button>
<button class="btn" id="clear_console_button">Clear
console</button>
<button class="btn" id="undo_button">Undo</button>
<button class="btn" id="redo_button">Redo</button>
</div>
<div id="editor_panel">
<div id="editor"></div>
<div id="info_panel"><span id="filename_panel"></span> <span id="msg_panel"></span></div>
<div id="output_area"></div>
</div>
</div>
<div class="menu-bar">
<ul>
<li><a href="#">File</a>