diff --git a/buildoz.js b/buildoz.js index 70555aa..a145260 100644 --- a/buildoz.js +++ b/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)