diff --git a/forum-network/src/classes/display/form.js b/forum-network/src/classes/display/form.js index a818f11..3f04d6c 100644 --- a/forum-network/src/classes/display/form.js +++ b/forum-network/src/classes/display/form.js @@ -12,12 +12,20 @@ export class FormElement extends Box { updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => { cb(this); })); - cb(this); + cb(this, { initializing: true }); } } } -export class Button extends FormElement { } +export class Button extends FormElement { + constructor(name, parentEl, opts) { + super(name, parentEl, opts); + this.button = document.createElement('button'); + this.button.setAttribute('type', 'button'); + this.button.innerHTML = name; + this.el.appendChild(this.button); + } +} export class TextField extends FormElement { constructor(name, parentEl, opts) { diff --git a/forum-network/src/classes/supporting/wdag.js b/forum-network/src/classes/supporting/wdag.js index c28d314..15b6446 100644 --- a/forum-network/src/classes/supporting/wdag.js +++ b/forum-network/src/classes/supporting/wdag.js @@ -172,4 +172,6 @@ export class WDAG { } return Array.from(this.vertices.values()).filter((vertex) => vertex.type === type).length; } + + // TODO: Add support for inputs to add/edit vertices and edges } diff --git a/forum-network/src/tests/scripts/input.test.js b/forum-network/src/tests/scripts/input.test.js index 87b43f0..224c196 100644 --- a/forum-network/src/tests/scripts/input.test.js +++ b/forum-network/src/tests/scripts/input.test.js @@ -9,30 +9,55 @@ const scene = window.scene = new Scene('Input test', rootBox); scene.withDocument(); -describe('Document', () => { - it('Exists', () => { - scene.withDocument('Document', (doc) => doc.remark('Hello')); +describe('Document > Form > TextField', () => { + before(() => { + scene.withDocument('Document 1', (d) => d.form()); }); + it('can accept input and call value update callback', () => { + const doc = scene.lastDocument; + const form = doc.lastElement; + /** + * Handler callback for form element value updates. + * In this case we use a collection of DisplayValues as a straightforward way to render the form element values. + */ + const dvMap = new Map(); + const updateFieldValueDisplay = ({ id, name, value }) => { + const dv = dvMap.get(id) ?? scene.addDisplayValue(name); + dvMap.set(id, dv); + dv.set(value); + }; - describe('Input', () => { - it('Accepts input', () => { - scene.withDocument('Document', (doc) => doc.form()); - const doc = scene.lastDocument; - const form1 = doc.lastElement; - const dvMap = new Map(); - /** - * Handler callback for form element value updates. - * In this case we use a collection of DisplayValues as a straightforward way to render the form element values. - */ - const updateFieldValueDisplay = ({ name, value }) => { - const dv = dvMap.get(name) ?? scene.addDisplayValue(name); - dvMap.set(name, dv); - dv.set(value); - }; + form.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay }); + doc.remark('Hmm...!'); + }); + // it('can exist within a graph', () => { + // scene.withAdditionalFlowchart({ id: 'flowchart', name: 'Graph' }); + // const graph = scene.lastFlowchart(); + // }); +}); - form1.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay }); - doc.remark('Hmm...!'); - }); +describe('Document > Form > Button', () => { + before(() => { + scene.withDocument('Document 2', (d) => d.form()); + }); + it('calls a callback when clicked', () => { + const doc = scene.lastDocument; + const form = doc.lastElement; + const dvMap = new Map(); + let clicks = 0; + const handleClick = ({ id, name }, { initializing = false } = {}) => { + const dv = dvMap.get(id) ?? scene.addDisplayValue(name); + dvMap.set(id, dv); + if (!initializing) { + clicks++; + dv.set(`clicked ${clicks} time${clicks !== 1 ? 's' : ''}`); + } + }; + + doc.remark('
'); + doc.remark('Button:'); + form.button({ id: 'button1', name: 'Button 1', cb: handleClick }); + doc.remark('Yeah?'); }); });