fixed dbl-fillOptions in bz-select
This commit is contained in:
@@ -40,6 +40,7 @@ class Buildoz extends HTMLElement {
|
|||||||
|
|
||||||
class BZselect extends Buildoz {
|
class BZselect extends Buildoz {
|
||||||
#value
|
#value
|
||||||
|
#fillFromMarkup = true
|
||||||
|
|
||||||
constructor(){
|
constructor(){
|
||||||
super()
|
super()
|
||||||
@@ -58,10 +59,13 @@ class BZselect extends Buildoz {
|
|||||||
this.prepend(this.button)
|
this.prepend(this.button)
|
||||||
this.button.addEventListener('click', this.toggle.bind(this))
|
this.button.addEventListener('click', this.toggle.bind(this))
|
||||||
this.options = this.querySelectorAll('option')
|
this.options = this.querySelectorAll('option')
|
||||||
|
if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
|
||||||
for(const opt of this.options){
|
for(const opt of this.options){
|
||||||
opt.addEventListener('click', this.onClick.bind(this))
|
opt.addEventListener('click', this.onClick.bind(this))
|
||||||
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
|
if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
|
||||||
}
|
}
|
||||||
|
this.#fillFromMarkup = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// static get observedAttributes(){ // Only if you want actions on attr change
|
// static get observedAttributes(){ // Only if you want actions on attr change
|
||||||
@@ -108,17 +112,20 @@ class BZselect extends Buildoz {
|
|||||||
}
|
}
|
||||||
|
|
||||||
addOption(value, markup){
|
addOption(value, markup){
|
||||||
|
// Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
|
||||||
const opt = document.createElement('option')
|
const opt = document.createElement('option')
|
||||||
opt.setAttribute('value', value)
|
opt.setAttribute('value', value)
|
||||||
opt.innerHTML = markup
|
opt.innerHTML = markup
|
||||||
opt.addEventListener('click',this.onClick.bind(this))
|
opt.addEventListener('click',this.onClick.bind(this))
|
||||||
this.append(opt)
|
this.append(opt)
|
||||||
this.options = this.querySelectorAll('option')
|
this.options = this.querySelectorAll('option')
|
||||||
|
this.#fillFromMarkup = false
|
||||||
}
|
}
|
||||||
|
|
||||||
fillOptions(opts, erase = true){
|
fillOptions(opts, erase = true){
|
||||||
|
// Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
|
||||||
if(erase){
|
if(erase){
|
||||||
//this.options = this.querySelectorAll('option')
|
this.options = this.querySelectorAll('option')
|
||||||
this.options.forEach(node => { node.remove() })
|
this.options.forEach(node => { node.remove() })
|
||||||
this.options = this.querySelectorAll('option')
|
this.options = this.querySelectorAll('option')
|
||||||
this.onOption('', true) // unselect last
|
this.onOption('', true) // unselect last
|
||||||
|
|||||||
Reference in New Issue
Block a user