P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set value for bz-select & bz-toggler

Browse Source
This commit is contained in:
STEINNI
2025-10-20 15:42:41 +00:00
parent 2cf989bc4e
commit 93e12ff538
3 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/thirdparty/buildoz/buildoz.js
Vendored
+42 -14
View File
@@ -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)
app/views/editors/KeyframeView.html
+1 -3
View File
@@ -18,14 +18,12 @@
<header><canvas data-output="agentSampleCanvas"></canvas></header>
<section>
<bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
<bz-toggler></bz-toggler>
</section>
</article>
<article eiccard>
<section>
Arena
<bz-toggler labelLeft="gauche" data-output="testToggler"></bz-toggler>
<bz-toggler labelRight="droite"></bz-toggler>
<bz-toggler labelLeft="gauche" labelRight="droite"></bz-toggler>
</section>
</article>
<article eiccard="">
app/views/editors/KeyframeView.js
+9 -11
View File
@@ -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}`)