From 310bb92b2cb39fc0df4b21c21aa62aed6d71e1e3 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Tue, 9 Oct 2018 10:55:07 +0200 Subject: [PATCH 01/20] Moved "democode" to "web" dir --- {experiments => web}/democode/demo.html | 0 {experiments => web}/democode/perleditor.html | 0 {experiments => web}/democode/perlrunner.html | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename {experiments => web}/democode/demo.html (100%) rename {experiments => web}/democode/perleditor.html (100%) rename {experiments => web}/democode/perlrunner.html (100%) diff --git a/experiments/democode/demo.html b/web/democode/demo.html similarity index 100% rename from experiments/democode/demo.html rename to web/democode/demo.html diff --git a/experiments/democode/perleditor.html b/web/democode/perleditor.html similarity index 100% rename from experiments/democode/perleditor.html rename to web/democode/perleditor.html diff --git a/experiments/democode/perlrunner.html b/web/democode/perlrunner.html similarity index 100% rename from experiments/democode/perlrunner.html rename to web/democode/perlrunner.html From 2f4eff19a15ce4a9c755b4c54684f75a9e0dc59c Mon Sep 17 00:00:00 2001 From: Hauke D Date: Tue, 9 Oct 2018 16:39:30 +0200 Subject: [PATCH 02/20] Major update of "democode" --- web/democode/demo.html | 56 ++++++- web/democode/perleditor.css | 33 ++++ web/democode/perleditor.html | 301 +++++++++++++++++++++-------------- web/democode/perlrunner.html | 167 +++++++++++-------- 4 files changed, 365 insertions(+), 192 deletions(-) create mode 100644 web/democode/perleditor.css diff --git a/web/democode/demo.html b/web/democode/demo.html index 63bc81e..83a3fea 100644 --- a/web/democode/demo.html +++ b/web/democode/demo.html @@ -4,14 +4,58 @@ WebPerl Code Demo - + + + + + - + + + diff --git a/web/democode/perleditor.css b/web/democode/perleditor.css new file mode 100644 index 0000000..97ea52a --- /dev/null +++ b/web/democode/perleditor.css @@ -0,0 +1,33 @@ + +body { + margin: 0.4em; +} +.text { + font-family: Calibri, Ubuntu, "Droid Sans", Tahoma, Arial, Helvetica, sans-serif; +} +pre,textarea,code,.code,.filename,.CodeMirror { + font-family: Consolas, "Ubuntu Mono", "Droid Sans Mono", "Lucida Console", "Courier New", Courier, monospace; +} +pre { + margin: 0; +} + +.CodeMirror { + border: 1px solid lightgrey; + height: auto; +} +.CodeMirror-scroll { + max-height: 12em; +} + +#runnerstate { + margin-top: 0.1em; + margin-bottom: 0.3em; + font-size: 0.8em; +} +#runnererrors { + background-color: rgba(255,200,200,255); + margin-top: 0.3em; + margin-bottom: 0.3em; + padding: 0.1em 0.2em; +} diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index a90bfae..4bd48be 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -23,31 +23,11 @@ See the licenses for details. You should have received a copy of the licenses along with this program. If not, see http://perldoc.perl.org/index-licence.html ---> +##### --> - + @@ -55,6 +35,11 @@ pre { From b2e76c280d1f5a884e8e3c578c67a098239e45c0 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Tue, 9 Oct 2018 16:50:30 +0200 Subject: [PATCH 03/20] Moved setup of input files to function --- web/democode/perleditor.html | 44 ++++++++++++++++++++++++++---------- web/democode/perlrunner.html | 4 ++++ 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index 4bd48be..ae5b0bc 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -184,6 +184,36 @@ function setupOutputFile (fn, text) { cm.setValue( text ? text : '' ); } +function setupInputFile (inp) { + var fn; + if (inp["fn"]) fn = inp.fn; + else { // autogenerate a filename + for (var i=1; i<1000; i++) { + var testfn = "input"+i+".txt"; + var found = $('div.inputs>.filename') + .filter(function(){ return $(this).text() == testfn }); + if (!found.length) { + fn = testfn; + break } + } + if (!fn) { + $('#runnererrors>pre').text('Too many input files'); + $('#runnererrors').show(); + throw 'Too many input files'; + } + } + var div = $('
',{class:"codewithfn inputs"}); + div.append( $('
',{class:"filename",text:fn}) ); + var ta = $('
- +
+ Add Output File +
From f70e5a09f4ebf7d9d56c693098db303cbb551c51 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 12:31:05 +0200 Subject: [PATCH 07/20] Updated demo.html --- web/democode/demo.html | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/web/democode/demo.html b/web/democode/demo.html index ba718aa..08c0b4c 100644 --- a/web/democode/demo.html +++ b/web/democode/demo.html @@ -31,18 +31,30 @@ If not, see http://perldoc.perl.org/index-licence.html - STDIN is currently not supported, workaround is to supply files on command line --> - + - - + + + + + + + + + - - From 2ef4af02cb495cda441f80fbc432f8aa277d17d1 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 13:45:23 +0200 Subject: [PATCH 08/20] Refactored code for file editing --- web/democode/perleditor.html | 79 ++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 45 deletions(-) diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index c9fea0f..dfd86f8 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -165,10 +165,27 @@ function fetchUrl(url,cm) { // fetch the contents of a URL into a CodeMirror ins }); } -function fileRename () { - var div = $(this); - var newname = prompt("Please choose a new filename:",div.text()); - if (newname) div.text(newname); +function makeCodeWithFn (fn,targ,ro,nodel) { + var div = $('
',{class:"codewithfn"}); + //TODO: the "delete" and "rename" functions should probably be styled better + 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() }); + } + $('
',{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 = $(' -
- -
+
From 93b73c04db35fad4e8642b763c13acf0a3fd6013 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 15:56:11 +0200 Subject: [PATCH 09/20] 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"]; From 32fafd26690dc83845f452c88ba17f77e837ea56 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 16:00:28 +0200 Subject: [PATCH 10/20] Modals are no longer needed --- web/democode/demo.html | 4 ++-- web/democode/perleditor.html | 15 ++++++--------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/web/democode/demo.html b/web/democode/demo.html index 08c0b4c..e7ef9ac 100644 --- a/web/democode/demo.html +++ b/web/democode/demo.html @@ -45,7 +45,7 @@ iframe.perleditor { - + - + From 9e5319bbfcd1e9106eee71cdd2ed60b70ce40ce8 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 17:17:25 +0200 Subject: [PATCH 13/20] Just moved some code blocks around --- web/democode/perleditor.html | 59 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index d149427..5e52f8d 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -291,35 +291,6 @@ $(function () { var hashdata = window.location.hash.substr(1); var hash = hashdata.length>0 ? JSON.parse(decodeURIComponent(hashdata)) : {}; - $('#copyurl').click(function () { - var pageurl = $('#pageurl'); - var data = getFileData(); - data.cmdline = $('#argv').val(); - var loc = new URL(window.location); - loc.hash = encodeURIComponent(JSON.stringify(data)); - pageurl.val(loc); - pageurl.show(); - pageurl[0].select(); - document.execCommand("copy"); - pageurl.hide(); - }); - - $('#addinput').click(function () { - setupInputFile( {} ); - }); - $('#addoutput').click(function () { - setupOutputFile(); - }); - - var argv_inp = $('#argv'); - var argv_autosize = $('', - {class:"code",style:"display:none;white-space:pre;"} - ).insertAfter(argv_inp); - argv_inp.on('input', function () { - argv_autosize.text( argv_inp.val() ); - argv_inp.width( argv_autosize.width()+10 ); - }); - // script if ( hash["script"] || hash["script_url"] ) { var fn = hash["script_fn"] ? hash.script_fn : 'script.pl'; @@ -332,6 +303,14 @@ $(function () { } // command line + var argv_inp = $('#argv'); + var argv_autosize = $('', + {class:"code",style:"display:none;white-space:pre;"} + ).insertAfter(argv_inp); + argv_inp.on('input', function () { + argv_autosize.text( argv_inp.val() ); + argv_inp.width( argv_autosize.width()+10 ); + }); if (hash["cmdline"]) argv_inp.val(hash.cmdline); argv_inp.trigger('input'); @@ -341,6 +320,9 @@ $(function () { if ( hash["inputs"] ) hash.inputs.forEach(function(inp) { setupInputFile(inp); }); + $('#addinput').click(function () { + setupInputFile( {} ); + }); // stdout/stderr if (hash["mergeStdOutErr"]) { @@ -358,7 +340,11 @@ $(function () { if ( hash["outputs"] ) hash.outputs.forEach(function(outp) { setupOutputFile(outp); }); + $('#addoutput').click(function () { + setupOutputFile(); + }); + // "run perl" button $('#runperl').click( function () { clearStdOutput(); // command-line args @@ -381,6 +367,21 @@ $(function () { perlRunner.postMessage({ runPerl: rp_data }, '*'); }); + // "copy frame url" function + $('#copyurl').click(function () { + var pageurl = $('#pageurl'); + var data = getFileData(); + data.cmdline = $('#argv').val(); + var loc = new URL(window.location); + loc.hash = encodeURIComponent(JSON.stringify(data)); + pageurl.val(loc); + pageurl.show(); + pageurl[0].select(); + document.execCommand("copy"); + pageurl.hide(); + }); + + // start looking for the Perl runner findPerlRunner(); }); From e00b0a148b92e5879445dbdcec3ffc75d417482d Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 17:32:53 +0200 Subject: [PATCH 14/20] Added ability to add/remove script --- web/democode/perleditor.html | 56 ++++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index 5e52f8d..3bf24d8 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -164,7 +164,7 @@ function fetchUrl(url,cm) { // fetch the contents of a URL into a CodeMirror ins }); } -function makeCodeWithFn (fn,targ,ro,nodel) { +function makeCodeWithFn (fn,targ,ro,isscript) { var div = $('
',{class:"codewithfn"}); var fnfuncs = $('
',{class:"fnfuncs"}).appendTo(div); @@ -191,30 +191,31 @@ function makeCodeWithFn (fn,targ,ro,nodel) { var filefuncs = $('
',{class:"filefuncs"}).appendTo(fnfuncs); - if (!nodel) { - 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); - } + var conf = $('', {class:"text small"}) + .append( + " ", + "Are you sure?", + " ", + $('',{class:"fakelink",text:"Yes"}) + .click(function () { + div.remove(); + if (isscript) $('#addscript').show(); + }), + " ", + $('',{class:"fakelink",text:"Cancel"}) + .click(function () { conf.hide(); }), + ); + $('',{class:"fakelink",text:"delete"}) + .appendTo(filefuncs).click(function () { + conf.show(); + }); + conf.hide(); + conf.appendTo(filefuncs); var ta = $('
-
- Add Output File -
+ From f03b6a93e6d7967cfc59ee23b734b3b11c9deda5 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 17:51:53 +0200 Subject: [PATCH 16/20] Simplified fonts --- web/democode/perleditor.css | 7 ++----- web/democode/perleditor.html | 7 ++++--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/web/democode/perleditor.css b/web/democode/perleditor.css index b2d553d..8b0858a 100644 --- a/web/democode/perleditor.css +++ b/web/democode/perleditor.css @@ -2,11 +2,9 @@ body { margin: 0.4em; } -.text,.fakelink { +.text { font-family: Calibri, Ubuntu, "Droid Sans", Tahoma, Arial, Helvetica, sans-serif; -} -.small { - font-size: 0.8em; + font-size: 0.9em; } pre,textarea,code,.code,.filename,.CodeMirror { font-family: Consolas, "Ubuntu Mono", "Droid Sans Mono", "Lucida Console", "Courier New", Courier, monospace; @@ -46,7 +44,6 @@ pre { .fakelink { color: darkblue; cursor: pointer; - font-size: 0.9em; } .badfilename { background-color: rgba(255,200,200,255); diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index c9adbb8..a4d4a79 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -189,9 +189,10 @@ function makeCodeWithFn (fn,targ,ro,isscript) { /* 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); + var filefuncs = $('
',{class:"filefuncs text"}) + .appendTo(fnfuncs); - var conf = $('', {class:"text small"}) + var conf = $('', {}) .append( " ", "Are you sure?", @@ -409,7 +410,7 @@ $(function () {
-
+
Tools From c0021d8214aaaf9bd5f17d28f5f8944b4a08a194 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 18:12:16 +0200 Subject: [PATCH 17/20] Design updates e.g. no more hover stuff (not good for mobile) --- web/democode/perleditor.css | 26 +++++++------------------- web/democode/perleditor.html | 36 +++++++++++++++++++----------------- 2 files changed, 26 insertions(+), 36 deletions(-) diff --git a/web/democode/perleditor.css b/web/democode/perleditor.css index 8b0858a..7e9d8c9 100644 --- a/web/democode/perleditor.css +++ b/web/democode/perleditor.css @@ -22,7 +22,7 @@ pre { } .codewithfn { - margin-top: 0.1em; + margin-top: 0.4em; } .fnfuncs { cursor: default; @@ -35,11 +35,10 @@ pre { cursor: auto; } .filefuncs { - display: none; - margin-left: 1em; -} -.fnfuncs:hover .filefuncs { display: inline-block; + padding-top: 2px; + position: absolute; + right: 0.2em; } .fakelink { color: darkblue; @@ -54,22 +53,11 @@ pre { #misctools { display: inline-block; border: 1px solid grey; - padding: 1px 0.5em; - margin-top: 1px; - margin-right: 3px; - color: grey; -} -#misctools_reveal { - display: none; -} -#misctools:hover { - color: inherit; -} -#misctools:hover #misctools_reveal { - display: inline-block; + padding: 1px 0.8em 1px 0.5em; + margin-top: 0.5em; } #runnerstate { - margin-top: 0.1em; + margin-top: 0.2em; margin-bottom: 0.3em; } #runnererrors { diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html index a4d4a79..6daed43 100644 --- a/web/democode/perleditor.html +++ b/web/democode/perleditor.html @@ -206,7 +206,7 @@ function makeCodeWithFn (fn,targ,ro,isscript) { $('',{class:"fakelink",text:"Cancel"}) .click(function () { conf.hide(); }), ); - $('',{class:"fakelink",text:"delete"}) + $('',{class:"fakelink",text:"Delete"}) .appendTo(filefuncs).click(function () { conf.show(); }); @@ -410,22 +410,8 @@ $(function () {
-
- -
- Tools -
-   - -   - Add Input File -   - Add Output File -   - Copy Frame URL -
-
- Loading... +
+ Loading...
+ From c3adf73863fc304630c3290d3ced46559bbfafd4 Mon Sep 17 00:00:00 2001 From: Hauke D Date: Wed, 10 Oct 2018 19:13:07 +0200 Subject: [PATCH 18/20] Documentation --- web/democode/demo.html | 107 +++++++++++++++++++++++++++++++---- web/democode/perleditor.css | 6 ++ web/democode/perleditor.html | 10 +++- 3 files changed, 111 insertions(+), 12 deletions(-) diff --git a/web/democode/demo.html b/web/democode/demo.html index 0c9a86a..c6fa783 100644 --- a/web/democode/demo.html +++ b/web/democode/demo.html @@ -25,13 +25,13 @@ You should have received a copy of the licenses along with this program. If not, see http://perldoc.perl.org/index-licence.html ##### --> - -