From 2e2b801ce30472fe9dd23203fe9d2dfdd016f2e5 Mon Sep 17 00:00:00 2001 From: DrMaxNix Date: Wed, 5 Oct 2022 19:18:32 +0200 Subject: [PATCH] :tada: web editor --- dev/debugger.js | 70 + dev/index.css | 152 ++ dev/index.js | 55 + dev/index.php | 214 +-- dev/prism/bliss.shy.min.js | 2 + dev/prism/prism-juicescript.js | 1488 ++++++++++++++++ dev/prism/prism-line-numbers.css | 40 + dev/prism/prism-line-numbers.js | 252 +++ dev/prism/prism-live.css | 66 + dev/prism/prism-live.js | 845 +++++++++ dev/prism/prism-onedark.css | 120 ++ dev/tabler-icons/tabler-icons.eot | Bin 0 -> 1127692 bytes dev/tabler-icons/tabler-icons.min.css | 4 + dev/tabler-icons/tabler-icons.svg | 2294 +++++++++++++++++++++++++ dev/tabler-icons/tabler-icons.ttf | Bin 0 -> 1127508 bytes dev/tabler-icons/tabler-icons.woff | Bin 0 -> 593200 bytes dev/tabler-icons/tabler-icons.woff2 | Bin 0 -> 426228 bytes 17 files changed, 5424 insertions(+), 178 deletions(-) create mode 100644 dev/debugger.js create mode 100644 dev/index.css create mode 100644 dev/index.js create mode 100644 dev/prism/bliss.shy.min.js create mode 100644 dev/prism/prism-juicescript.js create mode 100644 dev/prism/prism-line-numbers.css create mode 100644 dev/prism/prism-line-numbers.js create mode 100644 dev/prism/prism-live.css create mode 100644 dev/prism/prism-live.js create mode 100644 dev/prism/prism-onedark.css create mode 100644 dev/tabler-icons/tabler-icons.eot create mode 100644 dev/tabler-icons/tabler-icons.min.css create mode 100644 dev/tabler-icons/tabler-icons.svg create mode 100644 dev/tabler-icons/tabler-icons.ttf create mode 100644 dev/tabler-icons/tabler-icons.woff create mode 100644 dev/tabler-icons/tabler-icons.woff2 diff --git a/dev/debugger.js b/dev/debugger.js new file mode 100644 index 0000000..3c15c7c --- /dev/null +++ b/dev/debugger.js @@ -0,0 +1,70 @@ +"use strict"; +// CLEAR DEBUGGING FLAGS // +// line occupancy in built js source +let debug_source_line_occupancy = {}; + + +// EMPTY ERROR BUFFER FOR TIME UNTIL HTML IS AVAILABLE // +let javascript_error_buffer = []; + + +function debug_javascript_error_message(error_event){ + // TRANSLATE TO SOURCE FILE'S LINES // + // find source file occupying this line + let source_file = null; + let source_line = 0; + for(var one_source_file in debug_source_line_occupancy){ + let occupancy = debug_source_line_occupancy[one_source_file]; + if(error_event.lineno >= occupancy.start && (occupancy.end === undefined || error_event.lineno <= occupancy.end)){ + // remember source file name + source_file = one_source_file; + + // translate compiled line to source file line + source_line = error_event.lineno - debug_source_line_occupancy[source_file].start + 1; + + // stop searching + break; + } + } + + + // OUTPUT MESSAGE // + // build line info + let line_info_string; + if(source_file !== null){ + line_info_string = source_file + " line " + source_line; + } else { + line_info_string = "raw source" + " line " + error_event.lineno; + } + + // send to callback + my_error_callback("(" + line_info_string + ") " + error_event.message, "javascript"); +} + + +// EMPTY ERROR BUFFER WHEN HTML IS AVAILABLE // +document.addEventListener("DOMContentLoaded", function(){ + // print messages + for(var one_error_event of javascript_error_buffer){ + debug_javascript_error_message(one_error_event); + } + + // disable buffer + javascript_error_buffer = null; +}); + +window.addEventListener("error", function(error_event){ + // OUTPUT // + if(javascript_error_buffer !== null){ + // add to buffer + javascript_error_buffer.push(error_event); + + } else { + // output directly + debug_javascript_error_message(error_event); + } + + + // DON'T CANCEL EVENT // + return false; +}); diff --git a/dev/index.css b/dev/index.css new file mode 100644 index 0000000..fda0b60 --- /dev/null +++ b/dev/index.css @@ -0,0 +1,152 @@ +:root { + --onedark-bg: #21252b; + --onedark-bg-light: #2c313a; + --onedark-white: #c5cad3; + --onedark-gray: #828997; + --onedark-gray-dark: #5c6370; + --onedark-gray-dark-dark: #454b54; + --onedark-red: #e06c75; + --onedark-orange: #d19a66; + --onedark-yellow: #e5c07b; + --onedark-green: #98c379; + --onedark-cyan: #56b6c2; + --onedark-blue: #61afef; + --onedark-purple: #c678dd; +} +html, body { + margin: 0px; + padding: 0px; + overflow: hidden; +} +body { + background-color: var(--onedark-bg); + padding: 2em; +} + + +span.line { + display: block; + color: var(--onedark-white); +} +span.line.stderr-debug { color: var(--onedark-green); } +span.line.stderr-info { color: var(--onedark-blue); } +span.line.stderr-warning { color: var(--onedark-orange); } +span.line.stderr-error { color: var(--onedark-red); } +span.line.stderr-javascript { color: var(--onedark-purple); } + + + + + +div.collection { + display: flex; + flex-wrap: wrap; + gap: 2rem; +} + +div.collection div.item { + flex-basis: 50%; + flex: 20rem; + + height: calc(100vh - 4em); + max-width: 100%; + + position: relative; + + display: flex; + flex-flow: column nowrap; + + margin: 0rem; + padding: 0rem; +} + +@media only screen and (max-width: 1200px) { + div.collection div.item { + flex-basis: 100%; + height: auto; + } +} + + + + + + + + + + +.button { + align-items: center; + + padding: 1rem 1.5rem; + width: fit-content; + + color: var(--onedark-white); + + background-color: var(--onedark-bg-light); +} + +.button:not(.one-line) { + display: inline-flex; + margin: 1rem 1rem 0rem 0rem; +} +.button.one-line { + display: flex; + margin: 0rem 0rem 1rem 0rem; +} + +.button:hover { + cursor: pointer; + background-color: var(--onedark-gray-dark-dark); +} + +.button .text { + display: inline-flex; + flex-flow: column; + margin-left: 1rem; +} +.button img.icon { + height: 1.5rem; +} +.button .extra { + color: var(--onedark-gray); +} + + + + + + + + + + + + + + + +div.collection div.item.editor > div.prism-live { + height: 100%; +} + + + + + + +div.collection div.item.console div.controls { + padding-bottom: 1rem; +} +#console { + margin: 0px; + padding: 1rem; + overflow: auto; + font-size: 1rem; + + height: 100%; + overflow: auto; + + background-color: var(--onedark-bg-light); +} diff --git a/dev/index.js b/dev/index.js new file mode 100644 index 0000000..3e60e53 --- /dev/null +++ b/dev/index.js @@ -0,0 +1,55 @@ +"use strict"; +let my_output_callback = function(text){ + let line_list = text.split("\n"); + + for(let one_line of line_list){ + let span_one_line = document.createElement("span"); + + span_one_line.classList.add("line"); + span_one_line.textContent = one_line; + + document.getElementById("console").appendChild(span_one_line); + document.getElementById("console").scrollTop = document.getElementById("console").scrollHeight; + } +} +let my_error_callback = function(text, type){ + let span_one_line = document.createElement("span"); + + span_one_line.classList.add("line", "stderr-" + type); + span_one_line.textContent = text + "\n"; + + document.getElementById("console").appendChild(span_one_line); + document.getElementById("console").scrollTop = document.getElementById("console").scrollHeight; +} + +let juicescript = new Juicescript({ + callback: { + stdout: my_output_callback, + stderr: my_error_callback + } +}); + +function button_run(){ + // clear console + document.getElementById("console").innerHTML = ""; + + // get source code from editor + let juice_program = document.getElementById("editor").value; + + // parse source code + /**/const parse_start = performance.now(); + let parse_success = juicescript.parse(juice_program); + /**/const parse_end = performance.now(); + /**/juicescript.io.stderr.info("Parsing took " + (parse_end - parse_start) + "ms"); + + // execute program + if(parse_success){ + /**/const run_start = performance.now(); + juicescript.run(); + /**/const run_end = performance.now(); + /**/juicescript.io.stderr.info("Running took " + (run_end - run_start) + "ms"); + + } else { + juicescript.io.stderr.info("Not executing program due to parse error"); + } +} diff --git a/dev/index.php b/dev/index.php index e51c3f1..ff07259 100644 --- a/dev/index.php +++ b/dev/index.php @@ -5,126 +5,18 @@ Juicescript dev env - + + + + + + - - -
-

