diff options
-rw-r--r-- | fractiform.js | 25 | ||||
-rw-r--r-- | index.html | 82 |
2 files changed, 57 insertions, 50 deletions
diff --git a/fractiform.js b/fractiform.js index 06f53a1..65bdd2c 100644 --- a/fractiform.js +++ b/fractiform.js @@ -37,6 +37,7 @@ let widget_search; let widgets_container; let display_output; let code_input; +let error_element; let display_output_span = null; let auto_update = true; @@ -758,7 +759,7 @@ function type_vec(base_type, component_count) { } function get_widget_by_name(name) { - for (let w of document.getElementsByClassName('widget')) { + for (const w of document.getElementsByClassName('widget')) { if (get_widget_name(w) === name) { return w; } @@ -775,7 +776,7 @@ function get_widget_name(widget_div) { function get_widget_names() { let s = new Set(); - for (let w of document.getElementsByClassName('widget-name')) { + for (const w of document.getElementsByClassName('widget-name')) { s.add(w.value); } return s; @@ -784,7 +785,7 @@ function get_widget_names() { function set_display_output_and_update_shader(to) { display_output = to; - for (let widget of document.getElementsByClassName('widget')) { + for (const widget of document.getElementsByClassName('widget')) { widget.dataset.display = to === get_widget_name(widget) ? '1' : '0'; } update_shader(); @@ -1161,15 +1162,15 @@ ${this.code.join('')} } function parse_widgets() { - let widgets = new Map(); - for (let widget_div of document.getElementsByClassName('widget')) { + const widgets = new Map(); + for (const widget_div of document.getElementsByClassName('widget')) { let name = get_widget_name(widget_div); let func = widget_div.dataset.func; if (!name) { return {error: `widget has no name. please give it one.`}; } - let inputs = new Map(); - let controls = new Map(); + const inputs = new Map(); + const controls = new Map(); for (const input of widget_div.getElementsByClassName('in')) { let id = input.dataset.id; inputs.set(id, input.getElementsByClassName('entry')[0].innerText); @@ -1420,6 +1421,8 @@ function startup() { widget_search = document.getElementById('widget-search'); widgets_container = document.getElementById('widgets-container'); code_input = document.getElementById('code'); + error_element = document.getElementById('error'); + ui_div.style.flexBasis = ui_div.offsetWidth + "px"; // convert to px // drag to resize ui @@ -1674,8 +1677,12 @@ function compile_shader(name, type, source) { return shader; } +function clear_error() { + error_element.style.display = 'none'; +} + function show_error(error) { console.log('error:', error); - document.getElementById('error-message').innerText = error; - document.getElementById('error-dialog').showModal(); + error_element.style.display = 'block'; + error_element.innerText = error; } @@ -21,10 +21,24 @@ #page { display: flex; + flex-direction: column; width: 100vw; height: 100vh; } + #main { + display: flex; + flex-grow: 1; + overflow: hidden; + } + + #error { + color: red; + border-top: 2px solid red; + padding: 0.2em; + display: none; + } + #canvas-container { position: relative; width: 100%; @@ -41,17 +55,6 @@ border: 2px solid var(--ui-border); } - .error { - color: red; - } - - #error-dialog { - border: 2px solid red; - background-color: black; - } - dialog button { - font-family: monospace; - } button { border: 2px solid var(--ui-border); background-color: black; @@ -178,39 +181,36 @@ <body> <script src="fractiform.js" type="text/javascript"></script> +<noscript> + <p> + This page requires JavaScript to function.<br> + Try using a modern browser such as <em>Netscape Navigator</em>®. + </p> +</noscript> <div id="page"> - <noscript> - <p> - This page requires JavaScript to function.<br> - Try using a modern browser such as <em>Netscape Navigator</em>®. - </p> - </noscript> - <div id="ui"> - <form action="#" method="dialog" id="code-form"> - <input type="text" placeholder="Code" id="code"> - <input type="submit" value="✓"> - </form> - Add <input type="text" id="widget-search" placeholder="Search"> - <div id="widget-choices"></div> - <div id="widgets-container"></div> - </div> - <div id="ui-resize"><div id="ui-resize-bar"></div></div> - <div id="canvas-container"> - <canvas id="canvas"> - <p> - Your browser doesn't support HTML5 <canvas>.<br> - Try upgrading to the latest version of Microsoft Internet Explorer®. - </p> - </canvas> + <div id="main"> + <div id="ui"> + <form action="#" method="dialog" id="code-form"> + <input type="text" placeholder="Code" id="code"> + <input type="submit" value="✓"> + </form> + Add <input type="text" id="widget-search" placeholder="Search"> + <div id="widget-choices"></div> + <div id="widgets-container"></div> + </div> + <div id="ui-resize"><div id="ui-resize-bar"></div></div> + + <div id="canvas-container"> + <canvas id="canvas"> + <p> + Your browser doesn't support HTML5 <canvas>.<br> + Try upgrading to the latest version of Microsoft Internet Explorer®. + </p> + </canvas> + </div> </div> + <div id="error">error</div> </div> -<dialog id="error-dialog"> - <pre id="error-message" class="error"></pre><br> - <form method="dialog"> - <button>OK</button> - </form> -</dialog> - </body> </html> |