From 93e12ff53848e29046911cae2e2bc7fb2088acfd Mon Sep 17 00:00:00 2001 From: STEINNI Date: Mon, 20 Oct 2025 15:42:41 +0000 Subject: [PATCH] set value for bz-select & bz-toggler --- app/thirdparty/buildoz/buildoz.js | 56 +++++++++++++++++++++-------- app/views/editors/KeyframeView.html | 4 +-- app/views/editors/KeyframeView.js | 20 +++++------ 3 files changed, 52 insertions(+), 28 deletions(-) diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js index 70555aa..a145260 100644 --- a/app/thirdparty/buildoz/buildoz.js +++ b/app/thirdparty/buildoz/buildoz.js @@ -39,10 +39,13 @@ class Buildoz extends HTMLElement { } class BZselect extends Buildoz { + #value + constructor(){ super() this.value = null this.open = false + this.value = null this.defaultAttrs = { label: 'Select...', } @@ -69,6 +72,22 @@ class BZselect extends Buildoz { // super.attributeChangedCallback(name, oldValue, newValue) // } + get value(){ return(this.#value) } + + set value(v) { + this.#value = v + if(this.options && this.options.length>0) { + const opt = Array.from(this.options).find(opt => opt.value==v) + if(v || (opt && opt.textContent)) this.button.textContent = opt.textContent + else this.button.textContent = this.getBZAttribute('label') + this.dispatchEvent(new Event('change', { + bubbles: true, + composed: false, + cancelable: false + })) + } + } + toggle(){ for(const opt of this.options){ if(this.open) opt.classList.remove('open') @@ -85,15 +104,7 @@ class BZselect extends Buildoz { onOption(value, silent=false){ if(this.getAttribute('disabled') !== null) return this.value = value - if(!silent) this.toggle() - const opt = Array.from(this.options).find(opt => opt.value==value) - if(value || (opt && opt.textContent)) this.button.textContent = opt.textContent - else this.button.textContent = this.getBZAttribute('label') - this.dispatchEvent(new Event('change', { - bubbles: true, - composed: false, - cancelable: false - })) + if(!silent) this.toggle() } addOption(value, markup){ @@ -105,8 +116,9 @@ class BZselect extends Buildoz { this.options = this.querySelectorAll('option') } - fillOptions(opts, erase = true){ + fillOptions(opts, erase = true){ if(erase){ + //this.options = this.querySelectorAll('option') this.options.forEach(node => { node.remove() }) this.options = this.querySelectorAll('option') this.onOption('', true) // unselect last @@ -118,9 +130,10 @@ Buildoz.define('select', BZselect) class BZtoggler extends Buildoz { + #value + constructor(){ super() - this.value = null this.open = false this.defaultAttrs = { labelLeft:'', @@ -170,7 +183,7 @@ class BZtoggler extends Buildoz { if(this.getBZAttribute('classOff')) this.switch.classList.remove(this.getBZAttribute('classOff')) if(this.getBZAttribute('classOn')) this.switch.classList.add(this.getBZAttribute('classOn')) this.thumb.classList.add('turned-on') - this.value = this.getBZAttribute('trueValue') + this.#value = this.getBZAttribute('trueValue') this.focus() } @@ -178,14 +191,14 @@ class BZtoggler extends Buildoz { if(this.getBZAttribute('classOn')) this.switch.classList.remove(this.getBZAttribute('classOn')) if(this.getBZAttribute('classOff'))this.switch.classList.add(this.getBZAttribute('classOff')) this.thumb.classList.remove('turned-on') - this.value = this.getBZAttribute('falseValue') + this.#value = this.getBZAttribute('falseValue') this.focus() } toggle(event) { if(event) { event.preventDefault(); event.stopPropagation(); } if(this.getBZAttribute('disabled')) return - if(this.value == this.getBZAttribute('trueValue')) this.turnOff() + if(this.#value == this.getBZAttribute('trueValue')) this.turnOff() else this.turnOn() this.dispatchEvent(new Event('change', { bubbles: true, @@ -193,5 +206,20 @@ class BZtoggler extends Buildoz { cancelable: false })) } + + get value(){ return(this.#value) } + + set value(v) { + this.#value = v + if(this.defaultAttrs){ + if(this.#value == this.getBZAttribute('trueValue')) this.turnOn() + else this.turnOff() + this.dispatchEvent(new Event('change', { + bubbles: true, + composed: false, + cancelable: false + })) + } + } } Buildoz.define('toggler', BZtoggler) diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index ac17fec..3d98b40 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -18,14 +18,12 @@
+
Arena - - -
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 237b3ea..8185222 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -40,11 +40,6 @@ class KeyframeView extends WindozDomContent { this.agentPreview.startRendering() this.agentPreview.animation = true - - this.outputs.testToggler.addEventListener('change',(e)=> { - console.log(e.target.value, e) - - }) } @@ -71,18 +66,21 @@ class KeyframeView extends WindozDomContent { case 'string': component = document.createElement('input') component.setAttribute('type','text') + component.value = agentProps[propName].default break case 'boolean': - component = new InputToggler({ - value: agentProps[propName].default, - }) + component = document.createElement('bz-toggler') + component.setAttribute('trueValue','1') + component.setAttribute('falseValue','0') + component.value = agentProps[propName].default fieldRow.append(component.el) break case 'list': component = document.createElement('bz-select') - component.fillOptions( agentProps[propName].choices.map(item => { - return({ markup: `${item}`, value: item}) - })) + console.log('choices', agentProps[propName].choices) + // component.fillOptions( agentProps[propName].choices.map(item => { + // return({ markup: `${item}`, value: item}) + // })) break default: console.warn(`Unknown field type ${agentProps[propName].type}`)