+		
+
+ +
+ +
+ + +

+			
+ + + + + diff --git a/dev/prism/bliss.shy.min.js b/dev/prism/bliss.shy.min.js new file mode 100644 index 0000000..1a91443 --- /dev/null +++ b/dev/prism/bliss.shy.min.js @@ -0,0 +1,2 @@ +!function(){"use strict";function e(o,i,t){return i=void 0===i?1:i,(t=t||i+1)-i<=1?function(){if(arguments.length<=i||"string"===c.type(arguments[i]))return o.apply(this,arguments);var t,e,n=arguments[i];for(e in n){var r=Array.prototype.slice.call(arguments);r.splice(i,1,e,n[e]),t=o.apply(this,r)}return t}:e(e(o,i+1,t),i,t-1)}function s(e,n,t){var r=a(t);if("string"===r){var o=Object.getOwnPropertyDescriptor(n,t);!o||o.writable&&o.configurable&&o.enumerable&&!o.get&&!o.set?e[t]=n[t]:(delete e[t],Object.defineProperty(e,t,o))}else if("array"===r)t.forEach(function(t){t in n&&s(e,n,t)});else for(var i in n)t&&("regexp"===r&&!t.test(i)||"function"===r&&!t.call(n,i))||s(e,n,i);return e}function a(t){if(null===t)return"null";if(void 0===t)return"undefined";var e=(Object.prototype.toString.call(t).match(/^\[object\s+(.*?)\]$/)[1]||"").toLowerCase();return"number"==e&&isNaN(t)?"nan":e}var c=self.Bliss=s(function(t,e){return 2==arguments.length&&!e||!t?null:"string"===c.type(t)?(e||document).querySelector(t):t||null},self.Bliss);s(c,{extend:s,overload:e,type:a,property:c.property||"_",listeners:new(self.WeakMap?WeakMap:Map),original:{addEventListener:(self.EventTarget||Node).prototype.addEventListener,removeEventListener:(self.EventTarget||Node).prototype.removeEventListener},sources:{},noop:function(){},$:function(t,e){return t instanceof Node||t instanceof Window?[t]:2!=arguments.length||e?Array.prototype.slice.call("string"==typeof t?(e||document).querySelectorAll(t):t||[]):[]},defined:function(){for(var t=0;t + +var _self = (typeof window !== 'undefined') + ? window // if in browser + : ( + (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) + ? self // if in worker + : {} // if in node js + ); + +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * + * @license MIT + * @author Lea Verou + * @namespace + * @public + */ +var Prism = (function (_self) { + + // Private helper vars + var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i; + var uniqueId = 0; + + // The grammar object for plaintext + var plainTextGrammar = {}; + + + var _ = { + /** + * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the + * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load + * additional languages or plugins yourself. + * + * By setting this value to `true`, Prism will not automatically highlight all code elements on the page. + * + * You obviously have to change this value before the automatic highlighting started. To do this, you can add an + * empty Prism object into the global scope before loading the Prism script like this: + * + * ```js + * window.Prism = window.Prism || {}; + * Prism.manual = true; + * // add a new