bzselect now clean + KVview adapted

buildoz.js

@@ -29,42 +29,41 @@ class Buildoz extends HTMLElement {
 
     }  
 
-
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.attrs[name] = newValue
+    }
 }
 
 class BZselect extends Buildoz {
     constructor(){
         super()
-
         this.value = null
         this.open = false
-        //defaults, can be changed by corresponding attributes
+        this.defaultAttrs = {
-        this.attrs = {
             label: 'Select...',
         }
     }
 
     connectedCallback() {
         super.connectedCallback()
-
         this.button = document.createElement('button')
-        this.button.textContent =  this.attrs.label
+        this.button.textContent =  this.getAttribute('label') || this.defaultAttrs.label 
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
         this.options = this.querySelectorAll('option')
         for(const opt of this.options){ 
-            opt.addEventListener('click',(evt) => { this.onOption(evt.target.value) })
+            opt.addEventListener('click', this.onClick.bind(this))
+            if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
         }
     }
     
-    static get observedAttributes(){
+    // static get observedAttributes(){ // Only if you want actions on attr change
-        return([...super.observedAttributes, 'label'])
+    //     return([...super.observedAttributes, 'myattr'])
-    }
+    // }
-
+    //
-    attributeChangedCallback(name, oldValue, newValue) {
+    // attributeChangedCallback(name, oldValue, newValue) {
-        this.attrs[name] = newValue
+    //     super.attributeChangedCallback(name, oldValue, newValue)
-        // on the fly changes here
+    // }
-    }
 
     toggle(){
         for(const opt of this.options){
@@ -74,26 +73,40 @@ class BZselect extends Buildoz {
         this.open = !this.open
     }
 
-    onOption(value){
+    onClick(evt){
-        this.value =value
+        const opt = evt.target.closest('option')
-        this.toggle()
+        if(opt && opt.value) this.onOption(opt.value) 
-        const opt = Array.from(this.options).find(opt => opt.value==value)
-        this.button.textContent = opt.textContent
     }
 
-    fill(opts){
+    onOption(value, silent=false){ 
-        this.el.innerHTML =''
+        this.value = value
-        if(!Array.isArray(opts)) opts = [opts]
+        if(!silent) this.toggle()
-        const ul = Object.assign(document.createElement('ul'), 
+        const opt = Array.from(this.options).find(opt => opt.value==value)
-        { className: `bz-selector ${this.config.ulClass ? this.config.ulClass :''}`,
+        if(value || (opt && opt.textContent)) this.button.textContent = opt.textContent
-        })
+        else this.button.textContent =  this.getAttribute('label') || this.defaultAttrs.label 
-        for(const opt of opts){
+        this.dispatchEvent(new Event('change', {
-            const li = document.createElement('li')
+            bubbles: true,
-            li.innerHTML = `${opt.markup}`
+            composed: false,
-            li.setAttribute('data-value', opt.value)
+            cancelable: false
-            ul.append(li)
+        }))        
+    }
+
+    addOption(value, markup){
+        const opt = document.createElement('option')
+        opt.setAttribute(value, value)
+        opt.innerHTML = markup
+        opt.addEventListener('click',this.onClick.bind(this))
+        this.append(opt)
+        this.options = this.querySelectorAll('option')
+    }
+
+    fillOptions(opts, erase = true){
+        if(erase){
+            this.options.forEach(node => { node.remove() })
+            this.options = this.querySelectorAll('option')
+            this.onOption('', true) // unselect last
         } 
-        this.el.append(ul)
+        for(const opt of opts) this.addOption(opt.value, opt.markup)
     }
 }