From 93b73c04db35fad4e8642b763c13acf0a3fd6013 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 15:56:11 +0200 Subject: [PATCH] Reworked file add/rename/delete handling Also a few minor fixes in perlrunner --- web/democode/perleditor.css | 34 ++++++++- web/democode/perleditor.html | 143 ++++++++++++++++++++++------------- web/democode/perlrunner.html | 12 ++- 3 files changed, 130 insertions(+), 59 deletions(-) diff --git a/web/democode/perleditor.css b/web/democode/perleditor.css index 6e770e7..dcf9137 100644 --- a/web/democode/perleditor.css +++ b/web/democode/perleditor.css @@ -5,6 +5,9 @@ body { .text,.fakelink { font-family: Calibri, Ubuntu, "Droid Sans", Tahoma, Arial, Helvetica, sans-serif; } +.small { + font-size: 0.8em; +} pre,textarea,code,.code,.filename,.CodeMirror { font-family: Consolas, "Ubuntu Mono", "Droid Sans Mono", "Lucida Console", "Courier New", Courier, monospace; } @@ -20,12 +23,36 @@ pre { max-height: 12em; } +.codewithfn { + margin-top: 0.1em; +} +.fnfuncs { + cursor: default; +} +.filename { + display: inline-block; + border: 0; + padding: 1px; + min-width: 1em; + cursor: auto; +} +.filefuncs { + display: none; + margin-left: 1em; +} +.fnfuncs:hover .filefuncs { + display: inline-block; +} .fakelink { color: darkblue; cursor: pointer; font-size: 0.9em; } - +.badfilename { + background-color: rgba(255,200,200,255); + /* also has a placeholder text */ + min-width: 10em; +} #runnerstate { margin-top: 0.1em; margin-bottom: 0.3em; @@ -37,3 +64,8 @@ pre { margin-bottom: 0.3em; padding: 0.1em 0.2em; } + +#inputhere, #outputhere { + text-align: right; +} + diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index dfd86f8..f8ddf78 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -93,6 +93,7 @@ function findPerlRunner () { if (perlRunner) window.clearInterval(pollId); else if ( Date.now()>pollUntil ) { + //TODO: alternative to confirm() if modals are not allowed if (window.confirm("Perl does not appear to have loaded yet, keep waiting?\n" +"(If you are on a slow connection, click OK to keep waiting.)")) pollUntil = Date.now() + 10*1000; @@ -167,36 +168,84 @@ function fetchUrl(url,cm) { // fetch the contents of a URL into a CodeMirror ins function makeCodeWithFn (fn,targ,ro,nodel) { var div = $('
',{class:"codewithfn"}); - //TODO: the "delete" and "rename" functions should probably be styled better + + var fnfuncs = $('
',{class:"fnfuncs"}).appendTo(div); + + var filename = $('',{class:"filename code",type:"text", + placeholder:"Enter a filename!"}) + .appendTo(fnfuncs); + filename.val(fn); + // autosize the filename text box via a hidden span + var fn_width = $('', + {class:"code",style:"display:none;white-space:pre;"} + ).insertAfter(filename); + filename.on('input', function () { + var newfn = filename.val(); + fn_width.text( newfn ); + filename.width( fn_width.width()+10 ); + if (newfn.length) + filename.removeClass("badfilename"); + else + filename.addClass("badfilename"); + }); + /* we need to trigger this handler once when the input + * field is added to the document, we do this below */ + + var filefuncs = $('
',{class:"filefuncs"}).appendTo(fnfuncs); + if (!nodel) { - $('
',{class:"fakelink",style:"float:right;",text:"delete"}) - .appendTo(div).click(function () { - if (confirm("Are you sure you want to remove this file?")) - div.remove() }); + var conf = $('', {class:"text small"}) + .append( + " ", + "Are you sure?", + " ", + $('',{class:"fakelink",text:"Yes"}) + .click(function () { div.remove(); }), + " ", + $('',{class:"fakelink",text:"Cancel"}) + .click(function () { conf.hide(); }), + ); + $('',{class:"fakelink",text:"delete"}) + .appendTo(filefuncs).click(function () { + conf.show(); + }); + conf.hide(); + conf.appendTo(filefuncs); } - $('
',{class:"filename",text:fn}) - .appendTo(div).click(function () { - var filename = $(this); - var newname = prompt("Please choose a new filename:", filename.text()); - if (newname) filename.text(newname); - }); - div.append( $('
',{style:"clear:both;"}) ); + var ta = $('
-
+
Add Output File
diff --git a/web/democode/perlrunner.html b/web/democode/perlrunner.html index e804302..9cba877 100644 --- a/web/democode/perlrunner.html +++ b/web/democode/perlrunner.html @@ -73,6 +73,7 @@ Perl.addStateChangeListener(function (from,to) { // {encoding:"binary"} => readFile returns Uint8Array // Should then also provide the same support on FS.writeFile() as well var of = { fn: file }; + if (!file) return of; try { of.text = FS.readFile(file, {encoding:"utf8"}); } @@ -114,7 +115,7 @@ function saveFile (fn, data) { FS.writeFile(fn, data); } catch (e) { - reportErr("couldn't write "+file+" because "+e); + reportErr("couldn't write "+fn+" because "+e); } } @@ -146,15 +147,12 @@ window.addEventListener('message', function (event) { // one solution would be to just have the script be an input file (code mirror syntax highlighting based on filename?) // note overlaps of output filenames with input files is ok // we also don't check for duplicate filenames - if (rp["script"]) { - var script_fn = 'script.pl'; - if (rp["script_fn"]) - script_fn = rp.script_fn; - saveFile(script_fn, rp.script); - } + if (rp["script"]) + saveFile(rp["script_fn"] ? rp.script_fn : 'script.pl', rp.script); //TODO Later: can we support STDIN? (probably need to look at webperl.js) if (rp["inputs"]) rp.inputs.forEach(function (inp) { + if (!inp.fn) return; saveFile(inp.fn, inp.text); }); curOutputFiles = rp["outputs"];