diff options
-rw-r--r-- | fractiform.js | 17 | ||||
-rw-r--r-- | index.html | 15 |
2 files changed, 14 insertions, 18 deletions
diff --git a/fractiform.js b/fractiform.js index 22270a0..3d61a37 100644 --- a/fractiform.js +++ b/fractiform.js @@ -781,14 +781,14 @@ function get_widget_by_id(id) { function get_widget_name(widget_div) { let names = widget_div.getElementsByClassName('widget-name'); console.assert(names.length === 1, 'there should be exactly one widget-name input per widget'); - return names[0].value; + return names[0].innerText; } function get_widget_names() { let s = new Set(); for (const w of document.getElementsByClassName('widget-name')) { - s.add(w.value); + s.add(w.innerText); } return s; } @@ -831,8 +831,8 @@ function add_widget(func) { title.title = info.description; } title.appendChild(document.createTextNode(info.name + ' ')); - let name_input = document.createElement('input'); - name_input.placeholder = 'Name'; + let name_input = document.createElement('div'); + name_input.contentEditable = true; name_input.classList.add('widget-name'); // generate unique name @@ -843,7 +843,7 @@ function add_widget(func) { break; } } - name_input.value = func + i; + name_input.innerText = func + i; title.appendChild(name_input); root.appendChild(title); @@ -942,7 +942,7 @@ function add_widget(func) { } root.addEventListener('click', (e) => { - if (e.target.tagName === 'INPUT' || e.target.isContentEditable || e.target.tagName === 'SELECT') + if (e.target.tagName === 'INPUT' || e.target.isContentEditable || e.target.tagName === 'SELECT' || e.target.tagName === 'OPTION') return; set_display_output_and_update_shader(get_widget_name(root)); e.preventDefault(); @@ -1105,7 +1105,6 @@ ${this.code.join('')} const args = new Map(); const input_types = new Map(); for (let [input, value] of widget.inputs) { - console.log(input,value); value = this.compute_input(value); if (value.error) { widget.output = value; @@ -1317,7 +1316,7 @@ function import_widgets(string) { return {error: `bad import string (widget type '${widget.func}' does not exist)`}; } let element = add_widget(widget.func); - element.getElementsByClassName('widget-name')[0].value = name; + element.getElementsByClassName('widget-name')[0].innerText = name; function assign_value(container, value) { let element = container.getElementsByTagName('input')[0]; if (element === undefined) { @@ -1421,7 +1420,7 @@ function update_widget_choices() { let name = widget_info.get(id).name; let choice = choices[i]; let shown = name.toLowerCase().indexOf(search_term) !== -1; - // TODO + choice.display = shown ? 'block' : 'none'; }); } @@ -11,6 +11,7 @@ padding: 0; color: white; overflow: hidden; + line-height: 1; } @@ -94,15 +95,14 @@ height: 100%; flex-grow: 0; flex-shrink: 0; - flex-basis: 20em; - padding: 0.2em; + flex-basis: 30%; } input, button { - vertical-align: middle; display: inline-block; border: 2px solid var(--ui-border); background-color: transparent; color: white; + padding: 0; } #ui input[type=color] { padding: 0; @@ -110,7 +110,7 @@ .in select { width: 5em; } - .entry { + .entry, .widget-name { min-width: 1em; border-bottom: 2px solid #fff4; cursor: text; @@ -137,9 +137,9 @@ .widget { display: block; border-bottom: 2px solid #777; - padding: 0.5em 0; position: relative; cursor: pointer; + padding: 0.1em 0; } .widget:hover { background: #fff3; @@ -149,16 +149,13 @@ } .widget-title { font-weight: bold; - margin: 1em 0.3em; - } - .widget-name { - width: 6em; } .widget-delete { border: 0; } .widget-delete img { width: 1.5em; + vertical-align: bottom; } .widget-delete:hover, .widget-delete:active { background-color: transparent; |