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

improve the online editor.

parent b939f43e
......@@ -48,6 +48,7 @@ module HBI = Hashtbl.Make(struct
end)
let hbi = HBI.create 17
let intract (sa, next, len) =
let arr = Array.make len zero_big_int in
Array.iteri (fun i s ->
......@@ -59,7 +60,7 @@ let intract (sa, next, len) =
pool.next <- next
let cons bi =
try
HBI.find hbi bi
......@@ -114,5 +115,3 @@ let from_int32 i = cons (big_int_of_string (Int32.to_string i))
let from_int64 i = cons (big_int_of_string (Int64.to_string i))
let to_int32 i = Int32.of_string (to_string i)
let to_int64 i = Int64.of_string (to_string i)
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/ocaml");
var Range = ace.require("ace/range").Range;
var selectedRange = null;
var marker = null;
editor.$blockScrolling = Infinity;
var highlightError = function (a,b,c,d)
{
selectedRange = new Range (a,b,c,d);
marker = editor.session.addMarker(selectedRange, "error", "text");
}
editor.on("focus",
function () {
if (selectedRange)
editor.selection.setSelectionRange(selectedRange);
if (marker) {
setTimeout(function() {
editor.session.removeMarker(marker);
marker = null;
}, 5000);
}
return false;
});
var fileName = "";
var file = document.getElementById("file_selector");
file.addEventListener("change", function (ev) {
var f = ev.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
editor.setValue(contents,-1);
};
r.readAsText(f);
};
fileName = this.value;
this.value = null;
}, false);
document.getElementById("clear_buffer_button").addEventListener("click",
function () { editor.setValue("",-1); }, false);
document.getElementById("clear_console_button").addEventListener("click",
function () { document.getElementById("output_area").innerHTML=""; }, false);
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function () {
var blob = new Blob([ editor.getValue() ], {type: "text/plain"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
document.getElementById("save_button").addEventListener("click", saveData, false);
/* Global objects */
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/ocaml");
var Range = ace.require("ace/range").Range;
var selectedRange = null;
var marker = null;
editor.$blockScrolling = Infinity;
function highlightError (x1, y1, x2, y2)
{
selectedRange = new Range (x1,y1,x2,y2);
marker = editor.session.addMarker(selectedRange, "error", "text");
}
function clearHighlight ()
{
if (marker) {
editor.session.removeMarker(marker);
marker = null;
};
}
editor.on("change", clearHighlight);
function moveToError ()
{
if (selectedRange) {
editor.selection.setSelectionRange(selectedRange);
editor.moveCursorToPosition(selectedRange.start);
selectedRange = null;
}
}
editor.on("focus", moveToError);
function clearConsole ()
{
document.getElementById("output_area").innerHTML = "";
}
document.getElementById("clear_console_button").addEventListener("click", clearConsole, false);
function openFile ()
{
document.getElementById("file_selector").click();
}
document.getElementById("open_button").addEventListener("click", openFile, false);
var loadedBuffer = "";
var loadedFilename = "";
var currentFilename = "";
var fileSelector = document.getElementById("file_selector");
function realReplaceBuffer()
{
editor.setValue(loadedBuffer,-1);
currentFilename = loadedFilename;
//document.getElementById("filename_panel").innerHTML = loadedFilename;
loadedFilename = "";
loadedBuffer = "";
}
function confirmReplace ()
{
realReplaceBuffer();
document.getElementById("background_shadow").style.display = "none";
}
document.getElementById("confirm_button").addEventListener("click", confirmReplace, false);
function cancelReplace ()
{
loadedBuffer = "";
loadedFilename = "";
document.getElementById("background_shadow").style.display = "none";
}
document.getElementById("cancel_button").addEventListener("click", cancelReplace, false);
function replaceWithLoaded()
{
if (/\S/.test(editor.getValue())) {
document.getElementById("background_shadow").style.display = "block";
}
else {
realReplaceBuffer();
}
}
function clearBuffer ()
{
loadedBuffer = "";
loadedFilename = "";
replaceWithLoaded();
}
document.getElementById("clear_buffer_button").addEventListener("click", clearBuffer, false);
function realOpenFile (ev)
{
var f = ev.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
loadedBuffer = e.target.result;
loadedFilename = f.name;
replaceWithLoaded();
};
r.readAsText(f);
};
this.value = null;
}
fileSelector.addEventListener("change", realOpenFile, false);
var saveAs = (function ()
{
var a = document.createElement ("a");
document.body.appendChild(a);
a.style.height = "0";
a.style.width = "0";
a.style.position = "absolute";
a.style.top = "0";
a.style.left = "0";
a.style.zIndex = "-10";
return function () {
a.href = "data:application/octet-stream;base64," + btoa(editor.getValue()+"\n");
a.download = currentFilename;
a.click();
};
}) ();
var but = document.getElementById("save_button");
console.log(but);
but.addEventListener("click", saveAs, false);
function undo () {
editor.undo();
}
function redo () {
editor.redo();
}
document.getElementById("undo_button").addEventListener("click", undo, false);
document.getElementById("redo_button").addEventListener("click", redo, false);
console.log("HERE");
......@@ -5,70 +5,182 @@
.stdout { color : #bbccff; }
.stderr { color : #ffcccc ; }
body {
padding:0;
margin:0;
}
#main_area {
position:relative;
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;
}
#top_panel {
#editor {
font-size: large;
box-sizing: border-box;
display:block;
width: 100%;
vertical-align:top;
height:50%;
position:relative;
width:100%;
height:50vh;
margin:0;
padding:0;
border:none;
}
#output_area {
#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: #000000;
background: #444;
font-family: monospace;
height: 30ex;
width:75%;
height: 46vh;
width:100%;
margin:0;
padding:0;
}
.error {
position:absolute;
background:rgba(200,100,100,0.5);
background:rgba(200,100,100,0.5);
z-index:40;
}
#editor {
display:inline-block;
width:75%;
height:50ex;
}
.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);
}
#button_container {
display:inline-block;
width:20%;
height:50%;
vertical-align:top;
.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:88px;
.btn {
width:100%;
z-index:1;
margin:0 0 4pt 0;
box-sizing:border-box;
}
#file_selector {
width: 89px;
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="top_panel">
<div id="editor">(* CDuce code here: *) </div>
<div id="button_container">
<input type="file" id="file_selector" />
<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>
<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>
</div>
</div>
<div id="output_area"></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>
<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="cduceeditor_config.js" ></script>
<script type="text/javascript" src="cduceeditor_js_runtime.js" > </script>
<script defer="true" src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script defer="true" type="text/javascript" src="cduceeditor_helper.js" ></script>
<script defer="true" type="text/javascript" src="cduceeditor_js_runtime.js" ></script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment